|
|
|
|
@@ -1,6 +1,6 @@
|
|
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
|
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
|
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
|
|
|
@@ -9,70 +9,68 @@ import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
|
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
|
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
|
|
|
|
|
|
|
|
const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
|
|
|
|
|
const navItems = [
|
|
|
|
|
{ name: "Home", id: "/" }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default function HomePage() {
|
|
|
|
|
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">
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleCentered navItems={navItems} brandName="Webild" />
|
|
|
|
|
<NavbarStyleCentered navItems={navItems} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroOverlay
|
|
|
|
|
title="Build Your Future"
|
|
|
|
|
description="Innovative solutions for a digital world. Join us in shaping tomorrow today."
|
|
|
|
|
buttons={[{ text: "Get Started", href: "/contact" }]}
|
|
|
|
|
title="Empower Your Digital Future"
|
|
|
|
|
description="We provide innovative solutions to help you scale and succeed in the modern digital landscape."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="experience" data-section="experience">
|
|
|
|
|
<MetricSplitMediaAbout
|
|
|
|
|
title="Our Proven Track Record"
|
|
|
|
|
description="We have successfully delivered over 500 projects for global enterprises, ensuring quality and scale."
|
|
|
|
|
metrics={[{ value: "500+", title: "Projects Delivered" }, { value: "98%", title: "Client Satisfaction" }]}
|
|
|
|
|
title="Our Impact"
|
|
|
|
|
description="Driven by data, committed to excellence."
|
|
|
|
|
metrics={[{ value: "10k+", title: "Users" }, { value: "500+", title: "Projects" }]}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
metricsAnimation="slide-up"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="services" data-section="services">
|
|
|
|
|
<FeatureCardTwentyEight
|
|
|
|
|
title="Our Premium Services"
|
|
|
|
|
description="Tailored technology services to help your business scale efficiently."
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
title="Our Services"
|
|
|
|
|
description="Comprehensive solutions for your business."
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
features={[
|
|
|
|
|
{ id: "1", title: "Cloud Infrastructure", subtitle: "Scalable and Secure", category: "Cloud", value: "High Performance", buttons: [{ text: "Learn More" }] },
|
|
|
|
|
{ id: "2", title: "AI Integration", subtitle: "Smart Automation", category: "AI", value: "Innovative", buttons: [{ text: "Learn More" }] }
|
|
|
|
|
{ id: "s1", title: "Web Development", subtitle: "Custom solutions", category: "Development", value: "High quality" },
|
|
|
|
|
{ id: "s2", title: "UI/UX Design", subtitle: "User-centric", category: "Design", value: "Modern aesthetic" }
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="membership" data-section="membership">
|
|
|
|
|
<PricingCardTwo
|
|
|
|
|
title="Flexible Plans"
|
|
|
|
|
description="Choose the plan that suits your business growth."
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
title="Flexible Pricing"
|
|
|
|
|
description="Choose the plan that suits you best."
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
plans={[
|
|
|
|
|
{ id: "basic", badge: "Starter", price: "$99", subtitle: "For individuals", buttons: [{ text: "Select" }], features: ["Basic Support", "Access to Tools"] },
|
|
|
|
|
{ id: "pro", badge: "Pro", price: "$299", subtitle: "For scaling teams", buttons: [{ text: "Select" }], features: ["Priority Support", "Advanced Analytics", "Unlimited Access"] }
|
|
|
|
|
{ id: "p1", badge: "Starter", price: "$0", subtitle: "For individuals", features: ["Core features"], buttons: [{ text: "Get Started" }] },
|
|
|
|
|
{ id: "p2", badge: "Pro", price: "$49", subtitle: "For teams", features: ["Core features", "Advanced support"], buttons: [{ text: "Go Pro" }] }
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactSplitForm
|
|
|
|
|
title="Contact Us"
|
|
|
|
|
description="Let's build something amazing together. Reach out to our team."
|
|
|
|
|
inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Your Email" }]}
|
|
|
|
|
textarea={{ name: "message", placeholder: "How can we help?" }}
|
|
|
|
|
title="Get in Touch"
|
|
|
|
|
description="Let's discuss how we can help you grow."
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
inputs={[{ name: "email", type: "email", placeholder: "Email Address" }, { name: "name", type: "text", placeholder: "Your Name" }]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterBaseCard
|
|
|
|
|
logoText="Webild"
|
|
|
|
|
columns={[{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
|
|
|
|
|
columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
|
