Merge version_6_1781898052476 into main #6
@@ -15,13 +15,17 @@ import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
import TrustedBySection from './HomePage/sections/TrustedBy';
|
||||
import BusinessProblemsSection from './HomePage/sections/BusinessProblems';
|
||||
import AiDemosSection from './HomePage/sections/AiDemos';export default function HomePage(): React.JSX.Element {
|
||||
import AiDemosSection from './HomePage/sections/AiDemos';
|
||||
import AutomationShowcaseSection from './HomePage/sections/AutomationShowcase';
|
||||
import PremiumHamperSection from './HomePage/sections/PremiumHamper';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<TrustedBySection />
|
||||
<BusinessProblemsSection />
|
||||
<AiDemosSection />
|
||||
<AutomationShowcaseSection />
|
||||
<PremiumHamperSection />
|
||||
|
||||
<AboutSection />
|
||||
|
||||
|
||||
113
src/pages/HomePage/sections/AutomationShowcase.tsx
Normal file
113
src/pages/HomePage/sections/AutomationShowcase.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import React from 'react';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
||||
|
||||
export default function AutomationShowcaseSection() {
|
||||
return (
|
||||
<section data-webild-section="automation-showcase" id="automation-showcase" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="text-center mb-16 max-w-3xl mx-auto">
|
||||
<ScrollReveal variant="fade">
|
||||
<Tag text="Omnichannel Automation" className="mb-4" />
|
||||
</ScrollReveal>
|
||||
<TextAnimation
|
||||
text="Engage Customers Where They Are"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
|
||||
gradientText={false}
|
||||
/>
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<p className="text-lg text-accent">
|
||||
Turn your social channels into automated revenue engines with intelligent conversational agents.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="space-y-24">
|
||||
{/* WhatsApp */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<ScrollReveal variant="slide-up" className="order-2 lg:order-1">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-3xl font-bold text-foreground">WhatsApp Business Automation</h3>
|
||||
<p className="text-lg text-accent">
|
||||
Instantly respond to inquiries, qualify leads, and close sales directly through WhatsApp. Our AI agent handles the conversation naturally, 24/7, ensuring no lead goes cold.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-cta" />
|
||||
</div>
|
||||
<span className="text-foreground">Instant lead qualification</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-cta" />
|
||||
</div>
|
||||
<span className="text-foreground">Automated appointment booking</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-cta" />
|
||||
</div>
|
||||
<span className="text-foreground">Seamless CRM integration</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal variant="fade-blur" delay={0.2} className="order-1 lg:order-2">
|
||||
<div className="relative rounded-2xl overflow-hidden aspect-square lg:aspect-[4/3] card border border-white/5">
|
||||
<ImageOrVideo
|
||||
imageSrc="https://picsum.photos/seed/1630921774/1200/800"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Instagram */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<ScrollReveal variant="fade-blur" className="order-1">
|
||||
<div className="relative rounded-2xl overflow-hidden aspect-square lg:aspect-[4/3] card border border-white/5">
|
||||
<ImageOrVideo
|
||||
imageSrc="https://picsum.photos/seed/811721753/1200/800"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal variant="slide-up" delay={0.2} className="order-2">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-3xl font-bold text-foreground">Instagram DM Sales Funnel</h3>
|
||||
<p className="text-lg text-accent">
|
||||
Convert followers into paying customers automatically. The AI engages with story replies and direct messages, driving traffic to your booking links and answering FAQs instantly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-cta" />
|
||||
</div>
|
||||
<span className="text-foreground">Story reply automation</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-cta" />
|
||||
</div>
|
||||
<span className="text-foreground">Keyword-triggered DM flows</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary-cta" />
|
||||
</div>
|
||||
<span className="text-foreground">Direct booking link delivery</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
83
src/pages/HomePage/sections/PremiumHamper.tsx
Normal file
83
src/pages/HomePage/sections/PremiumHamper.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
||||
import ButtonBounce from '@/components/ui/ButtonBounce';
|
||||
import BorderGlow from '@/components/ui/BorderGlow';
|
||||
|
||||
export default function PremiumHamperSection() {
|
||||
return (
|
||||
<section data-webild-section="premium-hamper" id="premium-hamper" className="relative w-full bg-card overflow-hidden">
|
||||
{/* Decorative background elements */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-primary-cta/10 rounded-full blur-[120px] pointer-events-none" />
|
||||
|
||||
<div className="w-content-width mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 items-center">
|
||||
<ScrollReveal variant="slide-up">
|
||||
<div className="space-y-8">
|
||||
<Tag text="The Onboarding Experience" />
|
||||
|
||||
<div className="space-y-4">
|
||||
<TextAnimation
|
||||
text="Your Premium Welcome Hamper"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground"
|
||||
gradientText={false}
|
||||
/>
|
||||
<p className="text-xl text-accent leading-relaxed">
|
||||
Joining YourSmate™ isn't just a software upgrade—it's a physical transformation of your business presence. Every new partner receives our signature luxury onboarding kit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="relative h-full">
|
||||
<BorderGlow className="absolute inset-0 rounded-xl pointer-events-none" />
|
||||
<div className="relative p-6 bg-background/50 backdrop-blur-sm rounded-xl border border-white/5 h-full">
|
||||
<h4 className="text-lg font-bold text-foreground mb-2">NFC Smart Cards</h4>
|
||||
<p className="text-sm text-accent">Premium metal NFC cards for instant review collection and contact sharing with a single tap.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-full">
|
||||
<BorderGlow className="absolute inset-0 rounded-xl pointer-events-none" />
|
||||
<div className="relative p-6 bg-background/50 backdrop-blur-sm rounded-xl border border-white/5 h-full">
|
||||
<h4 className="text-lg font-bold text-foreground mb-2">Acrylic Stands</h4>
|
||||
<p className="text-sm text-accent">Elegant desk and counter displays with QR codes, seamlessly blending into your luxury environment.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative sm:col-span-2 h-full">
|
||||
<BorderGlow className="absolute inset-0 rounded-xl pointer-events-none" />
|
||||
<div className="relative p-6 bg-background/50 backdrop-blur-sm rounded-xl border border-white/5 h-full">
|
||||
<h4 className="text-lg font-bold text-foreground mb-2">Bespoke Packaging</h4>
|
||||
<p className="text-sm text-accent">Delivered in a matte-black, soft-touch magnetic box that sets the tone for our premium partnership.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<ButtonBounce text="Claim Your Hamper Today" variant="primary" href="#contact" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fade-blur" delay={0.2}>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary-cta/20 to-transparent rounded-theme blur-2xl" />
|
||||
<div className="relative rounded-theme overflow-hidden border border-white/10 shadow-2xl">
|
||||
<ImageOrVideo
|
||||
imageSrc="https://picsum.photos/seed/1069968313/1200/800"
|
||||
className="w-full h-full object-cover aspect-[4/5] lg:aspect-square"
|
||||
/>
|
||||
{/* Overlay gradient for luxury feel */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user