From 1a54825bebbda55bc89c05f535b3cb1527f4f6dd Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Mon, 23 Sep 2024 16:40:47 +0200
Subject: [PATCH] save

---
 docs/app/page.tsx               | 16 +++++++++-------
 docs/ui/BlurFade.tsx            |  4 ++--
 docs/ui/icons/BigArrowRight.tsx | 18 ------------------
 3 files changed, 11 insertions(+), 27 deletions(-)
 delete mode 100644 docs/ui/icons/BigArrowRight.tsx

diff --git a/docs/app/page.tsx b/docs/app/page.tsx
index e077960811..dac1537c8a 100644
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -1,4 +1,4 @@
-import { Center, Inline, Link, Stack } from '@/ui';
+import { Center, Inline, Link } from '@/ui';
 import type { PropsWithChildren } from 'react';
 import { AccessibiltySection } from './_components/landingpage/AccessibiltySection';
 import { CollaborationSection } from './_components/landingpage/CollaborationSection';
@@ -46,20 +46,19 @@ export const Page = () => (
 
     <div className="grid max-w-screen-lg gap-[40vh] pt-[5vw]">
       <div className="grid grid-cols-2 items-center gap-16">
-        <Stack space={4} alignX="left">
+        <div className="grid gap-4">
           <SectionHeadline>Built to be accessible</SectionHeadline>
           <SectionContent>
             Marigold is designed with accessibility in mind from the ground up.
             It leverages React Aria for screen reader and keyboard navigation
             support, ensuring your applications are ready for every user.
           </SectionContent>
-          <Link href="/foundations/overview">Learn more about Marigold</Link>
-        </Stack>
+        </div>
         <AccessibiltySection />
       </div>
       <div className="grid grid-cols-5 items-center gap-16">
         <CollaborationSection />
-        <div className="col-span-2">
+        <div className="col-span-2 grid gap-4">
           <SectionHeadline>Made for collaboration</SectionHeadline>
           <SectionContent>
             Designers and developers iterate together using shared tools like
@@ -70,7 +69,7 @@ export const Page = () => (
         </div>
       </div>
       <div className="grid grid-cols-8 items-center gap-16">
-        <div className="col-span-5">
+        <div className="col-span-5 grid gap-4">
           <SectionHeadline>Complex layouts, simplified.</SectionHeadline>
           <SectionContent>
             Ready-to-use layout components make it easy to build pages of any
@@ -78,12 +77,15 @@ export const Page = () => (
             responsive, structured designs, streamlining the process without the
             need for complex CSS.
           </SectionContent>
+          <Link href="/foundations/layouts">
+            <span className="text-sm">▶︎</span> Learn more about layouts
+          </Link>
         </div>
         <LayoutSection />
       </div>
       <div className="grid grid-cols-8 items-center gap-16">
         <SystemSection />
-        <div className="col-span-5">
+        <div className="col-span-5 grid gap-4">
           <SectionHeadline>One system, flexible styles.</SectionHeadline>
           <SectionContent>
             All components are built to adapt seamlessly to different brands and
diff --git a/docs/ui/BlurFade.tsx b/docs/ui/BlurFade.tsx
index 8c1cc722d1..d22a4768fc 100644
--- a/docs/ui/BlurFade.tsx
+++ b/docs/ui/BlurFade.tsx
@@ -37,8 +37,8 @@ export const BlurFade = ({
   const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
   const isInView = !inView || inViewResult;
   const defaultVariants: Variants = {
-    hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
-    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
+    hidden: { y: -yOffset, opacity: 0, filter: `blur(${blur})` },
+    visible: { y: 0, opacity: 1, filter: `blur(0px)` },
   };
   const combinedVariants = variant || defaultVariants;
   return (
diff --git a/docs/ui/icons/BigArrowRight.tsx b/docs/ui/icons/BigArrowRight.tsx
deleted file mode 100644
index c97b56ba4e..0000000000
--- a/docs/ui/icons/BigArrowRight.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { cn } from '@marigold/system';
-
-export const BigArrowRight = ({ className }: { className?: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className={cn('size-4', className)}
-  >
-    <path d="M6 9h6V5l7 7-7 7v-4H6V9z" />
-  </svg>
-);