feat(ui/home): add figma button and fix broken figma link for stack b…

…uilder button
MFarabi619 · Jul 14, 2024 · edec945 · edec945
1 parent b10a2b0
commit edec945
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/public/logos/figma.svg b/public/logos/figma.svg
diff --git a/public/stack-builder-figma-screenshot.png b/public/stack-builder-figma-screenshot.png
diff --git a/src/components/sections/home-page/hero.tsx b/src/components/sections/home-page/hero.tsx
@@ -13,7 +13,7 @@ export function Hero() {
     <main className="h-screen relative w-full overflow-hidden bg-slate-900 flex flex-col items-center justify-center rounded-lg">
       <div className="absolute inset-0 w-full h-full bg-slate-900 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
       <Boxes />
-      <div className="flex flex-col justify-center items-center max-w-lg mx-auto p-4 relative z-20">
+      <div className="flex flex-col justify-center items-center mx-auto p-4 relative z-20">
         <span className="self-start mb-6 text-4xl sm:text-6xl font-normal text-neutral-600 dark:text-neutral-400">
           Your
           <FlipWords words={words} />

diff --git a/src/components/ui/home-button.stories.tsx b/src/components/ui/home-button.stories.tsx
@@ -31,15 +31,26 @@ export const StackBuilder: Story = {
   },
   parameters: {
     design: {
-      url: 'https://www.figma.com/design/xild6bwrsygnvphzpwqqke/zenith-design-system?node-id=67-2411&t=1cojdzrd9retw6wv-11',
+      url: 'https://www.figma.com/design/XILd6bWRSYGnvpHzPWqqkE/Zenith-Design-System?node-id=67-2411&t=helPlLiU9UcstWzx-11',
     },
   },
 }
 
-export const Storybook: Story = {
+export const Figma: Story = {
   args: {
     ...buttons[1],
   },
+  parameters: {
+    design: {
+      url: 'https://www.figma.com/design/XILd6bWRSYGnvpHzPWqqkE/Zenith-Design-System?node-id=135-93&t=helPlLiU9UcstWzx-11',
+    },
+  },
+}
+
+export const Storybook: Story = {
+  args: {
+    ...buttons[2],
+  },
   parameters: {
     design: {
       url: 'https://www.figma.com/design/XILd6bWRSYGnvpHzPWqqkE/Zenith-Design-System?node-id=67-2413&t=1CoJdZrd9retW6WV-11',
@@ -49,7 +60,7 @@ export const Storybook: Story = {
 
 export const EslintConfigInspector: Story = {
   args: {
-    ...buttons[2],
+    ...buttons[3],
   },
   parameters: {
     design: {
@@ -60,7 +71,7 @@ export const EslintConfigInspector: Story = {
 
 export const Github: Story = {
   args: {
-    ...buttons[3],
+    ...buttons[4],
   },
   parameters: {
     design: {
@@ -71,7 +82,7 @@ export const Github: Story = {
 
 export const Fumadocs: Story = {
   args: {
-    ...buttons[4],
+    ...buttons[5],
   },
   parameters: {
     design: {

diff --git a/src/content/web/buttons.ts b/src/content/web/buttons.ts
@@ -7,6 +7,14 @@ export const buttons = [
     text: 'Stack Builder',
     className: 'text-2xl text-black bg-custom-gradient-ltr w-full mb-4 hover:bg-custom-gradient-rtl',
   },
+  {
+    href: 'https://www.figma.com/design/XILd6bWRSYGnvpHzPWqqkE/Zenith-Design-System?node-id=6-48&t=helPlLiU9UcstWzx-1',
+    imgSrc: '/stack-builder-figma-screenshot.png',
+    imgAlt: 'Stack Builder Figma screenshot',
+    logoSrc: '/logos/figma.svg',
+    text: 'Figma',
+    className: 'bg-indigo-500 hover:bg-indigo-400',
+  },
   {
     href: '/story/zenith-design-system-home-page-buttons--stack-builder',
     imgSrc: '/stack-builder-storybook-screenshot.png',