feat: create hero section

Author: andostronaut

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.9",
     "lucide-react": "^0.453.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",

pnpm-lock.yaml

@@ -0,0 +1,60 @@
+'use client'
+
+import { ChevronRight, Github } from 'lucide-react'
+// import Link from 'next/link'
+
+import { Button } from '@/components/ui/button'
+
+import AnimatedGridPattern from '@/components/ui/animated-grid-pattern'
+import BlurFade from '@/components/ui/blur-fade'
+
+import { cn } from '@/lib/utils'
+
+export const Hero = () => {
+  return (
+    <section className='w-full relative'>
+      <div className='container relative z-10 grid place-items-center lg:max-w-screen-xl gap-8 mx-auto py-20 md:py-28'>
+        <div className='space-y-8'>
+          <BlurFade delay={0.1}>
+            <div className='mx-auto text-center text-7xl md:text-9xl font-bold'>
+              <h1>Explore our documentations</h1>
+            </div>
+          </BlurFade>
+
+          <div className='space-y-4 md:space-y-0 md:space-x-4'>
+            <BlurFade delay={0.3}>
+              <div className='mt-6 gap-2 flex justify-center'>
+                <Button
+                  className='w-5/6 md:w-1/4 font-bold group/arrow'
+                  onClick={() => window.open('/docs', '_blank')}
+                >
+                  Documentation
+                  <ChevronRight className='size-5 ml-2 group-hover/arrow:translate-x-1 transition-transform' />
+                </Button>
+                <Button
+                  className='w-5/6 md:w-1/4 font-bold group/arrow'
+                  variant='outline'
+                  onClick={() => {
+                    window.open('https://github.com/kinotio/drowser', '_blank')
+                  }}
+                >
+                  <Github className='size-5 mr-2' />
+                  Github
+                  <ChevronRight className='size-5 ml-2 group-hover/arrow:translate-x-1 transition-transform' />
+                </Button>
+              </div>
+            </BlurFade>
+          </div>
+        </div>
+      </div>
+
+      <AnimatedGridPattern
+        numSquares={30}
+        className={cn(
+          '[mask-image:radial-gradient(600px_circle_at_center,white,transparent)]',
+          'inset-x-0 inset-y-[-30%]'
+        )}
+      />
+    </section>
+  )
+}

src/components/footer.tsx renamed to src/components/common/footer.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export default function AnimatedGradientText({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
+        className,
+      )}
+    >
+      <div
+        className={`absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}
+      />
+
+      {children}
+    </div>
+  );
+}

src/components/header.tsx renamed to src/components/common/header.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface GridPatternProps {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  strokeDasharray?: any;
+  numSquares?: number;
+  className?: string;
+  maxOpacity?: number;
+  duration?: number;
+  repeatDelay?: number;
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = 0,
+  numSquares = 50,
+  className,
+  maxOpacity = 0.5,
+  duration = 4,
+  repeatDelay = 0.5,
+  ...props
+}: GridPatternProps) {
+  const id = useId();
+  const containerRef = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [squares, setSquares] = useState(() => generateSquares(numSquares));
+
+  function getPos() {
+    return [
+      Math.floor((Math.random() * dimensions.width) / width),
+      Math.floor((Math.random() * dimensions.height) / height),
+    ];
+  }
+
+  // Adjust the generateSquares function to return objects with an id, x, and y
+  function generateSquares(count: number) {
+    return Array.from({ length: count }, (_, i) => ({
+      id: i,
+      pos: getPos(),
+    }));
+  }
+
+  // Function to update a single square's position
+  const updateSquarePosition = (id: number) => {
+    setSquares((currentSquares) =>
+      currentSquares.map((sq) =>
+        sq.id === id
+          ? {
+              ...sq,
+              pos: getPos(),
+            }
+          : sq,
+      ),
+    );
+  };
+
+  // Update squares to animate in
+  useEffect(() => {
+    if (dimensions.width && dimensions.height) {
+      setSquares(generateSquares(numSquares));
+    }
+  }, [dimensions, numSquares]);
+
+  // Resize observer to update container dimensions
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, [containerRef]);
+
+  return (
+    <svg
+      ref={containerRef}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+      <svg x={x} y={y} className="overflow-visible">
+        {squares.map(({ pos: [x, y], id }, index) => (
+          <motion.rect
+            initial={{ opacity: 0 }}
+            animate={{ opacity: maxOpacity }}
+            transition={{
+              duration,
+              repeat: 1,
+              delay: index * 0.1,
+              repeatType: "reverse",
+            }}
+            onAnimationComplete={() => updateSquarePosition(id)}
+            key={`${x}-${y}-${index}`}
+            width={width - 1}
+            height={height - 1}
+            x={x * width + 1}
+            y={y * height + 1}
+            fill="currentColor"
+            strokeWidth="0"
+          />
+        ))}
+      </svg>
+    </svg>
+  );
+}
+
+export default GridPattern;

src/components/sections/hero.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useRef } from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  UseInViewOptions,
+  Variants,
+} from "framer-motion";
+
+type MarginType = UseInViewOptions["margin"];
+
+interface BlurFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: {
+    hidden: { y: number };
+    visible: { y: number };
+  };
+  duration?: number;
+  delay?: number;
+  yOffset?: number;
+  inView?: boolean;
+  inViewMargin?: MarginType;
+  blur?: string;
+}
+
+export default function BlurFade({
+  children,
+  className,
+  variant,
+  duration = 0.4,
+  delay = 0,
+  yOffset = 6,
+  inView = false,
+  inViewMargin = "-50px",
+  blur = "6px",
+}: BlurFadeProps) {
+  const ref = useRef(null);
+  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)` },
+  };
+  const combinedVariants = variant || defaultVariants;
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        exit="hidden"
+        variants={combinedVariants}
+        transition={{
+          delay: 0.04 + delay,
+          duration,
+          ease: "easeOut",
+        }}
+        className={className}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

src/components/ui/animated-gradient-text.tsx

@@ -3,15 +3,16 @@ const inter = Inter({ subsets: ['latin'] })
 
 import { ThemeProvider } from '@/components/theme-provider'
 
-import { Header } from '@/components/header'
-import { Footer } from '@/components/footer'
+import { Header } from '@/components/common/header'
+import { Footer } from '@/components/common/footer'
+import { Hero } from '@/components/sections/hero'
 
 export default function Home() {
   return (
     <ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
       <div className={inter.className}>
         <Header />
-        <h1>Hello docs</h1>
+        <Hero />
         <Footer />
       </div>
     </ThemeProvider>