Update src/app/page.tsx
This commit is contained in:
235
src/app/page.tsx
235
src/app/page.tsx
@@ -5,15 +5,13 @@ import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
|
||||
import { CheckCircle, Users, Zap, Truck, PackageCheck, ShieldCheck } from "lucide-react";
|
||||
import { Truck, PackageCheck, ShieldCheck, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,129 +28,130 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Tracking", id: "tracking" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Deals", id: "deals" },
|
||||
]}
|
||||
brandName="Wolves Store"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Tracking", id: "tracking" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Deals", id: "deals" },
|
||||
]}
|
||||
brandName="Wolves Store"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
logoText="Power Your Digital World"
|
||||
description="Premium gift cards, gaming top-ups, and digital services delivered fast in Tunisia. Now with real-time order status updates."
|
||||
buttons={[
|
||||
{ text: "Track My Order", href: "#tracking" },
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/wolfpack-branding-logo-template_23-2149205934.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
logoText="Power Your Digital World"
|
||||
description="Premium gift cards, gaming top-ups, and digital services delivered fast in Tunisia. Now with real-time order status updates."
|
||||
buttons={[
|
||||
{ text: "Track My Order", href: "#tracking" },
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/wolfpack-branding-logo-template_23-2149205934.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="tracking" data-section="tracking">
|
||||
<TimelinePhoneView
|
||||
title="Real-Time Order Tracking"
|
||||
description="Watch your digital goods move from purchase to instant delivery."
|
||||
tag="Live Updates"
|
||||
tagIcon={Truck}
|
||||
textboxLayout="split"
|
||||
items={[
|
||||
{ trigger: "Order Placed", content: "Your order has been received and is being verified by our automated system.", imageOne: "http://img.b2bpic.net/free-photo/shopping-smiling-middle-aged-woman-showing-credit-discount-card-looking-happy-recommend-contactless-paying-buying-smth-standing-white-background_176420-46425.jpg" },
|
||||
{ trigger: "Verification", content: "Payment confirmation and account credential preparation in progress.", imageOne: "http://img.b2bpic.net/free-photo/pink-light-bulb-camera-with-blue-light-pink-surface_23-2148084320.jpg" },
|
||||
{ trigger: "Instant Delivery", content: "Your code or digital asset is sent to your email or via WhatsApp instantly.", imageOne: "http://img.b2bpic.net/free-photo/cinema-elements-white-frame-red-background_23-2148416759.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="tracking" data-section="tracking">
|
||||
<TimelinePhoneView
|
||||
title="Real-Time Order Tracking"
|
||||
description="Watch your digital goods move from purchase to instant delivery."
|
||||
tag="Live Updates"
|
||||
tagIcon={Truck}
|
||||
textboxLayout="split"
|
||||
animationType="blur-reveal"
|
||||
items={[
|
||||
{ trigger: "Order Placed", content: "Your order has been received and is being verified by our automated system.", imageOne: "http://img.b2bpic.net/free-photo/shopping-smiling-middle-aged-woman-showing-credit-discount-card-looking-happy-recommend-contactless-paying-buying-smth-standing-white-background_176420-46425.jpg" },
|
||||
{ trigger: "Verification", content: "Payment confirmation and account credential preparation in progress.", imageOne: "http://img.b2bpic.net/free-photo/pink-light-bulb-camera-with-blue-light-pink-surface_23-2148084320.jpg" },
|
||||
{ trigger: "Instant Delivery", content: "Your code or digital asset is sent to your email or via WhatsApp instantly.", imageOne: "http://img.b2bpic.net/free-photo/cinema-elements-white-frame-red-background_23-2148416759.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Wolves Store Authority"
|
||||
metrics={[
|
||||
{ icon: PackageCheck, label: "Orders Verified", value: "128,540+" },
|
||||
{ icon: ShieldCheck, label: "Secured Transact", value: "100%" },
|
||||
{ icon: Zap, label: "Avg. Delivery", value: "12 Min" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Wolves Store Authority"
|
||||
metrics={[
|
||||
{ icon: PackageCheck, label: "Orders Verified", value: "128,540+" },
|
||||
{ icon: ShieldCheck, label: "Secured Transact", value: "100%" },
|
||||
{ icon: Zap, label: "Avg. Delivery", value: "12 Min" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "PUBG Mobile 325 UC", price: "27 DT", imageSrc: "http://img.b2bpic.net/free-photo/shooting-shooting-rangethe-woman-shooting-range-shot-from-gun_627829-8524.jpg" },
|
||||
{ id: "2", name: "TikTok 1000 Coins", price: "15 DT", imageSrc: "http://img.b2bpic.net/free-photo/shopping-smiling-middle-aged-woman-showing-credit-discount-card-looking-happy-recommend-contactless-paying-buying-smth-standing-white-background_176420-46425.jpg" },
|
||||
{ id: "3", name: "Google Play 10$ USA", price: "31 DT", imageSrc: "http://img.b2bpic.net/free-photo/pink-light-bulb-camera-with-blue-light-pink-surface_23-2148084320.jpg" },
|
||||
{ id: "4", name: "Netflix 1 Month", price: "22 DT", imageSrc: "http://img.b2bpic.net/free-photo/cinema-elements-white-frame-red-background_23-2148416759.jpg" },
|
||||
]}
|
||||
title="Trending in Tunisia"
|
||||
description="Fast delivery guaranteed for every order."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "PUBG Mobile 325 UC", price: "27 DT", imageSrc: "http://img.b2bpic.net/free-photo/shooting-shooting-rangethe-woman-shooting-range-shot-from-gun_627829-8524.jpg" },
|
||||
{ id: "2", name: "TikTok 1000 Coins", price: "15 DT", imageSrc: "http://img.b2bpic.net/free-photo/shopping-smiling-middle-aged-woman-showing-credit-discount-card-looking-happy-recommend-contactless-paying-buying-smth-standing-white-background_176420-46425.jpg" },
|
||||
{ id: "3", name: "Google Play 10$ USA", price: "31 DT", imageSrc: "http://img.b2bpic.net/free-photo/pink-light-bulb-camera-with-blue-light-pink-surface_23-2148084320.jpg" },
|
||||
{ id: "4", name: "Netflix 1 Month", price: "22 DT", imageSrc: "http://img.b2bpic.net/free-photo/cinema-elements-white-frame-red-background_23-2148416759.jpg" },
|
||||
]}
|
||||
title="Trending in Tunisia"
|
||||
description="Fast delivery guaranteed for every order."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="deals" data-section="deals">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "p1", badge: "Popular", price: "24 DT", subtitle: "5 USD Credits", features: ["Instant Delivery", "USA Region"] },
|
||||
{ id: "p2", badge: "Value", price: "47 DT", subtitle: "10 USD Credits", features: ["Instant Delivery", "Global Support"] },
|
||||
{ id: "p3", badge: "Pro", price: "70 DT", subtitle: "15 USD Credits", features: ["Instant Delivery", "Bonus Points"] },
|
||||
]}
|
||||
title="Best Sellers"
|
||||
description="Secure, trackable, and instant."
|
||||
/>
|
||||
</div>
|
||||
<div id="deals" data-section="deals">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "p1", badge: "Popular", price: "24 DT", subtitle: "5 USD Credits", features: ["Instant Delivery", "USA Region"] },
|
||||
{ id: "p2", badge: "Value", price: "47 DT", subtitle: "10 USD Credits", features: ["Instant Delivery", "Global Support"] },
|
||||
{ id: "p3", badge: "Pro", price: "70 DT", subtitle: "15 USD Credits", features: ["Instant Delivery", "Bonus Points"] },
|
||||
]}
|
||||
title="Best Sellers"
|
||||
description="Secure, trackable, and instant."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do I track my order?", content: "Use the tracking section on our site with your order number for real-time updates." },
|
||||
{ id: "f2", title: "Which payment methods?", content: "We support D17 and bank transfers." },
|
||||
{ id: "f3", title: "Are products guaranteed?", content: "Yes, we provide 100% secure, official codes." },
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Reach out to our support team anytime."
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do I track my order?", content: "Use the tracking section on our site with your order number for real-time updates." },
|
||||
{ id: "f2", title: "Which payment methods?", content: "We support D17 and bank transfers." },
|
||||
{ id: "f3", title: "Are products guaranteed?", content: "Yes, we provide 100% secure, official codes." },
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Reach out to our support team anytime."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Support?"
|
||||
description="Our team is available to help you via WhatsApp or Telegram."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "orderNumber", type: "text", placeholder: "Order Number (optional)" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DiYOlCZg9DmbZPL3CBnsKY4YrQ/uploaded-1779411948624-q7urun9f.png"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Support?"
|
||||
description="Our team is available to help you via WhatsApp or Telegram."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "orderNumber", type: "text", placeholder: "Order Number (optional)" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DiYOlCZg9DmbZPL3CBnsKY4YrQ/uploaded-1779411948624-q7urun9f.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Store", items: [{ label: "Gift Cards", href: "#" }, { label: "Gaming", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="Wolves Store"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Store", items: [{ label: "Gift Cards", href: "#" }, { label: "Gaming", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="Wolves Store"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user