Hero Section Three

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { IconArrowUpRight, IconUser } from '@tabler/icons-react'
5import Link from 'next/link'
6 
7import { Shader, Blob, FilmGrain, Swirl, TiltShift, WaveDistortion } from 'shaders/react'
8 
9export default function HeroSectionThree() {
10  return (
11    <section className="relative min-h-screen overflow-hidden bg-white dark:bg-[#1a1a1a]">
12      {/* Shader background */}
13      <div className="pointer-events-none absolute inset-0 z-0 motion-reduce:hidden">
14        {/* Oversized rotated canvas to avoid clipping */}
15        <div className="absolute right-[-35%] bottom-[-55%] h-[160%] w-[150%]">
16          <Shader className="h-full w-full">
17            <Swirl colorB="#f02b63" colorSpace="oklch" />
18            <WaveDistortion
19              angle={237}
20              edges="wrap"
21              frequency={1.4}
22              strength={0.2}
23              transform={{ scale: 1.3 }}
24            >
25              <WaveDistortion
26                angle={314}
27                edges="mirror"
28                frequency={10}
29                speed={0.3}
30                waveType="sawtooth"
31              >
32                <Blob
33                  center={{ x: 0.37, y: 0.65 }}
34                  deformation={0.7}
35                  highlightColor="#ffc61a"
36                  highlightX={0.5}
37                  size={0.8}
38                  softness={1}
39                />
40              </WaveDistortion>
41            </WaveDistortion>
42            <TiltShift angle={155} center={{ x: 0.5, y: 0.45 }} intensity={80} width={0.5} />
43            <FilmGrain strength={0.2} />
44          </Shader>
45        </div>
46        {/* main horizontal fade */}
47        <div className="absolute inset-0 bg-linear-to-r from-white via-white/80 to-transparent dark:from-black dark:via-black/80 dark:to-transparent" />
48 
49        {/* soft seam killer */}
50        <div className="absolute inset-0 bg-radial-[ellipse_at_left] from-white/40 via-white/10 to-transparent dark:from-black/40 dark:via-black/10" />
51      </div>
52 
53      {/* Content */}
54      <div className="relative z-10 mx-auto flex min-h-screen max-w-4xl flex-col justify-center gap-6 px-8 selection:bg-sky-500/80 md:px-16">
55        <h1 className="text-4xl font-medium tracking-tight text-neutral-800 md:text-6xl dark:text-neutral-100">
56          Exceptional product demos in minutes, not days
57        </h1>
58 
59        <p className="text-md leading-relaxed text-neutral-600 md:text-lg lg:text-xl dark:text-neutral-300">
60// … truncated