feat: initial commit — storefront, convex backend, and shared packages
Completes the first milestone of The Pet Loft ecommerce platform: - apps/storefront: full customer-facing Next.js app with HeroUI (cart, checkout, orders, wishlist, product detail, shop, search, auth) - convex/: serverless backend with schema, queries, mutations, actions, HTTP routes, Stripe/Shippo integrations, and co-located tests - packages/types, packages/utils, packages/convex: shared workspace packages Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
547
apps/storefront/src/components/utils/code.html
Normal file
547
apps/storefront/src/components/utils/code.html
Normal file
@@ -0,0 +1,547 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>Pet Store E-commerce - Pet Favourites</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet" />
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#0ab8b8",
|
||||
"dark-teal": "#004751",
|
||||
"light-blue": "#a9cadb",
|
||||
"badge-blue": "#4dbbd5",
|
||||
"background-light": "#f5f8f8",
|
||||
"background-dark": "#102222",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Plus Jakarta Sans", "sans-serif"]
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "1rem",
|
||||
"lg": "2rem",
|
||||
"xl": "3rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.material-symbols-outlined.filled {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased">
|
||||
<header class="w-full flex flex-col shadow-sm sticky top-0 z-50">
|
||||
<div class="w-full bg-slate-50 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
|
||||
<div
|
||||
class="max-w-[1440px] mx-auto px-6 lg:px-12 flex items-center justify-between h-10 text-xs font-medium text-slate-600 dark:text-slate-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-primary font-bold">petstore.com</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-2">
|
||||
<span class="text-red-500 font-bold uppercase tracking-wider">Special Offer:</span>
|
||||
<span class="font-semibold text-slate-800 dark:text-slate-200">10% off your first order!</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="flex items-center gap-1.5 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[16px]">headset_mic</span>
|
||||
<span>Contact</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-4 border-l border-slate-200 dark:border-slate-700 pl-4">
|
||||
<button class="flex items-center gap-1 hover:text-primary">
|
||||
<span>EN</span>
|
||||
<span class="material-symbols-outlined text-[14px]">expand_more</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1 hover:text-primary">
|
||||
<span>USD</span>
|
||||
<span class="material-symbols-outlined text-[14px]">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white dark:bg-background-dark border-b border-slate-100 dark:border-slate-800">
|
||||
<div class="max-w-[1440px] mx-auto px-6 lg:px-12 flex items-center justify-between h-20 gap-8">
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
<div class="size-10 bg-primary rounded-xl flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined text-[28px]">pets</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-xl font-extrabold leading-none text-slate-900 dark:text-white tracking-tight">PetStore</span>
|
||||
<span
|
||||
class="text-[10px] font-bold text-primary uppercase tracking-[0.2em] leading-none mt-1">Marketplace</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 max-w-2xl hidden md:block">
|
||||
<div
|
||||
class="relative flex items-center w-full h-12 bg-slate-100 dark:bg-slate-800 rounded-full p-1 border border-transparent focus-within:border-primary/30 focus-within:bg-white dark:focus-within:bg-slate-900 transition-all">
|
||||
<button
|
||||
class="flex items-center gap-1 px-4 text-sm font-semibold text-slate-700 dark:text-slate-300 hover:text-primary transition-colors shrink-0">
|
||||
<span>All Categories</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
</button>
|
||||
<div class="w-px h-6 bg-slate-300 dark:bg-slate-600"></div>
|
||||
<input
|
||||
class="w-full bg-transparent border-none focus:ring-0 text-sm px-4 placeholder:text-slate-500 text-slate-900 dark:text-slate-100"
|
||||
placeholder="Search for food, toys, pharmacy..." type="text" />
|
||||
<button
|
||||
class="size-10 bg-primary rounded-full flex items-center justify-center text-white hover:bg-primary/90 transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 lg:gap-5 shrink-0">
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-2 rounded-xl hover:bg-primary/10 transition-colors text-slate-700 dark:text-slate-300">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<div class="hidden lg:flex flex-col items-start text-left">
|
||||
<span class="text-[10px] leading-none uppercase font-bold text-slate-400">Account</span>
|
||||
<span class="text-sm font-bold leading-none mt-1">Login</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="relative size-10 flex items-center justify-center rounded-xl hover:bg-primary/10 transition-colors text-slate-700 dark:text-slate-300">
|
||||
<span class="material-symbols-outlined">favorite</span>
|
||||
<span
|
||||
class="absolute -top-1 -right-1 size-5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white dark:border-background-dark">2</span>
|
||||
</button>
|
||||
<button
|
||||
class="relative flex items-center gap-3 px-4 py-2 bg-slate-900 dark:bg-slate-700 text-white rounded-full hover:bg-primary transition-all">
|
||||
<span class="material-symbols-outlined">shopping_bag</span>
|
||||
<span class="text-sm font-bold hidden sm:block">$42.00</span>
|
||||
<span
|
||||
class="absolute -top-1 -right-1 size-5 bg-primary text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white dark:border-background-dark">3</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="w-full bg-white dark:bg-background-dark border-b border-slate-100 dark:border-slate-800 overflow-x-auto scrollbar-hide">
|
||||
<div class="max-w-[1440px] mx-auto px-6 lg:px-12 flex items-center justify-between h-14 whitespace-nowrap">
|
||||
<div class="flex items-center gap-8">
|
||||
<div
|
||||
class="group relative flex items-center gap-1 text-sm font-bold text-slate-800 dark:text-slate-200 hover:text-primary cursor-pointer py-4">
|
||||
<span>Dogs</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex items-center gap-1 text-sm font-bold text-slate-800 dark:text-slate-200 hover:text-primary cursor-pointer py-4">
|
||||
<span>Cats</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex items-center gap-1 text-sm font-bold text-slate-800 dark:text-slate-200 hover:text-primary cursor-pointer py-4">
|
||||
<span>Pharmacy</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex items-center gap-1 text-sm font-bold text-slate-800 dark:text-slate-200 hover:text-primary cursor-pointer py-4">
|
||||
<span>Brands</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group relative flex items-center gap-1 text-sm font-bold text-slate-800 dark:text-slate-200 hover:text-primary cursor-pointer py-4">
|
||||
<span>Services</span>
|
||||
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="flex items-center gap-2 text-sm font-bold text-red-500 hover:underline decoration-2 underline-offset-4"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">campaign</span>
|
||||
<span>Promotions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-2 text-sm font-bold text-primary hover:underline decoration-2 underline-offset-4"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">lightbulb</span>
|
||||
<span>Tips & Tricks</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="max-w-[1440px] mx-auto px-6 lg:px-12 py-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
class="lg:col-span-2 relative bg-light-blue rounded-[2.5rem] overflow-hidden min-h-[400px] flex items-center group">
|
||||
<img alt="White cat looking at food bowl"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-80 mix-blend-multiply transition-transform duration-700 group-hover:scale-105"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
<div class="relative z-10 p-12 lg:p-16 max-w-xl">
|
||||
<span class="text-dark-teal text-3xl font-bold block mb-2">Up to</span>
|
||||
<h2 class="text-7xl lg:text-8xl font-black text-dark-teal mb-2 leading-none">45% OFF</h2>
|
||||
<div class="w-32 h-1.5 bg-yellow-400 mb-6"></div>
|
||||
<p class="text-dark-teal text-xl lg:text-2xl font-bold mb-8">Thousands of pet favourites</p>
|
||||
<button
|
||||
class="px-8 py-3.5 bg-dark-teal text-white font-bold rounded-lg flex items-center gap-2 hover:bg-dark-teal/90 transition-all group/btn">
|
||||
Shop Now
|
||||
<span
|
||||
class="material-symbols-outlined text-[20px] group-hover/btn:translate-x-1 transition-transform">chevron_right</span>
|
||||
</button>
|
||||
<div class="mt-12 flex gap-1.5">
|
||||
<div class="w-8 h-1 bg-dark-teal rounded-full"></div>
|
||||
<div class="w-2 h-1 bg-dark-teal/20 rounded-full"></div>
|
||||
<div class="w-2 h-1 bg-dark-teal/20 rounded-full"></div>
|
||||
<div class="w-2 h-1 bg-dark-teal/20 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div
|
||||
class="relative flex-1 bg-dark-teal rounded-[2.5rem] overflow-hidden min-h-[200px] flex items-center group">
|
||||
<img alt="Fluffy cat with sunglasses"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-60 transition-transform duration-700 group-hover:scale-110"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
<div class="relative z-10 p-8">
|
||||
<h3 class="text-2xl font-bold text-white mb-4 leading-tight">Lookin for<br />Kitty Stuff???</h3>
|
||||
<button
|
||||
class="px-5 py-2.5 border-2 border-white/30 text-white font-bold rounded-lg flex items-center gap-1.5 hover:bg-white hover:text-dark-teal transition-all text-sm group/btn">
|
||||
Shop here
|
||||
<span
|
||||
class="material-symbols-outlined text-[18px] group-hover/btn:translate-x-1 transition-transform">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex-1 bg-[#4d8ca6] rounded-[2.5rem] overflow-hidden min-h-[200px] flex items-center group">
|
||||
<img alt="Bulldog in hoodie"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-60 transition-transform duration-700 group-hover:scale-110"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
<div class="relative z-10 p-8">
|
||||
<h3 class="text-2xl font-bold text-white mb-4 leading-tight">Lookin for<br />Doggy Stuff???</h3>
|
||||
<button
|
||||
class="px-5 py-2.5 border-2 border-white/30 text-white font-bold rounded-lg flex items-center gap-1.5 hover:bg-white hover:text-dark-teal transition-all text-sm group/btn">
|
||||
Shop here
|
||||
<span
|
||||
class="material-symbols-outlined text-[18px] group-hover/btn:translate-x-1 transition-transform">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[1440px] mx-auto px-6 lg:px-12 mb-12">
|
||||
<div class="grid grid-cols-4 md:grid-cols-8 gap-4 md:gap-6">
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">kebab_dining</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors">Nourritures</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">bakery_dining</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors">Friandises</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">sports_volleyball</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors">Jouets</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">sanitizer</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors text-center">Hygiène
|
||||
& soins</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">kebab_dining</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors">Nourritures</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">bakery_dining</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors">Friandises</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">sports_volleyball</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors">Jouets</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 group cursor-pointer">
|
||||
<div
|
||||
class="w-full aspect-square bg-white border border-slate-200 rounded-2xl flex items-center justify-center transition-all group-hover:shadow-md group-hover:border-primary/30">
|
||||
<span class="material-symbols-outlined text-dark-teal text-4xl">sanitizer</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-semibold text-slate-700 group-hover:text-primary transition-colors text-center">Hygiène
|
||||
& soins</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="max-w-[1440px] mx-auto px-6 lg:px-12 mb-20">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h2 class="text-2xl font-extrabold text-slate-900 dark:text-white">Best Sellers</h2>
|
||||
<a class="text-primary font-bold flex items-center gap-1 hover:underline" href="#">
|
||||
View All
|
||||
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div
|
||||
class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col relative group transition-all hover:shadow-xl">
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span
|
||||
class="bg-badge-blue text-white text-[11px] font-bold px-3 py-1.5 rounded-lg uppercase tracking-wider">New</span>
|
||||
</div>
|
||||
<div class="aspect-square mb-6 relative overflow-hidden flex items-center justify-center">
|
||||
<img alt="DogNation Turkey Bacon"
|
||||
class="w-full h-full object-contain mix-blend-multiply transition-transform duration-500 group-hover:scale-110"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<div class="flex text-yellow-400">
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg">star_half</span>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-slate-400">(24)</span>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-800 dark:text-slate-100 mb-6 leading-snug">
|
||||
<span class="font-extrabold block text-slate-900 dark:text-white mb-0.5">Freshpet</span>
|
||||
Dognation Turkey Bacon Grain-Free Fresh Dog Treats, 3-oz bag, case of 6
|
||||
</h3>
|
||||
<div class="w-full h-px bg-slate-100 dark:bg-slate-800 mb-6"></div>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<span class="text-xl font-extrabold text-primary">$41.94</span>
|
||||
<button
|
||||
class="flex items-center gap-2 text-dark-teal dark:text-primary font-bold text-sm hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-xl">shopping_cart</span>
|
||||
Add to cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col relative group transition-all hover:shadow-xl">
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span
|
||||
class="bg-badge-blue text-white text-[11px] font-bold px-3 py-1.5 rounded-lg uppercase tracking-wider">New</span>
|
||||
</div>
|
||||
<div class="aspect-square mb-6 relative overflow-hidden flex items-center justify-center">
|
||||
<img alt="Premium Dog Food"
|
||||
class="w-full h-full object-contain mix-blend-multiply transition-transform duration-500 group-hover:scale-110"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<div class="flex text-yellow-400">
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg">star_half</span>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-slate-400">(48)</span>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-800 dark:text-slate-100 mb-6 leading-snug">
|
||||
<span class="font-extrabold block text-slate-900 dark:text-white mb-0.5">PuppyJoy</span>
|
||||
Natural Balance High Protein Chicken & Brown Rice Recipe Dry Dog Food
|
||||
</h3>
|
||||
<div class="w-full h-px bg-slate-100 dark:bg-slate-800 mb-6"></div>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<span class="text-xl font-extrabold text-primary">$54.99</span>
|
||||
<button
|
||||
class="flex items-center gap-2 text-dark-teal dark:text-primary font-bold text-sm hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-xl">shopping_cart</span>
|
||||
Add to cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col relative group transition-all hover:shadow-xl">
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span
|
||||
class="bg-badge-blue text-white text-[11px] font-bold px-3 py-1.5 rounded-lg uppercase tracking-wider">New</span>
|
||||
</div>
|
||||
<div class="aspect-square mb-6 relative overflow-hidden flex items-center justify-center">
|
||||
<img alt="Luxury Cat Bed"
|
||||
class="w-full h-full object-contain mix-blend-multiply transition-transform duration-500 group-hover:scale-110"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<div class="flex text-yellow-400">
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg">star_half</span>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-slate-400">(112)</span>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-800 dark:text-slate-100 mb-6 leading-snug">
|
||||
<span class="font-extrabold block text-slate-900 dark:text-white mb-0.5">CatNap</span>
|
||||
Ultra Soft Orthopedic Calming Cat Bed with Machine Washable Cover
|
||||
</h3>
|
||||
<div class="w-full h-px bg-slate-100 dark:bg-slate-800 mb-6"></div>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<span class="text-xl font-extrabold text-primary">$29.95</span>
|
||||
<button
|
||||
class="flex items-center gap-2 text-dark-teal dark:text-primary font-bold text-sm hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-xl">shopping_cart</span>
|
||||
Add to cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 flex flex-col relative group transition-all hover:shadow-xl">
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span
|
||||
class="bg-badge-blue text-white text-[11px] font-bold px-3 py-1.5 rounded-lg uppercase tracking-wider">New</span>
|
||||
</div>
|
||||
<div class="aspect-square mb-6 relative overflow-hidden flex items-center justify-center">
|
||||
<img alt="Automatic Pet Feeder"
|
||||
class="w-full h-full object-contain mix-blend-multiply transition-transform duration-500 group-hover:scale-110"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<div class="flex text-yellow-400">
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg filled">star</span>
|
||||
<span class="material-symbols-outlined text-lg">star_half</span>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-slate-400">(85)</span>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-800 dark:text-slate-100 mb-6 leading-snug">
|
||||
<span class="font-extrabold block text-slate-900 dark:text-white mb-0.5">SmartPet</span>
|
||||
Wifi Enabled Automatic Pet Feeder with 1080p HD Camera & Audio
|
||||
</h3>
|
||||
<div class="w-full h-px bg-slate-100 dark:bg-slate-800 mb-6"></div>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<span class="text-xl font-extrabold text-primary">$124.50</span>
|
||||
<button
|
||||
class="flex items-center gap-2 text-dark-teal dark:text-primary font-bold text-sm hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-xl">shopping_cart</span>
|
||||
Add to cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<main class="max-w-[1440px] mx-auto px-6 lg:px-12 space-y-12">
|
||||
<section
|
||||
class="w-full h-[400px] rounded-[2.5rem] bg-slate-200 dark:bg-slate-800 flex items-center justify-center relative overflow-hidden">
|
||||
<img alt="Two happy puppies running in a park"
|
||||
class="absolute inset-0 w-full h-full object-cover mix-blend-overlay opacity-40"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh4FDS5r6ozwtj9YhdW_bR8ANmmuWU0TIwwPQHua_CzZUF1LJ0FUCyM4r0uYRufUTyuvan36d61tGueZdoDPpvMkY6yrgikV7Th6qJ7Ppa9wxRiTFE5sRX4VlhFvtpyzgnC0uWFeudzqnuk6r0WaXHwecX4vg98qhYVtlKDBCHeFoA3cMH7AaKty5ZwmJ-sqGVdpKnpBhPFO02FSZ8W6PWW8s1NaO-aZtmsnKH6WtPL_eiURqmaUKGScP5ZcLpGgV8rjGSKvPD8XXV" />
|
||||
<div class="relative z-10 text-center space-y-4 px-6">
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white">Everything
|
||||
your pet loves.</h1>
|
||||
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">Shop the latest in premium pet
|
||||
food, durable toys, and essential healthcare from the world's leading brands.</p>
|
||||
<button
|
||||
class="mt-4 px-8 py-3 bg-primary text-white font-bold rounded-full shadow-lg hover:shadow-primary/40 transition-all">Shop
|
||||
Now</button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 pb-20">
|
||||
<div
|
||||
class="bg-white dark:bg-slate-800 p-6 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm">
|
||||
<div
|
||||
class="aspect-square bg-slate-50 dark:bg-slate-900 rounded-lg mb-4 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300 text-4xl">inventory_2</span>
|
||||
</div>
|
||||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-2"></div>
|
||||
<div class="h-4 bg-slate-100 dark:bg-slate-700 rounded w-1/2"></div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-800 p-6 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm">
|
||||
<div
|
||||
class="aspect-square bg-slate-50 dark:bg-slate-900 rounded-lg mb-4 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300 text-4xl">inventory_2</span>
|
||||
</div>
|
||||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-2"></div>
|
||||
<div class="h-4 bg-slate-100 dark:bg-slate-700 rounded w-1/2"></div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-800 p-6 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm">
|
||||
<div
|
||||
class="aspect-square bg-slate-50 dark:bg-slate-900 rounded-lg mb-4 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300 text-4xl">inventory_2</span>
|
||||
</div>
|
||||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-2"></div>
|
||||
<div class="h-4 bg-slate-100 dark:bg-slate-700 rounded w-1/2"></div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-800 p-6 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm">
|
||||
<div
|
||||
class="aspect-square bg-slate-50 dark:bg-slate-900 rounded-lg mb-4 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300 text-4xl">inventory_2</span>
|
||||
</div>
|
||||
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-2"></div>
|
||||
<div class="h-4 bg-slate-100 dark:bg-slate-700 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user