feat: update landing page (#174)

Closes #175

Author: hari

animata/background/grid.tsx

@@ -15,6 +15,8 @@ interface GridProps {
   children?: React.ReactNode;
 
   className?: string;
+
+  style?: React.CSSProperties;
 }
 
 function Placeholder({ size = 20 }: Pick<GridProps, "size">) {
@@ -34,11 +36,19 @@ function Placeholder({ size = 20 }: Pick<GridProps, "size">) {
   );
 }
 
-export default function Grid({ color = "#cacaca", size = 20, children, className }: GridProps) {
+export default function Grid({
+  color = "#cacaca",
+  size = 20,
+  children,
+  className,
+  style = {
+    backgroundColor: "white",
+  },
+}: GridProps) {
   return (
     <div
       style={{
-        backgroundColor: "white",
+        ...style,
         backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(to right, ${color} 1px, transparent 1px)`,
         backgroundSize: `${size}px ${size}px`,
       }}

animata/card/github-card-shiny.tsx

@@ -27,7 +27,7 @@ export default function GithubCardShiny({ className }: { className?: string }) {
     <div
       ref={containerRef}
       className={cn(
-        "group relative min-w-96 overflow-hidden rounded-md border border-zinc-500 bg-zinc-700 p-10 text-zinc-200 shadow-lg",
+        "group relative w-96 min-w-fit max-w-full overflow-hidden rounded-md border border-border bg-zinc-700 p-6 text-zinc-200 shadow-lg",
         className,
       )}
     >
@@ -45,7 +45,7 @@ export default function GithubCardShiny({ className }: { className?: string }) {
         <div className="text-xs text-zinc-400">on: push</div>
       </div>
 
-      <div className="z-10 mt-10 flex min-w-fit flex-col gap-2 rounded-md bg-zinc-600 p-4 shadow-2xl">
+      <div className="z-10 mt-10 flex w-full min-w-fit flex-col gap-2 rounded-md bg-zinc-600 p-4 shadow-2xl">
         {[
           {
             title: "Install dependencies",
@@ -61,11 +61,13 @@ export default function GithubCardShiny({ className }: { className?: string }) {
           },
         ].map((step) => {
           return (
-            <div className="flex items-center gap-2" key={step.title}>
-              <CheckCircle2 className="fill-green-400 text-zinc-600" />
-              <strong>{step.title}</strong>
+            <div className="flex w-full items-center gap-2" key={step.title}>
+              <CheckCircle2 className="flex-shrink-0 fill-green-400 text-zinc-600" />
+              <strong className="text-xs md:flex-shrink-0 md:text-base">{step.title}</strong>
 
-              <span className="ml-auto inline-block text-sm opacity-75">{step.time}</span>
+              <span className="ml-auto inline-block flex-shrink-0 text-xs opacity-75">
+                {step.time}
+              </span>
             </div>
           );
         })}

animata/card/github-card-skew.tsx

@@ -63,7 +63,7 @@ export default function GithubCardSkew({ className }: { className?: string }) {
     <div
       ref={containerRef}
       className={cn(
-        "flex max-w-80 transform-gpu flex-col gap-4 rounded-3xl border border-zinc-500 bg-zinc-900 p-10 text-zinc-200 shadow-lg transition-transform ease-linear will-change-transform",
+        "flex max-w-80 transform-gpu flex-col gap-4 rounded-3xl border border-border bg-zinc-700 p-10 text-zinc-200 shadow-lg transition-transform ease-linear will-change-transform",
         className,
       )}
       style={{

animata/container/fibonacci-lines.stories.tsx

@@ -0,0 +1,21 @@
+import FibonacciLines from "@/animata/container/fibonacci-lines";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Container/Fibonacci Lines",
+  component: FibonacciLines,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof FibonacciLines>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    className: "storybook-fix w-full",
+  },
+};

animata/container/fibonacci-lines.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+
+function fibonacci(n: number): number {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+export default function FibonacciLines({
+  reverse,
+  className,
+  children,
+  ...props
+}: { reverse?: boolean } & React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex w-full", className, {
+        "flex-col-reverse": reverse,
+        "flex-col": !reverse,
+      })}
+      {...props}
+    >
+      {Array.from({ length: 10 }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            opacity: (i + 1) * 0.1,
+            marginTop: fibonacci(i) + 2,
+          }}
+          className="w-full"
+        >
+          <div className="h-px w-full bg-foreground/10" />
+        </div>
+      ))}
+      {children}
+    </div>
+  );
+}

animata/text/wave-reveal.tsx

@@ -132,7 +132,7 @@ const createAnimatedNodes = (args: ReducedValue, word: string, index: number): R
   const node = (
     <span
       key={`word_${index}`}
-      className={cn({
+      className={cn("contents", {
         [className]: isWordMode,
       })}
       style={

app/_landing/call-to-action.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useInView } from "framer-motion";
+import { Navigation } from "lucide-react";
+
+import AnimatedGradientText from "@/animata/text/animated-gradient-text";
+import GibberishText from "@/animata/text/gibberish-text";
+import ComponentLinkWrapper from "@/components/component-link-wrapper";
+import RemountOnMouseIn from "@/components/remount-on-mouse-in";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+
+export default function CallToActionSection() {
+  const headerRef = useRef<HTMLHeadingElement>(null);
+  const isInView = useInView(headerRef);
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    if (isInView) {
+      setKey((prev) => prev + 1);
+    }
+  }, [isInView]);
+
+  return (
+    <section className="flex w-full flex-col gap-4 px-4 py-16 md:py-20">
+      <ComponentLinkWrapper link="/docs/text/gibberish-text" className="mx-auto">
+        <h1
+          ref={headerRef}
+          className="mx-auto w-fit px-0 py-4 text-center font-mono text-xl font-bold sm:text-3xl md:text-5xl"
+        >
+          <RemountOnMouseIn>
+            <GibberishText key={`in_${key}`} text="Start building today" />
+          </RemountOnMouseIn>
+        </h1>
+      </ComponentLinkWrapper>
+
+      <div className="mx-auto flex w-full max-w-2xl flex-row items-center justify-center gap-4">
+        <Link
+          href="/docs"
+          className="relative flex aspect-square min-h-52 w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-xl border border-border bg-gray-100/50 bg-opacity-100 py-12 transition-all duration-100 hover:scale-105 hover:bg-opacity-50 dark:border-zinc-600 dark:bg-zinc-800"
+        >
+          <Navigation className="size-10 md:size-14" />
+          <div className="text-balance px-4 text-center text-sm font-bold sm:text-base md:text-lg">
+            <AnimatedGradientText>Explore Components</AnimatedGradientText>
+          </div>
+        </Link>
+        <Link
+          href="https://github.com/codse/animata"
+          className="relative flex aspect-square min-h-52 w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-xl border border-border bg-gray-100/50 bg-opacity-100 py-12 transition-all duration-100 hover:scale-105 hover:bg-opacity-50 dark:border-zinc-600 dark:bg-zinc-800"
+        >
+          <GitHubLogoIcon className="size-10 md:size-14" />
+          <div className="text-balance px-4 text-center text-sm font-bold sm:text-base md:text-lg">
+            <AnimatedGradientText>View code on GitHub</AnimatedGradientText>
+          </div>
+        </Link>
+      </div>
+    </section>
+  );
+}

app/_landing/curtain.tsx

@@ -1,8 +1,14 @@
 import Link from "next/link";
+import { useTheme } from "next-themes";
 
 import BoldCopy from "@/animata/text/bold-copy";
 import ComponentLinkWrapper from "@/components/component-link-wrapper";
-import { cn } from "@/lib/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 
 import Highlight from "./highlight";
 
@@ -55,43 +61,48 @@ const faq = [
 
 function FaqItem({ index }: { index: number }) {
   const item = faq[index];
-  const count = (
-    <BoldCopy
-      text={String(index + 1)}
-      className="w-fit bg-transparent px-0 md:px-0"
-      textClassName="text-md md:text-xl group-hover:text-2xl group-hover:md:text-5xl transition-all"
-      backgroundTextClassName="text-2xl md:text-5xl"
-    />
-  );
-
   return (
-    <div
-      key={`question-${index}`}
-      className={cn({
-        "mb-4": index !== faq.length - 1,
-      })}
-    >
-      <h3 className="relative flex flex-shrink-0 flex-wrap items-center gap-4">
-        {count}
-        <span className="inline-block w-3/4 text-lg font-medium md:text-xl">{item.question}</span>
-      </h3>
-      <div className="flex gap-4">
-        <div className="invisible h-0">{count}</div>
-        <div className="text-muted-foreground">{item.answer}</div>
-      </div>
-    </div>
+    <AccordionItem value={`question-${index}`} className="w-full px-4 md:px-0">
+      <AccordionTrigger className="w-full">
+        <span className="inline-block text-sm font-medium md:text-base">{item.question}</span>
+      </AccordionTrigger>
+      <AccordionContent>
+        <div className="text-gray-900 dark:text-slate-50">{item.answer}</div>
+      </AccordionContent>
+    </AccordionItem>
   );
 }
 
 export default function FAQSection() {
+  const { resolvedTheme } = useTheme();
+  const color = resolvedTheme === "dark" ? "#ffffff12" : "#444cf710";
   return (
-    <section id="faq" className="relative mx-auto max-w-5xl">
-      <ComponentLinkWrapper link="/docs/text/bold-copy" className="w-full">
-        <BoldCopy text="FAQ" className="mb-4 border border-gray-200 dark:border-zinc-800" />
-      </ComponentLinkWrapper>
-      {faq.map((_, index) => {
-        return <FaqItem key={`item-${index}`} index={index} />;
-      })}
-    </section>
+    <div
+      className="relative border-b border-t border-border pb-4"
+      style={{
+        backgroundImage: `radial-gradient(${color} 1px, transparent 1px)`,
+        backgroundSize: "calc(10px) calc(10px)",
+      }}
+    >
+      <div className="absolute inset-0 left-1/2 z-0 aspect-square h-[120%] -translate-x-1/2 rounded-full bg-gradient-to-br from-gray-100 to-gray-50 blur-3xl dark:from-zinc-900 dark:to-zinc-800" />
+      <section id="faq" className="mx-auto flex max-w-xl flex-col gap-4 py-16">
+        <ComponentLinkWrapper className="mx-auto px-4" link="/docs/text/bold-copy">
+          <BoldCopy
+            text="FAQ"
+            textClassName="leading-none"
+            backgroundTextClassName="leading-none"
+            className="bg-transparent"
+          />
+          <div className="relative z-10 -mt-2 block text-center text-xs leading-none text-muted-foreground md:-mt-4 md:text-base">
+            You ask. We answer.
+          </div>
+        </ComponentLinkWrapper>
+        <Accordion collapsible type="single" className="relative">
+          {faq.map((_, index) => {
+            return <FaqItem key={`item-${index}`} index={index} />;
+          })}
+        </Accordion>
+      </section>
+    </div>
   );
 }