Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Blife Healthy - FastKart Marketplace</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --background: oklch(1.00 0 0); | |
| --foreground: oklch(0.35 0.03 170.67); | |
| --card: oklch(0.98 0 0); | |
| --card-foreground: oklch(0.33 0.03 195.55); | |
| --popover: oklch(0.98 0 0); | |
| --popover-foreground: oklch(0.40 0.03 202.00); | |
| --primary: oklch(0.69 0.11 176.67); | |
| --primary-foreground: oklch(1.00 0 0); | |
| --secondary: oklch(0.96 0 0); | |
| --secondary-foreground: oklch(0.51 0.09 174.36); | |
| --muted: oklch(0.97 0 0); | |
| --muted-foreground: oklch(0.35 0.02 173.03); | |
| --accent: oklch(0.92 0 0); | |
| --accent-foreground: oklch(0.61 0.23 31.75); | |
| --destructive: oklch(0.63 0.18 32.01); | |
| --border: oklch(0.91 0 0); | |
| --input: oklch(0.91 0 0); | |
| --ring: oklch(0.94 0.03 180.74); | |
| --chart-1: oklch(0.54 0.14 45.10); | |
| --chart-2: oklch(0.63 0.19 40.46); | |
| --chart-3: oklch(0.59 0.22 11.39); | |
| --chart-4: oklch(0.77 0.13 222.66); | |
| --chart-5: oklch(0.69 0.14 160.27); | |
| --sidebar: oklch(0.96 0.01 311.36); | |
| --sidebar-foreground: oklch(0.23 0 0); | |
| --sidebar-primary: oklch(0.61 0.23 31.75); | |
| --sidebar-primary-foreground: oklch(1.00 0 0); | |
| --sidebar-accent: oklch(0.88 0.02 323.34); | |
| --sidebar-accent-foreground: oklch(0.54 0.14 45.10); | |
| --sidebar-border: oklch(0.91 0 0); | |
| --sidebar-ring: oklch(0.63 0.19 40.46); | |
| --font-sans: Inter, sans-serif; | |
| --font-serif: Nunito, sans-serif; | |
| --font-mono: Roboto Mono, monospace; | |
| --radius: 0.5rem; | |
| --shadow-2xs: 0px 4px 16px -3px oklch(0.84 0 0 / 0.25); | |
| --shadow-xs: 0px 4px 16px -3px oklch(0.84 0 0 / 0.25); | |
| --shadow-sm: 0px 4px 16px -3px oklch(0.84 0 0 / 0.50), 0px 1px 2px -4px oklch(0.84 0 0 / 0.50); | |
| --shadow: 0px 4px 16px -3px oklch(0.84 0 0 / 0.50), 0px 1px 2px -4px oklch(0.84 0 0 / 0.50); | |
| --shadow-md: 0px 4px 16px -3px oklch(0.84 0 0 / 0.50), 0px 2px 4px -4px oklch(0.84 0 0 / 0.50); | |
| --shadow-lg: 0px 4px 16px -3px oklch(0.84 0 0 / 0.50), 0px 4px 6px -4px oklch(0.84 0 0 / 0.50); | |
| --shadow-xl: 0px 4px 16px -3px oklch(0.84 0 0 / 0.50), 0px 8px 10px -4px oklch(0.84 0 0 / 0.50); | |
| --shadow-2xl: 0px 4px 16px -3px oklch(0.84 0 0 / 1.25); | |
| --tracking-normal: -0.025em; | |
| --spacing: 0.225rem; | |
| } | |
| .dark { | |
| --background: oklch(0.23 0.01 260.69); | |
| --foreground: oklch(0.93 0 0); | |
| --card: oklch(0.26 0.01 260.70); | |
| --card-foreground: oklch(0.93 0 0); | |
| --popover: oklch(0.26 0.01 260.70); | |
| --popover-foreground: oklch(0.93 0 0); | |
| --primary: oklch(0.65 0.12 175.13); | |
| --primary-foreground: oklch(1.00 0 0); | |
| --secondary: oklch(0.19 0 0); | |
| --secondary-foreground: oklch(0.93 0 0); | |
| --muted: oklch(0.16 0 0); | |
| --muted-foreground: oklch(0.68 0 0); | |
| --accent: oklch(0.20 0 0); | |
| --accent-foreground: oklch(0.93 0 0); | |
| --destructive: oklch(0.68 0.01 182.71); | |
| --border: oklch(0.30 0.01 268.37); | |
| --input: oklch(0.30 0.01 268.37); | |
| --ring: oklch(0.61 0.12 59.39); | |
| --chart-1: oklch(0.71 0.12 52.89); | |
| --chart-2: oklch(0.77 0.13 222.66); | |
| --chart-3: oklch(0.69 0.14 160.27); | |
| --chart-4: oklch(0.59 0.22 11.39); | |
| --chart-5: oklch(0.80 0.15 82.32); | |
| --sidebar: oklch(0.23 0.01 260.69); | |
| --sidebar-foreground: oklch(0.93 0 0); | |
| --sidebar-primary: oklch(0.67 0.16 53.59); | |
| --sidebar-primary-foreground: oklch(1.00 0 0); | |
| --sidebar-accent: oklch(0.52 0.14 50.02); | |
| --sidebar-accent-foreground: oklch(0.93 0 0); | |
| --sidebar-border: oklch(0.30 0.01 268.37); | |
| --sidebar-ring: oklch(0.59 0.17 34.92); | |
| --shadow-2xs: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.05); | |
| --shadow-xs: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.05); | |
| --shadow-sm: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.10), 0 1px 2px -1px oklch(0.39 0.03 181.20 / 0.10); | |
| --shadow: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.10), 0 1px 2px -1px oklch(0.39 0.03 181.20 / 0.10); | |
| --shadow-md: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.10), 0 2px 4px -1px oklch(0.39 0.03 181.20 / 0.10); | |
| --shadow-lg: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.10), 0 4px 6px -1px oklch(0.39 0.03 181.20 / 0.10); | |
| --shadow-xl: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.10), 0 8px 10px -1px oklch(0.39 0.03 181.20 / 0.10); | |
| --shadow-2xl: 0 1px 3px 0px oklch(0.39 0.03 181.20 / 0.25); | |
| } | |
| @theme inline { | |
| --color-background: var(--background); | |
| --color-foreground: var(--foreground); | |
| --color-card: var(--card); | |
| --color-card-foreground: var(--card-foreground); | |
| --color-popover: var(--popover); | |
| --color-popover-foreground: var(--popover-foreground); | |
| --color-primary: var(--primary); | |
| --color-primary-foreground: var(--primary-foreground); | |
| --color-secondary: var(--secondary); | |
| --color-secondary-foreground: var(--secondary-foreground); | |
| --color-muted: var(--muted); | |
| --color-muted-foreground: var(--muted-foreground); | |
| --color-accent: var(--accent); | |
| --color-accent-foreground: var(--accent-foreground); | |
| --color-destructive: var(--destructive); | |
| --color-border: var(--border); | |
| --color-input: var(--input); | |
| --color-ring: var(--ring); | |
| --color-chart-1: var(--chart-1); | |
| --color-chart-2: var(--chart-2); | |
| --color-chart-3: var(--chart-3); | |
| --color-chart-4: var(--chart-4); | |
| --color-chart-5: var(--chart-5); | |
| --color-sidebar: var(--sidebar); | |
| --color-sidebar-foreground: var(--sidebar-foreground); | |
| --color-sidebar-primary: var(--sidebar-primary); | |
| --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); | |
| --color-sidebar-accent: var(--sidebar-accent); | |
| --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); | |
| --color-sidebar-border: var(--sidebar-border); | |
| --color-sidebar-ring: var(--sidebar-ring); | |
| --font-sans: var(--font-sans); | |
| --font-mono: var(--font-mono); | |
| --font-serif: var(--font-serif); | |
| --radius-sm: calc(var(--radius) - 4px); | |
| --radius-md: calc(var(--radius) - 2px); | |
| --radius-lg: var(--radius); | |
| --radius-xl: calc(var(--radius) + 4px); | |
| --shadow-2xs: var(--shadow-2xs); | |
| --shadow-xs: var(--shadow-xs); | |
| --shadow-sm: var(--shadow-sm); | |
| --shadow: var(--shadow); | |
| --shadow-md: var(--shadow-md); | |
| --shadow-lg: var(--shadow-lg); | |
| --shadow-xl: var(--shadow-xl); | |
| --shadow-2xl: var(--shadow-2xl); | |
| --tracking-tighter: calc(var(--tracking-normal) - 0.05em); | |
| --tracking-tight: calc(var(--tracking-normal) - 0.025em); | |
| --tracking-normal: var(--tracking-normal); | |
| --tracking-wide: calc(var(--tracking-normal) + 0.025em); | |
| --tracking-wider: calc(var(--tracking-normal) + 0.05em); | |
| --tracking-widest: calc(var(--tracking-normal) + 0.1em); | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background-color: var(--background); | |
| color: var(--foreground); | |
| letter-spacing: var(--tracking-normal); | |
| } | |
| .card { | |
| background-color: var(--card); | |
| color: var(--card-foreground); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: var(--primary-foreground); | |
| border-radius: var(--radius-lg); | |
| padding: 0.5rem 1rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .btn-primary:hover { | |
| opacity: 0.9; | |
| } | |
| .btn-secondary { | |
| background-color: var(--secondary); | |
| color: var(--secondary-foreground); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 0.5rem 1rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--accent); | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| border-radius: var(--radius-xl); | |
| padding: 0.25rem 0.75rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .badge-primary { | |
| background-color: var(--primary); | |
| color: var(--primary-foreground); | |
| } | |
| .badge-secondary { | |
| background-color: var(--secondary); | |
| color: var(--secondary-foreground); | |
| border: 1px solid var(--border); | |
| } | |
| .input { | |
| background-color: var(--background); | |
| border: 1px solid var(--input); | |
| border-radius: var(--radius-md); | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| transition: all 0.2s; | |
| } | |
| .input:focus { | |
| outline: none; | |
| border-color: var(--ring); | |
| box-shadow: 0 0 0 2px var(--ring); | |
| } | |
| .product-card { | |
| transition: all 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .category-card { | |
| transition: all 0.3s ease; | |
| } | |
| .category-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .hero-section { | |
| background: linear-gradient(135deg, oklch(0.75 0.15 240), oklch(0.70 0.15 180)); | |
| } | |
| .sale-badge { | |
| background: linear-gradient(45deg, var(--destructive), oklch(0.75 0.20 40)); | |
| } | |
| .featured-badge { | |
| background: linear-gradient(45deg, var(--primary), oklch(0.75 0.15 200)); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-background text-foreground"> | |
| <!-- Header --> | |
| <header class="bg-card shadow-md sticky top-0 z-50 border-b border-border"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://fastkart-frontend-json.vercel.app/_next/image?url=https%3A%2F%2Flaravel.pixelstrap.net%2Ffastkart%2Fstorage%2F4%2Flogo-dark.png&w=384&q=75" alt="FastKart Logo" class="h-10"> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search for products..." class="w-96 px-4 py-2 rounded-full border border-input focus:outline-none focus:ring-2 focus:ring-ring"> | |
| <i data-feather="search" class="absolute right-3 top-2.5 text-muted-foreground"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-accent"> | |
| <i data-feather="heart" class="w-5 h-5"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-accent relative"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| <span class="absolute -top-1 -right-1 bg-destructive text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-accent"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-primary text-primary-foreground"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between py-3"> | |
| <div class="flex space-x-6"> | |
| <a href="index.html" class="hover:opacity-80 font-medium">Home</a> | |
| <a href="#" class="hover:opacity-80 font-medium">Categories</a> | |
| <a href="#" class="hover:opacity-80 font-medium">Deals</a> | |
| <a href="#" class="hover:opacity-80 font-medium">Stores</a> | |
| <a href="#" class="hover:opacity-80 font-medium">Blog</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span>USD$</span> | |
| <div class="flex items-center"> | |
| <img src="https://fastkart-frontend-json.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FEnglish.953ea23c.png&w=48&q=75" alt="English" class="h-5 mr-1"> | |
| <span>English</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-section text-primary-foreground py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Blife Healthy Lifestyle</h1> | |
| <p class="text-xl mb-6">Discover premium health and wellness products for a better life.</p> | |
| <p class="text-lg mb-8">Special Offer: <span class="font-bold bg-accent text-accent-foreground px-2 py-1 rounded">HEALTHY20</span></p> | |
| <button class="btn-primary"> | |
| Shop Healthy Products | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="bg-card rounded-full w-80 h-80 flex items-center justify-center shadow-2xl border border-border"> | |
| <img src="http://static.photos/health/640x360/42" alt="Healthy Product" class="rounded-full w-64 h-64 object-cover"> | |
| </div> | |
| <div class="absolute -top-4 -right-4 sale-badge text-primary-foreground px-4 py-2 rounded-full font-bold"> | |
| SALE | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-12 bg-background"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Health Categories</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6"> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/health/200x200/1" alt="Vitamins" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Vitamins</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/food/200x200/2" alt="Supplements" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Supplements</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/nature/200x200/3" alt="Organic" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Organic Foods</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/people/200x200/4" alt="Fitness" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Fitness</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/wellness/200x200/5" alt="Wellness" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Wellness</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/medical/200x200/6" alt="Medical" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Medical Devices</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/food/200x200/7" alt="Nutrition" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Nutrition</h3> | |
| </div> | |
| <div class="category-card bg-card rounded-lg p-4 text-center hover:shadow-lg border border-border"> | |
| <img src="http://static.photos/nature/200x200/8" alt="Herbs" class="w-16 h-16 mx-auto mb-3 rounded"> | |
| <h3 class="font-medium">Herbs</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-12 bg-muted"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Featured Healthy Products</h2> | |
| <a href="#" class="text-primary hover:underline">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-card rounded-lg overflow-hidden shadow-md border border-border"> | |
| <div class="relative"> | |
| <img src="http://static.photos/health/640x360/10" alt="Organic Multivitamin" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 left-2 bg-destructive text-primary-foreground px-2 py-1 rounded text-sm font-bold"> | |
| SALE | |
| </div> | |
| <div class="absolute top-2 right-2 bg-card rounded-full p-2 shadow-md border border-border"> | |
| <i data-feather="heart" class="w-4 h-4 text-foreground"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Organic Multivitamin</h3> | |
| <p class="text-muted-foreground text-sm mb-3">Premium organic multivitamin with essential nutrients for daily health.</p> | |
| <div class="flex items-center mb-3"> | |
| <span class="text-destructive font-bold">$24.99</span> | |
| <span class="text-muted-foreground line-through ml-2">$29.99</span> | |
| </div> | |
| <button class="w-full btn-primary"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-card rounded-lg overflow-hidden shadow-md border border-border"> | |
| <div class="relative"> | |
| <img src="http://static.photos/food/640x360/11" alt="Protein Powder" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 left-2 bg-primary text-primary-foreground px-2 py-1 rounded text-sm font-bold"> | |
| FEATURED | |
| </div> | |
| <div class="absolute top-2 right-2 bg-card rounded-full p-2 shadow-md border border-border"> | |
| <i data-feather="heart" class="w-4 h-4 text-foreground"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Whey Protein Powder</h3> | |
| <p class="text-muted-foreground text-sm mb-3">High-quality whey protein for muscle recovery and growth.</p> | |
| <div class="flex items-center mb-3"> | |
| <span class="text-destructive font-bold">$34.99</span> | |
| <span class="text-muted-foreground line-through ml-2">$39.99</span> | |
| </div> | |
| <button class="w-full btn-primary"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-card rounded-lg overflow-hidden shadow-md border border-border"> | |
| <div class="relative"> | |
| <img src="http://static.photos/nature/640x360/12" alt="Herbal Tea" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 left-2 bg-accent text-accent-foreground px-2 py-1 rounded text-sm font-bold"> | |
| NEW | |
| </div> | |
| <div class="absolute top-2 right-2 bg-card rounded-full p-2 shadow-md border border-border"> | |
| <i data-feather="heart" class="w-4 h-4 text-foreground"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Detox Herbal Tea</h3> | |
| <p class="text-muted-foreground text-sm mb-3">Organic herbal tea blend for natural detoxification and relaxation.</p> | |
| <div class="flex items-center mb-3"> | |
| <span class="text-destructive font-bold">$12.99</span> | |
| <span class="text-muted-foreground line-through ml-2">$14.99</span> | |
| </div> | |
| <button class="w-full btn-primary"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-card rounded-lg overflow-hidden shadow-md border border-border"> | |
| <div class="relative"> | |
| <img src="http://static.photos/wellness/640x360/13" alt="Fitness Tracker" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 left-2 bg-secondary text-secondary-foreground px-2 py-1 rounded text-sm font-bold border border-border"> | |
| HOT | |
| </div> | |
| <div class="absolute top-2 right-2 bg-card rounded-full p-2 shadow-md border border-border"> | |
| <i data-feather="heart" class="w-4 h-4 text-foreground"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Fitness Tracker Watch</h3> | |
| <p class="text-muted-foreground text-sm mb-3">Advanced fitness tracker with heart rate monitoring and sleep analysis.</p> | |
| <div class="flex items-center mb-3"> | |
| <span class="text-destructive font-bold">$89.99</span> | |
| <span class="text-muted-foreground line-through ml-2">$99.99</span> | |
| </div> | |
| <button class="w-full btn-primary"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Health Tips Section --> | |
| <section class="py-12 bg-background"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Health & Wellness Tips</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary text-primary-foreground rounded-full p-3 mr-4"> | |
| <i data-feather="heart" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Heart Health</h3> | |
| </div> | |
| <p class="text-muted-foreground mb-4">Maintain a healthy heart with regular exercise, balanced diet, and stress management techniques.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn More | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary text-primary-foreground rounded-full p-3 mr-4"> | |
| <i data-feather="activity" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Fitness Routine</h3> | |
| </div> | |
| <p class="text-muted-foreground mb-4">Create a sustainable fitness routine that includes cardio, strength training, and flexibility exercises.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn More | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary text-primary-foreground rounded-full p-3 mr-4"> | |
| <i data-feather="coffee" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Nutrition Guide</h3> | |
| </div> | |
| <p class="text-muted-foreground mb-4">Follow a balanced nutrition plan with whole foods, plenty of fruits and vegetables, and adequate hydration.</p> | |
| <a href="#" class="text-primary font-medium flex items-center"> | |
| Learn More | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-primary text-primary-foreground"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Stay Healthy & Informed</h2> | |
| <p class="text-xl mb-8">Subscribe to our wellness newsletter for health tips and exclusive offers</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg text-foreground focus:outline-none bg-background"> | |
| <button class="bg-accent text-accent-foreground font-bold px-6 py-3 rounded-r-lg hover:opacity-90 transition duration-300"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-card text-foreground pt-16 pb-8 border-t border-border"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <img src="https://fastkart-frontend-json.vercel.app/_next/image?url=https%3A%2F%2Flaravel.pixelstrap.net%2Ffastkart%2Fstorage%2F4%2Flogo-dark.png&w=384&q=75" alt="FastKart Logo" class="h-10 mb-4"> | |
| <p class="text-muted-foreground mb-4">Your trusted partner for health and wellness products. Quality assurance and customer satisfaction guaranteed.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-muted-foreground hover:text-foreground"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-muted-foreground hover:text-foreground"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-muted-foreground hover:text-foreground"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-muted-foreground hover:text-foreground"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Health Categories</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Vitamins & Supplements</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Organic Foods</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Fitness Equipment</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Wellness Products</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Medical Devices</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Herbal Remedies</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-muted-foreground hover:text-foreground">Home</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">About Us</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Health Blog</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Special Offers</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Health Tips</a></li> | |
| <li><a href="#" class="text-muted-foreground hover:text-foreground">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contact Us</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-feather="map-pin" class="mr-2 mt-1 text-primary"></i> | |
| <span>123 Wellness Street, Health City, HC 96052</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="mr-2 text-primary"></i> | |
| <span>+1-555-123-4567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="mr-2 text-primary"></i> | |
| <span>health@fastkart.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-border pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-muted-foreground mb-4 md:mb-0">©2023 Blife Healthy - FastKart Marketplace. All rights reserved</p> | |
| <div class="flex space-x-4"> | |
| <img src="https://fastkart-frontend-json.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F1.00d1ba65.png&w=640&q=75" alt="Payment Methods" class="h-8"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |