15 Blöcke · ganze Seite
Fertige React-Seite zum Kopieren — eigenständiges .tsx mit Tailwind & lucide-react, ohne Abhängigkeit von diesem Repo. Einzelne Sektionen findest du unter Blöcke.
page.tsx
| 1 | import { ArrowRight, ArrowUpRight, BarChart3, BrainCircuit, Cable, Check, Layers3, Sparkles, Square, Zap } from "lucide-react"; |
| 2 | |
| 3 | function Hero() { |
| 4 | return ( |
| 5 | <section className="bg-background text-foreground py-24 md:py-32"> |
| 6 | <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2"> |
| 7 | <div className="flex flex-col"> |
| 8 | <span className="inline-flex w-fit items-center rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">Grow your business</span> |
| 9 | <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">Marketing that drives <mark className="rounded-[0.2em] bg-primary/10 px-[0.14em] text-primary">measurable</mark> growth</h1> |
| 10 | <p className="mt-6 max-w-xl text-lg text-muted-foreground">We help brands grow faster with data-driven marketing and creative strategy — from first impression to repeat revenue.</p> |
| 11 | <div className="mt-8 flex flex-wrap gap-3"> |
| 12 | <a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Get your free strategy call <ArrowRight className="size-4" /></a> |
| 13 | <a href="#work" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border hover:bg-muted">See our work</a> |
| 14 | </div> |
| 15 | </div> |
| 16 | <img |
| 17 | src="/img/strevora-hero.jpg" |
| 18 | alt="Confident marketing strategist smiling in a sunlit studio" |
| 19 | width={1024} |
| 20 | height={768} |
| 21 | className="w-full rounded-xl border bg-card shadow-2xl" |
| 22 | /> |
| 23 | </div> |
| 24 | </section> |
| 25 | ); |
| 26 | } |
| 27 | |
| 28 | function Brandmark() { |
| 29 | return ( |
| 30 | <section className="bg-background text-foreground py-14 md:py-20"> |
| 31 | <div className="mx-auto max-w-7xl overflow-hidden px-6"> |
| 32 | <div className="flex flex-col gap-6 items-center text-center"> |
| 33 | <span className="block w-full select-none text-[clamp(3.25rem,18vw,16rem)] font-semibold leading-[0.82] tracking-[-0.04em]">Strevora</span> |
| 34 | </div> |
| 35 | </div> |
| 36 | </section> |
| 37 | ); |
| 38 | } |
| 39 | |
| 40 | function Intro() { |
| 41 | return ( |
| 42 | <section className="bg-background text-foreground py-24 md:py-32"> |
| 43 | <div className="mx-auto max-w-4xl px-6"> |
| 44 | <div className="flex max-w-4xl flex-col gap-8 mx-auto items-center text-center"> |
| 45 | <p className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl md:text-6xl">We help brands grow faster with <mark className="rounded-[0.2em] bg-primary/10 px-[0.14em] text-primary">data-driven</mark> marketing and creative strategy.</p> |
| 46 | <div className="mt-2"><a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Start growing today <ArrowRight className="size-4" /></a></div> |
| 47 | </div> |
| 48 | </div> |
| 49 | </section> |
| 50 | ); |
| 51 | } |
| 52 | |
| 53 | function Approach() { |
| 54 | return ( |
| 55 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 56 | <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2"> |
| 57 | <div className=""> |
| 58 | <p className="text-sm font-semibold uppercase tracking-wider text-primary">About us</p> |
| 59 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Customized services to grow visibility, engagement, and revenue</h2> |
| 60 | <p className="mt-4 text-lg leading-relaxed text-muted-foreground">Our approach combines strategic thinking with modern design to deliver websites that not only look exceptional but also perform seamlessly across every device and platform — turning attention into measurable outcomes.</p> |
| 61 | <div className="mt-8 flex flex-wrap gap-3"> |
| 62 | <a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Contact us <ArrowRight className="size-4" /></a> |
| 63 | </div> |
| 64 | </div> |
| 65 | <img |
| 66 | src="/img/strevora-services.jpg" |
| 67 | alt="Strategist working at a laptop beside a window" |
| 68 | width={1024} |
| 69 | height={768} |
| 70 | className="w-full rounded-xl border bg-card shadow-2xl" |
| 71 | /> |
| 72 | </div> |
| 73 | </section> |
| 74 | ); |
| 75 | } |
| 76 | |
| 77 | function Metrics() { |
| 78 | const stats = [ |
| 79 | { value: "12k+", label: "Projects successfully delivered" }, |
| 80 | { value: "14+", label: "Years delivering global marketing" }, |
| 81 | { value: "50+", label: "Growing brands served" }, |
| 82 | { value: "98%", label: "Client retention rate" }, |
| 83 | ]; |
| 84 | return ( |
| 85 | <section className="bg-primary text-primary-foreground py-20 md:py-28"> |
| 86 | <div className="mx-auto max-w-7xl px-6"> |
| 87 | <dl className="mt-14 grid grid-cols-2 gap-x-8 gap-y-12 lg:grid-cols-4"> |
| 88 | {stats.map((stat) => ( |
| 89 | <div key={stat.label} className="text-center"> |
| 90 | <dd className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">{stat.value}</dd> |
| 91 | <dt className="mt-2 text-sm text-primary-foreground/75">{stat.label}</dt> |
| 92 | </div> |
| 93 | ))} |
| 94 | </dl> |
| 95 | </div> |
| 96 | </section> |
| 97 | ); |
| 98 | } |
| 99 | |
| 100 | function Logos() { |
| 101 | const logos = [ |
| 102 | { name: "Quantra", Icon: Layers3 }, |
| 103 | { name: "Stratifyx", Icon: BarChart3 }, |
| 104 | { name: "Nexora", Icon: BrainCircuit }, |
| 105 | { name: "Velifx", Icon: Zap }, |
| 106 | { name: "Logivion", Icon: Cable }, |
| 107 | ]; |
| 108 | return ( |
| 109 | <section className="bg-primary text-primary-foreground py-16 md:py-20"> |
| 110 | <div className="mx-auto max-w-7xl px-6"> |
| 111 | <p className="text-center text-xs font-medium uppercase tracking-widest text-primary-foreground/75">Trusted by 50+ growing brands worldwide</p> |
| 112 | <div className="mt-10 flex flex-wrap items-center justify-center gap-x-12 gap-y-8"> |
| 113 | {logos.map((logo) => ( |
| 114 | <div key={logo.name} className="flex items-center gap-2.5 text-foreground/60"> |
| 115 | {logo.Icon && <logo.Icon className="size-5" />} |
| 116 | <span className="text-lg font-semibold tracking-tight">{logo.name}</span> |
| 117 | </div> |
| 118 | ))} |
| 119 | </div> |
| 120 | </div> |
| 121 | </section> |
| 122 | ); |
| 123 | } |
| 124 | |
| 125 | function Services() { |
| 126 | const features = [ |
| 127 | { Icon: Square, title: "Strategy and planning", description: "We craft visually compelling websites aligned with your brand goals, ensuring a strong digital presence in competitive markets." }, |
| 128 | { Icon: Square, title: "Content marketing", description: "Every element is designed to help you maximise engagement, generate leads, and increase revenue effectively." }, |
| 129 | { Icon: Square, title: "Performance development", description: "Our solutions are built with flexibility in mind, allowing your website to grow alongside your business without compromising performance." }, |
| 130 | { Icon: Sparkles, title: "Creative development", description: "We implement clean, search-friendly architecture that helps your website rank higher and reach the right audience organically." }, |
| 131 | ]; |
| 132 | return ( |
| 133 | <section className="bg-muted/40 text-foreground py-20 md:py-28"> |
| 134 | <div className="mx-auto max-w-7xl px-6"> |
| 135 | <div className="mx-auto max-w-2xl text-center"> |
| 136 | <p className="text-sm font-semibold uppercase tracking-wider text-primary">What we do</p> |
| 137 | <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Customized services to grow visibility, engagement, and revenue</h2> |
| 138 | </div> |
| 139 | <div className="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2"> |
| 140 | {features.map((feature) => ( |
| 141 | <div key={feature.title} className="rounded-2xl border bg-card p-6"> |
| 142 | <div className="flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary"> |
| 143 | <feature.Icon className="size-5" /> |
| 144 | </div> |
| 145 | <h3 className="mt-5 text-lg font-semibold tracking-tight">{feature.title}</h3> |
| 146 | <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{feature.description}</p> |
| 147 | </div> |
| 148 | ))} |
| 149 | </div> |
| 150 | </div> |
| 151 | </section> |
| 152 | ); |
| 153 | } |
| 154 | |
| 155 | function Work() { |
| 156 | const items = [ |
| 157 | { src: "/img/strevora-case-1.jpg", alt: "Lush green foliage", title: "Boosting organic traffic with smart SEO strategy", category: "Case study · SEO", year: "24", href: "#" }, |
| 158 | { src: "/img/strevora-case-2.jpg", alt: "Minimal desk from above", title: "Reducing CAC while increasing conversions", category: "Case study · Paid", year: "24", href: "#" }, |
| 159 | { src: "/img/strevora-case-3.jpg", alt: "Minimal interior with pampas grass", title: "From low traffic to high-quality leads", category: "Case study · Content", year: "25", href: "#" }, |
| 160 | { src: "/img/strevora-case-4.jpg", alt: "Warm interior still life with a lamp", title: "Transforming ad spend into profitable growth", category: "Case study · Growth", year: "25", href: "#" }, |
| 161 | ]; |
| 162 | return ( |
| 163 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 164 | <div className="mx-auto max-w-7xl px-6"> |
| 165 | <div className="flex max-w-2xl flex-col"> |
| 166 | <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-primary">Case studies</p> |
| 167 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Real results for businesses like yours<sup className="ml-1.5 align-super font-mono text-[0.5em] font-medium text-muted-foreground">[01]</sup></h2> |
| 168 | </div> |
| 169 | <div className="mt-14 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2"> |
| 170 | {items.map((item) => ( |
| 171 | <a key={item.title} href={item.href || undefined} className="group flex flex-col gap-4"> |
| 172 | <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border"> |
| 173 | <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]" /> |
| 174 | </div> |
| 175 | <div className="flex items-start justify-between gap-4"> |
| 176 | <div className="flex min-w-0 flex-col gap-1"> |
| 177 | <h3 className="inline-flex items-center gap-1.5 text-lg font-semibold tracking-tight"> |
| 178 | {item.title} |
| 179 | {item.href && <ArrowUpRight className="size-4 opacity-0 transition-opacity group-hover:opacity-100" />} |
| 180 | </h3> |
| 181 | {item.category && <span className="text-sm text-muted-foreground">{item.category}</span>} |
| 182 | </div> |
| 183 | {item.year && <span className="shrink-0 font-mono text-xs text-muted-foreground">[{item.year}]</span>} |
| 184 | </div> |
| 185 | </a> |
| 186 | ))} |
| 187 | </div> |
| 188 | </div> |
| 189 | </section> |
| 190 | ); |
| 191 | } |
| 192 | |
| 193 | function Measurement() { |
| 194 | return ( |
| 195 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 196 | <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2"> |
| 197 | <div className="md:order-2"> |
| 198 | <p className="text-sm font-semibold uppercase tracking-wider text-primary">How we operate</p> |
| 199 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Customized services, engagement, and revenue</h2> |
| 200 | <p className="mt-4 text-lg leading-relaxed text-muted-foreground">We pair creative thinking with rigorous measurement so every euro of spend earns its place: multiple analytics and measurement layers, a holistic omnichannel approach, and fully transparent performance reporting — no vanity metrics, just growth you can defend.</p> |
| 201 | <div className="mt-8 flex flex-wrap gap-3"> |
| 202 | <a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">See how we report <ArrowRight className="size-4" /></a> |
| 203 | </div> |
| 204 | </div> |
| 205 | <img |
| 206 | src="/img/strevora-case-1.jpg" |
| 207 | alt="Editorial botanical detail" |
| 208 | width={1024} |
| 209 | height={768} |
| 210 | className="md:order-1 w-full rounded-xl border bg-card shadow-2xl" |
| 211 | /> |
| 212 | </div> |
| 213 | </section> |
| 214 | ); |
| 215 | } |
| 216 | |
| 217 | function StrongerBrands() { |
| 218 | return ( |
| 219 | <section className="bg-neutral-950 text-neutral-50 py-20 md:py-28"> |
| 220 | <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2"> |
| 221 | <div className=""> |
| 222 | <p className="text-sm font-semibold uppercase tracking-wider text-primary">Brand building</p> |
| 223 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Building stronger brands through strategic initiatives</h2> |
| 224 | <p className="mt-4 text-lg leading-relaxed text-neutral-300">We engineer brand systems that compound: a clear positioning, a consistent voice, and a creative engine that keeps shipping. Short time, we move steadily and sustainable growth follows.</p> |
| 225 | </div> |
| 226 | <img |
| 227 | src="/img/strevora-brand.jpg" |
| 228 | alt="Confident strategist in a modern glass office" |
| 229 | width={1024} |
| 230 | height={768} |
| 231 | className="w-full rounded-xl border bg-card shadow-2xl" |
| 232 | /> |
| 233 | </div> |
| 234 | </section> |
| 235 | ); |
| 236 | } |
| 237 | |
| 238 | function Voice() { |
| 239 | const testimonials = [ |
| 240 | { quote: "We struggled with scaling our campaigns profitably. Their data-driven strategy helped us reduce wasted spend and boost conversions. Within a short time, we saw steady and sustainable growth.", author: "Ashley J.", role: "Brand Manager" }, |
| 241 | { quote: "Strevora became an extension of our team — sharp, fast, and accountable. The reporting alone changed how our board sees marketing.", author: "Marcus Lee", role: "Head of Growth" }, |
| 242 | { quote: "The creative finally matched the strategy. Our pipeline has never been healthier.", author: "Dana Wright", role: "VP Marketing" }, |
| 243 | ]; |
| 244 | return ( |
| 245 | <section className="bg-primary text-primary-foreground py-20 md:py-28"> |
| 246 | <div className="mx-auto max-w-7xl px-6"> |
| 247 | <div className="mx-auto max-w-2xl text-center"> |
| 248 | <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Trusted brands across industries</h2> |
| 249 | </div> |
| 250 | <div className="mt-14 grid grid-cols-1 gap-6 md:grid-cols-3"> |
| 251 | {testimonials.map((item) => ( |
| 252 | <figure key={item.author} className="flex flex-col rounded-2xl border bg-card p-6"> |
| 253 | <blockquote className="flex-1 text-[0.95rem] leading-relaxed">“{item.quote}”</blockquote> |
| 254 | <figcaption className="mt-6 flex items-center gap-3 border-t pt-4"> |
| 255 | <div className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary"> |
| 256 | {item.author.charAt(0)} |
| 257 | </div> |
| 258 | <div> |
| 259 | <div className="text-sm font-medium">{item.author}</div> |
| 260 | {item.role && <div className="text-sm text-muted-foreground">{item.role}</div>} |
| 261 | </div> |
| 262 | </figcaption> |
| 263 | </figure> |
| 264 | ))} |
| 265 | </div> |
| 266 | </div> |
| 267 | </section> |
| 268 | ); |
| 269 | } |
| 270 | |
| 271 | function Team() { |
| 272 | const items = [ |
| 273 | { src: "/img/strevora-team-1.jpg", alt: "Portrait of a strategist", title: "Daniel Mercer", category: "Head of Strategy", year: "", href: "" }, |
| 274 | { src: "/img/strevora-team-2.jpg", alt: "Portrait of a marketing lead", title: "Sofia Albert", category: "Performance Lead", year: "", href: "" }, |
| 275 | { src: "/img/strevora-team-3.jpg", alt: "Portrait of a creative director", title: "Mara Quinn", category: "Creative Director", year: "", href: "" }, |
| 276 | ]; |
| 277 | return ( |
| 278 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 279 | <div className="mx-auto max-w-7xl px-6"> |
| 280 | <div className="flex max-w-2xl flex-col"> |
| 281 | <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-primary">Our team</p> |
| 282 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Meet the expert strategists and creative thinkers driving measurable growth<sup className="ml-1.5 align-super font-mono text-[0.5em] font-medium text-muted-foreground">[02]</sup></h2> |
| 283 | </div> |
| 284 | <div className="mt-14 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3"> |
| 285 | {items.map((item) => ( |
| 286 | <a key={item.title} href={item.href || undefined} className="group flex flex-col gap-4"> |
| 287 | <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border"> |
| 288 | <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]" /> |
| 289 | </div> |
| 290 | <div className="flex items-start justify-between gap-4"> |
| 291 | <div className="flex min-w-0 flex-col gap-1"> |
| 292 | <h3 className="inline-flex items-center gap-1.5 text-lg font-semibold tracking-tight"> |
| 293 | {item.title} |
| 294 | {item.href && <ArrowUpRight className="size-4 opacity-0 transition-opacity group-hover:opacity-100" />} |
| 295 | </h3> |
| 296 | {item.category && <span className="text-sm text-muted-foreground">{item.category}</span>} |
| 297 | </div> |
| 298 | {item.year && <span className="shrink-0 font-mono text-xs text-muted-foreground">[{item.year}]</span>} |
| 299 | </div> |
| 300 | </a> |
| 301 | ))} |
| 302 | </div> |
| 303 | </div> |
| 304 | </section> |
| 305 | ); |
| 306 | } |
| 307 | |
| 308 | function Pricing() { |
| 309 | const tiers = [ |
| 310 | { |
| 311 | name: "Starter", |
| 312 | price: "€1.9k", |
| 313 | period: "/ month", |
| 314 | description: "For early-stage brands finding traction.", |
| 315 | features: ["1 channel focus", "Monthly strategy call", "Performance dashboard", "Email support"], |
| 316 | cta: { label: "Start growing", href: "#" }, |
| 317 | featured: false, |
| 318 | }, |
| 319 | { |
| 320 | name: "Growth", |
| 321 | price: "€4.5k", |
| 322 | period: "/ month", |
| 323 | description: "For brands ready to scale profitably.", |
| 324 | features: ["Omnichannel execution", "Bi-weekly strategy", "Creative production", "Dedicated lead", "Transparent reporting"], |
| 325 | cta: { label: "Book a strategy call", href: "#" }, |
| 326 | featured: true, |
| 327 | }, |
| 328 | { |
| 329 | name: "Scale", |
| 330 | price: "Custom", |
| 331 | period: "", |
| 332 | description: "For market leaders and complex orgs.", |
| 333 | features: ["Full-funnel program", "Weekly strategy", "Senior creative team", "Quarterly business review"], |
| 334 | cta: { label: "Talk to us", href: "#" }, |
| 335 | featured: false, |
| 336 | }, |
| 337 | ]; |
| 338 | return ( |
| 339 | <section className="bg-muted/40 text-foreground py-20 md:py-28"> |
| 340 | <div className="mx-auto max-w-7xl px-6"> |
| 341 | <div className="mx-auto max-w-2xl text-center"> |
| 342 | <p className="text-sm font-semibold uppercase tracking-wider text-primary">Flexible pricing plan</p> |
| 343 | <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Flexible engagement models tailored to startups and growing brands</h2> |
| 344 | <p className="mt-4 text-lg text-muted-foreground">Start lean, scale when the results are in. Every plan includes strategy, reporting and a dedicated lead.</p> |
| 345 | </div> |
| 346 | <div className="mx-auto mt-14 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3"> |
| 347 | {tiers.map((tier) => ( |
| 348 | <div |
| 349 | key={tier.name} |
| 350 | className={"flex flex-col rounded-2xl border bg-card p-6 " + (tier.featured ? "ring-2 ring-primary shadow-lg" : "")} |
| 351 | > |
| 352 | {tier.featured && ( |
| 353 | <span className="mb-4 inline-flex w-fit rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground"> |
| 354 | Beliebt |
| 355 | </span> |
| 356 | )} |
| 357 | <h3 className="text-lg font-semibold">{tier.name}</h3> |
| 358 | {tier.description && <p className="mt-1 text-sm text-muted-foreground">{tier.description}</p>} |
| 359 | <div className="mt-4 flex items-baseline gap-1"> |
| 360 | <span className="text-4xl font-semibold tracking-tight">{tier.price}</span> |
| 361 | {tier.period && <span className="text-sm text-muted-foreground">{tier.period}</span>} |
| 362 | </div> |
| 363 | <ul className="mt-6 flex flex-1 flex-col gap-3 text-sm"> |
| 364 | {tier.features.map((feature) => ( |
| 365 | <li key={feature} className="flex items-start gap-2.5"> |
| 366 | <Check className="mt-0.5 size-4 shrink-0 text-primary" /> |
| 367 | <span>{feature}</span> |
| 368 | </li> |
| 369 | ))} |
| 370 | </ul> |
| 371 | <a |
| 372 | href={tier.cta.href} |
| 373 | className={"mt-6 inline-flex items-center justify-center rounded-md px-5 py-2.5 text-sm font-medium transition-colors " + (tier.featured ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border hover:bg-muted")} |
| 374 | > |
| 375 | {tier.cta.label} |
| 376 | </a> |
| 377 | </div> |
| 378 | ))} |
| 379 | </div> |
| 380 | </div> |
| 381 | </section> |
| 382 | ); |
| 383 | } |
| 384 | |
| 385 | function Cta() { |
| 386 | return ( |
| 387 | <section className="bg-primary text-primary-foreground py-24 md:py-28"> |
| 388 | <div className="mx-auto flex max-w-3xl flex-col items-center px-6 text-center"> |
| 389 | <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Let's build your brand's growth engine.</h2> |
| 390 | <p className="mt-4 max-w-xl text-lg text-primary-foreground/75">Book a free strategy call — we'll map the fastest path to measurable growth.</p> |
| 391 | <div className="mt-8 flex flex-wrap justify-center gap-3"> |
| 392 | <a href="#pricing" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-background text-foreground hover:bg-background/90">Get your free strategy call <ArrowRight className="size-4" /></a> |
| 393 | <a href="#work" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border border-white/25 text-current hover:bg-white/10">See our work</a> |
| 394 | </div> |
| 395 | </div> |
| 396 | </section> |
| 397 | ); |
| 398 | } |
| 399 | |
| 400 | function FooterMark() { |
| 401 | return ( |
| 402 | <section className="bg-neutral-950 text-neutral-50 py-14 md:py-20"> |
| 403 | <div className="mx-auto max-w-7xl overflow-hidden px-6"> |
| 404 | <div className="flex flex-col gap-6 items-center text-center border-t border-white/15 pt-12 md:pt-16"> |
| 405 | <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-neutral-300">Marketing that drives growth</p> |
| 406 | <span className="block w-full select-none text-[clamp(3.25rem,18vw,16rem)] font-semibold leading-[0.82] tracking-[-0.04em]">Strevora</span> |
| 407 | </div> |
| 408 | </div> |
| 409 | </section> |
| 410 | ); |
| 411 | } |
| 412 | |
| 413 | export default function Page() { |
| 414 | return ( |
| 415 | <main> |
| 416 | <Hero /> |
| 417 | <Brandmark /> |
| 418 | <Intro /> |
| 419 | <Approach /> |
| 420 | <Metrics /> |
| 421 | <Logos /> |
| 422 | <Services /> |
| 423 | <Work /> |
| 424 | <Measurement /> |
| 425 | <StrongerBrands /> |
| 426 | <Voice /> |
| 427 | <Team /> |
| 428 | <Pricing /> |
| 429 | <Cta /> |
| 430 | <FooterMark /> |
| 431 | </main> |
| 432 | ); |
| 433 | } |