Merge version_2_1781548748815 into main #1
@@ -1,308 +1,41 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import { Shield, Sparkles, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import ProductSection from './HomePage/sections/Product';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
|
||||
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import ContactBranchesSection from './HomePage/sections/ContactBranches';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Welcome to Crave"
|
||||
title="Experience Excellence at Your Fingertips"
|
||||
description="Discover the next evolution of lifestyle branding designed to elevate your daily routine."
|
||||
primaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fluffy-cotton-plant-vase-used-interior-decor_23-2151104666.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-automatic-smart-feeder-household-pets_23-2151482451.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-mobile-phone-lady-with-documents_1157-46419.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-model-with-afro-curls-hairstyle-dressed-summer-hipster-white-dress_158538-632.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-arrangement_23-2149080522.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-watercolor-background-with-abstract-design_23-2147923152.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Mission"
|
||||
title="Curated for Your Lifestyle"
|
||||
description="Crave bridges the gap between premium design and effortless functionality, ensuring you always experience the best."
|
||||
items={[
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Premium Quality",
|
||||
description: "Hand-picked materials for lasting satisfaction.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Fast Integration",
|
||||
description: "Seamlessly fits into your modern workflow.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Reliability",
|
||||
description: "Built for consistency and long-term performance.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-posing_23-2148880247.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesMediaCarousel
|
||||
tag="Core Features"
|
||||
title="Why Choose Crave"
|
||||
description="Sophisticated tools tailored for the discerning user."
|
||||
items={[
|
||||
{
|
||||
title: "Smart Analytics",
|
||||
description: "Gain insights into your daily habits.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",
|
||||
},
|
||||
{
|
||||
title: "Global Reach",
|
||||
description: "Connected everywhere you go.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/network-connection-graphic-overlay-background-computer-screen_53876-120779.jpg",
|
||||
},
|
||||
{
|
||||
title: "Easy Management",
|
||||
description: "Simplify your life with a click.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<SectionErrorBoundary name="product">
|
||||
<FeaturesImageBento
|
||||
tag="Our Products"
|
||||
title="A Collection of Perfection"
|
||||
description="Explore our curated catalog for every need."
|
||||
items={[
|
||||
{
|
||||
title: "Classic Model",
|
||||
description: "The foundation of style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-modern-vase-design_23-2150529768.jpg",
|
||||
},
|
||||
{
|
||||
title: "Pro Edition",
|
||||
description: "Enhanced for power users.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-center-programmer-using-virtual-reality-setup-machine-learning-systems_482257-123201.jpg",
|
||||
},
|
||||
{
|
||||
title: "Elite Series",
|
||||
description: "Exclusive craftsmanship.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-quail-eggs-near-feathers-vase_23-2148073841.jpg",
|
||||
},
|
||||
{
|
||||
title: "Traveler Line",
|
||||
description: "Built for exploration.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flip-flops-stone-coast-near-water_23-2148107880.jpg",
|
||||
},
|
||||
{
|
||||
title: "Minimalist Pack",
|
||||
description: "Simplicity at its finest.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plastic-bottles-brush-mop-head-sponge-grey-background_23-2147860279.jpg",
|
||||
},
|
||||
{
|
||||
title: "Executive Suit",
|
||||
description: "Designed for leaders.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desk-with-objects_23-2147982377.jpg",
|
||||
},
|
||||
{
|
||||
title: "Limited Release",
|
||||
description: "Get it before it's gone.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-pieces-with-colorful-painting_23-2148742357.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Our Impact"
|
||||
title="Numbers That Matter"
|
||||
description="Driven by results, powered by community."
|
||||
metrics={[
|
||||
{
|
||||
value: "10K+",
|
||||
title: "Active Users",
|
||||
features: [
|
||||
"Daily engagement",
|
||||
"Global community",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
features: [
|
||||
"Success rate 99%",
|
||||
"Client retention",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
title: "Avg. Rating",
|
||||
features: [
|
||||
"Customer satisfaction",
|
||||
"Consistent excellence",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Feedback"
|
||||
title="Loved by Thousands"
|
||||
description="Hear what our community has to say about their experience."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice M.",
|
||||
role: "Creative Lead",
|
||||
quote: "Crave changed how I approach my daily work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-gesticulating_273609-40357.jpg",
|
||||
},
|
||||
{
|
||||
name: "David W.",
|
||||
role: "Designer",
|
||||
quote: "The most intuitive platform I have used.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-digital-tablet-office_329181-12063.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah P.",
|
||||
role: "Manager",
|
||||
quote: "Exceptional service and quality standards.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-smart-businesswoman-thinking-propensity_1262-5545.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark R.",
|
||||
role: "Developer",
|
||||
quote: "Fast, reliable, and perfectly designed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/video-editor-worker-standing-front-camera-smiling-working-creative-agency-office-holding-la_482257-3426.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane D.",
|
||||
role: "Strategist",
|
||||
quote: "Crave is indispensable for my success.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-happy-young-woman-with-bun-hairstyle-keeps-pams-near-face-smiles-toothily-applies-blue-eyeliner-wears-green-jumper-poses-outdoors-against-blurred-background-has-playful-mood_273609-59182.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted By"
|
||||
title="Industry Leaders"
|
||||
description="We partner with the best in the business."
|
||||
names={[
|
||||
"Innovate",
|
||||
"TechCorp",
|
||||
"DesignHub",
|
||||
"GlobalLogic",
|
||||
"StudioOne",
|
||||
"GrowthCo",
|
||||
"FutureSystems",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SocialProofSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="FAQ"
|
||||
title="Got Questions?"
|
||||
description="Everything you need to know about Crave."
|
||||
categories={[
|
||||
{
|
||||
name: "Getting Started",
|
||||
items: [
|
||||
{
|
||||
question: "How do I join?",
|
||||
answer: "Simply register via our app.",
|
||||
},
|
||||
{
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes, we offer a 14-day free trial.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Payments",
|
||||
items: [
|
||||
{
|
||||
question: "What payment methods do you accept?",
|
||||
answer: "All major credit cards and PayPal.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
<PricingSection />
|
||||
<ContactBranchesSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Join Us"
|
||||
text="Ready to transform your lifestyle? Get in touch today."
|
||||
primaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
39
src/pages/HomePage/sections/About.tsx
Normal file
39
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import { Shield, Sparkles, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Mission"
|
||||
title="Curated for Your Lifestyle"
|
||||
description="Crave bridges the gap between premium design and effortless functionality, ensuring you always experience the best."
|
||||
items={[
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Premium Quality",
|
||||
description: "Hand-picked materials for lasting satisfaction.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Fast Integration",
|
||||
description: "Seamlessly fits into your modern workflow.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Reliability",
|
||||
description: "Built for consistency and long-term performance.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-posing_23-2148880247.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/pages/HomePage/sections/ContactBranches.tsx
Normal file
53
src/pages/HomePage/sections/ContactBranches.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { MapPin, Phone } from 'lucide-react';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
|
||||
export default function ContactBranchesSection() {
|
||||
return (
|
||||
<section id="contact" data-webild-section="contact-branches" className="relative w-full py-24 bg-background-accent/10">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<TextAnimation tag="h2" text="Get in Touch" variant="slide-up" className="text-4xl md:text-5xl font-bold text-foreground mb-4" gradientText={false} />
|
||||
<ScrollReveal variant="fade-blur" delay={0.2}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">Visit us at one of our branches or give us a call.</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<div className="card p-8 rounded-theme border border-border bg-card h-full">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-6">Sam Nujoma Branch</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start">
|
||||
<MapPin className="w-6 h-6 text-primary-cta mr-4 flex-shrink-0 mt-1" />
|
||||
<p className="text-foreground">Located opposite Mlimani City Main Gate.</p>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<Phone className="w-6 h-6 text-primary-cta mr-4 flex-shrink-0 mt-1" />
|
||||
<p className="text-foreground">Phone/WhatsApp:<br/>0744 727 221 / 0798 121 423</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="slide-up" delay={0.2}>
|
||||
<div className="card p-8 rounded-theme border border-border bg-card h-full">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-6">Masaki Branch</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start">
|
||||
<MapPin className="w-6 h-6 text-primary-cta mr-4 flex-shrink-0 mt-1" />
|
||||
<p className="text-foreground">Located on Haile Selassie Road.</p>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<Phone className="w-6 h-6 text-primary-cta mr-4 flex-shrink-0 mt-1" />
|
||||
<p className="text-foreground">Phone:<br/>0744 888 112</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
44
src/pages/HomePage/sections/Faq.tsx
Normal file
44
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="FAQ"
|
||||
title="Got Questions?"
|
||||
description="Everything you need to know about Crave."
|
||||
categories={[
|
||||
{
|
||||
name: "Getting Started",
|
||||
items: [
|
||||
{
|
||||
question: "How do I join?",
|
||||
answer: "Simply register via our app.",
|
||||
},
|
||||
{
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes, we offer a 14-day free trial.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Payments",
|
||||
items: [
|
||||
{
|
||||
question: "What payment methods do you accept?",
|
||||
answer: "All major credit cards and PayPal.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/pages/HomePage/sections/Features.tsx
Normal file
40
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "features" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesMediaCarousel
|
||||
tag="Core Features"
|
||||
title="Why Choose Crave"
|
||||
description="Sophisticated tools tailored for the discerning user."
|
||||
items={[
|
||||
{
|
||||
title: "Smart Analytics",
|
||||
description: "Gain insights into your daily habits.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",
|
||||
},
|
||||
{
|
||||
title: "Global Reach",
|
||||
description: "Connected everywhere you go.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/network-connection-graphic-overlay-background-computer-screen_53876-120779.jpg",
|
||||
},
|
||||
{
|
||||
title: "Easy Management",
|
||||
description: "Simplify your life with a click.",
|
||||
buttonIcon: "ArrowRight",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
src/pages/HomePage/sections/Hero.tsx
Normal file
48
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Welcome to Crave"
|
||||
title="Experience Excellence at Your Fingertips"
|
||||
description="Discover the next evolution of lifestyle branding designed to elevate your daily routine."
|
||||
primaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fluffy-cotton-plant-vase-used-interior-decor_23-2151104666.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-automatic-smart-feeder-household-pets_23-2151482451.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-mobile-phone-lady-with-documents_1157-46419.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-model-with-afro-curls-hairstyle-dressed-summer-hipster-white-dress_158538-632.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-arrangement_23-2149080522.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-watercolor-background-with-abstract-design_23-2147923152.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/pages/HomePage/sections/Metrics.tsx
Normal file
46
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Our Impact"
|
||||
title="Numbers That Matter"
|
||||
description="Driven by results, powered by community."
|
||||
metrics={[
|
||||
{
|
||||
value: "10K+",
|
||||
title: "Active Users",
|
||||
features: [
|
||||
"Daily engagement",
|
||||
"Global community",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
features: [
|
||||
"Success rate 99%",
|
||||
"Client retention",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
title: "Avg. Rating",
|
||||
features: [
|
||||
"Customer satisfaction",
|
||||
"Consistent excellence",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
src/pages/HomePage/sections/Pricing.tsx
Normal file
60
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
|
||||
export default function PricingSection() {
|
||||
return (
|
||||
<section id="pricing" data-webild-section="pricing" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<TextAnimation tag="h2" text="Simple, Transparent Pricing" variant="slide-up" className="text-4xl md:text-5xl font-bold text-foreground mb-4" gradientText={false} />
|
||||
<ScrollReveal variant="fade-blur" delay={0.2}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">Choose the plan that best fits your needs.</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
name: "Basic",
|
||||
price: "Tsh 10,000",
|
||||
description: "Perfect for getting started.",
|
||||
features: ["Feature 1", "Feature 2", "Feature 3"],
|
||||
},
|
||||
{
|
||||
name: "Pro",
|
||||
price: "Tsh 25,000",
|
||||
description: "Ideal for regular users.",
|
||||
features: ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
|
||||
},
|
||||
{
|
||||
name: "Premium",
|
||||
price: "Tsh 50,000",
|
||||
description: "The ultimate experience.",
|
||||
features: ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Feature 5"],
|
||||
}
|
||||
].map((plan, index) => (
|
||||
<ScrollReveal key={index} variant="slide-up" delay={0.1 * index}>
|
||||
<div className="card p-8 rounded-theme border border-border bg-card flex flex-col h-full">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">{plan.name}</h3>
|
||||
<p className="text-muted-foreground mb-6">{plan.description}</p>
|
||||
<div className="text-4xl font-bold text-foreground mb-8">{plan.price}</div>
|
||||
<ul className="space-y-4 mb-8 flex-1">
|
||||
{plan.features.map((feature, i) => (
|
||||
<li key={i} className="flex items-center text-foreground">
|
||||
<Check className="w-5 h-5 text-primary-cta mr-3 flex-shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button text="Choose Plan" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Product.tsx
Normal file
57
src/pages/HomePage/sections/Product.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "product" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="product" data-section="product">
|
||||
<SectionErrorBoundary name="product">
|
||||
<FeaturesImageBento
|
||||
tag="Our Products"
|
||||
title="A Collection of Perfection"
|
||||
description="Explore our curated catalog for every need."
|
||||
items={[
|
||||
{
|
||||
title: "Classic Model",
|
||||
description: "The foundation of style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-modern-vase-design_23-2150529768.jpg",
|
||||
},
|
||||
{
|
||||
title: "Pro Edition",
|
||||
description: "Enhanced for power users.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-center-programmer-using-virtual-reality-setup-machine-learning-systems_482257-123201.jpg",
|
||||
},
|
||||
{
|
||||
title: "Elite Series",
|
||||
description: "Exclusive craftsmanship.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-quail-eggs-near-feathers-vase_23-2148073841.jpg",
|
||||
},
|
||||
{
|
||||
title: "Traveler Line",
|
||||
description: "Built for exploration.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flip-flops-stone-coast-near-water_23-2148107880.jpg",
|
||||
},
|
||||
{
|
||||
title: "Minimalist Pack",
|
||||
description: "Simplicity at its finest.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plastic-bottles-brush-mop-head-sponge-grey-background_23-2147860279.jpg",
|
||||
},
|
||||
{
|
||||
title: "Executive Suit",
|
||||
description: "Designed for leaders.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desk-with-objects_23-2147982377.jpg",
|
||||
},
|
||||
{
|
||||
title: "Limited Release",
|
||||
description: "Get it before it's gone.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-pieces-with-colorful-painting_23-2148742357.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "social-proof" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SocialProofSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted By"
|
||||
title="Industry Leaders"
|
||||
description="We partner with the best in the business."
|
||||
names={[
|
||||
"Innovate",
|
||||
"TechCorp",
|
||||
"DesignHub",
|
||||
"GlobalLogic",
|
||||
"StudioOne",
|
||||
"GrowthCo",
|
||||
"FutureSystems",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Feedback"
|
||||
title="Loved by Thousands"
|
||||
description="Hear what our community has to say about their experience."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice M.",
|
||||
role: "Creative Lead",
|
||||
quote: "Crave changed how I approach my daily work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-gesticulating_273609-40357.jpg",
|
||||
},
|
||||
{
|
||||
name: "David W.",
|
||||
role: "Designer",
|
||||
quote: "The most intuitive platform I have used.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-digital-tablet-office_329181-12063.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah P.",
|
||||
role: "Manager",
|
||||
quote: "Exceptional service and quality standards.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-smart-businesswoman-thinking-propensity_1262-5545.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark R.",
|
||||
role: "Developer",
|
||||
quote: "Fast, reliable, and perfectly designed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/video-editor-worker-standing-front-camera-smiling-working-creative-agency-office-holding-la_482257-3426.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane D.",
|
||||
role: "Strategist",
|
||||
quote: "Crave is indispensable for my success.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-happy-young-woman-with-bun-hairstyle-keeps-pams-near-face-smiles-toothily-applies-blue-eyeliner-wears-green-jumper-poses-outdoors-against-blurred-background-has-playful-mood_273609-59182.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user