252 lines
13 KiB
TypeScript
252 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sparkles, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="noise"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Webild Design"
|
|
navItems={[
|
|
{ name: "Components", id: "components" },
|
|
{ name: "Tokens", id: "tokens" },
|
|
{ name: "Guidelines", id: "guidelines" },
|
|
{ name: "Resources", id: "resources" },
|
|
{ name: "Documentation", id: "documentation" }
|
|
]}
|
|
button={{
|
|
text: "Get Started", href: "#cta"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Your Design System, Unified"
|
|
description="Build, document, and scale your design system with powerful tools. Create consistent, reusable components that empower your entire team."
|
|
tag="Design Excellence"
|
|
tagIcon={Sparkles}
|
|
background={{ variant: "noise" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/a-modern-design-system-dashboard-interfa-1773364812134-26e1471a.png"
|
|
imageAlt="Design system dashboard showcase"
|
|
buttons={[
|
|
{ text: "Explore System", href: "#components" },
|
|
{ text: "View Docs", href: "#documentation" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="tokens" data-section="tokens">
|
|
<FeatureCardMedia
|
|
title="Design Tokens"
|
|
description="Master your design vocabulary with organized, scalable design tokens. Define colors, typography, spacing, and more in one place."
|
|
tag="Tokens"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Color System", description: "Complete color palettes with semantic naming and accessibility compliance built in.", tag: "Colors", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png?_wi=1", imageAlt: "Design tokens illustration"
|
|
},
|
|
{
|
|
id: "2", title: "Typography Scale", description: "Harmonious font hierarchies with predefined sizes, weights, and line heights.", tag: "Typography", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png?_wi=2", imageAlt: "Typography scale illustration"
|
|
},
|
|
{
|
|
id: "3", title: "Spacing & Layout", description: "Consistent spacing rules and grid systems that scale across all breakpoints.", tag: "Layout", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/abstract-illustration-depicting-design-s-1773364810590-8d3e5cc5.png?_wi=3", imageAlt: "Spacing and layout illustration"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="components" data-section="components">
|
|
<ProductCardTwo
|
|
title="Component Library"
|
|
description="Pre-built, battle-tested components ready for production use."
|
|
tag="Components"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Webild", name: "Button Components", price: "Included", rating: 5,
|
|
reviewCount: "1.2k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png?_wi=1", imageAlt: "Button component variations"
|
|
},
|
|
{
|
|
id: "2", brand: "Webild", name: "Card System", price: "Included", rating: 5,
|
|
reviewCount: "890", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png?_wi=2", imageAlt: "Card component system"
|
|
},
|
|
{
|
|
id: "3", brand: "Webild", name: "Form Elements", price: "Included", rating: 5,
|
|
reviewCount: "756", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/detailed-showcase-of-reusable-ui-compone-1773364812776-af7a3080.png?_wi=3", imageAlt: "Form input components"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<MetricCardSeven
|
|
title="Impact & Scale"
|
|
description="See how design systems transform teams and projects."
|
|
tag="Metrics"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "2500+", title: "Components Built", items: ["5+ design systems", "100+ teams", "Production ready"]
|
|
},
|
|
{
|
|
id: "2", value: "99.8%", title: "System Consistency", items: ["Automated checks", "Real-time updates", "Quality assured"]
|
|
},
|
|
{
|
|
id: "3", value: "40%", title: "Faster Development", items: ["Reusable components", "Clear guidelines", "Team alignment"]
|
|
},
|
|
{
|
|
id: "4", value: "150+", title: "Active Contributors", items: ["Global collaboration", "Open feedback", "Continuous improvement"]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Trusted by Design Leaders"
|
|
description="Hear from teams who've transformed their workflow with Webild."
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", role: "Design Director", company: "TechFlow Inc", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-design-profes-1773364810258-33cc33d6.png", imageAlt: "Sarah Chen headshot"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", role: "Lead Developer", company: "InnovateLab", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-developer-mod-1773364810100-1ef352a1.png", imageAlt: "Marcus Johnson headshot"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "Product Manager", company: "GrowthCo", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-product-manag-1773364809970-e2bc669a.png", imageAlt: "Emily Rodriguez headshot"
|
|
},
|
|
{
|
|
id: "4", name: "David Park", role: "Design Lead", company: "CreativeStudio", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/professional-headshot-of-a-design-lead-w-1773364810383-39c756fc.png", imageAlt: "David Park headshot"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about design systems and implementation."
|
|
tag="Help"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArxRuUAmYUVVXRkZWBZeKH2qZH/visual-diagram-showing-design-system-wor-1773364810498-ad0a873f.png"
|
|
imageAlt="Design system workflow"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
mediaPosition="left"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is a design system?", content: "A design system is a collection of reusable components and guidelines that ensure consistency across your digital products. It includes design tokens, components, patterns, and documentation."
|
|
},
|
|
{
|
|
id: "2", title: "How do I get started?", content: "Begin by exploring our component library and design tokens. Review the documentation, then integrate components into your project. Our team is here to support your implementation."
|
|
},
|
|
{
|
|
id: "3", title: "Can I customize components?", content: "Absolutely! All components are fully customizable through design tokens and props. Extend and adapt them to match your brand while maintaining consistency."
|
|
},
|
|
{
|
|
id: "4", title: "Is there team collaboration support?", content: "Yes, our platform supports seamless team collaboration with real-time updates, version control, and feedback tools to keep everyone aligned."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<ContactCTA
|
|
tag="Ready to Begin?"
|
|
tagIcon={Zap}
|
|
title="Start Building Your Design System Today"
|
|
description="Join thousands of teams creating consistent, scalable design systems. Get access to our complete component library, design tokens, and documentation."
|
|
buttons={[
|
|
{ text: "Launch Your System", href: "#signup" },
|
|
{ text: "Schedule Demo", href: "#demo" }
|
|
]}
|
|
background={{ variant: "noise" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Webild"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Components", href: "#components" },
|
|
{ label: "Design Tokens", href: "#tokens" },
|
|
{ label: "Documentation", href: "#documentation" },
|
|
{ label: "Pricing", href: "#pricing" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Guides", href: "/guides" },
|
|
{ label: "Community", href: "/community" },
|
|
{ label: "Support", href: "/support" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Team", href: "/team" },
|
|
{ label: "Careers", href: "/careers" },
|
|
{ label: "Contact", href: "/contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy", href: "#privacy" },
|
|
{ label: "Terms", href: "#terms" },
|
|
{ label: "Cookies", href: "#cookies" },
|
|
{ label: "License", href: "#license" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Webild Design System. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|