Update src/app/page.tsx
This commit is contained in:
@@ -1,5 +1,3 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
@@ -8,103 +6,38 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function Page() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" 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">
|
||||
<NavbarStyleApple navItems={navItems} />
|
||||
<NavbarStyleApple navItems={[{ name: 'Home', id: '/' }]} brandName="Webild" />
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroLogo
|
||||
logoText="Webild"
|
||||
description="Build faster with our modular component registry."
|
||||
buttons={[{ text: "Get Started" }]}
|
||||
/>
|
||||
<HeroLogo logoText="Webild" description="Building the future of web experiences." buttons={[{ text: 'Get Started', href: '/' }]} />
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne names={["Company A", "Company B", "Company C"]} title="Trusted By" description="Leading brands trust our infrastructure." textboxLayout="default" useInvertedBackground={false} />
|
||||
<SocialProofOne names={['Company A', 'Company B', 'Company C']} title="Trusted by Industry Leaders" textboxLayout="default" />
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
title="Our Mission"
|
||||
description="We simplify web development for everyone."
|
||||
metrics={[{ value: "100+", title: "Components" }]}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
<MetricSplitMediaAbout title="About Us" description="Dedicated to excellence and innovation." metrics={[{ value: '10+', title: 'Years Experience' }, { value: '100+', title: 'Projects' }]} useInvertedBackground={false} mediaAnimation="opacity" metricsAnimation="opacity" />
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardThree
|
||||
products={[
|
||||
{ id: "p1", name: "Basic", price: "$10", imageSrc: "/prod1.jpg" },
|
||||
{ id: "p2", name: "Pro", price: "$20", imageSrc: "/prod2.jpg" },
|
||||
{ id: "p3", name: "Enterprise", price: "$50", imageSrc: "/prod3.jpg" },
|
||||
]}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
title="Our Products"
|
||||
description="Choose the plan that fits your needs."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<ProductCardThree products={[{ id: '1', name: 'Product 1', price: '$99', imageSrc: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e' }, { id: '2', name: 'Product 2', price: '$149', imageSrc: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30' }, { id: '3', name: 'Product 3', price: '$199', imageSrc: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f' }]} title="Our Menu" description="Browse our premium selection." gridVariant="one-large-right-three-stacked-left" animationType="opacity" textboxLayout="default" />
|
||||
</div>
|
||||
<div id="why-us" data-section="why-us">
|
||||
<FeatureCardOne
|
||||
features={[{ title: "Speed", description: "Lightning fast performance.", imageSrc: "/feat1.jpg" }, { title: "Security", description: "Top-tier protection.", imageSrc: "/feat2.jpg" }]}
|
||||
animationType="slide-up"
|
||||
title="Why Choose Us"
|
||||
description="We provide the best tools for your growth."
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<FeatureCardOne title="Why Choose Us" description="We provide superior solutions." features={[{ title: 'Innovation', description: 'Cutting-edge technology.', imageSrc: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c', imageAlt: 'Innovation' }, { title: 'Support', description: '24/7 dedicated support.', imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978', imageAlt: 'Support' }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwo
|
||||
testimonials={[{ id: "t1", name: "John Doe", role: "CEO", testimonial: "Fantastic service!" }, { id: "t2", name: "Jane Smith", role: "CTO", testimonial: "Highly recommended." }]}
|
||||
animationType="slide-up"
|
||||
title="Customer Reviews"
|
||||
description="Hear what our clients have to say."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<TestimonialCardTwo title="Customer Reviews" description="What our clients say about us." testimonials={[{ id: 't1', name: 'John Doe', role: 'CEO', testimonial: 'Exceptional service and results.' }, { id: 't2', name: 'Jane Smith', role: 'CTO', testimonial: 'The best platform for our needs.' }]} animationType="opacity" textboxLayout="default" />
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Get the latest news in your inbox."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
<ContactSplitForm title="Get in Touch" description="Have questions? Let's discuss." inputs={[{ name: 'name', type: 'text', placeholder: 'Name', required: true }, { name: 'email', type: 'email', placeholder: 'Email', required: true }]} />
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Webild"
|
||||
columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
|
||||
/>
|
||||
<FooterSimple columns={[{ title: 'Resources', items: [{ label: 'Docs' }, { label: 'Blog' }] }]} bottomLeftText="© 2024 Webild" bottomRightText="Privacy Policy" />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user