fix: figma docs

Author: ankit-tailor

example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx

@@ -12,11 +12,12 @@ import { HStack } from "../../../core-components/nativewind/hstack"
 import { Text } from "../../../core-components/nativewind/text"
 import { Button, ButtonText } from "../../../core-components/nativewind/button"
 
+
 # Figma UI Kit
 
-The [Figma UI Kit](https://www.figma.com/community/file/1358053104938234615) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible!
+The [Figma UI Kit](https://www.figma.com/community/file/1358053104938234615) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won't have a chance to say this is not possible!
 
-<img src="/images/figma-kit.png"  />
+<img src="/images/figma-kit.png" />
 
 ## What is included?
 
@@ -26,7 +27,7 @@ Discover the comprehensive features of our latest Figma UI Kit, designed to enha
 - **Text Tokens**: Text tokens in Figma enable you to define and manage consistent text properties like font, size, line spacing, and color. Our Figma UI Kit features two main foundation components, **Text** and **Heading**, with various sizes and font weights. You can easily customize these styles and typography properties to align with your brand.
 - **Shadow Tokens**: Shadow tokens, also known as effect styles, allow you to define and manage effects such as drop shadows, strokes, blurs, and images. Our kit includes two primary shadows, **Hard** and **Soft**, covering different light source directions and intensities.
 - **Components**: Components in Figma are reusable design elements that ensure consistent and efficient designs. They can represent UI elements, icons, buttons, or any visual elements you want to reuse. Our Figma UI Kit includes around 23 components with instances mapped in compound components, enabling you to design screens effortlessly with common primitive components.
-- **Additional Examples**: We’ve added more components and their use cases in the latest version. These examples demonstrate how components can be customized to meet user needs.
+- **Additional Examples**: We've added more components and their use cases in the latest version. These examples demonstrate how components can be customized to meet user needs.
 
 ## Incorporated Features -
 
@@ -52,56 +53,20 @@ We like to elevate our offerings, and with the v2 release, users will benefit fr
 
 - **gluestack Plugin**: Customization in Figma can often be a manual and time-consuming task. To streamline this, we've introduced the [gluestack plugin](https://www.figma.com/community/plugin/1304000704678516266/gluestack), now available in the Figma Community. This plugin simplifies the process of linking text styles and updating font families, making customization more efficient and less tedious.
 
-<Box className="p-4 flex rounded-md border border-gray-200 dark:border-gray-800 mb-6">
-  <HStack space="md" className="items-center">
-  <Box
-      className="mr-2 hidden sm:flex justify-center items-center h-14 w-14 rounded-full bg-[#F6F6F6] dark:bg-[#F2F1F1]"
-    >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="25"
-      viewBox="0 0 24 25"
-      fill="none"
-    >
-      <path
-        d="M3 11.5L21 6.5V18.5L3 14.5V11.5Z"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke="#272625"
-        className="stroke-[#272625] dark:stroke-[#F6F6F6]"
-      />
-      <path
-        d="M11.6002 17.3002C11.4952 17.681 11.3161 18.0374 11.0733 18.3491C10.8305 18.6607 10.5287 18.9215 10.1851 19.1165C9.84156 19.3115 9.46294 19.4369 9.0709 19.4856C8.67885 19.5343 8.28105 19.5053 7.90022 19.4002C7.51938 19.2951 7.16297 19.1161 6.85133 18.8733C6.53969 18.6305 6.27892 18.3287 6.08392 17.9851C5.88892 17.6415 5.7635 17.2629 5.71482 16.8709C5.66614 16.4788 5.69516 16.081 5.80022 15.7002"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke="#272625"
-        className="stroke-[#272625] dark:stroke-[#F6F6F6]"
-      />
-    </svg>
-    </Box>
-  <HStack>
-    <Box
-      maxWidth="fit-content"
-      maxHeight="fit-content"
-      className="max-w-fit max-h-fit flex-1 text-sm gap-1"
-    >
-      <Text className="text-sm font-bold">
-        Try it out now!
-      </Text>
-      <Box style={{ $$css: true, note: 'note-content' }}>
-      <Text className="text-sm">
-        Streamline your design process with our versatile Figma kit. Get access to a rich collection of components, patterns, and assets to create stunning designs effortlessly. 
-      </Text>
+<Box className="mt-6 m-3 p-4 flex rounded-md border border-[#E6E6E6] dark:border-[#414141] mb-6">
+  <HStack className="sm:items-center sm:justify-between flex-col sm:flex-row">
+      <Box
+        maxWidth="fit-content"
+        maxHeight="fit-content"
+        className="max-w-fit max-h-fit flex-1 text-sm gap-[6px]"
+      >
+        <Text className="text-lg font-semibold dark:text-[#FAFAFA] text-[#171717]">Try it out now!</Text>
+        <Text className="text-sm leading-[22px] max-w-[95%]">Streamline your design process with our versatile Figma kit. Get access to a rich collection of components, patterns, and assets to create stunning designs effortlessly.</Text>
       </Box>
-    </Box>
-    </HStack>
-    <Button>
-      <ButtonText>
-        Figma Kit
-      </ButtonText>
+      <a className="contents" href="https://www.figma.com/community/file/1358053104938234615" target="__blank">
+    <Button className="gap-2 sm:mt-0 mt-6">
+      <ButtonText>Figma Kit</ButtonText>
     </Button>
+    </a>
   </HStack>
 </Box>