Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8d154ae808 | |||
| 425c728fe8 | |||
| 12d5a3d2b8 | |||
| f53ce4094c | |||
| 0b436c0194 |
310
src/app/page.tsx
310
src/app/page.tsx
@@ -5,14 +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 { CheckCircle, Users, Zap } from "lucide-react";
|
||||
import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
|
||||
import { Truck, PackageCheck, ShieldCheck, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,203 +28,130 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Gift Cards", id: "products"},
|
||||
{
|
||||
name: "Gaming", id: "gaming"},
|
||||
{
|
||||
name: "Subscriptions", id: "subs"},
|
||||
{
|
||||
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."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#products"},
|
||||
{
|
||||
text: "Explore Deals", href: "#deals"},
|
||||
]}
|
||||
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="stats" data-section="stats">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Wolves Store Authority"
|
||||
metrics={[
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Orders Delivered", value: "128,540+"},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Happy Customers", value: "50,000+"},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Avg. Delivery", value: "12 Min"},
|
||||
]}
|
||||
metricsAnimation="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"
|
||||
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="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"},
|
||||
{
|
||||
id: "5", name: "Steam Wallet 10$ USA", price: "31 DT", imageSrc: "http://img.b2bpic.net/free-photo/game-sad-gamer-playing-shooter-video-games-powerful-computer-using-rgb-keyboard-gaming-room-defeated-man-with-headphones-streaming-online-cyber-performing-through-online-tournament_482257-12479.jpg"},
|
||||
{
|
||||
id: "6", name: "Free Fire Diamonds", price: "19 DT", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-discount-promotion-with-vr-boy_23-2152027049.jpg"},
|
||||
]}
|
||||
title="Trending in Tunisia"
|
||||
description="Discover our most popular digital assets and gaming credits."
|
||||
/>
|
||||
</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="categories" data-section="categories">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Gaming", description: "Top-ups for all major titles.", imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-holding-condom_171337-16497.jpg"},
|
||||
{
|
||||
title: "Gift Cards", description: "Global store credits.", imageSrc: "http://img.b2bpic.net/free-photo/table-setting-festive-christmas-dinner_169016-16432.jpg"},
|
||||
{
|
||||
title: "Subscriptions", description: "Streaming & Entertainment.", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-person-posing-winter-holidays_140725-135476.jpg"},
|
||||
]}
|
||||
title="Shop By Category"
|
||||
description="Navigate our premium gaming and digital services marketplace."
|
||||
/>
|
||||
</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="Exclusive bundles for our pro gamers."
|
||||
/>
|
||||
</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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", title: "Great Service", quote: "Fast delivery in 20 minutes!", name: "Yassine B.", role: "Gamer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-bipoc-gamer-engaging-online-competitive-multiplayer-game_482257-85713.jpg"},
|
||||
{
|
||||
id: "t2", title: "Professional", quote: "My Netflix account worked instantly.", name: "Sarah M.", role: "Subscriber", imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-girl-showing-thumbs-up-student-with-satisfied-feedback-recommending-smth-standing_1258-120072.jpg"},
|
||||
{
|
||||
id: "t3", title: "Cheap & Reliable", quote: "Best prices in the country.", name: "Mehdi K.", role: "Gamer", imageSrc: "http://img.b2bpic.net/free-photo/man-with-vr-glasses-futuristic-city_23-2150904667.jpg"},
|
||||
{
|
||||
id: "t4", title: "Premium Support", quote: "Support team was super helpful.", name: "Ahmed T.", role: "Pro Player", imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252464.jpg"},
|
||||
{
|
||||
id: "t5", title: "Trusted Marketplace", quote: "Won't use anyone else.", name: "Layla H.", role: "Streamer", imageSrc: "http://img.b2bpic.net/free-photo/supportive-cute-blond-girlfriend-cheering-liking-interesting-concept-cool-idea-thumbsup-smiling_1258-229592.jpg"},
|
||||
]}
|
||||
title="Trusted by Gamers"
|
||||
description="Hear from our satisfied Tunisian community."
|
||||
/>
|
||||
</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 long for delivery?", content: "Orders are typically fulfilled within 20 minutes."},
|
||||
{
|
||||
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: "email", type: "email", placeholder: "Your Email"},
|
||||
]}
|
||||
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