bender/a152e944-c0ef-46f7-abbf-65dbfcc7ea2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-01 13:31:12 +00:00
commit cb9e88e0fb
302 changed files with 36561 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/templates/ai-email-platform/page.tsx Normal file
View File

@@ -0,0 +1,292 @@
import NavbarDropdown from "@/components/ui/NavbarDropdown";
import { ReactLenis } from "lenis/react";
import LightRaysCenterBackground from "@/components/ui/LightRaysCenterBackground";
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroBillboardFloatingCards from "@/components/sections/hero/HeroBillboardFloatingCards";
import FeaturesGridSplit from "@/components/sections/features/FeaturesGridSplit";
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
import TestimonialDetailedCards from "@/components/sections/testimonial/TestimonialDetailedCards";
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
import ContactCta from "@/components/sections/contact/ContactCta";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import "./theme.css";
const AVATARS_SRC = [
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-1.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-2.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-3.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-4.webp",
];
const BRAND_LOGOS = [
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-1.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-2.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-3.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-4.webp",
];
export default function AiEmailPlatformTemplate() {
return (
<ReactLenis root>
<StyleProvider buttonVariant="expand">
<div className="fixed inset-0 -z-10 opacity-25 pointer-events-none">
<LightRaysCenterBackground position="absolute" />
</div>
<NavbarDropdown
logo="Flashly"
navItems={[
{ name: "Features", href: "#features" },
{ name: "Pricing", href: "#pricing" },
{ name: "Integrations", href: "#integrations" },
{ name: "FAQ", href: "#faq" },
]}
ctaButton={{ text: "Start Free Trial", href: "#" }}
/>
<div id="hero" data-section="hero">
<HeroBillboardFloatingCards
avatarsSrc={AVATARS_SRC}
avatarsLabel="Trusted by 10k+ users"
title="AI-Powered Email Campaigns That Actually Convert"
description="Create, personalize, and optimize email campaigns at scale. Powered by advanced AI that learns what your audience wants."
primaryButton={{ text: "Start Free Trial", href: "#" }}
secondaryButton={{ text: "Watch Demo", href: "#" }}
note="No credit card required"
floatingCardsSrc={[
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-1.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-2.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-3.webp",
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-4.webp",
]}
imageSrc="https://storage.googleapis.com/webild/default/templates/ai-email-platform/dashboard.webp"
logosSrc={BRAND_LOGOS}
/>
</div>
<div id="features" data-section="features">
<FeaturesGridSplit
tag="Features"
title="Everything You Need to Scale"
description="From team workflows to real-time analytics, Flashly gives you the tools to grow faster."
topItems={[
{ title: "Unify and Analyze All Your Data", description: "Connect internal docs, third-party tools, and real-time inputs into a single intelligent interface. Let AI surface insights that drive smarter, more confident business decisions.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-collaborate.webp" },
{ title: "Automate High-Frequency Workflows", description: "AI Supply agents break down complex tasks into clear, traceable steps. Eliminate repetitive work and scale your team's output with unmatched efficiency and precision.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-track.webp" },
]}
bottomItem={{
title: "Accelerate Execution with Reliable Autonomy",
description: "Our agents don't just assist — they complete tasks end-to-end with accountability and speed. Track progress, refine outputs, and get results faster.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-optimize.webp",
primaryButton: { text: "View use cases", href: "#" },
avatarsSrc: AVATARS_SRC,
avatarsLabel: "Trusted by 300+ clients",
}}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricsFeatureCards
tag="By the Numbers"
title="Results That Speak for Themselves"
description="Flashly helps teams send smarter campaigns and see real impact."
metrics={[
{
value: "98%",
title: "Deliverability Rate",
features: ["Advanced domain authentication", "Real-time bounce monitoring", "Automatic list hygiene"],
},
{
value: "3.2x",
title: "Higher Open Rates",
features: ["AI-optimized subject lines", "Smart send-time prediction", "Personalized preview text"],
},
{
value: "45%",
title: "More Conversions",
features: ["Dynamic content blocks", "Behavioral targeting", "Automated A/B testing"],
},
]}
/>
</div>
<FeaturesMediaCards
tag="How It Works"
title="Built for Modern Teams"
description="Powerful tools that help you work smarter, move faster, and deliver results."
items={[
{
title: "Domains",
description: "Get verified domains set up in minutes. Ensure maximum deliverability with proper authentication and DNS configuration.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/how-it-works-domains.webp",
},
{
title: "Emails",
description: "Create and send beautiful, personalized email campaigns at scale with AI-powered content and smart scheduling.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/how-it-works-emails.webp",
},
{
title: "Notifications",
description: "Track customer replies and engagement in real time. Never miss a response with instant notification alerts.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/how-it-works-notifications.webp",
},
]}
/>
<div id="pricing" data-section="pricing">
<PricingLayeredCards
tag="Pricing"
title="Simple, Transparent Pricing"
description="Start free. Scale when you're ready. No hidden fees."
plans={[
{ tag: "Starter", price: "$0/mo", description: "For individuals just getting started with email marketing.", primaryButton: { text: "Get Started Free", href: "#" }, features: ["1,000 emails per month", "Basic templates", "Email support", "Analytics dashboard"] },
{ tag: "Pro", price: "$29/mo", description: "For growing teams that need more power and flexibility.", primaryButton: { text: "Start Free Trial", href: "#" }, features: ["50,000 emails per month", "AI subject line optimizer", "Advanced segmentation", "A/B testing", "Priority support", "Custom templates"] },
{ tag: "Enterprise", price: "$99/mo", description: "For large organizations with advanced needs.", primaryButton: { text: "Contact Sales", href: "#" }, features: ["Unlimited emails", "Dedicated IP address", "Custom integrations", "SSO & team management", "Dedicated account manager", "SLA guarantee", "Advanced API access"] },
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialDetailedCards
tag="Testimonials"
title="Loved by Marketing Teams"
description="See what our customers have to say about Flashly."
testimonials={[
{
title: "Game-changer for our email strategy",
quote: "We switched to Flashly six months ago and our open rates have nearly tripled. The AI suggestions are incredibly accurate and save us hours every week.",
name: "Sarah Chen",
role: "Head of Marketing, Lumino",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp",
},
{
title: "Best ROI on any tool we use",
quote: "The automation workflows alone paid for the subscription in the first month. Our team can now focus on strategy instead of manual sends.",
name: "Marcus Rivera",
role: "Growth Lead, NovaBrand",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp",
},
{
title: "Finally, email that just works",
quote: "Setup took 15 minutes. Within a week we had our first automated campaign running. The deliverability is the best we've ever seen.",
name: "Erik Lindqvist",
role: "Founder, Canopy",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp",
},
{
title: "Incredible support and product",
quote: "Every time we've had a question, the team responds within minutes. The product keeps getting better with every update. Truly world-class.",
name: "James Park",
role: "CTO, AdScale",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqTwoColumn
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know about Flashly."
items={[
{ question: "What is Flashly?", answer: "Flashly is an AI-powered email marketing platform that helps you create, send, and optimize email campaigns at scale. From smart subject lines to automated workflows, we handle the heavy lifting so you can focus on growing your business." },
{ question: "Do I need technical skills to use it?", answer: "Not at all. Flashly is designed for marketers, not engineers. Our drag-and-drop editor and pre-built templates make it easy to create beautiful emails in minutes." },
{ question: "How does the AI optimization work?", answer: "Our AI analyzes your audience behavior, past campaign performance, and industry benchmarks to suggest the best subject lines, send times, and content variations for maximum engagement." },
{ question: "Can I import my existing contacts?", answer: "Yes. You can import contacts from CSV files, or connect directly with your CRM, Shopify store, or other platforms through our native integrations." },
{ question: "Is there a free plan?", answer: "Absolutely. Our Starter plan is completely free and includes up to 1,000 emails per month, basic templates, and access to our analytics dashboard. No credit card required." },
{ question: "What integrations do you support?", answer: "We integrate with Shopify, Stripe, Zapier, Salesforce, HubSpot, Slack, and dozens more. You can also use our API to build custom integrations." },
{ question: "How is deliverability handled?", answer: "We maintain a 98% deliverability rate through advanced domain authentication, automatic list hygiene, real-time bounce monitoring, and dedicated IP options on higher plans." },
{ question: "Can I cancel anytime?", answer: "Yes. All plans are month-to-month with no long-term contracts. You can upgrade, downgrade, or cancel at any time from your account settings." },
]}
/>
</div>
<div id="blog" data-section="blog">
<BlogSimpleCards
tag="Blog"
title="Latest from the Blog"
description="Tips, strategies, and insights to level up your email marketing."
items={[
{
category: "Strategy",
title: "How to Write Subject Lines That Get Opened",
excerpt: "Learn the psychology behind high-performing subject lines and how AI can help you craft the perfect hook every time.",
authorName: "Sarah Chen",
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp",
date: "May 8, 2026",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-subject-lines.webp",
},
{
category: "Tutorial",
title: "Setting Up Your First Automated Workflow",
excerpt: "A step-by-step guide to creating welcome sequences, abandoned cart emails, and re-engagement campaigns.",
authorName: "Marcus Rivera",
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp",
date: "May 5, 2026",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-automated-workflow.webp",
},
{
category: "Insights",
title: "Email Marketing Benchmarks for 2026",
excerpt: "We analyzed over 10 million campaigns to bring you the latest open rate, click rate, and conversion benchmarks by industry.",
authorName: "Priya Sharma",
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp",
date: "May 1, 2026",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-benchmarks.webp",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCta
tag="Get Started"
text="Ready to transform your email marketing? Start your free trial today and see results in minutes."
primaryButton={{ text: "Start Free Trial", href: "#" }}
secondaryButton={{ text: "Talk to Sales", href: "#" }}
/>
</div>
<FooterSimple
brand="Flashly"
columns={[
{
title: "Product",
items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Integrations", href: "#integrations" },
{ label: "Changelog", href: "#" },
],
},
{
title: "Resources",
items: [
{ label: "Blog", href: "#blog" },
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Help Center", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" },
],
},
]}
copyright="© 2026 Flashly. All rights reserved."
links={[
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

178
src/templates/ai-email-platform/theme.css Normal file
View File

@@ -0,0 +1,178 @@
/* AI Email Platform - Light Blue */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/blue */
--background: #f8fafc;
--card: #f1f5f9;
--foreground: #0f172a;
--primary-cta: #106FEB;
--primary-cta-text: #ffffff;
--secondary-cta: #e2e8f0;
--secondary-cta-text: #0f172a;
--accent: #B4D4F8;
--background-accent: #106FEB;
/* @layout/border-radius/rounded */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(16, 111, 235, 0.3) rgba(0, 0, 0, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-glow */
.card {
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 5%) -35%, var(--color-card) 65%);
box-shadow: 0px 0px 10px 4px color-mix(in srgb, var(--color-accent) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

236
src/templates/ai-ugc/page.tsx Normal file
View File

@@ -0,0 +1,236 @@
import { BarChart3, Film, Megaphone } from "lucide-react";
import { ReactLenis } from "lenis/react";
import NavbarFloating from "@/components/ui/NavbarFloating";
import NoiseGradientBackground from "@/components/ui/NoiseGradientBackground";
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroBillboardCreator from "@/components/sections/hero/HeroBillboardCreator";
import MetricsGradientCards from "@/components/sections/metrics/MetricsGradientCards";
import TestimonialColumnMarqueeCards from "@/components/sections/testimonial/TestimonialColumnMarqueeCards";
import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
import PricingHighlightedCards from "@/components/sections/pricing/PricingHighlightedCards";
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
import FooterSimpleMedia from "@/components/sections/footer/FooterSimpleMedia";
import "./theme.css";
const TESTIMONIALS = [
{ name: "Jonathan", role: "Founder, SiftCoin", quote: "Genuinely impressed. We launched three campaigns in a day and every single one outperformed our old agency work.", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg" },
{ name: "Ayo", role: "Founder, SaaSi", quote: "Three years ago this kind of output would've taken a full production team. Now it's just me and an AI. Wild times.", imageSrc: "https://randomuser.me/api/portraits/men/75.jpg" },
{ name: "Sarah", role: "Growth Lead, Lumino", quote: "I was completely new to paid media. After switching to AI-generated creatives, my page views jumped 3,800% in one month.", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg" },
{ name: "Derek", role: "CMO, Venturo", quote: "We retired our freelance video roster. The AI output matches the quality and the turnaround is measured in minutes, not weeks.", imageSrc: "https://randomuser.me/api/portraits/men/36.jpg" },
{ name: "Lina", role: "Performance Marketing, Bolt", quote: "Our cost per acquisition dropped 40% in two weeks. The platform picks up on winning hooks faster than any strategist I've worked with.", imageSrc: "https://randomuser.me/api/portraits/women/57.jpg" },
{ name: "Chris", role: "Indie Maker", quote: "Went from no ad creative to 200 variations in a single afternoon. If you're bootstrapping, this is a no-brainer.", imageSrc: "https://randomuser.me/api/portraits/men/85.jpg" },
{ name: "Bright Start", role: "Consumer App", quote: "We went from zero marketing budget to profitable campaigns in under a week. The AI handles the heavy lifting.", imageSrc: "https://randomuser.me/api/portraits/men/22.jpg" },
{ name: "Tim", role: "Founder, Supatool", quote: "Found this tool last week and I can't stop using it. If you're doing any kind of UGC ads, you need to try this immediately.", imageSrc: "https://randomuser.me/api/portraits/men/45.jpg" },
{ name: "Ramona", role: "Marketing VP", quote: "Production costs down 85%, ad output up 3x. The AI-generated presenters are so realistic our audience can't tell the difference.", imageSrc: "https://randomuser.me/api/portraits/women/65.jpg" },
{ name: "Priya", role: "Head of Paid, Canopy", quote: "We used to test 5 hooks per campaign. Now we test 50. The batch creation feature completely changed our workflow.", imageSrc: "https://randomuser.me/api/portraits/women/33.jpg" },
{ name: "Marcus", role: "Founder, NovaBrand", quote: "Paid for itself within the first campaign. Our return on ad spend tripled in 30 days.", imageSrc: "https://randomuser.me/api/portraits/men/55.jpg" },
{ name: "Elena", role: "Creative Director", quote: "I was skeptical about AI video ads. Then our engagement rate doubled on the first test. I'm fully converted now.", imageSrc: "https://randomuser.me/api/portraits/women/90.jpg" },
{ name: "Michael", role: "Founder, Dip Watch", quote: "This is the content engine every DTC brand has been waiting for. Been using it for a few weeks and results are already stacking.", imageSrc: "https://randomuser.me/api/portraits/men/52.jpg" },
{ name: "Jon", role: "Founder, So SaaSi", quote: "My TikTok ad game was terrible before this. Now I generate dozens of variations and let the algorithm pick the winner.", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg" },
{ name: "Artery", role: "Agency", quote: "Our weekly ad output went from 5 to 50. The product-link-to-video pipeline alone saves our team dozens of hours per sprint.", imageSrc: "https://randomuser.me/api/portraits/women/28.jpg" },
{ name: "Nadia", role: "Media Buyer", quote: "A platform that actually understands what converts on paid social. It catches trending formats faster than any human team could.", imageSrc: "https://randomuser.me/api/portraits/women/71.jpg" },
{ name: "James", role: "Co-founder, AdScale", quote: "Plugged it into our pipeline and the creative bottleneck disappeared overnight. Scaling campaigns has never been this smooth.", imageSrc: "https://randomuser.me/api/portraits/men/41.jpg" },
{ name: "Olivia", role: "Growth Manager, Fizz", quote: "Paste a product link, get back scroll-stopping video ads. That single feature saved us 20+ hours a week.", imageSrc: "https://randomuser.me/api/portraits/women/15.jpg" },
];
const CREATOR_VIDEOS = [
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-amara.mp4", name: "Aveline", followers: "2.8M followers", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/logos/aveline.webp" },
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-chloe.mp4", name: "Maison Céleste", followers: "1.9M followers", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/logos/maison-celeste.webp" },
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-elena.mp4", name: "Violette", followers: "3.4M followers", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/logos/violette.webp" },
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-isla.mp4", name: "Noa Lane", followers: "1.1M followers", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/logos/noa-lane.webp" },
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-zara.mp4", name: "Élodie", followers: "890K followers", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/logos/elodie.webp" },
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-nadia.mp4", name: "Liora", followers: "5.2M followers", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/logos/liora.webp" },
];
export default function AiUgcTemplate() {
return (
<ReactLenis root>
<StyleProvider buttonVariant="bounce">
<NoiseGradientBackground position="fixed" />
<NavbarFloating
logo="UGCIFY"
navItems={[
{ name: "Features", href: "#features" },
{ name: "Pricing", href: "#pricing" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "FAQ", href: "#faq" },
]}
ctaButton={{ text: "Start Creating for Free", href: "#" }}
/>
<div id="hero" data-section="hero">
<HeroBillboardCreator
tag="AI-Powered UGC"
title="AI UGC Ads That"
titleHighlight="Win."
description="Turn any product into scroll-stopping video ads in minutes — powered by AI actors, smart scripts, and proven creative frameworks."
primaryButton={{ text: "Start Creating for Free", href: "#" }}
note="No credit card required"
videos={CREATOR_VIDEOS}
badgeText="AI-generated"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricsGradientCards
tag="Platform Stats"
title="Built on Data. Proven by Results."
description="Our AI learns from millions of high-performing ads to create winning content."
metrics={[
{ value: "30M+", title: "Ads Analyzed", description: "Continuously learning from top-performing creatives across every major platform.", icon: BarChart3 },
{ value: "15M+", title: "Ads Created", description: "Video ads generated for brands, agencies, and solo creators worldwide.", icon: Film },
{ value: "$1B+", title: "Ad Spend", description: "Total ad budget managed through AI-optimized creative pipelines.", icon: Megaphone },
]}
/>
</div>
<div id="features" data-section="features">
<FeaturesAlternatingSplit
tag="How It Works"
title="Your Ad Engine in Four Steps"
description="Go from blank canvas to live campaign without touching a single editing tool."
items={[
{
title: "Discover",
description: "Explore high-performing ad formats across your vertical. Filter by platform, style, and industry to find the creative angles that resonate with your audience.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/discover.webp",
},
{
title: "Generate",
description: "Generate studio-quality video ads from a single product link. Choose between authentic UGC styles, cinematic visuals, or let the AI pick the best approach for your goals.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/create.webp",
},
{
title: "Launch",
description: "Deploy directly to Meta, TikTok, and YouTube from one dashboard. Each ad is automatically formatted and optimized for the destination platform.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/launch.webp",
},
{
title: "Optimize",
description: "See real-time performance data for every variant. Identify winning hooks, scale top performers, and pause underperformers — all without leaving the platform.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-ugc/optimize.webp",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialColumnMarqueeCards
tag="Wall of Love"
title="What Our Users Are Saying"
description="Join thousands of creators and marketers already making better ads with AI."
testimonials={TESTIMONIALS}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingHighlightedCards
tag="Pricing"
title="Pick Your Plan"
description="No hidden fees. Upgrade, downgrade, or cancel anytime."
plans={[
{
tag: "Free",
price: "$0/mo",
description: "Perfect for trying things out.",
features: [
"10 credits per month",
"100 AI presenters",
"50 ad templates",
"10 generation models",
"Watermark on exports",
],
primaryButton: { text: "Get Started", href: "#" },
},
{
tag: "Pro",
price: "$49/mo",
description: "For growth teams running ads at scale.",
highlight: "Most Popular",
features: [
"300 credits per month",
"1,500 AI presenters + 3 custom avatars",
"500+ ad templates",
"100+ premium models",
"Creative analytics dashboard",
"Team seats — up to 5 members",
"Direct ad platform publishing",
"75+ language support",
],
primaryButton: { text: "Choose Pro", href: "#" },
},
{
tag: "Starter",
price: "$33/mo",
description: "For solo creators shipping ads weekly.",
features: [
"100 credits per month",
"300 AI presenters",
"200+ ad templates",
"50+ premium models",
"Watermark-free exports",
"75+ language support",
],
primaryButton: { text: "Choose Starter", href: "#" },
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqTwoColumn
tag="FAQ"
title="Got Questions?"
description="Here are the answers to the most common ones."
items={[
{ question: "What exactly does this platform do?", answer: "It turns any product into high-performing video ads using AI. You provide a link or an image, and the platform generates scroll-stopping UGC-style or cinematic ads — ready to publish." },
{ question: "Do I need any video editing skills?", answer: "None at all. The entire process is automated. Paste a product link, pick a style, and the AI handles scripting, voiceover, visuals, and formatting." },
{ question: "Which ad formats can I create?", answer: "All the major ones — vertical (9:16) for TikTok and Reels, square (1:1) for feed placements, and landscape (16:9) for YouTube. Every export is optimized for its destination." },
{ question: "How realistic are the AI presenters?", answer: "Very. The platform offers over 1,500 AI-generated presenters that look and sound natural. On the Pro plan, you can also train custom avatars based on your own brand faces." },
{ question: "Can I publish ads directly from the platform?", answer: "Yes. Connect your Meta, TikTok, or YouTube ad accounts and push creatives live without switching tools." },
{ question: "Is there a way to try it for free?", answer: "Absolutely. The free tier gives you 10 credits per month, access to 100 AI presenters, and 50 templates — no credit card needed." },
{ question: "How does batch creation work?", answer: "You can generate dozens or hundreds of ad variations in one go by mixing different hooks, scripts, presenters, and visual styles. It's built for teams that run heavy A/B testing." },
{ question: "Which languages are supported?", answer: "Over 75 languages are available out of the box, so you can localize creatives for global markets without hiring translators or voiceover artists." },
]}
/>
</div>
<FooterSimpleMedia
imageSrc="https://storage.googleapis.com/webild/default/templates/ai-ugc/footer-bg.webp"
brand="UGCIFY"
columns={[
{
title: "Product",
items: [
{ label: "Link to Video", href: "#" },
{ label: "AI Presenters", href: "#" },
{ label: "Batch Creation", href: "#" },
{ label: "Creative Remix", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Developer API", href: "#" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Content Policy", href: "#" },
],
},
]}
copyright="© 2026 UGCIFY. All rights reserved."
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

180
src/templates/ai-ugc/theme.css Normal file
View File

@@ -0,0 +1,180 @@
/* AI UGC - Light Red */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500;1,600;1,700&display=swap");
:root {
/* @colorThemes/lightTheme/lightRed */
--background: #fffafa;
--card: #ffffff;
--foreground: #1a0000;
--primary-cta: #e63946;
--primary-cta-text: #fffafa;
--secondary-cta: #ffffff;
--secondary-cta-text: #1a0000;
--accent: #f5c4c7;
--background-accent: #f09ca1;
/* @layout/border-radius/rounded */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-background)) 0%, var(--color-primary-cta) 70%);
box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-background) 20%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

215
src/templates/creative-portfolio/page.tsx Normal file
View File

@@ -0,0 +1,215 @@
import { useState } from "react";
import { ReactLenis } from "lenis/react";
import { motion } from "motion/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import NavbarFloatingLogo from "@/components/ui/NavbarFloatingLogo";
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
import HeroWorkScrollStack from "@/components/sections/hero/HeroWorkScrollStack";
import AboutTestimonialParallax from "@/components/sections/about/AboutTestimonialParallax";
import FeaturesBentoGridCta from "@/components/sections/features/FeaturesBentoGridCta";
import FaqTabbedAccordion from "@/components/sections/faq/FaqTabbedAccordion";
import ContactSplitFormParallax from "@/components/sections/contact/ContactSplitFormParallax";
import LoaderReveal from "@/components/ui/LoaderReveal";
import FooterMinimal from "@/components/sections/footer/FooterMinimal";
import CornerGlowBackground from "@/components/ui/CornerGlowBackground";
import "./theme.css";
export default function CreativePortfolioTemplate() {
const [loaderDone, setLoaderDone] = useState(false);
return (
<ReactLenis root>
<StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
<LoaderReveal
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
title="Joseph Alexander"
onComplete={() => setLoaderDone(true)}
/>
<SiteBackgroundSlot />
<CornerGlowBackground position="fixed" />
<motion.div
initial={{ y: -100, opacity: 0 }}
animate={loaderDone ? { y: 0, opacity: 1 } : { y: -100, opacity: 0 }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
>
<NavbarFloatingLogo
logo="Joseph Alexander"
logoImageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
navItems={[
{ name: "Work", href: "#work" },
{ name: "About", href: "#about" },
{ name: "Services", href: "#services" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Contact", href: "#contact" }}
/>
</motion.div>
<HeroWorkScrollStack
heroAnimationDelay={4}
tag="1 spot left this month"
title="Design that"
titleHighlight="commands attention."
description="Design engineered for performance, not just aesthetics."
descriptionMuted="I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."
primaryButton={{
text: "Book a call with me",
href: "#contact",
avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
avatarLabel: "You",
}}
sectionTag="Selected Work"
sectionTitle="Projects That Speak for Themselves"
sectionDescription="A curated selection of design work that drove real business results for ambitious brands."
items={[
{
title: "HydroFlow Product Launch",
description: "Beverage brand shoot. Every frame engineered to sell.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-1.webp",
tag: "Product Shot",
},
{
title: "Webild Athlete Campaign",
description: "Sports tech shoot. Wearables captured in raw motion.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-2.webp",
tag: "Photography",
},
{
title: "Maru Residence",
description: "Architectural interior shoot. Minimal compositions.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-3.webp",
tag: "Interior Design",
},
]}
secondaryButton={{ text: "View all my projects", href: "#" }}
/>
<TestimonialTrustCard
quote="Working with Joseph felt like having a seasoned design partner who truly understood our vision for KYMA and brought it to life in ways we hadn't even imagined."
rating={5}
author="Thomas Weber — Co-founder of KYMA"
avatars={[
{ name: "Thomas Weber", imageSrc: "https://randomuser.me/api/portraits/men/75.jpg" },
]}
/>
<div id="about" data-section="about">
<AboutTestimonialParallax
tag="About"
quote="I don't design to decorate — I design to solve. Sharp, intentional work that moves brands forward."
author="Joseph Alexander"
role="Independent Designer"
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
socialLinks={[
{ icon: "Twitter", label: "Twitter", href: "#" },
{ icon: "Linkedin", label: "LinkedIn", href: "#" },
{ icon: "Instagram", label: "Instagram", href: "#" },
]}
/>
</div>
<div id="services" data-section="services">
<FeaturesBentoGridCta
tag="Services"
title="What I Bring to the Table"
description="End-to-end creative services designed to make your brand impossible to ignore — from the first frame to the final pixel."
features={[
{ title: "Photography", description: "Art-directed shoots that capture your brand's personality. Every image is color-graded and built to stop the scroll.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp" },
{ title: "Product Design", description: "User-centered interfaces for apps and SaaS products. From wireframe to pixel-perfect UI — intuitive experiences that keep users coming back.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp" },
{ title: "Website", description: "Conversion-focused websites that look sharp and perform. Clean layouts, strategic CTAs, and responsive design that turns traffic into revenue.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp" },
{ title: "Videos", description: "Brand films and product videos engineered for engagement. Story-driven visuals that convert viewers into customers.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp" },
]}
ctaButton={{
text: "Book a call with me",
href: "#contact",
avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
avatarLabel: "You",
}}
/>
</div>
<FaqTabbedAccordion
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know before we start working together."
categories={[
{
name: "General",
items: [
{ question: "What type of clients do you work with?", answer: "I work with ambitious brands, startups, and established businesses that value premium creative work. Whether you're launching a new product or refreshing your brand identity, I bring the same level of craft and attention to detail." },
{ question: "What's your availability like?", answer: "I typically take on 2–3 projects at a time to ensure each client gets my full attention. Reach out to check my current availability — I'm happy to discuss timelines." },
{ question: "Do you work remotely or on-site?", answer: "Primarily remote, but I'm open to on-site work for shoots, workshops, or strategy sessions depending on the project scope and location." },
{ question: "Can I see more examples of your work?", answer: "Absolutely. The projects on this site are a curated selection. I'm happy to share additional case studies relevant to your industry during our initial call." },
],
},
{
name: "Pricing",
items: [
{ question: "How do you structure your pricing?", answer: "I offer project-based pricing tailored to scope and deliverables. Every engagement starts with a discovery call so I can provide an accurate, transparent quote — no surprises." },
{ question: "Do you require a deposit?", answer: "Yes, I require a 50% deposit to secure your spot and begin work. The remaining balance is due upon delivery of final assets." },
{ question: "Do you offer retainer packages?", answer: "I do. For clients with ongoing creative needs, monthly retainers offer priority access, discounted rates, and faster turnaround times." },
{ question: "What's included in a typical project quote?", answer: "Quotes include all creative direction, production, editing, and delivery of final files. Revisions are built in — I want you to be thrilled with the result." },
],
},
{
name: "Process",
items: [
{ question: "What does your process look like?", answer: "Discovery call → Creative brief → Concept development → Production → Review & refinement → Final delivery. I keep you in the loop at every stage with clear timelines and checkpoints." },
{ question: "How long does a typical project take?", answer: "Most projects wrap within 2–4 weeks depending on complexity. Larger campaigns or multi-deliverable projects may extend further, and I'll set expectations upfront." },
{ question: "How many revisions are included?", answer: "Two rounds of revisions are standard. In practice, my clients rarely need more than one — I invest heavily in understanding your vision before production begins." },
{ question: "What do you need from me to get started?", answer: "A brief overview of your brand, goals, and any existing assets or references. I'll guide you through the rest during our kickoff call." },
],
},
{
name: "Results",
items: [
{ question: "What kind of results can I expect?", answer: "My work is designed to drive measurable outcomes — higher engagement, increased conversions, and a brand presence that commands attention. I'll share relevant case studies during our call." },
{ question: "Do you track performance metrics?", answer: "While I focus on the creative, I design everything with performance in mind. I'm happy to collaborate with your marketing team to align on KPIs and measure impact." },
{ question: "Can you share client testimonials?", answer: "Yes — I have testimonials and references available. Many of my clients see 2–3x improvements in engagement after implementing new creative assets." },
{ question: "What makes your work different?", answer: "I combine strategic thinking with high-end execution. Every project is approached as a partnership — I'm invested in your success, not just delivering files." },
],
},
]}
cta={{
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
name: "More questions? Reach out anytime.",
role: "joseph@alexandercreative.com",
buttonText: "Book a call",
buttonHref: "#contact",
}}
/>
<div id="contact" data-section="contact">
<ContactSplitFormParallax
tag="Get in Touch"
title="Let's Build"
description="Have a project in mind? Drop me a message and I'll get back to you within 24 hours."
inputs={[
{ name: "name", type: "text", placeholder: "Your name", required: true },
{ name: "email", type: "email", placeholder: "Your email", required: true }
]}
textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 5, required: true }}
buttonText="Send Message"
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/contact.webp"
ctaLinks={[
{ icon: "Video", label: "Book a Call", href: "#" },
]}
/>
</div>
<FooterMinimal
brand="Alexander"
copyright="© 2026 Joseph Alexander. All rights reserved."
socialLinks={[
{ icon: "Twitter", href: "#" },
{ icon: "Linkedin", href: "#" },
{ icon: "Instagram", href: "#" },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

177
src/templates/creative-portfolio/theme.css Normal file
View File

@@ -0,0 +1,177 @@
/* Creative Portfolio - Clean White */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/neutral */
--background: #ffffff;
--card: #f5f5f5;
--foreground: #171717;
--primary-cta: #171717;
--primary-cta-text: #ffffff;
--secondary-cta: #f5f5f5;
--secondary-cta-text: #171717;
--accent: #171717;
--background-accent: #171717;
/* @layout/border-radius/rounded */
--radius: 1rem;
/* @layout/content-width/spacious */
--width-content-width: 61rem;
/* @utilities/masks */
--vw-1_5: 1.35rem;
--width-x-padding-mask-fade: 4.5rem;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: 0.62rem;
--text-xs: 0.72rem;
--text-sm: 0.82rem;
--text-base: 0.92rem;
--text-lg: 1rem;
--text-xl: 1.1rem;
--text-2xl: 1.3rem;
--text-3xl: 1.6rem;
--text-4xl: 2rem;
--text-5xl: 2.75rem;
--text-6xl: 3.3rem;
--text-7xl: 4rem;
--text-8xl: 4.5rem;
--text-9xl: 7rem;
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 85vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter Tight", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(23, 23, 23, 0.15) rgba(0, 0, 0, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter Tight", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter Tight", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/subtle */
.card {
background: var(--color-card);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/solid-dark */
.primary-button {
background: linear-gradient(180deg, #1e1e1e 0%, #0c0c0c 100%);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 4px 8px -1px rgba(0, 0, 0, 0.25), 0 12px 24px -4px rgba(0, 0, 0, 0.2), 0 24px 48px -8px rgba(0, 0, 0, 0.15);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/subtle */
.secondary-button {
background: var(--color-secondary-cta);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

205
src/templates/dentist/page.tsx Normal file
View File

@@ -0,0 +1,205 @@
import NavbarInline from "@/components/ui/NavbarInline";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductRatingCards from "@/components/sections/product/ProductRatingCards";
import AboutText from "@/components/sections/about/AboutText";
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
import TestimonialMarqueeCards from "@/components/sections/testimonial/TestimonialMarqueeCards";
import ContactSplitEmail from "@/components/sections/contact/ContactSplitEmail";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import "./theme.css";
export default function DentistTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="aurora" heroBackground="horizonGlow" buttonVariant="stagger">
<SiteBackgroundSlot />
<NavbarInline
logo="Luxury Dental"
navItems={[
{ name: "Services", href: "#services" },
{ name: "About", href: "#about" },
{ name: "Features", href: "#features" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Schedule", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroSplitKpi
tag="Excellence Since 2005"
title="California's Premier Luxury Dental Practice"
description="Experience world-class cosmetic and restorative dentistry with cutting-edge technology and personalized care."
primaryButton={{ text: "View Our Services", href: "#services" }}
secondaryButton={{ text: "Book Your Visit", href: "#contact" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/dentist/hero/hero1.avif"
kpis={[
{ value: "5000+", label: "Satisfied Patients" },
{ value: "99.8%", label: "Satisfaction Rate" },
{ value: "15+", label: "Industry Awards" },
]}
/>
</div>
<div id="services" data-section="services">
<ProductRatingCards
tag="Premium Dental Services"
title="Our Signature Services"
description="From cosmetic enhancement to restorative excellence, our comprehensive services transform smiles and improve oral health with precision and artistry."
primaryButton={{ text: "Schedule Consultation", href: "#contact" }}
products={[
{
brand: "Cosmetic",
name: "Smile Design & Whitening",
price: "From $500",
rating: 5,
reviewCount: "234",
imageSrc: "https://storage.googleapis.com/webild/default/templates/dentist/services/service1.avif",
},
{
brand: "Restorative",
name: "Dental Implants & Crowns",
price: "From $1,200",
rating: 5,
reviewCount: "312",
imageSrc: "https://storage.googleapis.com/webild/default/templates/dentist/services/service2.avif",
},
{
brand: "Advanced",
name: "Orthodontics & Aligners",
price: "From $800",
rating: 5,
reviewCount: "289",
imageSrc: "https://storage.googleapis.com/webild/default/templates/dentist/services/service3.avif",
},
]}
/>
</div>
<div id="about" data-section="about">
<AboutText
title="For over two decades, we've been California's trusted destination for luxury dental care, combining advanced technology with artistic precision to create beautiful, healthy smiles that transform lives"
primaryButton={{ text: "Meet Our Team", href: "#testimonials" }}
secondaryButton={{ text: "Learn More", href: "#contact" }}
/>
</div>
<div id="features" data-section="features">
<FeaturesMediaCards
tag="Premium Dental Excellence"
title="Why Choose Our Luxury Practice"
description="We combine artistic excellence with scientific precision, utilizing the latest technology and techniques to deliver transformative results that exceed expectations."
items={[
{
title: "Digital Technology",
description: "3D imaging, intraoral cameras, and computer-aided design for precise diagnostics and treatment planning.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/dentist/about/about1.avif",
},
{
title: "Master Craftsmanship",
description: "Award-winning dentists with decades of experience in cosmetic and restorative excellence.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/dentist/about/about2.avif",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialMarqueeCards
tag="Patient Reviews"
title="What Our Patients Say"
description="Discover why hundreds of California's discerning patients trust us for their dental care and smile transformations."
testimonials={[
{
name: "Jennifer Martinez",
role: "San Diego Patient",
quote: "The most professional and caring dental experience I've ever had. The results exceeded my expectations and the attention to detail is extraordinary.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial1.webp",
},
{
name: "Robert Chen",
role: "Business Executive",
quote: "Finally found a dentist who understands aesthetics and function. My smile is now my confidence. Highly recommended to anyone serious about quality.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial2.webp",
},
{
name: "Sarah Williams",
role: "Entertainment Industry",
quote: "This is the place where art meets science. My smile transformation has been life-changing. The expertise here is unmatched.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial3.webp",
},
{
name: "Michael Torres",
role: "Loyal Patient",
quote: "I've been a patient for 8 years. The consistent excellence, warm staff, and cutting-edge treatments keep me coming back with confidence.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image5.avif",
},
{
name: "Amanda Rodriguez",
role: "Social Media Influencer",
quote: "When your smile matters for your career, you go to the best. This practice delivered a smile that's both beautiful and natural-looking.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image6.avif",
},
{
name: "David Kim",
role: "Healthcare Professional",
quote: "The clinical precision combined with artistic vision is remarkable. This team truly understands comprehensive dental care at the highest level.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image7.avif",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitEmail
tag="Get In Touch"
title="Schedule Your Luxury Dental Experience"
description="Connect with our team to discuss your smile goals and discover how our personalized treatments can transform your dental health and confidence."
inputPlaceholder="Enter your email"
buttonText="Get Started"
imageSrc="https://storage.googleapis.com/webild/default/templates/dentist/contact/contact.avif"
/>
</div>
<FooterSimple
brand="Luxury Dental Care"
columns={[
{
title: "Services",
items: [
{ label: "Cosmetic Dentistry", href: "#services" },
{ label: "Dental Implants", href: "#services" },
{ label: "Orthodontics", href: "#services" },
{ label: "Restorative Care", href: "#services" },
],
},
{
title: "Practice",
items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#testimonials" },
{ label: "Technology", href: "#features" },
{ label: "Contact Us", href: "#contact" },
],
},
{
title: "Connect",
items: [
{ label: "Instagram", href: "#" },
{ label: "Facebook", href: "#" },
{ label: "Google Reviews", href: "#" },
{ label: "Smile Gallery", href: "#" },
],
},
]}
copyright="© 2025 Luxury Dental Care | Premium Dentistry Since 2005"
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

184
src/templates/dentist/theme.css Normal file
View File

@@ -0,0 +1,184 @@
/* Dentist - Light Blue Professional */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* Light theme with blue accents */
--background: #f7f6f7;
--card: #ffffff;
--foreground: #0c1325;
--primary-cta: #0798ff;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;
--secondary-cta-text: #0c1325;
--accent: #93c7ff;
--background-accent: #a8cde8;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/compact */
--width-content-width: clamp(40rem, 67.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/soft-shadow */
.card {
background:
linear-gradient(color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 59.26%),
linear-gradient(var(--color-card) 0%, var(--color-card) 100%),
var(--color-card);
box-shadow:
20px 18px 7px color-mix(in srgb, var(--color-accent) 0%, transparent),
2px 2px 2px color-mix(in srgb, var(--color-accent) 6.5%, transparent),
1px 1px 2px color-mix(in srgb, var(--color-accent) 2%, transparent);
border: 2px solid var(--color-secondary-cta);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/soft-shadow */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

235
src/templates/detailing/page.tsx Normal file
View File

@@ -0,0 +1,235 @@
import NavbarCentered from "@/components/ui/NavbarCentered";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroBillboardFeatures from "@/components/sections/hero/HeroBillboardFeatures";
import FeaturesStickyCards from "@/components/sections/features/FeaturesStickyCards";
import FeaturesMarqueeCards from "@/components/sections/features/FeaturesMarqueeCards";
import FeaturesComparison from "@/components/sections/features/FeaturesComparison";
import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
import FaqSimple from "@/components/sections/faq/FaqSimple";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimpleCard from "@/components/sections/footer/FooterSimpleCard";
import "./theme.css";
export default function DetailingTemplate() {
return (
<ReactLenis root>
<StyleProvider heroBackground="lightRaysCenter" buttonVariant="expand">
<NavbarCentered
logo="Elite Detail"
navItems={[
{ name: "Services", href: "#services" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "Why Us", href: "#why-us" },
{ name: "Team", href: "#team" },
{ name: "FAQ", href: "#faq" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Book Now", href: "#contact" }}
/>
<HeroBillboardFeatures
badge="Now Booking"
title="Your Car Deserves the Best"
description="Professional detailing services that restore your vehicle's showroom finish. We use premium products and proven techniques to protect and enhance every surface."
primaryButton={{ text: "Book Now", href: "#contact" }}
secondaryButton={{ text: "Our Services", href: "#services" }}
videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/hero/hero.mp4"
features={[
{
icon: "Shield",
title: "Ceramic Protection",
description: "Industry-leading coating with 5-year warranty",
},
{
icon: "Star",
title: "5-Star Rated",
description: "Trusted by 500+ happy customers",
},
{
icon: "Award",
title: "Certified Detailers",
description: "IDA certified professionals on every job",
},
]}
/>
<div id="services">
<FeaturesStickyCards
items={[
{
title: "Interior Detail",
description: "Deep cleaning of seats, carpets, dashboard, and all interior surfaces. Leather conditioning and fabric protection included.",
primaryButton: { text: "Book Interior", href: "#contact" },
leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/feature1.webp",
rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-1.webp",
},
{
title: "Exterior Detail",
description: "Hand wash, clay bar treatment, polish, and premium wax application for a mirror-like finish that lasts.",
primaryButton: { text: "Book Exterior", href: "#contact" },
leftImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-2.webp",
rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
},
{
title: "Ceramic Coating",
description: "Long-lasting ceramic protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
primaryButton: { text: "Book Ceramic", href: "#contact" },
leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features3.webp",
rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-3.webp",
},
]}
/>
</div>
<div id="testimonials">
<FeaturesMarqueeCards
tag="Testimonials"
title="Hear It From Our Clients"
description="Real results from real customers who trust us with their vehicles"
primaryButton={{ text: "Book Now", href: "#contact" }}
secondaryButton={{ text: "View Gallery", href: "#services" }}
items={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial2.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial5.webp" },
]}
/>
</div>
<div id="why-us">
<FeaturesComparison
tag="Why Us"
title="The Detailing Difference"
description="See why professional detailing is worth the investment"
primaryButton={{ text: "Get Started", href: "#contact" }}
negativeItems={[
"Automatic car washes scratch paint",
"DIY products leave swirl marks",
"No protection against UV damage",
"Interior stains and odors linger",
"Resale value drops over time",
]}
positiveItems={[
"Hand wash and paint correction",
"Flawless, swirl-free finish",
"Ceramic coating blocks UV rays",
"Deep interior sanitization",
"Maintains and boosts resale value",
]}
/>
</div>
<div id="team">
<TeamOverlayCards
tag="Our Experts"
title="Meet the Team"
description="Passionate detailers dedicated to perfection"
members={[
{
name: "Marcus Rivera",
role: "Lead Detailer",
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team1.webp",
},
{
name: "Jake Thompson",
role: "Ceramic Specialist",
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team2.webp",
},
{
name: "Daniel Cruz",
role: "Interior Expert",
imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team3.webp",
},
]}
/>
</div>
<div id="faq">
<FaqSimple
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know about our detailing services"
items={[
{
question: "How long does a full detail take?",
answer: "A full interior and exterior detail typically takes 4-6 hours depending on the size and condition of your vehicle. Ceramic coating applications may require an additional day for proper curing.",
},
{
question: "How often should I get my car detailed?",
answer: "We recommend a full detail every 3-4 months to maintain your vehicle's appearance and protect its surfaces. Ceramic coated vehicles can go longer between details.",
},
{
question: "What is ceramic coating and how long does it last?",
answer: "Ceramic coating is a liquid polymer applied to your vehicle's exterior that creates a permanent bond with the paint. It provides superior protection against UV rays, chemicals, and minor scratches, lasting 2-5 years depending on the package.",
},
{
question: "Do you offer mobile detailing services?",
answer: "Yes, we offer mobile detailing for your convenience. Our fully equipped team can come to your home or office. Mobile service availability depends on your location and the package selected.",
},
{
question: "What products do you use?",
answer: "We exclusively use premium, professional-grade products that are safe for all vehicle surfaces. Our ceramic coatings are sourced from industry-leading manufacturers with proven durability and performance.",
},
]}
/>
</div>
<div id="contact">
<ContactSplitForm
tag="Contact"
title="Get Your Free Estimate"
description="Tell us about your project and we'll get back to you within 24 hours."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
]}
textarea={{ name: "message", placeholder: "Tell us about your vehicle...", rows: 4, required: true }}
buttonText="Send Message"
videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/contact/cta-video.mp4"
/>
</div>
<FooterSimpleCard
brand="Elite Detail"
columns={[
{
title: "Services",
items: [
{ label: "Interior Detail", href: "#services" },
{ label: "Exterior Detail", href: "#services" },
{ label: "Ceramic Coating", href: "#services" },
{ label: "Full Detail Package", href: "#services" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#" },
{ label: "Our Team", href: "#team" },
{ label: "FAQ", href: "#faq" },
{ label: "Testimonials", href: "#testimonials" },
],
},
{
title: "Contact",
items: [
{ label: "(555) 987-6543", href: "tel:5559876543" },
{ label: "info@elitedetail.com", href: "mailto:info@elitedetail.com" },
{ label: "Miami, FL" },
],
},
]}
copyright="© 2026 Elite Detail. All rights reserved."
links={[
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

179
src/templates/detailing/theme.css Normal file
View File

@@ -0,0 +1,179 @@
/* Detailing - Dark & Premium Orange */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/darkTheme/premiumOrange */
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5f5f5;
--primary-cta: #ff7a1a;
--primary-cta-text: #ffffff;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #f5f5f5;
--accent: #ff7a1a;
--background-accent: #e8651a;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 122, 26, 0.3) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/gradient */
.primary-button {
background: linear-gradient(135deg, var(--color-primary-cta) 0%, var(--color-background-accent) 100%);
box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

142
src/templates/hotel/page.tsx Normal file
View File

@@ -0,0 +1,142 @@
import { useState } from "react";
import { ReactLenis } from "lenis/react";
import { motion } from "motion/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import NavbarFullscreen from "@/components/ui/NavbarFullscreen";
import HeroVideoExpand from "@/components/sections/hero/HeroVideoExpand";
import AboutParallax from "@/components/sections/about/AboutParallax";
import FeaturesAttributeCards from "@/components/sections/features/FeaturesAttributeCards";
import FeaturesMediaGrid from "@/components/sections/features/FeaturesMediaGrid";
import FeaturesRevealCardsBentoSharp from "@/components/sections/features/FeaturesRevealCardsBentoSharp";
import FooterBrand from "@/components/sections/footer/FooterBrand";
import ContactSplitFormSharp from "@/components/sections/contact/ContactSplitFormSharp";
import "./theme.css";
const HERO_VIDEO = "https://storage.googleapis.com/webild/default/templates/hotel/hero.mp4";
const HERO_IMAGE = "https://storage.googleapis.com/webild/default/templates/hotel/hero.webp";
export default function HotelTemplate() {
const [loaderDone, setLoaderDone] = useState(false);
return (
<ReactLenis root>
<StyleProvider siteBackground="none" heroBackground="none" buttonVariant="default">
<SiteBackgroundSlot />
<motion.div
initial={{ y: -100, opacity: 0 }}
animate={loaderDone ? { y: 0, opacity: 1 } : { y: -100, opacity: 0 }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
className="relative z-110"
>
<NavbarFullscreen
logo="Aurion"
navItems={[
{ name: "Rooms", href: "#rooms" },
{ name: "Experience", href: "#experience" },
{ name: "Dining", href: "#dining" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Book Now", href: "#contact" }}
/>
</motion.div>
<div id="hero" data-section="hero">
<HeroVideoExpand
title="Aurion"
videoSrc={HERO_VIDEO}
primaryButton={{ text: "Browse rooms", href: "#rooms" }}
secondaryButton={{ text: "Watch tour", href: "#tour" }}
onComplete={() => setLoaderDone(true)}
/>
</div>
<div id="about" data-section="about">
<AboutParallax
tag="About"
title="A Sanctuary for Wellness & Rejuvenation"
description="From private fitness studios to guided meditation sessions, our amenities are designed to enhance your well-being and foster a sense of harmony."
imageSrc={HERO_IMAGE}
badge="Est. 1844"
/>
</div>
<div id="rooms" data-section="rooms">
<FeaturesAttributeCards
tag="Rooms & Suites"
title="Featured Rooms"
description="Each room is a sanctuary of refined comfort, designed with meticulous attention to detail."
items={[
{ title: "The Grand Suite", tags: "Panoramic, Terrace, Italian", badge: "Guest Favourite", details: [{ icon: "Bed", label: "Beds", value: 2 }, { icon: "Bath", label: "Baths", value: 2 }, { icon: "Maximize2", label: "Sqft", value: 1450 }], imageSrc: HERO_IMAGE },
{ title: "Ocean Pavilion", tags: "Oceanfront, Serene, Bright", badge: null, details: [{ icon: "Bed", label: "Beds", value: 1 }, { icon: "Bath", label: "Baths", value: 1 }, { icon: "Maximize2", label: "Sqft", value: 980 }], imageSrc: HERO_IMAGE },
{ title: "Garden Villa", tags: "Garden, Pool, Outdoor Living", badge: "Most Popular", details: [{ icon: "Bed", label: "Beds", value: 3 }, { icon: "Bath", label: "Baths", value: 2 }, { icon: "Maximize2", label: "Sqft", value: 2200 }], imageSrc: HERO_IMAGE },
{ title: "Presidential Suite", tags: "Expansive, Chef Kitchen, Butler", badge: "Guest Favourite", details: [{ icon: "Bed", label: "Beds", value: 3 }, { icon: "Bath", label: "Baths", value: 3 }, { icon: "Maximize2", label: "Sqft", value: 3400 }], imageSrc: HERO_IMAGE },
{ title: "Heritage Room", tags: "Classic, Restored, Elegant", badge: null, details: [{ icon: "Bed", label: "Beds", value: 1 }, { icon: "Bath", label: "Baths", value: 1 }, { icon: "Maximize2", label: "Sqft", value: 850 }], imageSrc: HERO_IMAGE },
{ title: "Spa Retreat", tags: "Sauna, Soaking Tub, Wellness", badge: null, details: [{ icon: "Bed", label: "Beds", value: 2 }, { icon: "Bath", label: "Baths", value: 2 }, { icon: "Maximize2", label: "Sqft", value: 1600 }], imageSrc: HERO_IMAGE },
]}
/>
</div>
<div id="experience" data-section="amenities">
<FeaturesMediaGrid
tag="Amenities"
title="World-Class Experiences"
description="Every detail has been considered to create moments of extraordinary comfort and indulgence."
items={[
{ title: "Infinity Pool", description: "Heated oceanfront pool with panoramic sunset views", imageSrc: HERO_IMAGE },
{ title: "Private Spa", description: "Full-service wellness centre with bespoke treatments", imageSrc: HERO_IMAGE },
{ title: "Fine Dining", description: "Michelin-starred cuisine with locally sourced ingredients", imageSrc: HERO_IMAGE },
{ title: "Fitness Studio", description: "State-of-the-art equipment and personal training", imageSrc: HERO_IMAGE },
{ title: "Wine Cellar", description: "Curated collection of over 500 vintages", imageSrc: HERO_IMAGE },
{ title: "Concierge", description: "24-hour dedicated service for every request", imageSrc: HERO_IMAGE },
]}
/>
</div>
<div id="journeys" data-section="journeys">
<FeaturesRevealCardsBentoSharp
tag="Journeys"
title="The Journeys"
description="Exclusive experiences curated for Aurion guests — from cloud forests to volcanic coastlines across Costa Rica's most breathtaking landscapes."
items={[
{ title: "Cloud Forest Expedition", description: "A private guided trek through Monteverde's misty canopy — hanging bridges, rare wildlife encounters, and a chef-prepared dinner in a hidden clearing.", href: "#", imageSrc: HERO_IMAGE },
{ title: "Volcanic Hot Springs", description: "Exclusive access to secluded thermal pools fed by Arenal Volcano, paired with a volcanic mud ritual and open-air massage.", href: "#", imageSrc: HERO_IMAGE },
{ title: "Pacific Coast Sailing", description: "A full-day private catamaran journey along the Guanacaste coastline — snorkeling, whale watching, and sunset cocktails aboard.", href: "#", imageSrc: HERO_IMAGE },
{ title: "Rainforest Immersion", description: "Descend into Osa Peninsula's pristine jungle for a two-day wildlife retreat with naturalist guides and a treehouse overnight stay.", href: "#", imageSrc: HERO_IMAGE },
{ title: "Coffee Origin Trail", description: "Travel to the highlands of the Central Valley for an intimate single-origin coffee experience — from harvest to private tasting.", href: "#", imageSrc: HERO_IMAGE },
{ title: "Sunset Safari", description: "An exclusive evening wildlife drive through private reserves, ending with a starlit dinner in the savanna.", href: "#", imageSrc: HERO_IMAGE },
{ title: "Marine Sanctuary", description: "Dive into crystal-clear waters for a guided snorkeling experience among vibrant coral reefs and sea turtles.", href: "#", imageSrc: HERO_IMAGE },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitFormSharp
tag="Contact"
title="Book Your Stay"
description="Let us help you plan the perfect getaway. Our concierge team is available to assist with reservations and special requests."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
{ name: "dates", type: "text", placeholder: "Preferred Dates" },
]}
textarea={{ name: "message", placeholder: "Special Requests or Questions", rows: 4 }}
buttonText="Send Inquiry"
imageSrc={HERO_IMAGE}
/>
</div>
<FooterBrand
brand="Aurion"
columns={[
{ items: [{ label: "Rooms & Suites", href: "#rooms" }, { label: "Dining", href: "#dining" }, { label: "Amenities", href: "#experience" }] },
{ items: [{ label: "Journeys", href: "#journeys" }, { label: "Spa & Wellness", href: "#spa" }, { label: "Events", href: "#events" }] },
{ items: [{ label: "Book Now", href: "#contact" }, { label: "Location", href: "#location" }, { label: "Contact Us", href: "#contact" }] },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

193
src/templates/hotel/theme.css Normal file
View File

@@ -0,0 +1,193 @@
/* Hotel - Dark Luxury */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/darkTheme/luxury */
--background: #0f1010;
--card: #3d3d3d;
--foreground: #f5f0eb;
--primary-cta: #ffffff;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #f5f0eb;
--accent: #d4b896;
--background-accent: #4f402d;
/* @layout/border-radius/rounded */
--radius: 1rem;
/* @layout/content-width/spacious */
--width-content-width: clamp(40rem, 80vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.35rem;
--width-x-padding-mask-fade: 4.5rem;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: 0.62rem;
--text-xs: 0.72rem;
--text-sm: 0.82rem;
--text-base: 0.92rem;
--text-lg: 1rem;
--text-xl: 1.1rem;
--text-2xl: 1.3rem;
--text-3xl: 1.6rem;
--text-4xl: 2rem;
--text-5xl: 2.75rem;
--text-6xl: 3.3rem;
--text-7xl: 4rem;
--text-8xl: 4.5rem;
--text-9xl: 7rem;
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 85vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter Tight", sans-serif;
--font-serif: "Playfair Display", serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(245, 240, 235, 0.15) rgba(0, 0, 0, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter Tight", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Playfair Display", serif;
}
h1 {
font-weight: 400;
}
h2 {
font-weight: 550;
letter-spacing: -0.025em;
}
h3 {
letter-spacing: -0.015em;
}
/* WEBILD_CARD_STYLE */
/* @cards/subtle-dark */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 70%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/white */
.primary-button {
background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-foreground)) 0%, var(--color-primary-cta) 50%, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-background)) 100%);
box-shadow: inset 0 2px 3px 0 color-mix(in srgb, var(--color-foreground) 20%, transparent), inset 0 -2px 3px 0 color-mix(in srgb, var(--color-background) 25%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--color-background) 40%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/subtle-dark */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

278
src/templates/hvac/page.tsx Normal file
View File

@@ -0,0 +1,278 @@
import NavbarInline from "@/components/ui/NavbarInline";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
import FeaturesTimelineCards from "@/components/sections/features/FeaturesTimelineCards";
import TestimonialRatingCards from "@/components/sections/testimonial/TestimonialRatingCards";
import FaqSimple from "@/components/sections/faq/FaqSimple";
import ContactCta from "@/components/sections/contact/ContactCta";
import FooterSimpleMedia from "@/components/sections/footer/FooterSimpleMedia";
import "./theme.css";
export default function HvacTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="aurora" buttonVariant="arrow">
<SiteBackgroundSlot />
<NavbarInline
logo="AirPro HVAC"
navItems={[
{ name: "Services", href: "#services" },
{ name: "About", href: "#about" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Get a Quote", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroOverlay
tag="Professional HVAC Services"
title="Your Comfort Is Our Priority"
description="Professional heating, ventilation, and air conditioning services for homes and businesses. From installations to emergency repairs, we keep your climate perfect year-round."
primaryButton={{ text: "Schedule Service", href: "#contact" }}
secondaryButton={{ text: "Our Services", href: "#services" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/hvac/img-1.jpg"
avatarsSrc={[
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.jpg",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.jpg",
]}
avatarsLabel="Trusted by 500+ clients"
/>
</div>
<div id="about" data-section="about">
<AboutFeaturesSplit
tag="About Us"
title="Reliable Climate Solutions Since 2005"
description="AirPro HVAC has been keeping homes and businesses comfortable for nearly two decades. Our certified technicians deliver expert installations, maintenance, and repairs."
items={[
{
icon: "ShieldCheck",
title: "2,500+ Systems Installed",
description: "Trusted by homeowners and businesses across the region.",
},
{
icon: "Clock",
title: "24/7 Emergency Service",
description: "Round-the-clock support when you need it most.",
},
{
icon: "Award",
title: "98% Satisfaction Rate",
description: "Our commitment to quality speaks for itself.",
},
]}
imageSrc="https://storage.googleapis.com/webild/default/templates/hvac/img-2.jpg"
/>
</div>
<div id="services" data-section="services">
<FeaturesMediaCards
tag="Our Services"
title="Comprehensive HVAC Solutions"
description="From installations to emergency repairs, we have your comfort covered."
primaryButton={{ text: "Get a Quote", href: "#contact" }}
items={[
{
title: "AC Installation",
description: "Expert installation of high-efficiency air conditioning systems for homes and commercial spaces.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-4.jpg",
},
{
title: "Heating Systems",
description: "Complete furnace and heat pump installations to keep you warm through every winter.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-5.jpg",
},
{
title: "Maintenance Plans",
description: "Preventative maintenance programs that extend the life of your system and reduce energy costs.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-6.jpg",
},
{
title: "Emergency Repairs",
description: "24/7 emergency repair service — we respond fast when your system breaks down unexpectedly.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-7.jpg",
},
{
title: "Duct Cleaning",
description: "Professional duct cleaning to improve air quality and system efficiency throughout your property.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-8.jpg",
},
{
title: "System Inspections",
description: "Thorough inspections with detailed reports and transparent recommendations — no hidden fees.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-9.jpg",
},
]}
/>
</div>
<div id="why-choose" data-section="why-choose">
<FeaturesAlternatingSplit
tag="Why Choose Us"
title="Why Choose AirPro"
description="What sets us apart from the rest"
items={[
{
title: "Reliability & Trust",
description: "Looking for a dependable HVAC company? We arrive on time and do the job right. Our technicians are background-checked and professionally trained.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-4.jpg",
},
{
title: "Quality Workmanship",
description: "Our skilled technicians excel in various HVAC repairs, using only top-quality materials and proven techniques that stand the test of time.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-5.jpg",
},
{
title: "Fair & Transparent Pricing",
description: "No surprises here! We offer clear quotes and fair pricing for quality work. You'll know exactly what you're paying for before we begin.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-6.jpg",
},
]}
/>
</div>
<div id="how-it-works" data-section="how-it-works">
<FeaturesTimelineCards
tag="How It Works"
title="Our Simple Process"
description="From first call to finished job, we make HVAC service easy."
items={[
{
title: "Schedule a Call",
description: "Contact us by phone or online to describe your HVAC issue. We'll find a time that works for you.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-6.jpg",
},
{
title: "On-Site Diagnosis",
description: "A certified technician arrives on time, inspects your system, and explains the issue with a clear quote.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-7.jpg",
},
{
title: "Expert Repair",
description: "We complete the work using premium parts and proven techniques — most jobs done same day with our satisfaction guarantee.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/hvac/img-4.jpg",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialRatingCards
tag="Testimonials"
title="What Our Clients Say"
description="Hear from homeowners and businesses who trust AirPro HVAC."
testimonials={[
{
name: "James R.",
role: "Homeowner, Austin TX",
quote: "AirPro replaced our entire AC system in one day. The crew was professional, clean, and the new unit runs quieter than anything we've had before. Highly recommend.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
},
{
name: "Linda M.",
role: "Business Owner, Dallas TX",
quote: "We use AirPro for all three of our office locations. Their maintenance plans have saved us thousands in emergency repairs. Always on time, always honest.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
},
{
name: "Carlos D.",
role: "Homeowner, Houston TX",
quote: "Our furnace broke down on the coldest night of the year. AirPro had someone at our door within two hours. Fixed it on the spot. Can't thank them enough.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.jpg",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSimple
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know about our HVAC services."
primaryButton={{ text: "Contact Us", href: "#contact" }}
items={[
{
question: "Do you offer 24/7 emergency service?",
answer: "Yes! We provide round-the-clock emergency HVAC service. If your system breaks down in the middle of the night or on a weekend, call us and a technician will be at your door as soon as possible.",
},
{
question: "How often should I service my HVAC system?",
answer: "We recommend servicing your system at least twice a year — once before summer for cooling and once before winter for heating. Regular maintenance extends your system's life and keeps energy bills low.",
},
{
question: "What brands do you install and repair?",
answer: "We work with all major HVAC brands including Carrier, Trane, Lennox, Daikin, Rheem, and more. Our technicians are trained and certified across multiple manufacturers.",
},
{
question: "Do you offer financing options?",
answer: "Yes, we offer flexible financing plans for new installations and major repairs. Ask about our 0% interest options so you can stay comfortable without straining your budget.",
},
{
question: "How long does a typical installation take?",
answer: "Most residential HVAC installations are completed in one day. Larger commercial projects may take 2-3 days depending on the scope. We'll give you an accurate timeline during your consultation.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCta
tag="Get in Touch"
text="Ready to Stay Comfortable Year-Round?"
primaryButton={{ text: "Get a Free Quote", href: "#contact" }}
secondaryButton={{ text: "Call (555) 987-6543", href: "tel:5559876543" }}
/>
</div>
<FooterSimpleMedia
brand="AirPro HVAC"
columns={[
{
title: "Services",
items: [
{ label: "AC Installation", href: "#services" },
{ label: "Heating Systems", href: "#services" },
{ label: "Maintenance Plans", href: "#services" },
{ label: "Emergency Repairs", href: "#services" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#about" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Contact",
items: [
{ label: "(555) 987-6543", href: "tel:5559876543" },
{ label: "info@airprohvac.com", href: "mailto:info@airprohvac.com" },
{ label: "Austin, TX" },
],
},
]}
copyright="© 2026 | AirPro HVAC"
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
imageSrc="https://storage.googleapis.com/webild/default/templates/hvac/img-10.jpg"
/>
</StyleProvider>
</ReactLenis>
);
}

179
src/templates/hvac/theme.css Normal file
View File

@@ -0,0 +1,179 @@
/* HVAC - Blue Professional */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/blueProfessional */
--background: #f8fafc;
--card: #ffffff;
--foreground: #0f172a;
--primary-cta: #1d4ed8;
--primary-cta-text: #ffffff;
--secondary-cta: #e0e7ff;
--secondary-cta-text: #1e3a5f;
--accent: #3b82f6;
--background-accent: #60a5fa;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/gradient */
.primary-button {
background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary-cta) 75%, transparent), var(--color-primary-cta));
box-shadow: color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

256
src/templates/landscaping/page.tsx Normal file
View File

@@ -0,0 +1,256 @@
import NavbarCentered from "@/components/ui/NavbarCentered";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroOverlayTestimonial from "@/components/sections/hero/HeroOverlayTestimonial";
import AboutTestimonial from "@/components/sections/about/AboutTestimonial";
import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
import TeamGlassCards from "@/components/sections/team/TeamGlassCards";
import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
import TestimonialAvatarCard from "@/components/sections/testimonial/TestimonialAvatarCard";
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import "./theme.css";
export default function LandscapingTemplate() {
return (
<ReactLenis root>
<StyleProvider buttonVariant="stagger">
<NavbarCentered
logo="GreenScape"
navItems={[
{ name: "Services", href: "#services" },
{ name: "About", href: "#about" },
{ name: "Team", href: "#team" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Call Now", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
tag="Professional Landscaping"
title="Transform Your Outdoor Space"
description="Professional landscaping design, installation, and maintenance services. From lush gardens to stunning hardscapes, we bring your vision to life."
primaryButton={{ text: "Get Free Estimate", href: "#contact" }}
secondaryButton={{ text: "Our Services", href: "#services" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/landscaping/hero.jpg"
testimonials={[
{
name: "Sarah M.",
handle: "Homeowner",
text: "GreenScape completely transformed our backyard. The team was professional, creative, and delivered beyond our expectations.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
},
{
name: "David K.",
handle: "Property Manager",
text: "We've used GreenScape for all our commercial properties. Their maintenance plans keep everything looking pristine year-round.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
},
]}
/>
</div>
<div id="about" data-section="about">
<AboutTestimonial
tag="About GreenScape"
quote="We've been transforming outdoor spaces for over 15 years — delivering designs that homeowners love and landscapes that last."
author="James Carter"
role="Lead Designer"
videoSrc="https://storage.googleapis.com/webild/default/templates/landscaping/about-video.mp4"
/>
</div>
<div id="services" data-section="services">
<FeaturesDetailedSteps
tag="Our Services"
title="What We Do"
description="From design to maintenance, we handle every aspect of your landscape."
steps={[
{
tag: "Design",
title: "Landscape Design",
subtitle: "Custom Plans",
description: "We create tailored landscape designs that complement your property's architecture and your personal style.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-2.jpg",
},
{
tag: "Installation",
title: "Hardscape & Softscape",
subtitle: "Full Installation",
description: "From patios and walkways to gardens and trees, we handle the complete installation process.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-3.jpg",
},
{
tag: "Maintenance",
title: "Lawn & Garden Care",
subtitle: "Ongoing Service",
description: "Keep your property looking pristine year-round with our professional maintenance plans.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-4.jpg",
},
{
tag: "Irrigation",
title: "Smart Irrigation",
subtitle: "Water Management",
description: "Efficient irrigation systems that keep your landscape healthy while conserving water.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-5.jpg",
},
]}
/>
</div>
<div id="why-us" data-section="why-us">
<TeamGlassCards
tag=""
title="Why Choose GreenScape"
description="What sets us apart from the rest."
members={[
{
name: "Expert Craftsmanship",
role: "Decades of combined experience in landscape design and installation.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-6.jpg",
},
{
name: "Eco-Friendly Approach",
role: "Sustainable practices and native plant selections that thrive naturally.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-7.jpg",
},
{
name: "Full-Service Care",
role: "From initial design to ongoing maintenance, we handle everything.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-8.jpg",
},
]}
/>
</div>
<div id="team" data-section="team">
<TeamOverlayCards
tag="Our Team"
title="Meet the Experts"
description="The skilled professionals behind every beautiful landscape."
members={[
{
name: "James Carter",
role: "Lead Designer",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-11.jpg",
},
{
name: "Maria Silva",
role: "Horticulturist",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-10.jpg",
},
{
name: "Ryan Mitchell",
role: "Project Manager",
imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-9.jpg",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialAvatarCard
tag="Trusted by Homeowners"
title="Over 500 happy clients trust GreenScape to transform and maintain their outdoor spaces."
primaryButton={{ text: "Contact Now", href: "#contact" }}
avatars={[
{ name: "Sarah M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-10.jpg" },
{ name: "David K.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-11.jpg" },
{ name: "Emily R.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-4.jpg" },
{ name: "Ryan M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-9.jpg" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqTwoColumn
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know about our landscaping services."
items={[
{
question: "How long does a typical landscaping project take?",
answer: "Most residential projects take 1-3 weeks depending on scope. We'll provide a detailed timeline during your consultation so you know exactly what to expect.",
},
{
question: "Do you offer free consultations?",
answer: "Yes! We offer complimentary on-site consultations where we assess your property, discuss your vision, and provide a detailed estimate — no obligation.",
},
{
question: "What areas do you serve?",
answer: "We serve the greater metropolitan area and surrounding suburbs within a 50-mile radius. Contact us to confirm service availability in your location.",
},
{
question: "Do you provide ongoing maintenance?",
answer: "Absolutely. We offer weekly, bi-weekly, and monthly maintenance plans that include mowing, trimming, fertilization, and seasonal cleanups.",
},
{
question: "Are your practices eco-friendly?",
answer: "Yes, sustainability is core to our approach. We use native plants, organic fertilizers, smart irrigation, and environmentally responsible methods whenever possible.",
},
{
question: "Do you handle permits and HOA approvals?",
answer: "We handle all necessary permits and can work directly with your HOA to ensure your project meets community guidelines and gets approved smoothly.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Contact"
title="Get Your Free Estimate"
description="Tell us about your project and we'll get back to you within 24 hours."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
]}
textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 4, required: true }}
buttonText="Send Message"
imageSrc="https://storage.googleapis.com/webild/default/templates/landscaping/img-2.jpg"
/>
</div>
<FooterSimple
brand="GreenScape"
columns={[
{
title: "Services",
items: [
{ label: "Landscape Design", href: "#services" },
{ label: "Hardscape & Softscape", href: "#services" },
{ label: "Lawn & Garden Care", href: "#services" },
{ label: "Smart Irrigation", href: "#services" },
],
},
{
title: "Company",
items: [
{ label: "About", href: "#about" },
{ label: "Team", href: "#team" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" },
],
},
{
title: "Contact",
items: [
{ label: "(555) 123-4567", href: "tel:5551234567" },
{ label: "hello@greenscape.com", href: "mailto:hello@greenscape.com" },
{ label: "Los Angeles, CA" },
],
},
]}
copyright="© 2026 GreenScape Landscaping"
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

179
src/templates/landscaping/theme.css Normal file
View File

@@ -0,0 +1,179 @@
/* Landscaping - Natural Green */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/naturalGreen */
--background: #f7f9f4;
--card: #ffffff;
--foreground: #1a2e1a;
--primary-cta: #2d5a27;
--primary-cta-text: #ffffff;
--secondary-cta: #ffffff;
--secondary-cta-text: #2d5a27;
--accent: #4a8c3f;
--background-accent: #6fb85e;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/gradient */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

234
src/templates/luxury-travel-agency/page.tsx Normal file
View File

@@ -0,0 +1,234 @@
import { Instagram, Facebook, Linkedin } from "lucide-react";
import { ReactLenis } from "lenis/react";
import NavbarInline from "@/components/ui/NavbarInline";
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroBrandCarousel from "@/components/sections/hero/HeroBrandCarousel";
import AboutText from "@/components/sections/about/AboutText";
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
import FeaturesTaggedCards from "@/components/sections/features/FeaturesTaggedCards";
import TestimonialSplitCards from "@/components/sections/testimonial/TestimonialSplitCards";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterMinimal from "@/components/sections/footer/FooterMinimal";
import "./theme.css";
export default function LuxuryTravelAgencyTemplate() {
return (
<ReactLenis root>
<StyleProvider heroBackground="cornerGlow" buttonVariant="arrow">
<NavbarInline
logo="Luxuria"
navItems={[
{ name: "About", href: "#about" },
{ name: "Services", href: "#services" },
{ name: "Destinations", href: "#destinations" },
{ name: "Reviews", href: "#reviews" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Plan Your Trip", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroBrandCarousel
brand="Luxuria"
description="Experience the world's most extraordinary destinations with our bespoke luxury travel experiences curated just for you."
primaryButton={{ text: "Plan Your Journey", href: "#contact" }}
secondaryButton={{ text: "Explore Destinations", href: "#destinations" }}
items={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/hero/hero1.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/hero/hero2.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/hero/hero3.jpg" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/hero/hero4.jpg" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutText
title="We craft unforgettable journeys to the world's most exclusive destinations, where every detail is curated to perfection."
primaryButton={{ text: "Our Story", href: "#" }}
secondaryButton={{ text: "View Destinations", href: "#destinations" }}
/>
</div>
<div id="services" data-section="services">
<FeaturesMediaCards
tag="Services"
title="Tailored Travel Experiences"
description="From private jets to secluded villas, we handle every detail of your journey."
items={[
{
title: "Private Aviation",
description: "Charter flights and private jet services to any destination worldwide.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/services/service5.webp",
},
{
title: "Luxury Accommodations",
description: "Handpicked five-star hotels, villas, and exclusive resorts.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/services/service1.webp",
},
{
title: "Curated Experiences",
description: "Unique adventures and cultural immersions designed just for you.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/services/service4.webp",
},
{
title: "Fine Dining",
description: "Reservations at Michelin-starred restaurants and private chef services.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/services/service3.webp",
},
]}
/>
</div>
<div id="how-it-works" data-section="how-it-works">
<FeaturesDetailedSteps
tag="How It Works"
title="Your Journey Begins Here"
description="From initial consultation to your return home, we manage every detail."
steps={[
{
tag: "Step 01",
title: "Share",
subtitle: "Tell us about your dream destination",
description: "Share your travel preferences, desired experiences, and any special requirements. Our expert advisors will listen carefully to understand your vision.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/phone/phone5.webp",
},
{
tag: "Step 02",
title: "Plan",
subtitle: "Receive a bespoke travel itinerary",
description: "Our team crafts a personalized journey featuring handpicked accommodations, exclusive experiences, and seamless logistics tailored to your preferences.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/phone/phone3.webp",
},
{
tag: "Step 03",
title: "Travel",
subtitle: "Enjoy your seamless journey",
description: "Relax and enjoy every moment while we handle all the details behind the scenes. Our 24/7 concierge service ensures everything runs perfectly.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/phone/phone1.webp",
},
]}
/>
</div>
<div id="destinations" data-section="destinations">
<FeaturesTaggedCards
tag="Destinations"
title="Extraordinary Destinations"
description="Explore handpicked locations that define luxury travel."
items={[
{
tag: "Asia",
title: "Maldives Private Island",
description: "Exclusive overwater villas with direct lagoon access and private butler service.",
primaryButton: { text: "Explore", href: "#" },
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/destination/destination6.webp",
},
{
tag: "Europe",
title: "Swiss Alpine Retreat",
description: "Secluded mountain chalets with panoramic views and world-class skiing.",
primaryButton: { text: "Explore", href: "#" },
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/destination/destination5.webp",
},
{
tag: "Africa",
title: "African Safari Lodge",
description: "Intimate wildlife encounters in the heart of the Serengeti.",
primaryButton: { text: "Explore", href: "#" },
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/destination/destination1.webp",
},
{
tag: "Europe",
title: "Amalfi Coast Villa",
description: "Clifftop estates with Mediterranean views and private beach access.",
primaryButton: { text: "Explore", href: "#" },
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/destination/destination4.webp",
},
{
tag: "Asia",
title: "Kyoto Ryokan",
description: "Traditional Japanese inns with zen gardens and kaiseki dining.",
primaryButton: { text: "Explore", href: "#" },
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/destination/destination3.webp",
},
{
tag: "South America",
title: "Patagonia Eco Lodge",
description: "Remote wilderness retreats surrounded by glaciers and pristine nature.",
primaryButton: { text: "Explore", href: "#" },
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/destination/destination2.webp",
},
]}
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialSplitCards
tag="Reviews"
title="What Our Travelers Say"
description="Hear from guests who've experienced extraordinary journeys."
testimonials={[
{
tag: "Maldives",
title: "An absolutely flawless experience from start to finish",
quote: "Luxuria transformed our anniversary trip into something truly magical. Every detail was perfect, from the private transfers to the surprise sunset dinner on the beach.",
name: "Victoria Sterling",
date: "December 2024",
avatarImageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial1.webp",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial1.webp",
},
{
tag: "Tanzania",
title: "Beyond our wildest expectations",
quote: "Our safari honeymoon was nothing short of extraordinary. The lodges were spectacular, the wildlife encounters unforgettable, and the attention to detail was impeccable.",
name: "James & Elizabeth Moore",
date: "November 2024",
avatarImageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial2.webp",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial2.webp",
},
{
tag: "France",
title: "The definition of luxury travel",
quote: "From the private jet charter to the exclusive vineyard tours, Luxuria curated an experience that exceeded all my expectations. Their network of contacts opened doors I never knew existed.",
name: "Roberta Chen",
date: "October 2024",
avatarImageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial3.webp",
imageSrc: "https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial3.webp",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Contact"
title="Plan Your Journey"
description="Let us create your perfect luxury travel experience."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
{ name: "destination", type: "text", placeholder: "Dream Destination" },
]}
textarea={{ name: "message", placeholder: "Tell us about your ideal travel experience...", rows: 4 }}
buttonText="Start Planning"
imageSrc="https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/contact/contact1.webp"
/>
</div>
<FooterMinimal
brand="Luxuria"
copyright="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
socialLinks={[
{ icon: Instagram, href: "#" },
{ icon: Facebook, href: "#" },
{ icon: Linkedin, href: "#" },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

180
src/templates/luxury-travel-agency/theme.css Normal file
View File

@@ -0,0 +1,180 @@
/* Luxury Travel Agency - Warm Beige */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/warmBeige */
--background: #f6f0e9;
--card: #efe7dd;
--foreground: #3d1f2a;
--primary-cta: #3d1f2a;
--primary-cta-text: #f6f0e9;
--secondary-cta: #efe7dd;
--secondary-cta-text: #3d1f2a;
--accent: #8c4a5c;
--background-accent: #a86b7c;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(43, 24, 10, 0.3) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/solid */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/shadow */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/solid */
.secondary-button {
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
var(--color-secondary-cta);
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

285
src/templates/med-spa/page.tsx Normal file
View File

@@ -0,0 +1,285 @@
import { ShieldCheck, Clock, Award, Heart, BadgeCheck } from "lucide-react";
import { ReactLenis } from "lenis/react";
import NavbarCentered from "@/components/ui/NavbarCentered";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroOverlayMarquee from "@/components/sections/hero/HeroOverlayMarquee";
import TeamGlassCards from "@/components/sections/team/TeamGlassCards";
import FeaturesResultsComparison from "@/components/sections/features/FeaturesResultsComparison";
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
import TeamOverlayCardsGrid from "@/components/sections/team/TeamOverlayCardsGrid";
import FaqSimple from "@/components/sections/faq/FaqSimple";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimpleCard from "@/components/sections/footer/FooterSimpleCard";
import "./theme.css";
export default function MedSpaTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="aurora" heroBackground="none" buttonVariant="arrow">
<SiteBackgroundSlot />
<NavbarCentered
logo="Lumière Med Spa"
navItems={[
{ name: "Services", href: "#services" },
{ name: "Results", href: "#results" },
{ name: "Team", href: "#team" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Book Now", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroOverlayMarquee
tag="Aesthetic Medicine"
title="Where Science Meets Beauty"
description="Advanced aesthetic treatments in a serene, luxurious setting. Our board-certified specialists deliver natural-looking results tailored to you."
primaryButton={{ text: "Book an Appointment", href: "#contact" }}
secondaryButton={{ text: "(555) 320-8800", href: "tel:5553208800" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/med-spa/hero/hero.webp"
avatarsSrc={[
"https://storage.googleapis.com/webild/default/templates/med-spa/team/team-doctor-1.webp",
"https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-1.webp",
"https://storage.googleapis.com/webild/default/templates/med-spa/team/team-doctor-2.webp",
]}
avatarsLabel="Trusted by 2,000+ clients"
items={[
{ text: "Board-Certified Specialists", icon: ShieldCheck },
{ text: "Same-Day Appointments", icon: Clock },
{ text: "10+ Years Experience", icon: Award },
{ text: "Natural-Looking Results", icon: Heart },
{ text: "FDA-Approved Treatments", icon: BadgeCheck },
]}
/>
</div>
<div id="services" data-section="services">
<TeamGlassCards
tag="Our Services"
title="Treatments We Offer"
description="Personalized aesthetic treatments designed to enhance your natural beauty."
members={[
{
name: "Botox & Fillers",
role: "Smooth fine lines and restore volume",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/services/service1.webp",
},
{
name: "Laser Skin Resurfacing",
role: "Reduce scars, wrinkles, and sun damage",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/services/service2.webp",
},
{
name: "Chemical Peels",
role: "Reveal brighter, smoother skin",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/services/service3.webp",
},
{
name: "Microneedling",
role: "Boost collagen and firm your skin",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/services/service4.webp",
},
{
name: "Body Contouring",
role: "Non-invasive sculpting and tightening",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/services/service5.webp",
},
{
name: "IV Therapy",
role: "Hydration and wellness from within",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/services/service6.webp",
},
]}
/>
</div>
<div id="results" data-section="results">
<FeaturesResultsComparison
tag="Before & After"
title="Real Results"
description="See the transformations our clients experience with our treatments."
items={[
{
treatment: "Botox & Fillers",
detail: "2 sessions · 4 weeks",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-1.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-1.webp",
},
{
treatment: "Laser Resurfacing",
detail: "3 sessions · 6 weeks",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-2.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-2.webp",
},
{
treatment: "Chemical Peel",
detail: "4 sessions · 8 weeks",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-3.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-3.webp",
},
{
treatment: "Microneedling",
detail: "6 sessions · 12 weeks",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-4.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-4.webp",
},
{
treatment: "Body Contouring",
detail: "4 sessions · 8 weeks",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-5.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-5.webp",
},
{
treatment: "IV Therapy Glow",
detail: "Monthly · 3 months",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-6.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-6.webp",
},
{
treatment: "Skin Rejuvenation",
detail: "5 sessions · 10 weeks",
beforeSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/before-7.webp",
afterSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/results/after-7.webp",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialTrustCard
quote="The results are so natural — my friends just say I look well-rested. The team at Lumière made me feel completely comfortable from the first consultation."
rating={5}
author="Olivia M., Botox Client"
avatars={[
{ name: "Olivia M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-1.webp" },
{ name: "Rachel S.", imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-2.webp" },
{ name: "Danielle K.", imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-3.webp" },
{ name: "Emily T.", imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-doctor-1.webp" },
{ name: "Sophia L.", imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-doctor-2.webp" },
]}
/>
</div>
<div id="team" data-section="team">
<TeamOverlayCardsGrid
tag="Our Team"
title="Meet the Experts"
description="Board-certified professionals dedicated to your care and confidence."
members={[
{
name: "Dr. Elena Vasquez",
role: "Medical Director",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-doctor-1.webp",
},
{
name: "Emily Wright",
role: "Laser Technician",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-2.webp",
},
{
name: "Maria Lopez",
role: "Aesthetic Nurse",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-1.webp",
},
{
name: "Dr. Natalie Kim",
role: "Dermatologist",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-doctor-2.webp",
},
{
name: "Sophie Taylor",
role: "Patient Coordinator",
imageSrc: "https://storage.googleapis.com/webild/default/templates/med-spa/team/team-assistant-3.webp",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSimple
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know before your first visit."
items={[
{
question: "Is Botox safe?",
answer: "Yes. Botox has been FDA-approved for cosmetic use for over 20 years. Our board-certified injectors use precise techniques to ensure safe, natural-looking results with minimal downtime.",
},
{
question: "How long do filler results last?",
answer: "Depending on the type of filler and treatment area, results typically last 6 to 18 months. We'll discuss expected longevity during your consultation and create a maintenance plan.",
},
{
question: "What should I expect during my first visit?",
answer: "Your first visit includes a complimentary consultation where we discuss your goals, assess your skin, and recommend a personalized treatment plan. There's no pressure to commit on the same day.",
},
{
question: "Is there downtime after treatments?",
answer: "Most of our treatments have little to no downtime. Botox and fillers may cause mild redness for a few hours. Laser and microneedling may require 2-5 days of recovery depending on the intensity.",
},
{
question: "Do you offer financing options?",
answer: "Yes, we partner with CareCredit and Cherry to offer flexible financing plans. We also offer package pricing for multi-session treatments to help make your goals more affordable.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Contact"
title="Book Your Consultation"
description="Tell us about your goals and we'll create a personalized treatment plan."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
]}
textarea={{ name: "message", placeholder: "Tell us about your goals...", rows: 4, required: true }}
buttonText="Request Appointment"
imageSrc="https://storage.googleapis.com/webild/default/templates/med-spa/services/service1.webp"
/>
</div>
<FooterSimpleCard
brand="Lumière Med Spa"
columns={[
{
title: "Treatments",
items: [
{ label: "Botox & Fillers", href: "#services" },
{ label: "Laser Resurfacing", href: "#services" },
{ label: "Chemical Peels", href: "#services" },
{ label: "Microneedling", href: "#services" },
{ label: "Body Contouring", href: "#services" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" },
{ label: "Careers", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "(555) 320-8800", href: "tel:5553208800" },
{ label: "hello@lumieremedspa.com", href: "mailto:hello@lumieremedspa.com" },
{ label: "Beverly Hills, CA" },
],
},
]}
copyright="© 2026 Lumière Med Spa"
links={[
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

185
src/templates/med-spa/theme.css Normal file
View File

@@ -0,0 +1,185 @@
/* Med Spa - Clean & Professional */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/roseMauve */
--background: #fdf8f8;
--card: #feeaee;
--foreground: #2d1f2b;
--primary-cta: #d5799b;
--primary-cta-text: #ffffff;
--secondary-cta: #f5e8ec;
--secondary-cta-text: #2d1f2b;
--accent: #d5799b;
--background-accent: #d4a0b5;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(45, 74, 111, 0.3) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/soft-shadow */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/gradient */
.primary-button {
background: linear-gradient(180deg, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-accent) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
background:
linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)),
var(--color-secondary-cta);
box-shadow:
2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-primary-cta) 10%, transparent);
border: 1px solid var(--color-secondary-cta);
}

216
src/templates/plumber/page.tsx Normal file
View File

@@ -0,0 +1,216 @@
import { Wrench, Droplets, ShieldCheck } from "lucide-react";
import { ReactLenis } from "lenis/react";
import NavbarInline from "@/components/ui/NavbarInline";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroCenteredLogos from "@/components/sections/hero/HeroCenteredLogos";
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
import TestimonialRatingCards from "@/components/sections/testimonial/TestimonialRatingCards";
import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
import FaqSimple from "@/components/sections/faq/FaqSimple";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimpleCard from "@/components/sections/footer/FooterSimpleCard";
import "./theme.css";
export default function PlumberTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="floatingGradient" buttonVariant="expand">
<SiteBackgroundSlot />
<NavbarInline
logo="FlowRight"
navItems={[
{ name: "Services", href: "#services" },
{ name: "Reviews", href: "#reviews" },
{ name: "FAQ", href: "#faq" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Get Quote", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroCenteredLogos
avatarsSrc={[
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.webp",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.webp",
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.webp",
]}
avatarText="Trusted by 1,200+ homeowners"
title="Expert Plumbing You Can Trust"
description="From leaky faucets to full remodels, our licensed plumbers deliver fast, reliable service — backed by a satisfaction guarantee."
primaryButton={{ text: "Schedule Service", href: "#contact" }}
secondaryButton={{ text: "(555) 472-8100", href: "tel:5554728100" }}
logos={["Licensed & Insured", "24/7 Emergency Service", "15+ Years Experience", "100% Satisfaction Guarantee", "Free Estimates", "1,200+ Jobs Completed"]}
imageSrc="https://storage.googleapis.com/webild/default/templates/plumber/hero.webp"
/>
</div>
<div id="services" data-section="services">
<FeaturesMediaCards
tag="Our Services"
title="What We Fix"
description="Residential and commercial plumbing services — done right the first time."
items={[
{
title: "Leak Detection & Repair",
description: "Advanced leak detection technology to find and fix hidden leaks before they cause major damage to your property.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/plumber/service1.webp",
},
{
title: "Drain Cleaning",
description: "Professional drain clearing using hydro jetting and snaking to restore full flow and prevent future clogs.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/plumber/service2.webp",
},
{
title: "Water Heater Installation",
description: "Tank and tankless water heater installs with energy-efficient options to lower your utility bills.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/plumber/service3.webp",
},
{
title: "Bathroom Remodeling",
description: "Complete bathroom plumbing for renovations — fixture upgrades, pipe rerouting, and code-compliant installs.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/plumber/service4.webp",
},
{
title: "Sewer Line Repair",
description: "Trenchless sewer repair and replacement that fixes the problem without tearing up your yard.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/plumber/service5.webp",
},
{
title: "Emergency Plumbing",
description: "24/7 emergency response for burst pipes, overflows, and gas leaks — we're there when you need us most.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/plumber/service6.webp",
},
]}
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialRatingCards
tag="Testimonials"
title="What Our Customers Say"
description="Real reviews from homeowners who trust FlowRight with their plumbing."
testimonials={[
{
name: "Sarah K.",
role: "Homeowner, Denver CO",
quote: "They found a hidden leak behind our kitchen wall in minutes. Fixed it the same day and patched the drywall too. Absolutely top-notch service from start to finish.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.webp",
},
{
name: "Mike T.",
role: "Homeowner, Boulder CO",
quote: "Our water heater died on a Sunday morning. FlowRight had a new tankless unit installed by the afternoon. Fair pricing and zero pressure to upsell. Will use them again.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.webp",
},
{
name: "Jessica L.",
role: "Property Manager, Aurora CO",
quote: "We manage 40+ rental units and FlowRight handles all our plumbing. Always responsive, always professional. They've saved us a fortune in emergency repairs.",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.webp",
},
]}
/>
</div>
<div id="why-us" data-section="why-us">
<FeaturesBorderGlow
tag="Our Promise"
title="Why Choose FlowRight"
description="Numbers and values that speak for themselves."
features={[
{ icon: Wrench, title: "15+ Years of Experience", description: "Over a decade and a half of solving plumbing problems for homes and businesses across Denver." },
{ icon: Droplets, title: "1,200+ Jobs Completed", description: "From quick fixes to full remodels, we've successfully completed thousands of plumbing projects." },
{ icon: ShieldCheck, title: "Licensed & Certified", description: "Every plumber on our team is fully licensed, bonded, and insured for your peace of mind." },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSimple
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know before booking a plumber."
items={[
{
question: "Do you offer 24/7 emergency service?",
answer: "Yes. We have licensed plumbers on call around the clock, including weekends and holidays. If you have a burst pipe, gas leak, or major overflow, call us and we'll dispatch someone immediately.",
},
{
question: "Are your plumbers licensed and insured?",
answer: "Every plumber on our team is fully licensed, bonded, and insured. We carry general liability and workers' compensation coverage so you're protected from start to finish.",
},
{
question: "How much does a typical service call cost?",
answer: "We provide free estimates for most jobs. Our service call fee covers the initial inspection, and we always quote the full price before any work begins — no surprises on the bill.",
},
{
question: "Do you offer warranties on your work?",
answer: "All of our repairs and installations come with a 1-year labor warranty. Many of the parts and fixtures we install also carry manufacturer warranties of up to 10 years.",
},
{
question: "Can you help with bathroom or kitchen remodels?",
answer: "Absolutely. We handle all plumbing aspects of remodels — from rerouting supply and drain lines to installing new fixtures, showers, tubs, and dishwashers.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Contact Us"
title="Request a Free Estimate"
description="Tell us about your plumbing issue and we'll get back to you within a few hours."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number" },
]}
textarea={{ name: "message", placeholder: "Describe your plumbing issue...", rows: 4, required: true }}
buttonText="Send Request"
imageSrc="https://storage.googleapis.com/webild/default/templates/plumber/contact.webp"
/>
</div>
<FooterSimpleCard
brand="FlowRight Plumbing"
columns={[
{
title: "Services",
items: [
{ label: "Leak Detection", href: "#services" },
{ label: "Drain Cleaning", href: "#services" },
{ label: "Water Heaters", href: "#services" },
{ label: "Bathroom Remodels", href: "#services" },
{ label: "Sewer Repair", href: "#services" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#" },
{ label: "Testimonials", href: "#reviews" },
{ label: "FAQ", href: "#faq" },
{ label: "Careers", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "(555) 472-8100", href: "tel:5554728100" },
{ label: "info@flowrightplumbing.com", href: "mailto:info@flowrightplumbing.com" },
{ label: "Denver, CO" },
],
},
]}
copyright="© 2026 FlowRight Plumbing. All rights reserved."
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

180
src/templates/plumber/theme.css Normal file
View File

@@ -0,0 +1,180 @@
/* Plumber - Professional Blue */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/darkTheme/professionalBlue */
--background: #020617;
--card: #0f172a;
--foreground: #f1f5f9;
--primary-cta: #0ea5e9;
--primary-cta-text: #ffffff;
--secondary-cta: #334155;
--secondary-cta-text: #f1f5f9;
--accent: #38bdf8;
--background-accent: #0284c7;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/compact */
--width-content-width: clamp(40rem, 67.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-foreground)) 0%, var(--color-primary-cta) 70%);
box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/corner-glow */
.secondary-button {
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
var(--color-secondary-cta);
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

241
src/templates/real-estate/page.tsx Normal file
View File

@@ -0,0 +1,241 @@
import NavbarFloating from "@/components/ui/NavbarFloating";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroTiltedCards from "@/components/sections/hero/HeroTiltedCards";
import AboutMediaOverlay from "@/components/sections/about/AboutMediaOverlay";
import ProductVariantCards from "@/components/sections/product/ProductVariantCards";
import FeaturesRevealCards from "@/components/sections/features/FeaturesRevealCards";
import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
import TestimonialSplitCards from "@/components/sections/testimonial/TestimonialSplitCards";
import ContactCta from "@/components/sections/contact/ContactCta";
import FooterBasic from "@/components/sections/footer/FooterBasic";
import "./theme.css";
export default function RealEstateTemplate() {
return (
<ReactLenis root>
<StyleProvider heroBackground="gradientBars" buttonVariant="magnetic">
<NavbarFloating
logo="Luxe Properties"
navItems={[
{ name: "Properties", href: "#properties" },
{ name: "About", href: "#about" },
{ name: "Services", href: "#services" },
{ name: "Team", href: "#team" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Schedule Viewing", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroTiltedCards
tag="Premium Collections"
title="Discover Luxury Living in Dubai"
description="Exclusive properties curated for discerning buyers. Experience the pinnacle of sophistication with our award-winning real estate portfolio."
primaryButton={{ text: "Explore Properties", href: "#properties" }}
secondaryButton={{ text: "Contact Agent", href: "#contact" }}
items={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/hero/hero1.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/hero/hero2.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/hero/hero3.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/hero/hero4.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/hero/hero5.webp" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMediaOverlay
tag="About Us"
title="Your Trusted Dubai Real Estate Partner"
description="With over 15 years of excellence in Dubai's luxury real estate market, we have established ourselves as the premier boutique agency for discerning international clientele. Our expert team specializes in sourcing and curating the finest properties across Dubai's most exclusive communities."
primaryButton={{ text: "Learn Our Story", href: "#services" }}
secondaryButton={{ text: "Contact Us", href: "#contact" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/real-estate/about/about.webp"
/>
</div>
<div id="properties" data-section="properties">
<ProductVariantCards
tag="Exclusive Listings"
title="Featured Properties"
description="Handpicked luxury properties showcasing the finest real estate opportunities in Dubai's most prestigious locations."
primaryButton={{ text: "See all properties", href: "#properties" }}
products={[
{
name: "Palm Jumeirah Villa",
variant: "5 Bed Villa | Beachfront",
price: "AED 12,500,000",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/properties/property1.webp",
},
{
name: "Downtown Dubai Penthouse",
variant: "4 Bed Penthouse | City View",
price: "AED 8,750,000",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/properties/property2.webp",
},
{
name: "Emirates Hills Townhouse",
variant: "4 Bed Townhouse | Golf View",
price: "AED 6,200,000",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/properties/property3.webp",
},
]}
/>
</div>
<div id="services" data-section="services">
<FeaturesRevealCards
tag="Professional Services"
title="Our Services & Expertise"
description="Comprehensive real estate solutions tailored to meet your unique needs and aspirations."
items={[
{
title: "Property Selection",
description: "Exclusive access to off-market and hand-selected luxury properties.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/services/service1.webp",
},
{
title: "Investment Advisory",
description: "Expert insights into market trends and investment opportunities.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/services/service2.webp",
},
{
title: "Negotiation & Closing",
description: "Strategic negotiation and seamless transaction management.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/services/service3.webp",
},
{
title: "Legal Compliance",
description: "Full support with documentation, permits, and regulatory compliance.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/services/service4.webp",
},
]}
/>
</div>
<div id="team" data-section="team">
<TeamOverlayCards
tag="Our Leadership"
title="Executive Team"
description="Meet the visionary leaders guiding Luxe Properties with expertise and dedication."
members={[
{
name: "Hassan Al-Maktoum",
role: "CEO",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/team/team1.webp",
},
{
name: "Layla Al-Mansoori",
role: "COO",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/team/team2.webp",
},
{
name: "Marcus Wellington",
role: "CIO",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/team/team3.webp",
},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricsIconCards
tag="Track Record"
title="By The Numbers"
description="Our proven track record speaks to our commitment and success in Dubai's luxury real estate market."
metrics={[
{ icon: "Home", title: "Properties Sold", value: "450+" },
{ icon: "Users", title: "Satisfied Clients", value: "650+" },
{ icon: "DollarSign", title: "Total Value", value: "$2.3B" },
{ icon: "TrendingUp", title: "Countries", value: "45" },
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialSplitCards
tag="Client Testimonials"
title="What Our Clients Say"
description="Experience through the words of satisfied buyers and investors who found their dream properties with us."
testimonials={[
{
tag: "Premium Portfolio",
title: "Exceptional Service & Market Expertise",
quote: "The team at Luxe Properties demonstrated outstanding knowledge of the Dubai market. Their negotiation skills saved me significant time and money. I would not hesitate to recommend them for any luxury property transaction.",
name: "Ahmed Al Mansouri",
date: "September 2024",
avatarImageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/testimonials/avatar1.webp",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/testimonials/testimonial1.webp",
},
{
tag: "Penthouse Collection",
title: "A Smooth & Sophisticated Experience",
quote: "Finding a penthouse that matched my exacting standards seemed impossible, yet within weeks, the team presented three exceptional options. Their professionalism and attention to detail were impeccable throughout.",
name: "Sarah Johnson",
date: "August 2024",
avatarImageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/testimonials/avatar2.webp",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/testimonials/testimonial2.webp",
},
{
tag: "Investment Advisory",
title: "Trusted Partner for International Clients",
quote: "As a foreign investor, I appreciated the comprehensive legal and financial guidance. The team navigated complex regulations effortlessly, allowing me to invest with complete confidence.",
name: "Michael Chen",
date: "July 2024",
avatarImageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/testimonials/avatar3.webp",
imageSrc: "https://storage.googleapis.com/webild/default/templates/real-estate/testimonials/testimonial3.webp",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCta
tag="Get In Touch"
text="Ready to Find Your Dream Property?"
primaryButton={{ text: "Schedule Consultation", href: "#contact" }}
secondaryButton={{ text: "Browse Listings", href: "#properties" }}
/>
</div>
<FooterBasic
columns={[
{
title: "Company",
items: [
{ label: "About Us", href: "#about" },
{ label: "Our Services", href: "#services" },
{ label: "Executive Team", href: "#team" },
{ label: "Properties", href: "#properties" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Resources",
items: [
{ label: "Investment Guide", href: "#" },
{ label: "Market Reports", href: "#" },
{ label: "FAQ", href: "#" },
{ label: "Blog", href: "#" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
leftText="© 2025 Luxe Properties Dubai. All rights reserved."
rightText="Luxury Real Estate Excellence"
/>
</StyleProvider>
</ReactLenis>
);
}

179
src/templates/real-estate/theme.css Normal file
View File

@@ -0,0 +1,179 @@
/* Real Estate - Elegant Light */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/elegantLight */
--background: #f0f0f0;
--card: #fafafa;
--foreground: #1a1a1a;
--primary-cta: #1a1a1a;
--primary-cta-text: #f0f0f0;
--secondary-cta: #e8e8e8;
--secondary-cta-text: #1a1a1a;
--accent: #c89b3c;
--background-accent: #c89b3c;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/gradient */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

287
src/templates/roofing/page.tsx Normal file
View File

@@ -0,0 +1,287 @@
import NavbarCentered from "@/components/ui/NavbarCentered";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
import FeaturesRevealCards from "@/components/sections/features/FeaturesRevealCards";
import MetricsMediaCards from "@/components/sections/metrics/MetricsMediaCards";
import FeaturesDetailedCards from "@/components/sections/features/FeaturesDetailedCards";
import TestimonialOverlayCards from "@/components/sections/testimonial/TestimonialOverlayCards";
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import "./theme.css";
export default function RoofingTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="none" buttonVariant="elastic">
<SiteBackgroundSlot />
<NavbarCentered
logo="Summit Roofing"
navItems={[
{ name: "About", href: "#about" },
{ name: "Services", href: "#services" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "FAQ", href: "#faq" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Free Estimate", href: "#contact" }}
/>
<div id="hero" data-section="hero">
<HeroBillboard
avatarsSrc={[
"https://storage.googleapis.com/webild/default/templates/roofing/robert-thompson.webp",
"https://storage.googleapis.com/webild/default/templates/roofing/maria-gonzalez.webp",
"https://storage.googleapis.com/webild/default/templates/roofing/steve-amy-collins.webp",
"https://storage.googleapis.com/webild/default/templates/roofing/patricia-nguyen.webp",
]}
avatarsLabel="500+ Happy Customers"
title="Your Roof. Our Reputation."
description="Trusted by homeowners for over 25 years. From storm damage repairs to full roof replacements, Summit Roofing delivers quality craftsmanship you can count on."
primaryButton={{ text: "Get Free Estimate", href: "#contact" }}
secondaryButton={{ text: "Our Services", href: "#services" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/roofing/hero-main.webp"
/>
</div>
<div id="about" data-section="about">
<AboutFeaturesSplit
tag="About Us"
title="Built on Trust. Backed by Results."
description="Summit Roofing has been protecting homes since 1999. We combine old-school craftsmanship with modern materials and techniques to deliver roofs that last a lifetime."
items={[
{
icon: "Shield",
title: "Licensed & Insured",
description: "Fully licensed, bonded, and insured for your complete peace of mind.",
},
{
icon: "Wrench",
title: "Lifetime Warranty",
description: "Every installation backed by our industry-leading lifetime workmanship warranty.",
},
{
icon: "Search",
title: "Free Inspections",
description: "Complimentary roof inspections with honest assessments — no pressure, no hidden fees.",
},
]}
imageSrc="https://storage.googleapis.com/webild/default/templates/roofing/hero.webp"
/>
</div>
<div id="services" data-section="services">
<FeaturesRevealCards
tag="Our Services"
title="Our Roofing Services"
description="From new installations to emergency repairs, we have your roof covered."
items={[
{
title: "Roof Installation",
description: "Complete roof installations using premium materials from GAF, Owens Corning, and CertainTeed.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/roofing-installation.webp",
},
{
title: "Roof Repair",
description: "Fast, reliable repairs for leaks, missing shingles, flashing damage, and storm damage.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/roofing-repair.webp",
},
{
title: "Roof Inspection",
description: "Detailed inspections with photo documentation and transparent repair recommendations.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/roofing-inspection.webp",
},
{
title: "Emergency Services",
description: "24/7 emergency tarping and repairs when storms hit. We respond within hours, not days.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/emergency-services.webp",
},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricsMediaCards
tag="Our Track Record"
title="The Numbers Speak for Themselves"
description="Decades of experience and thousands of satisfied homeowners stand behind every Summit roof."
metrics={[
{
value: "500+",
title: "Roofs Completed",
description: "Over 500 residential and commercial roofing projects delivered on time and on budget.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/roofs-completed.webp",
},
{
value: "25+",
title: "Years Experience",
description: "A quarter century of protecting homes with quality materials and expert installation.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/years-experience.webp",
},
{
value: "98%",
title: "Customer Satisfaction",
description: "Nearly every homeowner we work with recommends Summit Roofing to their friends and neighbors.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/customer-satisfaction.webp",
},
]}
/>
</div>
<div id="process" data-section="process">
<FeaturesDetailedCards
tag="How We Work"
title="Our Process"
description="From first call to final inspection, our process is designed to be simple, transparent, and stress-free."
items={[
{
title: "Free Inspection",
description: "We start with a thorough roof inspection and provide an honest assessment with photos — completely free, no obligations.",
tags: ["Schedule Online", "Photo Report", "Honest Recommendation"],
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/free-inspection.webp",
},
{
title: "Custom Proposal",
description: "You'll receive a clear, itemized proposal with material options, timeline, and pricing — no hidden fees or surprises.",
tags: ["Transparent Pricing", "Insurance Assistance", "Material Selection"],
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/custom-proposal.webp",
},
{
title: "Expert Installation",
description: "Our certified crew handles everything — from tear-off to cleanup. Most jobs are completed in just 1-2 days.",
tags: ["Certified Crew", "Premium Materials", "Full Cleanup"],
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/about.webp",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialOverlayCards
tag="Testimonials"
title="What Our Customers Say"
description="Don't just take our word for it — hear from homeowners who trust Summit with their roofs."
testimonials={[
{
name: "Robert Thompson",
role: "Homeowner",
company: "Dallas, TX",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/robert-thompson.webp",
},
{
name: "Maria Gonzalez",
role: "Homeowner",
company: "Arlington, TX",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/maria-gonzalez.webp",
},
{
name: "Steve & Amy Collins",
role: "Homeowners",
company: "Frisco, TX",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/steve-amy-collins.webp",
},
{
name: "Patricia Nguyen",
role: "Homeowner",
company: "McKinney, TX",
rating: 5,
imageSrc: "https://storage.googleapis.com/webild/default/templates/roofing/patricia-nguyen.webp",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqTwoColumn
tag="FAQ"
title="Frequently Asked Questions"
description="Get answers to common questions about our roofing services, warranties, and process."
items={[
{
question: "How long does a typical roof replacement take?",
answer: "Most residential roof replacements are completed in 1-3 days depending on the size and complexity of the project. We'll provide an estimated timeline during your free consultation.",
},
{
question: "Do you help with insurance claims?",
answer: "Yes! We work directly with all major insurance companies and guide you through the entire claims process — from initial inspection to final paperwork. Our team ensures you get the coverage you deserve.",
},
{
question: "What roofing materials do you use?",
answer: "We use premium materials from trusted manufacturers like GAF, Owens Corning, and CertainTeed. We offer asphalt shingles, metal roofing, tile, and flat roof systems to match your home and budget.",
},
{
question: "What does your warranty cover?",
answer: "Our lifetime workmanship warranty covers all labor and installation defects. Additionally, manufacturer warranties cover the materials themselves — typically 25-50 years depending on the product.",
},
{
question: "How do I know if my roof needs replacing?",
answer: "Common signs include missing or curling shingles, granules in gutters, visible sagging, daylight through the attic, and a roof age over 20 years. We offer free inspections to assess your roof's condition.",
},
{
question: "Do you offer financing options?",
answer: "Yes, we offer flexible financing plans with competitive rates so you can protect your home without straining your budget. Ask about our 0% interest options during your free estimate.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Contact Us"
title="Get Your Free Estimate"
description="Fill out the form below and one of our roofing experts will get back to you within 24 hours."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
{ name: "phone", type: "tel", placeholder: "Your Phone Number" },
]}
textarea={{ name: "message", placeholder: "Tell us about your roofing needs...", rows: 5, required: true }}
buttonText="Request Free Estimate"
imageSrc="https://storage.googleapis.com/webild/default/templates/roofing/contact.webp"
/>
</div>
<FooterSimple
brand="Summit Roofing"
columns={[
{
title: "Services",
items: [
{ label: "Roof Installation", href: "#services" },
{ label: "Roof Repair", href: "#services" },
{ label: "Roof Inspection", href: "#services" },
{ label: "Emergency Services", href: "#services" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#about" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" },
{ label: "Free Estimate", href: "#contact" },
],
},
{
title: "Contact",
items: [
{ label: "(555) 123-4567", href: "tel:5551234567" },
{ label: "info@summitroofing.com", href: "mailto:info@summitroofing.com" },
{ label: "Dallas, TX" },
],
},
]}
copyright="© 2026 | Summit Roofing"
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

180
src/templates/roofing/theme.css Normal file
View File

@@ -0,0 +1,180 @@
/* Roofing - Professional Dark */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/darkTheme/warmStoneOrange */
--background: #1c1917;
--card: #292524;
--foreground: #fafaf9;
--primary-cta: #ea6720;
--primary-cta-text: #ffffff;
--secondary-cta: #44403c;
--secondary-cta-text: #fafaf9;
--accent: #f97316;
--background-accent: #fb923c;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/compact */
--width-content-width: clamp(40rem, 67.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-foreground)) 0%, var(--color-primary-cta) 70%);
box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/corner-glow */
.secondary-button {
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
var(--color-secondary-cta);
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

196
src/templates/saas/page.tsx Normal file
View File

@@ -0,0 +1,196 @@
import { Zap, Shield, Layers, Users, Rocket, Target, Clock, Globe } from "lucide-react";
import { ReactLenis } from "lenis/react";
import NavbarInline from "@/components/ui/NavbarInline";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroCenteredLogos from "@/components/sections/hero/HeroCenteredLogos";
import FeaturesBento from "@/components/sections/features/FeaturesBento";
import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
import ContactCta from "@/components/sections/contact/ContactCta";
import FooterSimpleReveal from "@/components/sections/footer/FooterSimpleReveal";
import "./theme.css";
export default function SaasTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="aurora" heroBackground="lightRaysCenter" buttonVariant="arrow">
<SiteBackgroundSlot />
<NavbarInline
logo="Flowbase"
navItems={[
{ name: "Features", href: "#features" },
{ name: "Pricing", href: "#pricing" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Get Started", href: "#pricing" }}
/>
<div id="hero" data-section="hero">
<HeroCenteredLogos
avatarsSrc={[
"https://storage.googleapis.com/webild/default/templates/luxury-travel-agency/testimonial/testimonial1.webp",
"https://storage.googleapis.com/webild/default/templates/skincare/image5.avif",
"https://storage.googleapis.com/webild/default/templates/skincare/image7.avif",
"https://storage.googleapis.com/webild/default/templates/skincare/image8.avif",
]}
avatarText="Trusted by 1000+ users"
title="Build beautiful products faster than ever before"
description="A modern platform designed for teams who want to ship fast without sacrificing quality or design consistency."
primaryButton={{ text: "Start Free Trial", href: "#pricing" }}
secondaryButton={{ text: "Watch Demo", href: "#features" }}
logos={["Vercel", "Stripe", "GitHub", "Figma", "Notion", "Linear"]}
imageSrc=""
hideMedia
/>
</div>
<div id="features" data-section="features">
<FeaturesBento
tag="Platform"
title="Everything you need to scale"
description="Powerful features designed to help your team move faster and build better products together."
features={[
{
title: "Real-time Analytics",
description: "Track performance metrics and user behavior with our powerful analytics dashboard.",
bentoComponent: "animated-bar-chart",
},
{
title: "Lightning Fast",
description: "Built on modern infrastructure for sub-100ms response times globally.",
bentoComponent: "info-card-marquee",
infoCards: [
{ icon: Zap, label: "Latency", value: "<50ms" },
{ icon: Globe, label: "Regions", value: "12+" },
{ icon: Clock, label: "Uptime", value: "99.9%" },
],
},
{
title: "Enterprise Security",
description: "SOC 2 compliant with end-to-end encryption and role-based access control.",
bentoComponent: "orbiting-icons",
centerIcon: Shield,
orbitIcons: [Layers, Users, Target],
},
]}
/>
</div>
<div data-section="features-icon">
<FeaturesIconCards
tag="Why Choose Us"
title="Built by developers, for developers"
description="We understand the challenges of modern software development because we face them every day."
features={[
{ icon: Layers, title: "Modular Architecture", description: "Build with composable components that scale with your needs." },
{ icon: Rocket, title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development." },
{ icon: Shield, title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards." },
{ icon: Zap, title: "Lightning Fast", description: "Optimized for performance with sub-second response times." },
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialTrustCard
quote="This platform has completely transformed how we build products. The developer experience is unmatched and we've shipped 3x faster since switching."
rating={5}
author="Sarah Chen, CTO at TechFlow"
avatars={[
{ name: "Sarah Chen", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image5.avif" },
{ name: "User 2", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image6.avif" },
{ name: "User 3", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image7.avif" },
{ name: "User 4", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image8.avif" },
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingLayeredCards
tag="Pricing"
title="Simple, transparent pricing"
description="Choose the plan that fits your team. All plans include a 14-day free trial."
plans={[
{
tag: "Starter",
price: "$29/mo",
description: "Perfect for small teams getting started",
primaryButton: { text: "Start Free Trial", href: "#" },
features: ["Up to 5 team members", "10GB storage", "Basic analytics", "Email support", "API access"],
},
{
tag: "Pro",
price: "$79/mo",
description: "For growing teams that need more power",
primaryButton: { text: "Start Free Trial", href: "#" },
features: ["Up to 20 team members", "100GB storage", "Advanced analytics", "Priority support", "Custom integrations", "SSO authentication"],
},
{
tag: "Enterprise",
price: "Custom",
description: "For large organizations with custom needs",
primaryButton: { text: "Contact Sales", href: "#contact" },
features: ["Unlimited team members", "Unlimited storage", "Custom analytics", "Dedicated support", "Custom contracts", "On-premise option"],
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCta
tag="Get Started"
text="Join thousands of developers building better products with our platform."
primaryButton={{ text: "Start Free Trial", href: "#pricing" }}
secondaryButton={{ text: "Talk to Sales", href: "#" }}
/>
</div>
<FooterSimpleReveal
brand="Flowbase"
columns={[
{
title: "Product",
items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Changelog", href: "#" },
{ label: "Roadmap", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" },
],
},
{
title: "Resources",
items: [
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Guides", href: "#" },
{ label: "Support", href: "#" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Security", href: "#" },
],
},
]}
copyright="© 2025 Flowbase. All rights reserved."
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

178
src/templates/saas/theme.css Normal file
View File

@@ -0,0 +1,178 @@
/* SaaS - Dark Purple */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/darkTheme/lightPurple */
--background: #050012;
--card: #040121;
--foreground: #f0e6ff;
--primary-cta: #c89bff;
--primary-cta-text: #050012;
--secondary-cta: #1d123b;
--secondary-cta-text: #f0e6ff;
--accent: #684f7b;
--background-accent: #65417c;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(200, 155, 255, 0.3) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-glow */
.card {
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 5%) -35%, var(--color-card) 65%);
box-shadow: 0px 0px 10px 4px color-mix(in srgb, var(--color-accent) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}

152
src/templates/skincare-luxury/page.tsx Normal file
View File

@@ -0,0 +1,152 @@
import NavbarDropdown from "@/components/ui/NavbarDropdown";
import { ReactLenis } from "lenis/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroBillboardTiltedCarousel from "@/components/sections/hero/HeroBillboardTiltedCarousel";
import ProductVariantCards from "@/components/sections/product/ProductVariantCards";
import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBrand from "@/components/sections/footer/FooterBrand";
import "./theme.css";
export default function SkincareLuxuryTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="cornerGlow" heroBackground="lightRaysCorner" buttonVariant="elastic">
<SiteBackgroundSlot />
<NavbarDropdown
logo="UMBRA"
navItems={[
{ name: "Collection", href: "#products" },
{ name: "Craft", href: "#features" },
{ name: "Journal", href: "#blog" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Shop Now", href: "#products" }}
/>
<div id="hero" data-section="hero">
<HeroBillboardTiltedCarousel
tag="Luxury Fragrance"
title="A Fragrance That Lingers Long After You Leave"
description="Discover our award-winning perfumes crafted with rare botanicals and master perfumery. Find your signature scent — the one they never forget."
primaryButton={{ text: "Explore Collection", href: "#products" }}
secondaryButton={{ text: "Our Craft", href: "#features" }}
items={[
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/hero-1.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/hero-2.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/hero-3.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/hero-4.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/hero-5.webp" },
{ imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/hero-6.webp" },
]}
/>
</div>
<div id="products" data-section="products">
<ProductVariantCards
tag="Best Sellers"
title="Featured Collection"
description="Discover our bestselling fragrances composed with rare essences and the finest ingredients from around the world."
products={[
{ name: "Solum Eau de Parfum", variant: "50ml • Earthy & Warm", price: "$185", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/product-1.webp" },
{ name: "Aura Eau de Parfum", variant: "50ml • Floral & Soft", price: "$165", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/product-2.webp" },
{ name: "Velour Body Mist", variant: "100ml • Light & Fresh", price: "$125", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/product-3.webp" },
{ name: "Noir Absolu Parfum", variant: "30ml • Rich & Intense", price: "$195", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/product-4.webp" },
]}
/>
</div>
<div id="features" data-section="features">
<FeaturesAlternatingSplit
tag="Perfumery Craft"
title="The Art Behind Our Fragrances"
description="Each perfume is meticulously composed with rare essences and noble raw materials to create scents that captivate and endure."
items={[
{ title: "Rare Ingredient Sourcing", description: "We source precious essences from sustainable fields worldwide — Grasse rose, Madagascan vanilla, and Italian bergamot at their peak.", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/features/feature-1.webp" },
{ title: "Master Perfumers", description: "Every composition is crafted by world-renowned noses who balance top, heart, and base notes into unforgettable olfactory journeys.", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/features/feature-2.webp" },
{ title: "Lasting Sillage", description: "Our concentrated formulas are designed for exceptional longevity — a single application carries you beautifully from dawn to dusk.", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/features/feature-3.webp" },
]}
/>
</div>
<div id="influencers" data-section="influencers">
<FeaturesMediaCards
tag="Community"
title="Worn By Those Who Set The Standard"
description="The women shaping culture choose UMBRA as their signature."
items={[
{ title: "Amara Osei", description: " ", videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-amara.mp4" },
{ title: "Chloe Marchand", description: " ", videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-chloe.mp4" },
{ title: "Elena Vasquez", description: " ", videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-elena.mp4" },
{ title: "Isla Montgomery", description: " ", videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-isla.mp4" },
{ title: "Zara Kimani", description: " ", videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-zara.mp4" },
{ title: "Nadia Petrova", description: " ", videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-nadia.mp4" },
]}
/>
</div>
<div id="blog" data-section="blog">
<BlogSimpleCards
tag="Journal"
title="The UMBRA Journal"
description="Stories of scent, craft, and the women who inspire us. Explore the world behind our fragrances."
items={[
{ category: "Fragrance Notes", title: "The Art of Layering Scents for Every Season", excerpt: "Discover how to combine UMBRA fragrances for a signature scent that evolves with you throughout the day.", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/blog/blog-1.webp", authorName: "Camille Laurent", authorImageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/blog/authors/author-1.webp", date: "Feb 2026" },
{ category: "Behind the Bottle", title: "From Grasse to Your Vanity: Sourcing Rose Absolute", excerpt: "A journey through the fields of Provence where our master perfumers hand-select the rarest rose petals.", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/blog/blog-2.webp", authorName: "Elena Vasquez", authorImageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/blog/authors/author-2.webp", date: "Jan 2026" },
{ category: "Women of UMBRA", title: "How Amara Osei Found Her Signature Scent", excerpt: "The model and entrepreneur shares why Noir Absolu became the fragrance she never leaves the house without.", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/blog/blog-3.webp", authorName: "Nadia Petrova", authorImageSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/blog/authors/author-3.webp", date: "Jan 2026" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
tag="Support"
title="Frequently Asked Questions"
description="Everything you need to know about our luxury fragrances, ingredients, and satisfaction guarantee."
items={[
{ question: "What makes UMBRA fragrances different from other luxury brands?", answer: "UMBRA combines rare natural essences with master perfumery techniques. Every composition is developed over months of refinement to deliver extraordinary depth and longevity." },
{ question: "How long does the fragrance last on skin?", answer: "Most of our Eau de Parfums last 8-12 hours on skin. Our Parfum concentrations can last up to 16 hours. For best results, apply to pulse points." },
{ question: "Are your fragrances suitable for sensitive skin?", answer: "Our perfumes are formulated with high-quality, dermatologically considered ingredients. They are free from common irritants and suitable for most skin types." },
{ question: "Do you offer a satisfaction guarantee?", answer: "We're confident in our compositions. If a fragrance doesn't feel right within 14 days of purchase, we offer a full refund—no questions asked." },
{ question: "Are your ingredients natural or synthetic?", answer: "We blend premium natural essences — oud, jasmine, rose — with refined aroma molecules for stability and projection." },
{ question: "How do I choose the right fragrance for me?", answer: "Start with our Discovery Set to explore all four scents. Wear each for a full day to find your match." },
]}
imageSrc="https://storage.googleapis.com/webild/default/templates/skincare-luxury/faq-image.webp"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Contact"
title="Get in Touch"
description="Have a question or looking for your signature scent? We'd love to hear from you."
inputs={[
{ name: "name", type: "text", placeholder: "Your name", required: true },
{ name: "email", type: "email", placeholder: "your@email.com", required: true },
{ name: "phone", type: "tel", placeholder: "+1 (555) 000-0000" },
{ name: "subject", type: "text", placeholder: "How can we help?", required: true },
]}
textarea={{ name: "message", placeholder: "Tell us about your fragrance preferences...", required: true }}
buttonText="Send Message"
imageSrc="https://storage.googleapis.com/webild/default/templates/skincare-luxury/contact.webp"
/>
</div>
<FooterBrand
brand="UMBRA"
columns={[
{ items: [{ label: "Shop", href: "#products" }, { label: "Our Craft", href: "#features" }, { label: "Why UMBRA", href: "#metrics" }] },
{ items: [{ label: "Our Story", href: "#" }, { label: "Sustainability", href: "#" }, { label: "Community", href: "#influencers" }] },
{ items: [{ label: "Customer Care", href: "#" }, { label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms & Conditions", href: "#" }, { label: "Return Policy", href: "#" }] },
]}
/>
</StyleProvider>
</ReactLenis>
);
}

189
src/templates/skincare-luxury/theme.css Normal file
View File

@@ -0,0 +1,189 @@
/* Skincare Luxury - Rose Luxury */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/roseLuxury */
--background: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #511f1f;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #8f3838;
--background-accent: #c9725c;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/medium */
--width-content-width: clamp(40rem, 72.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/layered-gradient */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/radial-glow */
.primary-button {
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%);
box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--color-background) 50%, transparent);
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
background: var(--color-secondary-cta);
}
/* Verified badge for influencer names */
.verified-name::after {
content: "";
display: inline-block;
width: 1.1em;
height: 1.1em;
margin-left: 0.3em;
vertical-align: middle;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b82b40'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}

209
src/templates/skincare/page.tsx Normal file
View File

@@ -0,0 +1,209 @@
import { Leaf, Droplets, Sprout, Wind, Globe, Truck, Package } from "lucide-react";
import { ReactLenis } from "lenis/react";
import NavbarFloating from "@/components/ui/NavbarFloating";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import HeroBillboardBrand from "@/components/sections/hero/HeroBillboardBrand";
import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
import FeaturesBento from "@/components/sections/features/FeaturesBento";
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimpleCard from "@/components/sections/footer/FooterSimpleCard";
import "./theme.css";
export default function SkincareTemplate() {
return (
<ReactLenis root>
<StyleProvider siteBackground="aurora" buttonVariant="shift">
<SiteBackgroundSlot />
<NavbarFloating
logo="Luminé Skincare"
navItems={[
{ name: "Products", href: "#products" },
{ name: "About", href: "#about" },
{ name: "Benefits", href: "#benefits" },
{ name: "Reviews", href: "#reviews" },
{ name: "Contact", href: "#contact" },
]}
ctaButton={{ text: "Shop Now", href: "#products" }}
/>
<div id="hero" data-section="hero">
<HeroBillboardBrand
brand="Luminé"
description="Pure, natural skincare formulated for radiant, healthy skin. Discover the power of botanical ingredients and scientific innovation."
primaryButton={{ text: "Call Us", href: "tel:5551234567" }}
secondaryButton={{ text: "Email Us", href: "mailto:hello@lumine.com" }}
imageSrc="https://storage.googleapis.com/webild/default/templates/skincare/hero.webp"
/>
</div>
<div id="about" data-section="about">
<AboutTextSplit
title="Crafted with nature's finest elements"
descriptions={[
"Our skincare line combines cutting-edge science with natural, sustainably-sourced ingredients to deliver exceptional results for your skin.",
"Each product is carefully formulated to nourish, protect, and revitalize your complexion, helping you achieve the radiant, healthy skin you deserve.",
]}
primaryButton={{ text: "Learn More", href: "#benefits" }}
/>
</div>
<div id="products" data-section="products">
<ProductMediaCards
tag="Our Collection"
title="Our Signature Collection"
description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
products={[
{
name: "Hydrating Moisturizer",
price: "$68",
imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image2.webp",
},
{
name: "Radiance Serum",
price: "$85",
imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image3.webp",
},
{
name: "Purifying Face Mask",
price: "$52",
imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image1.webp",
},
]}
/>
</div>
<div id="benefits" data-section="benefits">
<FeaturesBento
tag="Why Luminé"
title="Why Choose Luminé"
description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
features={[
{
title: "Worldwide Shipping",
description: "Fast and reliable delivery to over 150 countries worldwide",
bentoComponent: "info-card-marquee",
infoCards: [
{ icon: Globe, label: "Countries", value: "150+" },
{ icon: Truck, label: "Delivery", value: "Fast" },
{ icon: Package, label: "Tracking", value: "Live" },
],
},
{
title: "Clinically Proven",
description: "Dermatologist-tested and proven effective in clinical trials",
bentoComponent: "animated-bar-chart",
},
{
title: "Sustainable",
description: "Eco-conscious packaging and ethical sourcing practices",
bentoComponent: "orbiting-icons",
centerIcon: Leaf,
orbitIcons: [Droplets, Sprout, Wind],
},
]}
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialTrustCard
quote="Luminé skincare has completely transformed my routine. My skin feels more radiant and healthy than ever before. I love that it's made with natural ingredients I can trust. Plus, worldwide shipping made it so easy to get my products delivered wherever I am."
rating={5}
author="Sarah Mitchell, Beauty Editor"
avatars={[
{ name: "Sarah Mitchell", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image5.avif" },
{ name: "Customer 2", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image6.avif" },
{ name: "Customer 3", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image7.avif" },
{ name: "Customer 4", imageSrc: "https://storage.googleapis.com/webild/default/templates/skincare/image8.avif" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
items={[
{
question: "How long does it take to see results?",
answer: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks.",
},
{
question: "Are your products suitable for sensitive skin?",
answer: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin.",
},
{
question: "Do you offer worldwide shipping?",
answer: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery.",
},
{
question: "What is your return policy?",
answer: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners.",
},
]}
imageSrc="https://storage.googleapis.com/webild/default/templates/skincare/image4.webp"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Newsletter"
title="Get Your Glow On"
description="Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox."
inputPlaceholder="Enter your email"
buttonText="Subscribe"
/>
</div>
<FooterSimpleCard
brand="Luminé"
columns={[
{
title: "Product",
items: [
{ label: "Moisturizers", href: "#products" },
{ label: "Serums", href: "#products" },
{ label: "Masks", href: "#products" },
{ label: "Bundles", href: "#products" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#about" },
{ label: "Sustainability", href: "#about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "#contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Worldwide Shipping", href: "#" },
{ label: "Returns", href: "#" },
],
},
{
title: "Connect",
items: [
{ label: "Instagram", href: "#" },
{ label: "Facebook", href: "#" },
{ label: "Pinterest", href: "#" },
{ label: "TikTok", href: "#" },
],
},
]}
copyright="© 2025 Luminé Skincare. All rights reserved."
links={[{ label: "Privacy Policy" }, { label: "Terms of Service" }]}
/>
</StyleProvider>
</ReactLenis>
);
}

179
src/templates/skincare/theme.css Normal file
View File

@@ -0,0 +1,179 @@
/* Skincare - Warm Sand */
@import "tailwindcss";
@import "../../styles/masks.css";
@import "../../styles/animations.css";
:root {
/* @colorThemes/lightTheme/warmSand */
--background: #fcf6ec;
--card: #f3ede2;
--foreground: #2e2521;
--primary-cta: #2e2521;
--primary-cta-text: #fcf6ec;
--secondary-cta: #ffffff;
--secondary-cta-text: #2e2521;
--accent: #b2a28b;
--background-accent: #b89461;
/* @layout/border-radius/soft */
--radius: 1.5rem;
/* @layout/content-width/compact */
--width-content-width: clamp(40rem, 67.5vw, 100rem);
/* @utilities/masks */
--vw-1_5: 1.5vw;
--width-x-padding-mask-fade: 5vw;
/* @layout/carousel */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: calc(var(--width-content-width) / 2 - var(--vw-1_5) / 2);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
/* @typography/text-sizing/medium */
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem);
}
/* @typography/text-sizing/medium (mobile) */
@media (max-width: 768px) {
:root {
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw;
--width-content-width: 80vw;
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - 1rem);
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-2: var(--width-content-width);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
}
}
@theme inline {
/* Colors */
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: "Inter", sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-mono: monospace;
/* Border Radius */
--radius: var(--radius);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* Width */
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-2: var(--width-carousel-item-2);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
/* Typography */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter", sans-serif;
}
/* WEBILD_CARD_STYLE */
/* @cards/glass-elevated */
.card {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-card);
}
/* WEBILD_PRIMARY_BUTTON */
/* @buttons/primary-button-styles/gradient */
.primary-button {
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
}
/* WEBILD_SECONDARY_BUTTON */
/* @buttons/secondary-button-styles/glass */
.secondary-button {
backdrop-filter: blur(8px);
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}