Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
2026-03-05 22:54:57 +00:00
3 changed files with 149 additions and 114 deletions

View File

@@ -1,48 +1,20 @@
import type { Metadata } from "next";
import { Public_Sans } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const publicSans = Public_Sans({
variable: "--font-public-sans", subsets: ["latin"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Supplement Hub Pakistan | 100% Authentic Supplements", description: "Premium authentic supplements in Pakistan. 100% genuine products from USA & UK. Fast delivery. Verify with scratch codes. Shop protein, creatine, pre-workout and more.", keywords: "supplements Pakistan, authentic protein, gym supplements, fitness supplements, creatine, pre-workout, whey protein, supplement bundles, online supplement store", robots: {
index: true,
follow: true,
},
openGraph: {
title: "Supplement Hub Pakistan | 100% Authentic Supplements", description: "Premium authentic supplements imported from USA & UK. Fast delivery across Pakistan. Verified products with scratch-code authentication.", type: "website", siteName: "Supplement Hub Pakistan", images: [
{
url: "http://img.b2bpic.net/free-photo/refreshment-gym_1098-16161.jpg", alt: "Premium authentic supplements"},
],
},
twitter: {
card: "summary_large_image", title: "Supplement Hub Pakistan | 100% Authentic Supplements", description: "Premium authentic supplements imported from USA & UK. Fast delivery across Pakistan.", images: ["http://img.b2bpic.net/free-photo/refreshment-gym_1098-16161.jpg"],
},
};
title: "Luxury Supplement Hub - Premium Authentic Supplements", description: "Discover luxury supplement stacks crafted for elite performance. 100% authentic, laboratory verified, and imported from world-leading brands."};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${publicSans.variable} ${inter.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<body className={inter.className}>{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1410,7 +1382,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

View File

@@ -1,6 +1,6 @@
"use client";
import { CheckCircle, Globe, Shield, Sparkles, Zap } from "lucide-react";
import { CheckCircle, Globe, Shield, Sparkles, Zap, Palette } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroCentered from "@/components/sections/hero/HeroCentered";
@@ -12,8 +12,53 @@ import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { useState } from "react";
const THEME_OPTIONS = [
{ name: "Luxury Gold", id: "warmgrayOrange" },
{ name: "Midnight Blue", id: "midnightBlue" },
{ name: "Deep Purple", id: "violet" },
{ name: "Emerald Green", id: "emerald" },
{ name: "Ruby Red", id: "ruby" },
{ name: "Minimal Dark", id: "minimal" },
{ name: "Light Blue", id: "lightBlue" },
{ name: "Light Green", id: "lightGreen" },
];
export default function LandingPage() {
const [currentTheme, setCurrentTheme] = useState<string>("warmgrayOrange");
const getThemeColors = () => {
const themeMap: Record<string, Record<string, string>> = {
warmgrayOrange: {
"--background": "#f7f6f7", "--card": "#ffffff", "--foreground": "#25190c", "--primary-cta": "#ff6207", "--secondary-cta": "#ffffff", "--accent": "#ffce93", "--background-accent": "#e8cfa8"},
midnightBlue: {
"--background": "#000000", "--card": "#0c0c0c", "--foreground": "#ffffff", "--primary-cta": "#106EFB", "--secondary-cta": "#000000", "--accent": "#535353", "--background-accent": "#106EFB"},
violet: {
"--background": "#030128", "--card": "#241f48", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#131136", "--accent": "#44358a", "--background-accent": "#b597fe"},
emerald: {
"--background": "#000000", "--card": "#1f4035", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#0d2b1f", "--accent": "#0d5238", "--background-accent": "#10b981"},
ruby: {
"--background": "#000000", "--card": "#481f1f", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#361311", "--accent": "#51000b", "--background-accent": "#ff2231"},
minimal: {
"--background": "#0a0a0a", "--card": "#1a1a1a", "--foreground": "#ffffffe6", "--primary-cta": "#e6e6e6", "--secondary-cta": "#1a1a1a", "--accent": "#737373", "--background-accent": "#737373"},
lightBlue: {
"--background": "#010912", "--card": "#152840", "--foreground": "#e6f0ff", "--primary-cta": "#cee7ff", "--secondary-cta": "#0e1a29", "--accent": "#3f5c79", "--background-accent": "#004a93"},
lightGreen: {
"--background": "#000802", "--card": "#0b1a0b", "--foreground": "#e6ffe6", "--primary-cta": "#80da9b", "--secondary-cta": "#07170b", "--accent": "#38714a", "--background-accent": "#2c6541"},
};
return themeMap[currentTheme] || themeMap.warmgrayOrange;
};
const applyTheme = (themeId: string) => {
setCurrentTheme(themeId);
const colors = getThemeColors();
Object.entries(colors).forEach(([key, value]) => {
document.documentElement.style.setProperty(key, value as string);
});
};
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -29,47 +74,47 @@ export default function LandingPage() {
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Supplement Hub"
brandName="Luxury Supplement Co."
navItems={[
{ name: "Shop", id: "products" },
{ name: "Brands", id: "brands" },
{ name: "Bundles", id: "bundles" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
]}
button={{ text: "Start Shopping", href: "#products" }}
button={{ text: "Explore Collection", href: "#products" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
title="Build Muscle. Boost Recovery. Dominate Every Workout."
description="100% Authentic Supplements — Imported From USA & UK — Fast Delivery Across Pakistan"
title="Elite Performance. Premium Excellence. Uncompromising Quality."
description="Luxury supplement stacks crafted by elite athletes. Laboratory verified. 100% authentic. Delivered with precision."
background={{ variant: "downward-rays-static" }}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/refreshment-gym_1098-16161.jpg", alt: "Premium supplement showcase"},
src: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&h=300&fit=crop", alt: "Premium luxury supplement showcase"},
]}
avatarText="Trusted by thousands of Pakistani athletes"
avatarText="Trusted by elite athletes worldwide"
buttons={[
{ text: "Shop Authentic Supplements", href: "#products" },
{ text: "Verify Your Products", href: "#authenticity" },
{ text: "Explore Premium Collection", href: "#products" },
{ text: "View Certifications", href: "#authenticity" },
]}
buttonAnimation="slide-up"
ariaLabel="Hero section - Build muscle with authentic supplements"
ariaLabel="Hero section - Luxury supplement experience"
/>
</div>
<div id="trust-signals" data-section="trust-signals">
<TestimonialAboutCard
tag="Authenticity Guaranteed"
tag="Luxury Certified"
tagIcon={Shield}
title="Why Choose Supplement Hub?"
description="Your Trust Is Our Priority"
subdescription="Pakistan's Most Trusted Premium Supplement Store"
title="Why Choose Luxury Supplement Co.?"
description="Uncompromising Excellence"
subdescription="Laboratory verified, globally recognized, trusted by professional athletes and fitness enthusiasts"
icon={CheckCircle}
imageSrc="http://img.b2bpic.net/free-photo/guarantee-approved-authorized-certified-concept_53876-127950.jpg?_wi=1"
imageAlt="Authentic supplement verification"
imageSrc="https://images.unsplash.com/photo-1550259987-15efed910df5?w=600&h=400&fit=crop"
imageAlt="Premium supplement certification"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
/>
@@ -79,21 +124,21 @@ export default function LandingPage() {
<ProductCardThree
products={[
{
id: "1", name: "Optimum Nutrition Gold Standard Whey", price: "PKR 4,500", imageSrc: "http://img.b2bpic.net/free-vector/sport-nutrition-container_1284-6580.jpg", imageAlt: "ON Whey Protein - Premium Quality"},
id: "1", name: "Luxury Gold Standard Whey - 2.27kg", price: "$89.99", imageSrc: "https://images.unsplash.com/photo-1532538270461-da89922eca3f?w=400&h=300&fit=crop", imageAlt: "Premium Gold Standard Whey Protein"},
{
id: "2", name: "Creatine Monohydrate 100% Pure", price: "PKR 2,800", imageSrc: "http://img.b2bpic.net/free-photo/barman-filling-shaker-with-ice_23-2148209409.jpg", imageAlt: "Pure Creatine Monohydrate"},
id: "2", name: "Elite Creatine Monohydrate 300g", price: "$34.99", imageSrc: "https://images.unsplash.com/photo-1617947222101-c396e8b8e2e4?w=400&h=300&fit=crop", imageAlt: "Premium Creatine Monohydrate"},
{
id: "3", name: "Pre-Workout Energy Boost", price: "PKR 3,200", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-happy-athletic-woman-listening-music-earphones-having-water-break-after-sports-training_637285-5203.jpg", imageAlt: "Premium Pre-Workout Supplement"},
id: "3", name: "Premium Pre-Workout Elite Formula", price: "$49.99", imageSrc: "https://images.unsplash.com/photo-1616704149874-e76694c1b64e?w=400&h=300&fit=crop", imageAlt: "Premium Pre-Workout Supplement"},
]}
title="Featured Products"
description="Shop our bestselling authentic supplements trusted by fitness enthusiasts across Pakistan"
tag="Limited Stock"
title="Curated Premium Products"
description="Hand-selected luxury supplements from the world's most prestigious brands. Each product laboratory verified for purity and potency."
tag="Exclusive Selection"
tagIcon={Zap}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttons={[{ text: "View All Products", href: "#shop" }]}
buttons={[{ text: "View Complete Catalog", href: "#shop" }]}
buttonAnimation="opacity"
ariaLabel="Product section"
/>
@@ -103,15 +148,15 @@ export default function LandingPage() {
<FeatureCardTwentyThree
features={[
{
id: "1", title: "Import Certificates", tags: ["Official", "Verified"],
imageSrc: "http://img.b2bpic.net/free-photo/guarantee-approved-authorized-certified-concept_53876-127950.jpg?_wi=2", imageAlt: "Import certificates verification"},
id: "1", title: "Laboratory Verified Purity", tags: ["Certified", "Third-Party Tested"],
imageSrc: "https://images.unsplash.com/photo-1576091160550-112173f7f869?w=400&h=300&fit=crop", imageAlt: "Laboratory verification process"},
{
id: "2", title: "Scratch Code Verification", tags: ["Security", "Instant Check"],
imageSrc: "http://img.b2bpic.net/free-photo/guarantee-approved-authorized-certified-concept_53876-127950.jpg?_wi=3", imageAlt: "Scratch code verification system"},
id: "2", title: "Authenticity Guarantee", tags: ["Verified", "100% Genuine"],
imageSrc: "https://images.unsplash.com/photo-1578496494190-9d0a5bac0c3a?w=400&h=300&fit=crop", imageAlt: "Authenticity verification system"},
]}
title="100% Authentic Guarantee"
description="Verify every supplement with our unique scratch-code verification system. No fake products. Ever."
tag="Verified"
title="Premium Quality Assurance"
description="Every product undergoes rigorous laboratory testing. We guarantee 100% authenticity with full certification documentation and batch verification."
tag="Verified Excellence"
tagIcon={CheckCircle}
animationType="slide-up"
textboxLayout="default"
@@ -124,22 +169,22 @@ export default function LandingPage() {
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "Ali Khan", handle: "@alikhan_fitness", testimonial: "I gained 15kg of pure muscle in 4 months. The quality is unmatched and delivery to Lahore was super fast!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-sportsman-holds-hand-chin-dark-background_613910-19200.jpg", imageAlt: "Ali Khan testimonial"},
id: "1", name: "Marcus Johnson", handle: "@mjohnson_elite", testimonial: "Achieved 22 lbs of lean muscle in 12 weeks using the Elite Stack. The quality is incomparable. Highly recommend to serious athletes.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop", imageAlt: "Marcus Johnson testimonial"},
{
id: "2", name: "Hassan Ahmed", handle: "@hassanfitness_pk", testimonial: "Finally found authentic supplements in Pakistan. No fake products, verified codes work every time. Highly recommended!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/brutal-muscular-male-with-crossed-arms-dressed-blue-t-shirt-grey-background_613910-10043.jpg", imageAlt: "Hassan Ahmed testimonial"},
id: "2", name: "Sarah Chen", handle: "@sarahchen_fitness", testimonial: "The luxury supplement stacks transformed my training results. Lab verified, authentic, and the service is exceptional. Worth every penny.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=300&fit=crop", imageAlt: "Sarah Chen testimonial"},
{
id: "3", name: "Bilal Sheikh", handle: "@bilal_gains", testimonial: "The best supplement store in Pakistan. Fast shipping, authentic products, and incredible customer service. 10/10!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/muscled-adult-athlete-studio-wearing-black-pants_613910-2651.jpg", imageAlt: "Bilal Sheikh testimonial"},
id: "3", name: "David Rodriguez", handle: "@drodriguez_pro", testimonial: "Professional athlete here. These are the only supplements I trust. Premium quality, fast delivery, and customer service is outstanding.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=300&fit=crop", imageAlt: "David Rodriguez testimonial"},
{
id: "4", name: "Usman Malik", handle: "@usman_strength", testimonial: "Ordering from Supplement Hub changed my training. No more worrying about fake products. Results are real!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/female-bodybuilder-posing-with-chains-neck_651396-636.jpg", imageAlt: "Usman Malik testimonial"},
id: "4", name: "Emma Wilson", handle: "@emmawilson_gains", testimonial: "Best investment in my fitness journey. The results speak for themselves. Every product certified and authentic. Absolutely premium experience.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=300&fit=crop", imageAlt: "Emma Wilson testimonial"},
]}
showRating={true}
title="Real Transformations From Real Customers"
description="See what Pakistani athletes achieved with our authentic supplements"
tag="Success Stories"
title="Elite Athlete Reviews"
description="Real transformations from verified purchasers using our premium supplement stacks"
tag="Verified Reviews"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
@@ -151,41 +196,42 @@ export default function LandingPage() {
<PricingCardThree
plans={[
{
id: "beginner", price: "PKR 7,200", name: "Beginner's Stack", buttons: [{ text: "Add to Cart", href: "#shop" }],
id: "starter", badge: "Foundation", price: "$129.99", name: "Starter Elite Stack", buttons: [{ text: "Select Plan", href: "#" }],
features: [
"1kg Whey Protein", "200g Creatine", "12-month warranty", "Fast delivery"],
"1kg Premium Whey Protein", "200g Creatine Monohydrate", "Lab Verified Certificate", "Priority Support"],
},
{
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
price: "PKR 12,500", name: "Pro's Stack", buttons: [{ text: "Add to Cart", href: "#shop" }],
price: "$249.99", name: "Professional Elite Stack", buttons: [{ text: "Select Plan", href: "#" }],
features: [
"2kg Whey Protein", "400g Creatine", "Pre-Workout Energy", "24-month warranty", "Priority support"],
"2kg Premium Whey Protein", "500g Creatine Monohydrate", "Pre-Workout Elite Formula", "BCAA Complex 400g", "Full Lab Certification", "24/7 Concierge Support"],
},
{
id: "elite", price: "PKR 18,900", name: "Elite Bundle", buttons: [{ text: "Add to Cart", href: "#shop" }],
id: "elite", badge: "Luxury", badgeIcon: Sparkles,
price: "$449.99", name: "Ultimate Luxury Bundle", buttons: [{ text: "Select Plan", href: "#" }],
features: [
"3kg Whey Protein", "600g Creatine", "Premium Pre-Workout", "BCAA Complex", "Lifetime support", "Free shipping"],
"3kg Premium Whey Protein", "700g Creatine Monohydrate", "Premium Pre-Workout (300g)", "Complete BCAA Stack", "Multi-Vitamin Complex", "Full Lab Certification", "Lifetime Premium Support", "Free Priority Shipping"],
},
]}
title="Supplement Stacks"
description="Save up to 20% with our curated bundles designed by fitness experts"
tag="Best Value"
title="Luxury Supplement Stacks"
description="Curated bundles designed by elite athletes. Save up to 25% with our exclusive package offerings."
tag="Premium Bundles"
tagIcon={Sparkles}
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Supplement bundle pricing section"
ariaLabel="Luxury supplement bundle pricing section"
/>
</div>
<div id="brands" data-section="brands">
<SocialProofOne
title="Trusted Premium Brands"
description="We exclusively stock authentic supplements from the world's leading manufacturers"
tag="Global Partners"
title="Premium Global Partners"
description="Exclusively partnered with the world's most prestigious supplement manufacturers"
tag="Trusted Excellence"
tagIcon={Globe}
names={[
"Optimum Nutrition", "Dymatize", "MuscleTech", "Kevin Levrone", "Transparent Labs", "AllMax Nutrition", "ON Gold Standard", "MuscleTech Premium"]}
"Optimum Nutrition", "Dymatize Elite", "MuscleTech Pro Series", "Kevin Levrone Signature", "Transparent Labs", "AllMax Nutrition", "Myprotein Premium", "BSN Syntha-6"]}
textboxLayout="default"
useInvertedBackground={true}
speed={40}
@@ -194,13 +240,31 @@ export default function LandingPage() {
/>
</div>
<div id="theme-selector" data-section="theme-selector" style={{ padding: "4rem 2rem", textAlign: "center" }}>
<h2 style={{ marginBottom: "2rem", fontSize: "1.5rem", fontWeight: "bold" }}>Customize Your Theme</h2>
<div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
{THEME_OPTIONS.map((theme) => (
<button
key={theme.id}
onClick={() => applyTheme(theme.id)}
style={{
padding: "0.75rem 1.5rem", border: currentTheme === theme.id ? "2px solid var(--primary-cta)" : "1px solid var(--accent)", borderRadius: "var(--rounded-theme)", background: currentTheme === theme.id ? "var(--primary-cta)" : "var(--card)", color: currentTheme === theme.id ? "var(--background)" : "var(--foreground)", cursor: "pointer", fontWeight: currentTheme === theme.id ? "bold" : "normal", transition: "all 0.3s ease"}}
title={`Switch to ${theme.name} theme`}
>
<Palette size={16} style={{ display: "inline", marginRight: "0.5rem" }} />
{theme.name}
</button>
))}
</div>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to transform your body? Start your fitness journey with 100% authentic supplements delivered fast across Pakistan."
text="Ready to elevate your performance with premium supplements? Join elite athletes who trust our luxury collection for authentic, laboratory-verified excellence."
animationType="entrance-slide"
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "Contact Us", href: "#" },
{ text: "Explore Collection", href: "#products" },
{ text: "Contact Premium Support", href: "#" },
]}
background={{ variant: "downward-rays-static" }}
useInvertedBackground={false}
@@ -214,37 +278,37 @@ export default function LandingPage() {
{
title: "Shop", items: [
{ label: "All Products", href: "#products" },
{ label: "Bundles", href: "#bundles" },
{ label: "Brands", href: "#brands" },
{ label: "New Arrivals", href: "#" },
{ label: "Luxury Bundles", href: "#bundles" },
{ label: "Premium Brands", href: "#brands" },
{ label: "New Collection", href: "#" },
],
},
{
title: "Support", items: [
{ label: "Verify Products", href: "#authenticity" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns Policy", href: "#" },
{ label: "FAQ", href: "#" },
title: "Assurance", items: [
{ label: "Verify Authenticity", href: "#authenticity" },
{ label: "Lab Certifications", href: "#" },
{ label: "Quality Guarantee", href: "#" },
{ label: "Support", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Contact", href: "#" },
{ label: "Elite Partners", href: "#brands" },
{ label: "Careers", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Premium Blog", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Guarantee Policy", href: "#" },
],
},
]}
bottomLeftText="© 2025 Supplement Hub Pakistan. All rights reserved."
bottomRightText="Premium Authentic Supplements"
bottomLeftText="© 2025 Luxury Supplement Co. Premium Excellence Guaranteed."
bottomRightText="Globally Trusted | Laboratory Verified | Elite Athletes"
ariaLabel="Site footer"
/>
</div>

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #000000;
--card: #481f1f;
--foreground: #ffffff;
--primary-cta: #ffffff;
--background: #f7f6f7;
--card: #ffffff;
--foreground: #25190c;
--primary-cta: #ff6207;
--primary-cta-text: #280101;
--secondary-cta: #361311;
--secondary-cta: #ffffff;
--secondary-cta-text: #f6d4d4;
--accent: #51000b;
--background-accent: #ff2231;
--accent: #ffce93;
--background-accent: #e8cfa8;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);