207 lines
13 KiB
TypeScript
207 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import { XCircle } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="small"
|
||
sizing="largeSizeMediumTitles"
|
||
background="floatingGradient"
|
||
cardStyle="gradient-bordered"
|
||
primaryButtonStyle="primary-glow"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
brandName="ShoulderPainRelief.pk"
|
||
logoSrc="http://img.b2bpic.net/free-photo/3d-render-male-figure-holding-neck-pain_1048-14142.jpg"
|
||
logoAlt="ShoulderPainRelief.pk Logo"
|
||
navItems={[
|
||
{ name: "Problem", id: "problem" },
|
||
{ name: "Features", id: "features" },
|
||
{ name: "Reviews", id: "reviews" },
|
||
{ name: "Order Now", id: "offer" }
|
||
]}
|
||
button={{
|
||
text: "Order Now & Get 40% Off →", href: "#offer"
|
||
}}
|
||
/>
|
||
</div>
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplit
|
||
title="Say Goodbye to Shoulder Pain — In Just 15 Minutes"
|
||
description="The Electric Heated Shoulder Brace that combines deep heat therapy + vibration massage to melt away pain — at home, at work, or on the go."
|
||
background={{"variant":"plain"}}
|
||
buttons={[
|
||
{ text: "Order Now & Get 40% Off →", href: "#offer" }
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-spending-time-with-her-dor_23-2148777120.jpg"
|
||
imageAlt="Person relaxing with Electric Shoulder Brace Heat Massager"
|
||
mediaAnimation="slide-up"
|
||
imagePosition="right"
|
||
fixedMediaHeight={true}
|
||
avatars={[
|
||
{ src: "http://img.b2bpic.net/free-photo/irritated-young-caucasian-ill-man-wearing-glasses-winter-hat-scarf-doing-strong-gesture-keeping-hand-chest-showing-tongue-isolated-white-background-with-copy-space_141793-76666.jpg", alt: "3-Level Heat Control icon" },
|
||
{ src: "http://img.b2bpic.net/free-photo/various-devices-table_140725-9009.jpg", alt: "Rechargeable Battery icon" },
|
||
{ src: "http://img.b2bpic.net/free-photo/some-3d-glasses_23-2147775805.jpg", alt: "Fits Left & Right Shoulder icon" },
|
||
{ src: "http://img.b2bpic.net/free-photo/user-sign-front-side_187299-39603.jpg", alt: "30-Day Money Back Guarantee icon" }
|
||
]}
|
||
avatarText="Trusted by thousands for pain relief"
|
||
/>
|
||
</div>
|
||
<div id="problem" data-section="problem">
|
||
<TestimonialAboutCard
|
||
tag="Your Struggle"
|
||
title="Sound Familiar?"
|
||
description="Shoulder pain that won't go away no matter what you try. Physiotherapy sessions costing thousands of rupees every month. Pain killers that only mask the problem temporarily. Cold nights where your shoulder aches you out of sleep. Can't lift your arm properly at work or at the gym."
|
||
subdescription="You don't need another painkiller. You need real heat — delivered exactly where it hurts."
|
||
icon={XCircle}
|
||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-sitting-mat-fitness-center-doing-yoga-stretching_169016-47279.jpg"
|
||
imageAlt="Person grimacing from shoulder pain"
|
||
mediaAnimation="opacity"
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
<div id="product-intro" data-section="product-intro">
|
||
<ProductCardThree
|
||
title="Meet the Smart Shoulder Brace That Works While You Rest"
|
||
description="Designed with infrared heating technology and multi-point vibration, this shoulder wrap delivers clinic-level relief without the clinic price. Just strap it on and let it work."
|
||
gridVariant="uniform-all-items-equal"
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{ id: "shoulder-brace", name: "Electric Heated Shoulder Brace Massager", price: "Rs. 3,599", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-being-love_23-2149248699.jpg?_wi=1", imageAlt: "Electric Heated Shoulder Brace in use" },
|
||
{ id: "shoulder-brace-advanced", name: "Shoulder Brace Pro Model", price: "Rs. 4,999", imageSrc: "http://img.b2bpic.net/free-photo/person-using-massage-gun_23-2149398544.jpg?_wi=1", imageAlt: "Advanced Electric Heated Shoulder Brace" },
|
||
{ id: "shoulder-brace-bundle", name: "Shoulder Brace + Carry Case", price: "Rs. 4,299", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-being-love_23-2149248699.jpg?_wi=2", imageAlt: "Shoulder Brace Bundle with Carry Case" }
|
||
]}
|
||
/>
|
||
</div>
|
||
<div id="features" data-section="features">
|
||
<FeatureCardThree
|
||
title="Everything Your Shoulder Needs. Nothing It Doesn't."
|
||
description="Discover the core features that make our Electric Heated Shoulder Brace the ultimate solution for your pain relief."
|
||
gridVariant="three-columns-all-equal-width"
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{ title: "3-Level Infrared Heat", description: "Penetrates deep into joints & muscles for real relief", imageSrc: "http://img.b2bpic.net/free-photo/irritated-young-caucasian-ill-man-wearing-glasses-winter-hat-scarf-doing-strong-gesture-keeping-hand-chest-showing-tongue-isolated-white-background-with-copy-space_141793-76666.jpg", imageAlt: "Infrared heat icon" },
|
||
{ title: "Vibration Massage Modes", description: "Stimulates blood flow, reduces stiffness fast", imageSrc: "http://img.b2bpic.net/free-photo/close-up-therapist-massaging-patient_23-2148882167.jpg", imageAlt: "Vibration massage icon" },
|
||
{ title: "LED Digital Display", description: "See your settings clearly — no guesswork", imageSrc: "http://img.b2bpic.net/free-photo/electronic-musical-instrument-audio-mixer-sound-equalizer-analog-modular-synthesizer_1381-4.jpg", imageAlt: "LED digital display" },
|
||
{ title: "Rechargeable Battery", description: "Wireless freedom — use it anywhere", imageSrc: "http://img.b2bpic.net/free-photo/various-devices-table_140725-9009.jpg", imageAlt: "Rechargeable battery icon" },
|
||
{ title: "Adjustable Strap", description: "Fits all shoulder sizes, left or right", imageSrc: "http://img.b2bpic.net/free-photo/some-3d-glasses_23-2147775805.jpg", imageAlt: "Adjustable strap icon" },
|
||
{ title: "Breathable Mesh Fabric", description: "Comfortable for extended wear", imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture_1308-4856.jpg", imageAlt: "Breathable mesh fabric icon" },
|
||
{ title: "Auto Shut-Off Timer", description: "Safe 15–30 min sessions, no overheating", imageSrc: "http://img.b2bpic.net/free-photo/user-sign-front-side_187299-39603.jpg", imageAlt: "Auto shut-off timer icon" }
|
||
]}
|
||
/>
|
||
</div>
|
||
<div id="how-it-works" data-section="how-it-works">
|
||
<MetricCardFourteen
|
||
title="Relief in 3 Simple Steps"
|
||
tag="Easy Setup"
|
||
metrics={[
|
||
{ id: "step-1", value: "1.", description: "Strap It On — Adjustable belt fits any shoulder perfectly" },
|
||
{ id: "step-2", value: "2.", description: "Select Your Mode — Choose heat level & vibration intensity on the LED panel" },
|
||
{ id: "step-3", value: "3.", description: "Relax & Recover — Feel the heat penetrate deep within minutes" }
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
<div id="who-its-for" data-section="who-its-for">
|
||
<SocialProofOne
|
||
title="Perfect For..."
|
||
tag="Targeted Relief"
|
||
description="Our Electric Heated Shoulder Brace is designed for a variety of needs."
|
||
textboxLayout="default"
|
||
names={[
|
||
"Office workers with frozen shoulder from sitting all day", "Gym-goers with post-workout soreness", "Older adults with arthritis or joint stiffness", "Anyone recovering from a shoulder injury", "People woken up by shoulder pain at night"
|
||
]}
|
||
speed={40}
|
||
showCard={false}
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardTwelve
|
||
cardTitle="Join 12,000+ Customers Living Pain-Free"
|
||
cardTag="Real Stories"
|
||
cardAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{ id: "1", name: "Ali Raza, Lahore", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-surprised-expression_1194-3809.jpg", imageAlt: "Ali Raza" },
|
||
{ id: "2", name: "Sana M., Karachi", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-girl-looking-straight-ahead-wearing-white-t-shirt-isolated-pink_141793-86615.jpg", imageAlt: "Sana M." },
|
||
{ id: "3", name: "Usman K., Islamabad", imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-pleased-brunette-man-with-beard-posing-with-cup-tea-his-apartment_197531-5563.jpg", imageAlt: "Usman K." },
|
||
{ id: "4", name: "Fatima N., Faisalabad", imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-beach-excursion_23-2148801489.jpg", imageAlt: "Fatima N." },
|
||
{ id: "5", name: "Hassan B., Rawalpindi", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-peace-sign-with-fingers_181624-56338.jpg", imageAlt: "Hassan B." }
|
||
]}
|
||
/>
|
||
</div>
|
||
<div id="offer" data-section="offer">
|
||
<PricingCardNine
|
||
title="Today Only — 40% Off + Free Delivery"
|
||
description="Original Price: ~~Rs. 50,000~~
|
||
🔥 Sale Price: **Rs. 25,000**
|
||
🚚 Free delivery nationwide
|
||
🔄 30-day easy return
|
||
🔒 Cash on Delivery available
|
||
|
||
⚠️ Sirf 23 pieces baqi hain — abhi order karein! (Only 23 pieces left — order now!)"
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={true}
|
||
plans={[
|
||
{ id: "current-offer", title: "Special Offer Price", price: "Rs. 25,000", period: "Today Only", features: ["40% Off (Save Rs. 25,000)", "Free Delivery Nationwide", "30-Day Easy Return Policy", "Cash on Delivery Available"], button: { text: "Order Karo — COD Available →", href: "#" }, imageSrc: "http://img.b2bpic.net/free-photo/person-using-massage-gun_23-2149398544.jpg?_wi=2", imageAlt: "Electric Heated Shoulder Brace Massager product shot" }
|
||
]}
|
||
/>
|
||
</div>
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
title="Frequently Asked Questions"
|
||
description="Find answers to common questions about the Electric Shoulder Brace Heat Massager."
|
||
textboxLayout="default"
|
||
faqsAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{ id: "q1", title: "Kya yeh both shoulders pe use ho sakta hai?", content: "Haan! Adjustable strap left aur right dono shoulders pe fit hota hai." },
|
||
{ id: "q2", title: "Is it safe to use daily?", content: "Yes. Auto shut-off timer ensures safe 15–30 min sessions daily." },
|
||
{ id: "q3", title: "Battery kitni der chalti hai?", content: "Fully charged battery 2–3 sessions tak chalti hai." },
|
||
{ id: "q4", title: "Kya COD available hai?", content: "Bilkul! Cash on Delivery poore Pakistan mein available hai." }
|
||
]}
|
||
/>
|
||
</div>
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseCard
|
||
logoText="ShoulderPainRelief.pk"
|
||
logoSrc="http://img.b2bpic.net/free-photo/3d-render-male-figure-holding-neck-pain_1048-14142.jpg"
|
||
logoAlt="ShoulderPainRelief.pk Logo"
|
||
columns={[
|
||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "How it Works", href: "#how-it-works" }, { label: "Reviews", href: "#reviews" }] },
|
||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact Us", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] },
|
||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||
]}
|
||
copyrightText="© 2024 ShoulderPainRelief.pk. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|