Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #7.
This commit is contained in:
102
src/app/page.tsx
102
src/app/page.tsx
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
'use client';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
@@ -9,112 +9,38 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
|
||||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Shield, Zap, Star } from 'lucide-react';
|
||||
import { Zap, Shield, Users, Star } from 'lucide-react';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [{ name: "Home", id: "/" }];
|
||||
|
||||
const navItems = [{ name: 'Home', id: '/' }];
|
||||
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">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
/>
|
||||
<NavbarStyleCentered navItems={navItems} brandName="Brand" />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay title="Welcome to Our Platform" description="Innovating the future of digital experiences." />
|
||||
<HeroOverlay title="Welcome" description="This is our hero section." />
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Our Impact"
|
||||
metrics={[ { icon: Shield, label: "Trust", value: "100%" }, { icon: Zap, label: "Speed", value: "Fast" } ]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<AboutMetric title="About Us" metrics={[{ icon: Shield, label: 'Quality', value: '100%' }, { icon: Users, label: 'Team', value: '50+' }]} metricsAnimation="slide-up" />
|
||||
</div>
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardTwo
|
||||
title="Featured Products"
|
||||
description="Explore our curated collection."
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", brand: "Brand A", name: "Product 1", price: "$99", rating: 5, reviewCount: "10", imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop&q=60" },
|
||||
{ id: "2", brand: "Brand B", name: "Product 2", price: "$149", rating: 4, reviewCount: "25", imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&auto=format&fit=crop&q=60" },
|
||||
{ id: "3", brand: "Brand C", name: "Product 3", price: "$199", rating: 5, reviewCount: "50", imageSrc: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=800&auto=format&fit=crop&q=60" }
|
||||
]}
|
||||
/>
|
||||
<ProductCardTwo title="Products" gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" products={[{ id: '1', brand: 'Brand', name: 'Product A', price: '$10', rating: 5, reviewCount: '10', imageSrc: '/placeholder.svg' }, { id: '2', brand: 'Brand', name: 'Product B', price: '$20', rating: 4, reviewCount: '5', imageSrc: '/placeholder.svg' }, { id: '3', brand: 'Brand', name: 'Product C', price: '$30', rating: 5, reviewCount: '8', imageSrc: '/placeholder.svg' }]} />
|
||||
</div>
|
||||
<div id="atmosphere" data-section="atmosphere">
|
||||
<FeatureCardMedia
|
||||
title="Our Features"
|
||||
description="Experience our core functionalities."
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Reliability", description: "Built to last.", tag: "Core" },
|
||||
{ id: "f2", title: "Innovation", description: "Ahead of the curve.", tag: "New" }
|
||||
]}
|
||||
/>
|
||||
<FeatureCardMedia title="Features" description="Discover our core capabilities." animationType="slide-up" textboxLayout="default" features={[{ id: '1', title: 'Speed', description: 'Blazing fast.', tag: 'New' }, { id: '2', title: 'Security', description: 'Top tier safety.', tag: 'Trusted' }]} />
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="What They Say"
|
||||
description="Trusted by professionals globally."
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "John Doe", role: "CEO", testimonial: "Fantastic service!", icon: Star },
|
||||
{ id: "t2", name: "Jane Smith", role: "CTO", testimonial: "Simply the best.", icon: Star }
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardTwo title="Testimonials" animationType="slide-up" textboxLayout="default" testimonials={[{ id: '1', name: 'User 1', role: 'CEO', testimonial: 'Great service!', icon: Star }, { id: '2', name: 'User 2', role: 'CTO', testimonial: 'Exceeded expectations!', icon: Star }]} />
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
title="Our Leadership"
|
||||
description="Meet the visionaries behind the project."
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "m1", name: "Alice", role: "Director", description: "Leading the team." },
|
||||
{ id: "m2", name: "Bob", role: "Head of Tech", description: "Tech wizard." }
|
||||
]}
|
||||
/>
|
||||
<TeamCardTwo title="Our Team" gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" members={[{ id: '1', name: 'Alice', role: 'Designer', description: 'Expert creator.' }, { id: '2', name: 'Bob', role: 'Developer', description: 'Code wizard.' }]} />
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Contact Us"
|
||||
description="Get in touch with our team."
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
/>
|
||||
<ContactSplitForm title="Contact Us" description="We are here to help." inputs={[{ name: 'email', type: 'email', placeholder: 'Email' }, { name: 'name', type: 'text', placeholder: 'Name' }]} />
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
|
||||
/>
|
||||
<FooterBaseReveal logoText="Brand" columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user