Farigh UI Logo

Farigh UI

Installation

npx shadcn@latest add GradientBackground

Source Code

gradient-hero-warm-sunrise.tsx
1"use client";
2
3import GradientBlinds from "@/components/ui/GradientBackground";
4
5export const GradientHeroWarmSunrise = () => {
6  return (
7    <main className="relative min-h-screen overflow-hidden">
8      <div className="fixed inset-0 w-full h-full flex items-center justify-center">
9        <GradientBlinds
10          gradientColors={["#0c4a6e", "#0369a1", "#0ea5e9", "#38bdf8"]}
11          angle={15}
12          noise={0.115}
13          blindCount={13}
14          blindMinWidth={50}
15          spotlightRadius={0.38}
16          spotlightSoftness={1}
17          spotlightOpacity={0.42}
18          mouseDampening={0.15}
19          distortAmount={0}
20          shineDirection="right"
21          mixBlendMode="overlay"
22        />
23      </div>
24
25      <div className="relative z-10 flex min-h-screen flex-col">
26        <div className="flex-1 flex items-center justify-center">
27          <div className="flex items-center justify-center min-h-screen w-full px-5 sm:px-20">
28            <div className="relative z-10 flex max-w-4xl flex-col items-center gap-8 text-center">
29              <h2 className="text-5xl font-bold leading-tight tracking-tighter text-white md:text-7xl text-balance drop-shadow-2xl">
30                Ideas Come to Life
31                <br />
32                that doesn&apos;t exist
33              </h2>
34              <p className="text-xl text-white/90 max-w-3xl text-pretty drop-shadow-lg">
35                Transform your vision into stunning digital experiences with powerful design tools and seamless collaboration.
36              </p>
37
38              <div className="flex flex-col sm:flex-row gap-4 mt-4">
39                <button className="inline-flex items-center justify-center rounded-full bg-white px-8 py-2.5 text-base font-semibold text-black transition-all hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-transparent shadow-2xl">
40                  Get Started
41                </button>
42                <button className="inline-flex items-center justify-center rounded-full border-2 border-white/30 bg-white/10 px-8 py-2.5 text-base font-semibold text-white backdrop-blur transition-all hover:bg-white/20 hover:border-white/50 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-transparent shadow-xl">
43                  View Gallery
44                  <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
45                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
46                  </svg>
47                </button>
48              </div>
49            </div>
50          </div>
51        </div>
52      </div>
53    </main>
54  );
55};
56

Related

Designova Reduced Gradient Hero - Free React component preview

Designova Reduced Gradient Hero

Ray Ellipse Hero - Free React component preview

Ray Ellipse Hero

Eclipse SaaS Hero - Free React component preview

Eclipse SaaS Hero

Insider Waitlist Hero - Free React component preview

Insider Waitlist Hero