Update src/app/page.tsx
This commit is contained in:
195
src/app/page.tsx
195
src/app/page.tsx
@@ -1,16 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Phone } from 'lucide-react';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Sparkles, Quote, CheckCircle, Mail } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,60 +28,67 @@ export default function LandingPage() {
|
||||
>
|
||||
<main>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
<NavbarStyleFullscreen
|
||||
brandName="MyCo"
|
||||
navItems={[
|
||||
{name: "Home", id: "/"},
|
||||
{name: "About", id: "about"},
|
||||
{name: "Features", id: "features"},
|
||||
{name: "Products", id: "products"},
|
||||
{name: "Testimonials", id: "testimonials"},
|
||||
{name: "FAQ", id: "faq"},
|
||||
{name: "Contact", id: "contact"}
|
||||
{name: "About", id: "/#about"},
|
||||
{name: "Products", id: "/#products"},
|
||||
{name: "Blog", id: "/blog"},
|
||||
{name: "Contact", id: "/#contact"}
|
||||
]}
|
||||
bottomLeftText="Innovation Hub"
|
||||
bottomRightText="info@myco.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="MyCo"
|
||||
description="Innovative solutions for a brighter future."
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Innovate. Create. Elevate Your Business."
|
||||
description="Experience cutting-edge solutions designed to transform your operations and drive unparalleled success."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Next Gen Solutions"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
{ text: "Discover More", href: "/#products" },
|
||||
{ text: "Get Started", href: "/#contact" }
|
||||
]}
|
||||
imageSrc="https://via.placeholder.com/1920x1080.png?text=Modern+Business"
|
||||
imageAlt="Modern business cityscape"
|
||||
showDimOverlay={true}
|
||||
carouselItems={[
|
||||
{ id: '1', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+1', imageAlt: 'Product showcase 1' },
|
||||
{ id: '2', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+2', imageAlt: 'Product showcase 2' },
|
||||
{ id: '3', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+3', imageAlt: 'Product showcase 3' },
|
||||
{ id: '4', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+4', imageAlt: 'Product showcase 4' },
|
||||
{ id: '5', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+5', imageAlt: 'Product showcase 5' },
|
||||
{ id: '6', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+6', imageAlt: 'Product showcase 6' }
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaSplitTabsAbout
|
||||
title="Our Story & Vision"
|
||||
description="We are dedicated to building innovative solutions that empower businesses and individuals."
|
||||
tabs={[
|
||||
{ id: "mission", label: "Our Mission", description: "To deliver cutting-edge technology and exceptional service that drives success." },
|
||||
{ id: "values", label: "Our Values", description: "Integrity, innovation, customer focus, and collaboration are at the core of everything we do." },
|
||||
{ id: "team", label: "Our Team", description: "A passionate group of experts committed to excellence and achieving remarkable results." }
|
||||
]}
|
||||
imageSrc="https://via.placeholder.com/800x600.png?text=Team+Collaboration"
|
||||
imageAlt="Team collaborating in an office"
|
||||
imagePosition="right"
|
||||
<TestimonialAboutCard
|
||||
tag="Our Philosophy"
|
||||
tagIcon={Quote}
|
||||
title="We believe in empowering futures through technology and innovation."
|
||||
description="MyCo Team"
|
||||
subdescription="Visionaries in Tech"
|
||||
icon={Sparkles}
|
||||
imageSrc="https://via.placeholder.com/800x600.png?text=Our+Vision"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Our Featured Products"
|
||||
description="Explore a selection of our most popular and innovative products designed to meet your needs."
|
||||
<ProductCardThree
|
||||
title="Our Featured Offerings"
|
||||
description="Explore our innovative products, crafted to enhance your productivity and lifestyle."
|
||||
products={[
|
||||
{ id: "1", brand: "TechInnovate", name: "AI Assistant Pro", price: "$199.99", rating: 5, reviewCount: "1.2k", imageSrc: "https://via.placeholder.com/400x400.png?text=AI+Assistant" },
|
||||
{ id: "2", brand: "FutureGadgets", name: "Smart Home Hub", price: "$249.00", rating: 4, reviewCount: "850", imageSrc: "https://via.placeholder.com/400x400.png?text=Smart+Home" },
|
||||
{ id: "3", brand: "InnovateCo", name: "Cloud Storage Plus", price: "$49.99", rating: 4, reviewCount: "3.5k", imageSrc: "https://via.placeholder.com/400x400.png?text=Cloud+Storage" },
|
||||
{ id: "4", brand: "FutureTech", name: "Eco-Friendly Charger", price: "$29.99", rating: 5, reviewCount: "2.1k", imageSrc: "https://via.placeholder.com/400x400.png?text=Eco+Charger" }
|
||||
{ id: "1", name: "AI Assistant Pro", price: "$199.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+A" },
|
||||
{ id: "2", name: "Smart Home Hub", price: "$249.00", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+B" },
|
||||
{ id: "3", name: "Cloud Storage Plus", price: "$49.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+C" },
|
||||
{ id: "4", name: "Eco-Friendly Charger", price: "$29.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+D" }
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
@@ -91,90 +98,86 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
title="Key Features That Set Us Apart"
|
||||
description="Discover the core functionalities and benefits that make our solutions stand out."
|
||||
features={[
|
||||
{ id: "01", title: "Advanced Analytics", description: "Gain deep insights with our powerful and intuitive analytics dashboard.", imageSrc: "https://via.placeholder.com/600x400.png?text=Analytics" },
|
||||
{ id: "02", title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows.", imageSrc: "https://via.placeholder.com/600x400.png?text=Integration" },
|
||||
{ id: "03", title: "24/7 Support", description: "Our dedicated support team is always here to help you succeed.", imageSrc: "https://via.placeholder.com/600x400.png?text=Support" }
|
||||
<FeatureCardTwentyOne
|
||||
title="Unlock Limitless Possibilities"
|
||||
description="Our platform brings powerful features designed to streamline your operations."
|
||||
accordionItems={[
|
||||
{ id: "1", title: "Intuitive Interface", content: "Navigate our platform with ease thanks to our user-friendly design." },
|
||||
{ id: "2", title: "Robust Security", content: "Your data is protected with industry-leading security protocols." },
|
||||
{ id: "3", title: "Scalable Infrastructure", content: "Grow your business without limits on our adaptable cloud infrastructure." }
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
imageSrc="https://via.placeholder.com/800x600.png?text=Feature+Overview"
|
||||
imageAlt="Feature showcase"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="default"
|
||||
mediaPosition="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
title="What Our Clients Say"
|
||||
description="Hear directly from our satisfied customers about their experience with our services."
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice Wonderland", role: "CEO, InnovateCo", company: "Tech Solutions", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+1" },
|
||||
{ id: "2", name: "Bob The Builder", role: "Founder, ConstructCo", company: "Design Agency", rating: 4, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+2" },
|
||||
{ id: "3", name: "Charlie Chaplin", role: "Manager, Creative Hub", company: "Media Group", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+3" }
|
||||
{ id: '1', name: 'Emily White', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+1' },
|
||||
{ id: '2', name: 'David Lee', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+2' },
|
||||
{ id: '3', name: 'Sophia Miller', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+3' },
|
||||
{ id: '4', name: 'James Brown', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+4' }
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
cardTitle="Trusted by industry leaders and satisfied customers worldwide."
|
||||
cardTag="Join our growing community"
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Find quick answers to the most common questions about our products and services."
|
||||
<FaqBase
|
||||
title="Common Questions, Clear Answers"
|
||||
description="Browse our FAQ to quickly find solutions and understand our services better."
|
||||
faqs={[
|
||||
{ id: "1", title: "How does your service work?", content: "Our service provides seamless integration with your existing systems, ensuring a smooth transition and minimal disruption." },
|
||||
{ id: "2", title: "What is your pricing model?", content: "We offer flexible pricing tiers designed to fit businesses of all sizes, from startups to large enterprises." },
|
||||
{ id: "3", title: "Can I customize the features?", content: "Yes, our platform is highly customizable, allowing you to tailor features to your specific business needs." },
|
||||
{ id: "4", title: "Do you offer support?", content: "Absolutely! We provide 24/7 customer support via chat, email, and phone to assist you with any inquiries." }
|
||||
{ id: "1", title: "What is your onboarding process?", content: "Our onboarding is streamlined, guided by a dedicated success manager." },
|
||||
{ id: "2", title: "Do you offer custom solutions?", content: "Yes, we tailor our solutions to fit your unique business requirements." },
|
||||
{ id: "3", title: "How is customer support handled?", content: "We provide 24/7 support through multiple channels for your convenience." },
|
||||
{ id: "4", title: "What are your security measures?", content: "We implement robust security protocols and regular audits to protect your data." }
|
||||
]}
|
||||
imageSrc="https://via.placeholder.com/800x600.png?text=FAQ+Support"
|
||||
imageAlt="Customer support representatives"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
ctaTitle="Ready to Start?"
|
||||
ctaDescription="Get in touch with our team today to discuss your project and discover how we can help."
|
||||
ctaButton={{ text: "Contact Us Now", href: "#contact" }}
|
||||
ctaIcon={Phone}
|
||||
faqs={[
|
||||
{ id: "1", title: "What are your office hours?", content: "Our support team is available Monday to Friday, 9 AM to 5 PM EST." },
|
||||
{ id: "2", title: "Where are you located?", content: "We operate globally with a primary office in a major tech hub. Contact us for specific details." },
|
||||
{ id: "3", title: "How quickly do you respond?", content: "We aim to respond to all inquiries within 24 business hours." }
|
||||
]}
|
||||
<ContactSplit
|
||||
tag="Connect With Us"
|
||||
title="Let's Build Something Amazing Together"
|
||||
description="Reach out to our team to discuss your next big idea or sign up for our newsletter."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
imageSrc="https://via.placeholder.com/800x600.png?text=Contact+Us"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to our privacy policy."
|
||||
onSubmit={(email) => console.log("Subscribed with: ", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterLogoEmphasis
|
||||
logoText="MyCo"
|
||||
columns={[
|
||||
{title: "Solutions", items: [
|
||||
{label: "Products", href: "#products"},
|
||||
{label: "Features", href: "#features"}
|
||||
{items: [
|
||||
{label: "Products", href: "/#products"},
|
||||
{label: "Features", href: "/#features"}
|
||||
]},
|
||||
{title: "Company", items: [
|
||||
{label: "About Us", href: "#about"},
|
||||
{items: [
|
||||
{label: "About Us", href: "/#about"},
|
||||
{label: "Blog", href: "/blog"},
|
||||
{label: "FAQ", href: "#faq"},
|
||||
{label: "Contact", href: "#contact"}
|
||||
{label: "Shop", href: "/shop"},
|
||||
{label: "Contact", href: "/#contact"}
|
||||
]}
|
||||
]}
|
||||
copyrightText="© 2024 MyCo. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user