Merge pull request #11 from kinotio/develop

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,143 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'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))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dimensions, numSquares])
+
+  // Resize observer to update container dimensions
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const 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,61 @@
+'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

@@ -1,4 +1,5 @@
 const meta = {
+  index: 'Documentations',
   drowser: 'Drowser',
   gelda: 'Gelda'
 }

src/components/ui/animated-grid-pattern.tsx

@@ -0,0 +1 @@
+# Index