Source Code
designova-reduced-gradient-hero.tsx
1export const DesignovaReducedGradientHero = () => {
2 return (
3 <main className="relative min-h-screen overflow-hidden bg-[#050505] text-white selection:bg-[#F25736] selection:text-white font-[var(--font-inter)]">
4 <style>{`
5 @keyframes designovaFadeInUp {
6 0% { opacity: 0; transform: translateY(20px); }
7 100% { opacity: 1; transform: translateY(0); }
8 }
9 `}</style>
10
11 <div className="absolute inset-0 z-0 w-full h-full pointer-events-none">
12 <img
13 src="https://res.cloudinary.com/dgs8tgxex/image/upload/v1767417621/alumni/alumni-14957f07-c02f-419d-9da8-3dc61cc570e2.png"
14 alt="Model with orange glasses"
15 className="absolute right-0 top-0 h-full w-full lg:w-[70%] object-cover object-top opacity-60 lg:opacity-100"
16 />
17 </div>
18
19 <div className="absolute inset-0 z-0 pointer-events-none bg-[linear-gradient(90deg,rgba(5,5,5,0.95)_0%,rgba(5,5,5,0.5)_25%,rgba(5,5,5,0)_100%)]" />
20 <div className="absolute inset-0 z-0 pointer-events-none bg-[linear-gradient(0deg,rgba(5,5,5,0.8)_0%,rgba(5,5,5,0)_60%)]" />
21
22 <div className="relative z-10 w-full max-w-[1700px] mx-auto min-h-screen flex flex-col px-4 sm:px-6 md:px-12 py-5 md:py-8">
23 <nav className="flex items-center justify-between w-full relative z-50">
24 <div className="flex items-center gap-3">
25 <div className="relative w-7 h-9">
26 <div className="absolute inset-0 bg-gradient-to-tr from-[#F25736] to-amber-400 rounded-bl-full rounded-tr-full shadow-[0_0_20px_rgba(242,87,54,0.4)]" />
27 </div>
28 <span className="text-lg sm:text-xl font-bold tracking-tight text-white">Designova</span>
29 </div>
30
31 <div className="hidden lg:flex items-center gap-1 bg-white/5 backdrop-blur-md border border-white/5 rounded-full p-1">
32 <a
33 href="#"
34 className="px-4 py-1.5 bg-[#F25736] rounded-full text-[10px] font-bold text-white tracking-[0.2em] uppercase hover:shadow-[0_0_15px_rgba(242,87,54,0.5)] transition-shadow"
35 >
36 Home
37 </a>
38 {["About", "Work", "Services", "Blog", "Contact"].map((item) => (
39 <a
40 key={item}
41 href="#"
42 className="px-3 py-1.5 text-[10px] font-semibold text-gray-400 hover:text-white transition-colors uppercase tracking-[0.2em]"
43 >
44 {item}
45 </a>
46 ))}
47 </div>
48
49 <div className="hidden lg:block">
50 <button
51 type="button"
52 className="group flex items-center gap-2 bg-[#F25736] hover:bg-[#ff6b4a] transition-colors rounded-full px-5 py-2 text-[11px] font-bold uppercase tracking-wide shadow-lg shadow-[#F25736]/10"
53 >
54 Get in touch
55 <svg
56 xmlns="http://www.w3.org/2000/svg"
57 width="14"
58 height="14"
59 viewBox="0 0 24 24"
60 fill="none"
61 stroke="currentColor"
62 strokeWidth="3"
63 strokeLinecap="round"
64 strokeLinejoin="round"
65 className="group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"
66 >
67 <line x1="7" y1="17" x2="17" y2="7" />
68 <polyline points="7 7 17 7 17 17" />
69 </svg>
70 </button>
71 </div>
72
73 <label htmlFor="designova-menu-toggle" className="lg:hidden p-2 text-white cursor-pointer z-50">
74 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
75 <line x1="3" y1="12" x2="21" y2="12" />
76 <line x1="3" y1="6" x2="21" y2="6" />
77 <line x1="3" y1="18" x2="21" y2="18" />
78 </svg>
79 </label>
80 </nav>
81
82 <input type="checkbox" id="designova-menu-toggle" className="peer hidden" />
83 <div className="fixed inset-0 z-40 bg-[#050505]/98 backdrop-blur-xl flex flex-col items-center justify-center space-y-6 transform translate-x-full opacity-0 pointer-events-none transition-all duration-500 lg:hidden peer-checked:translate-x-0 peer-checked:opacity-100 peer-checked:pointer-events-auto">
84 {["Home", "About", "Work", "Services"].map((item) => (
85 <a key={item} href="#" className="text-3xl sm:text-4xl font-bold text-white tracking-tighter hover:text-white/80 transition-colors">
86 {item}
87 </a>
88 ))}
89 </div>
90
91 <div className="grow flex flex-col justify-center items-start w-full max-w-[900px] mt-12 lg:mt-0 mb-10 opacity-0 translate-y-5 animate-[designovaFadeInUp_0.8s_cubic-bezier(0.16,1,0.3,1)_forwards]">
92 <div className="inline-flex items-center justify-center px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-md mb-6">
93 <span className="text-[9px] sm:text-[10px] md:text-xs text-gray-300 font-semibold tracking-[0.3em] uppercase">Digital Art. Real Emotion.</span>
94 </div>
95
96 <h2 className="font-bold text-[2.6rem] sm:text-[3.4rem] md:text-[4.2rem] lg:text-[5.2rem] leading-[1.02] md:leading-[0.95] mb-6 tracking-tight text-white">
97 Design That <br />
98 Speaks in <br />
99 <span className="text-transparent bg-clip-text bg-gradient-to-r from-gray-200 via-gray-400 to-gray-600">Shadows & Light</span>
100 </h2>
101
102 <p className="text-gray-300 text-sm sm:text-base md:text-lg mb-8 max-w-lg leading-relaxed font-normal drop-shadow-lg">
103 We fuse artistic depth with cutting-edge design to build unforgettable experiences that resonate.
104 </p>
105
106 <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full sm:w-auto">
107 <button
108 type="button"
109 className="w-full sm:w-auto flex justify-center items-center gap-2 bg-[#F25736] hover:bg-[#ff6b4a] text-white px-6 py-3 rounded-full text-xs sm:text-sm font-bold tracking-wide transition-transform shadow-lg shadow-[#F25736]/20 hover:scale-[1.02]"
110 >
111 View Our Work
112 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
113 <line x1="7" y1="17" x2="17" y2="7" />
114 <polyline points="7 7 17 7 17 17" />
115 </svg>
116 </button>
117
118 <button
119 type="button"
120 className="w-full sm:w-auto flex justify-center items-center gap-3 px-6 py-3 rounded-full border border-white/15 hover:bg-white/5 transition-colors text-xs sm:text-sm font-medium text-white group bg-black/20 backdrop-blur-sm"
121 >
122 Watch Showreel
123 <span className="flex items-center justify-center w-5 h-5 border border-white/40 rounded-full group-hover:border-white transition-colors">
124 <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" className="text-white ml-0.5">
125 <polygon points="5 3 19 12 5 21 5 3" />
126 </svg>
127 </span>
128 </button>
129 </div>
130 </div>
131
132 <div className="w-full rounded-2xl md:rounded-[1.5rem] p-6 sm:p-8 md:p-10 relative overflow-hidden mt-auto bg-[linear-gradient(180deg,rgba(255,255,255,0.05)_0%,rgba(255,255,255,0.01)_100%)] backdrop-blur-2xl border-t border-white/10">
133 <div className="absolute -top-[150px] -right-[150px] w-[500px] h-[500px] bg-[#F25736]/10 rounded-full blur-[100px] pointer-events-none" />
134
135 <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-8 relative z-10">
136 <div className="md:col-span-4 group cursor-default">
137 <div className="relative pl-0 pt-3 before:absolute before:left-0 before:top-0 before:h-3 before:w-3 before:border-l before:border-t before:border-white/40 before:transition-colors before:content-[''] before:block group-hover:before:border-[#F25736] mb-3">
138 <div className="flex items-center gap-2">
139 <span className="w-5 h-5 rounded-full border border-gray-600 flex items-center justify-center text-[10px] text-gray-400">c</span>
140 <span className="text-xl sm:text-2xl font-bold tracking-tight">2025</span>
141 </div>
142 </div>
143 <p className="text-[11px] sm:text-xs text-gray-400 font-normal leading-relaxed max-w-[280px]">
144 Designing experiences that engage users and drive tangible results.
145 </p>
146 </div>
147
148 <div className="md:col-span-4 group cursor-default md:border-l md:border-white/10 md:pl-10">
149 <div className="relative pl-0 pt-3 md:pt-0 md:before:hidden before:absolute before:left-0 before:top-0 before:h-3 before:w-3 before:border-l before:border-t before:border-white/40 before:content-[''] before:block mb-3 md:mb-2">
150 <h3 className="text-xl sm:text-2xl font-bold tracking-tight text-white">Brand Identity</h3>
151 </div>
152 <p className="text-[11px] sm:text-xs text-gray-400 font-normal leading-relaxed max-w-[280px]">
153 Building strong brand identities that tell your story with clarity and impact.
154 </p>
155 </div>
156
157 <div className="md:col-span-4 group cursor-default md:border-l md:border-white/10 md:pl-10">
158 <div className="relative pl-0 pt-3 md:pt-0 md:before:hidden before:absolute before:left-0 before:top-0 before:h-3 before:w-3 before:border-l before:border-t before:border-white/40 before:content-[''] before:block mb-3 md:mb-2">
159 <h3 className="text-xl sm:text-2xl font-bold tracking-tight text-white">UI/UX Design</h3>
160 </div>
161 <p className="text-[11px] sm:text-xs text-gray-400 font-normal leading-relaxed max-w-[280px]">
162 Thoughtfully designed interfaces that improve interaction and digital flow.
163 </p>
164 </div>
165 </div>
166 </div>
167 </div>
168 </main>
169 );
170};
171
