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';
|
||||
@@ -12,100 +10,34 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function Page() {
|
||||
const navItems = [
|
||||
{ name: 'Home', id: 'home' },
|
||||
{ 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 beautiful, responsive web applications in minutes with our modular component library."
|
||||
buttons={[{ text: "Get Started", href: "#" }]}
|
||||
/>
|
||||
<HeroLogo logoText="Webild" description="Building the future of web experiences." buttons={[{ text: 'Get Started', href: '/' }]} />
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
names={['Partner 1', 'Partner 2']}
|
||||
title="Trusted By"
|
||||
description="Our partners"
|
||||
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="About Us"
|
||||
description="Our mission is simple."
|
||||
metrics={[{ value: '100%', title: 'Happiness' }]}
|
||||
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: '1', name: 'Product 1', price: '$10', imageSrc: '/placeholder.png' }, { id: '2', name: 'Product 2', price: '$20', imageSrc: '/placeholder.png' }, { id: '3', name: 'Product 3', price: '$30', imageSrc: '/placeholder.png' }]}
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Our Menu"
|
||||
description="Explore our selection."
|
||||
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: 'Feature 1', description: 'Desc 1', imageSrc: '/placeholder.png' }, { title: 'Feature 2', description: 'Desc 2', imageSrc: '/placeholder.png' }]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Why Choose Us"
|
||||
description="We are the best."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
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: '1', name: 'User 1', role: 'Role 1', testimonial: 'Great!' }, { id: '2', name: 'User 2', role: 'Role 2', testimonial: 'Amazing!' }]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Reviews"
|
||||
description="What people say."
|
||||
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">
|
||||
<ContactSplitForm
|
||||
title="Contact Us"
|
||||
description="We'd love to hear from you."
|
||||
inputs={[{ name: 'email', type: 'email', placeholder: 'Email' }, { name: 'message', type: 'text', placeholder: 'Message' }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<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">
|
||||
<FooterSimple
|
||||
columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]}
|
||||
bottomLeftText="© 2025"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
<FooterSimple columns={[{ title: 'Resources', items: [{ label: 'Docs' }, { label: 'Blog' }] }]} bottomLeftText="© 2024 Webild" bottomRightText="Privacy Policy" />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user