diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1978a67..1622637 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - - - - - {children} - + + {children} - ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 9bb3b97..9774af3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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("warmgrayOrange"); + + const getThemeColors = () => { + const themeMap: Record> = { + 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 ( @@ -79,21 +124,21 @@ export default function LandingPage() { @@ -103,15 +148,15 @@ export default function LandingPage() { + + Customize Your Theme + + {THEME_OPTIONS.map((theme) => ( + 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`} + > + + {theme.name} + + ))} + + + diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 7884bb3..e5b0178 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -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);