Merge version_1 into main #22
142
src/app/page.tsx
142
src/app/page.tsx
@@ -1,142 +1,122 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function HomePage() {
|
||||
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>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Build Your Future"
|
||||
description="Next-generation digital solutions for modern businesses."
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Welcome to Our Platform"
|
||||
description="Experience the future of digital solutions with our innovative approach."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 1" },
|
||||
{ id: "2", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 2" },
|
||||
{ id: "3", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 3" },
|
||||
{ id: "4", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 4" },
|
||||
{ id: "5", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 5" },
|
||||
{ id: "6", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 6" }
|
||||
{ id: "1", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800" },
|
||||
{ id: "2", imageSrc: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800" },
|
||||
{ id: "3", imageSrc: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800" },
|
||||
{ id: "4", imageSrc: "https://images.unsplash.com/photo-1501854140801-50d01698950b?w=800" },
|
||||
{ id: "5", imageSrc: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800" },
|
||||
{ id: "6", imageSrc: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne
|
||||
names={["Google", "Microsoft", "Amazon", "Netflix"]}
|
||||
<SocialProofOne
|
||||
names={["Acme Corp", "Global Tech", "Innovate Inc", "NextGen"]
|
||||
}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Scaling businesses across the globe."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="We work with the best in the business to deliver outstanding results."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardMedia
|
||||
title="Our Services"
|
||||
description="We provide comprehensive solutions."
|
||||
<FeatureCardMedia
|
||||
title="Our Core Services"
|
||||
description="Comprehensive solutions tailored to your specific business needs."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Web Design", description: "Crafting beautiful interfaces.", tag: "Design" },
|
||||
{ id: "2", title: "Cloud Infrastructure", description: "Scaling your operations.", tag: "Cloud" }
|
||||
{ id: "f1", title: "Strategic Planning", description: "Mapping your path to success with data-driven insights.", tag: "Strategy" },
|
||||
{ id: "f2", title: "Creative Design", description: "Building beautiful and functional experiences for your users.", tag: "Design" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardOne
|
||||
title="Our Work"
|
||||
description="Showcasing our recent projects."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
<ProductCardOne
|
||||
title="Featured Work"
|
||||
description="Explore our recent projects and success stories."
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Landing Page", price: "$500", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" },
|
||||
{ id: "2", name: "Mobile App", price: "$1500", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" },
|
||||
{ id: "3", name: "SaaS Platform", price: "$5000", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" }
|
||||
{ id: "p1", name: "Product Alpha", price: "$99", imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500" },
|
||||
{ id: "p2", name: "Product Beta", price: "$149", imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500" },
|
||||
{ id: "p3", name: "Product Gamma", price: "$199", imageSrc: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=500" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardEleven
|
||||
<MetricCardEleven
|
||||
title="Our Process"
|
||||
description="Efficiency in every step."
|
||||
description="Transparent steps to get you from concept to reality."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "100%", title: "Satisfaction", description: "Our primary goal.", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" },
|
||||
{ id: "2", value: "50+", title: "Projects", description: "Successfully completed.", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" }
|
||||
{ id: "m1", value: "1", title: "Consultation", description: "Understanding your vision and goals.", imageSrc: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500" },
|
||||
{ id: "m2", value: "2", title: "Execution", description: "Bringing the vision to life with precision.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
<TestimonialCardTwo
|
||||
title="Client Feedback"
|
||||
description="What our clients say about us."
|
||||
description="See what our clients have to say about working with us."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "CEO", testimonial: "Fantastic work!" },
|
||||
{ id: "2", name: "Jane Smith", role: "CTO", testimonial: "Professional and quick." }
|
||||
{ id: "t1", name: "Jane Doe", role: "CEO", testimonial: "An incredible team that delivered beyond expectations." },
|
||||
{ id: "t2", name: "John Smith", role: "CTO", testimonial: "Seamless communication and top-tier results every time." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common questions."
|
||||
description="Find quick answers to common inquiries."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "1", title: "How do I start?", content: "Contact us through the form." },
|
||||
{ id: "2", title: "What is the cost?", content: "Pricing varies by project." }
|
||||
{ id: "q1", title: "How do we get started?", content: "Simply reach out through our contact section." },
|
||||
{ id: "q2", title: "What is your timeline?", content: "Timelines vary based on project scope, but we prioritize quality." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactText
|
||||
text="Ready to start your project? Contact us today."
|
||||
<ContactText
|
||||
text="Ready to start your project? Let's connect."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[{ title: "Company", items: [{ label: "About" }, { label: "Contact" }] }]}
|
||||
bottomLeftText="© 2024 Webild"
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "/" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Your Brand"
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user