Merge version_1 into main #18
@@ -11,8 +11,8 @@ import { DM_Serif_Display, Inter } from "next/font/google";
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Home',
|
||||
description: 'Welcome to our website',
|
||||
title: 'Home | Webild',
|
||||
description: 'Next-generation digital solutions for modern businesses.',
|
||||
};
|
||||
|
||||
const dmSerif = DM_Serif_Display({ variable: "--font-dm-serif", subsets: ["latin"], weight: ["400"] }); const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
|
||||
|
||||
101
src/app/page.tsx
101
src/app/page.tsx
@@ -11,44 +11,113 @@ 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" }
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
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">
|
||||
<NavbarStyleApple navItems={navItems} />
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Innovating the Future"
|
||||
description="Transforming ideas into reality with advanced digital solutions."
|
||||
background={{ variant: "animated-grid" }}
|
||||
carouselItems={Array.from({ length: 6 }).map((_, i) => ({ id: `h${i}`, imageSrc: `https://picsum.photos/seed/${i}/800/600` }))}
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Build Your Future"
|
||||
description="Next-generation digital solutions for modern businesses."
|
||||
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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne names={["TechCorp", "InnovateAI", "GlobalSystems"]} title="Trusted By Leaders" description="Partnering with industry pioneers." textboxLayout="default" useInvertedBackground={false} />
|
||||
<SocialProofOne
|
||||
names={["Google", "Microsoft", "Amazon", "Netflix"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Scaling businesses across the globe."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardMedia title="Our Services" description="We provide cutting edge digital services." features={[{ id: "f1", title: "Design", description: "High quality", tag: "New" }, { id: "f2", title: "Code", description: "High quality", tag: "Dev" }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
||||
<FeatureCardMedia
|
||||
title="Our Services"
|
||||
description="We provide comprehensive solutions."
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ id: "1", title: "Web Design", description: "Crafting beautiful interfaces.", tag: "Design" },
|
||||
{ id: "2", title: "Cloud Infrastructure", description: "Scaling your operations.", tag: "Cloud" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardOne title="Our Portfolio" description="Showcasing our recent work." products={[{ id: "p1", name: "Product", price: "$10", imageSrc: "https://picsum.photos/seed/p1/400/400" }, { id: "p2", name: "Product", price: "$20", imageSrc: "https://picsum.photos/seed/p2/400/400" }, { id: "p3", name: "Product", price: "$30", imageSrc: "https://picsum.photos/seed/p3/400/400" }]} gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
||||
<ProductCardOne
|
||||
title="Our Work"
|
||||
description="Showcasing our recent projects."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardEleven title="Our Process" description="How we deliver excellence." metrics={[{ id: "m1", value: "100%", title: "Success", description: "Proven track record", imageSrc: "https://picsum.photos/seed/m1/400/400" }, { id: "m2", value: "24/7", title: "Support", description: "Always available", imageSrc: "https://picsum.photos/seed/m2/400/400" }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
||||
<MetricCardEleven
|
||||
title="Our Process"
|
||||
description="Efficiency in every step."
|
||||
animationType="slide-up"
|
||||
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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo title="Client Voices" description="What our partners say about us." testimonials={[{ id: "t1", name: "John", role: "CEO", testimonial: "Great work!" }, { id: "t2", name: "Jane", role: "CTO", testimonial: "Highly recommended." }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
|
||||
<TestimonialCardTwo
|
||||
title="Client Feedback"
|
||||
description="What our clients say about us."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "CEO", testimonial: "Fantastic work!" },
|
||||
{ id: "2", name: "Jane Smith", role: "CTO", testimonial: "Professional and quick." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia title="Questions?" description="Answers to common inquiries." faqs={[{ id: "q1", title: "What?", content: "Yes." }, { id: "q2", title: "Who?", content: "Us." }]} faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} mediaAnimation="slide-up" imageSrc="https://picsum.photos/seed/faq/400/400" />
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common questions."
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
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." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactText text="Ready to start your journey?" background={{ variant: "plain" }} useInvertedBackground={false} />
|
||||
<ContactText
|
||||
text="Ready to start your project? Contact us today."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} bottomLeftText="© 2024 TechCorp" bottomRightText="All rights reserved." />
|
||||
<FooterSimple
|
||||
columns={[{ title: "Company", items: [{ label: "About" }, { label: "Contact" }] }]}
|
||||
bottomLeftText="© 2024 Webild"
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user