|
|
|
|
@@ -9,92 +9,39 @@ import FaqBase from '@/components/sections/faq/FaqBase';
|
|
|
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
|
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
|
|
|
import { Zap, Shield } from 'lucide-react';
|
|
|
|
|
import { BarChart, Users, ShieldCheck, Mail } from 'lucide-react';
|
|
|
|
|
|
|
|
|
|
const navItems = [{ name: "Home", id: "/" }];
|
|
|
|
|
|
|
|
|
|
export default function Page() {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
|
|
|
|
<ThemeProvider>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleApple navItems={navItems} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroOverlay
|
|
|
|
|
title="Build Fast, Deploy Faster"
|
|
|
|
|
description="The ultimate platform for modern web development workflows."
|
|
|
|
|
buttons={[{ text: "Get Started", href: "#contact" }]}
|
|
|
|
|
/>
|
|
|
|
|
<HeroOverlay title="Welcome" description="This is our hero section." />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
|
<FeatureCardEight
|
|
|
|
|
title="Powerful Features"
|
|
|
|
|
description="Everything you need to scale."
|
|
|
|
|
features={[
|
|
|
|
|
{ title: "Speed", description: "Optimized performance.", imageSrc: "/placeholder.jpg" },
|
|
|
|
|
{ title: "Security", description: "Built-in protection.", imageSrc: "/placeholder.jpg" }
|
|
|
|
|
]}
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<FeatureCardEight title="Features" description="Our powerful features." textboxLayout="default" useInvertedBackground={false} features={[]} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="status" data-section="status">
|
|
|
|
|
<MetricCardOne
|
|
|
|
|
title="Our Impact"
|
|
|
|
|
description="Quantifiable growth for your business."
|
|
|
|
|
metrics={[
|
|
|
|
|
{ id: "1", value: "100+", title: "Projects", description: "Delivered", icon: Zap },
|
|
|
|
|
{ id: "2", value: "50K", title: "Users", description: "Active", icon: Shield }
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="uniform-all-items-equal"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<MetricCardOne title="Status" description="System performance." gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} metrics={[{ id: "1", value: "99%", title: "Uptime", description: "High availability", icon: BarChart }, { id: "2", value: "10K+", title: "Users", description: "Growing community", icon: Users }]} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardSixteen
|
|
|
|
|
title="Client Success"
|
|
|
|
|
description="Don't just take our word for it."
|
|
|
|
|
testimonials={[{ id: "1", name: "Alice", role: "CEO", company: "TechCo", rating: 5 }]}
|
|
|
|
|
kpiItems={[{ value: "99%", label: "Satisfaction" }, { value: "2x", label: "Speed" }, { value: "0%", label: "Downtime" }]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<TestimonialCardSixteen title="Testimonials" description="What people say." testimonials={[]} kpiItems={[{ value: "100", label: "Happy Clients" }, { value: "50", label: "Projects" }, { value: "24/7", label: "Support" }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<FaqBase
|
|
|
|
|
title="FAQs"
|
|
|
|
|
description="Common questions."
|
|
|
|
|
faqs={[{ id: "1", title: "How do I start?", content: "Sign up today." }]}
|
|
|
|
|
faqsAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<FaqBase title="FAQ" description="Common questions." faqs={[]} faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
|
<MetricSplitMediaAbout
|
|
|
|
|
title="Our Vision"
|
|
|
|
|
description="Redefining the standard."
|
|
|
|
|
metrics={[{ value: "10 Years", title: "Experience" }]}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<MetricSplitMediaAbout title="About Us" description="Dedicated to excellence." metrics={[]} useInvertedBackground={false} mediaAnimation="slide-up" metricsAnimation="slide-up" />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Ready?"
|
|
|
|
|
title="Get in Touch"
|
|
|
|
|
description="Let's build something great."
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<ContactCenter tag="Contact" title="Get In Touch" description="We are here to help." background={{ variant: "plain" }} useInvertedBackground={false} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterBaseCard
|
|
|
|
|
logoText="Webild"
|
|
|
|
|
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
|
|
|
|
|
/>
|
|
|
|
|
<FooterBaseCard logoText="Webild" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
|
