-
setIsMobileMenuOpen(!isMobileMenuOpen)}
- >
- {isMobileMenuOpen ?
-
onNavigate('home')} style={{ cursor: 'pointer' }}>
- Z appify
-
+
onNavigate('home')} style={{ cursor: 'pointer' }}>
+ Z appify
+
+ { onNavigate('home'); setIsMobileMenuOpen(false); }}
+ >
+ ALL
+
+
-
+
onSearch('')}>✕
+ onSearch('')}>
)}
+
onOpenOverlay('wishlist')}>
+ {wishlistCount} }
+
+
onOpenOverlay('cart')}>
+ {cartCount} }
+
{loggedInUser ? (
-
) : (
@@ -68,14 +76,6 @@ const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav
)}
-
onOpenOverlay('wishlist')}>
- {wishlistCount} }
-
-
onOpenOverlay('cart')}>
- {cartCount} }
-
diff --git a/frontend/src/components/ProductCard.jsx b/frontend/src/components/ProductCard.jsx
index e413e33..ae62a7b 100644
--- a/frontend/src/components/ProductCard.jsx
+++ b/frontend/src/components/ProductCard.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Heart, TrendingUp } from 'lucide-react';
import { motion } from 'framer-motion';
diff --git a/frontend/src/components/ProductDetail.jsx b/frontend/src/components/ProductDetail.jsx
index b9d65d6..45f9529 100644
--- a/frontend/src/components/ProductDetail.jsx
+++ b/frontend/src/components/ProductDetail.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeft, ShoppingBag, Heart, Share2, ShieldCheck, X } from 'lucide-react';
@@ -17,10 +17,7 @@ const ProductDetail = ({ product, onBack, onAddToCart, onToggleWishlist, isWishl
const sizes = ['7', '8', '9', '10', '11'];
const handleAddToCart = () => {
- if (!selectedSize) {
- alert('Please select a size first');
- return;
- }
+ if (!selectedSize) { alert('Please select a size first'); return; }
onAddToCart(product, selectedSize);
alert(`${product.name} (UK ${selectedSize}) added to cart!`);
};
@@ -46,7 +43,6 @@ const ProductDetail = ({ product, onBack, onAddToCart, onToggleWishlist, isWishl
{product.brand}
{product.name}
{product.category}
-
₹ {product.price.toLocaleString('en-IN')}
diff --git a/frontend/src/components/ProductGrid.jsx b/frontend/src/components/ProductGrid.jsx
index e04dab5..c7cecf8 100644
--- a/frontend/src/components/ProductGrid.jsx
+++ b/frontend/src/components/ProductGrid.jsx
@@ -1,21 +1,8 @@
-import React from 'react';
import ProductCard from './ProductCard';
-const ProductGrid = ({ products, onProductClick, sortOption, onSortChange, onToggleWishlist, isWishlisted }) => {
+const ProductGrid = ({ products, onProductClick, onToggleWishlist, isWishlisted }) => {
return (
-
-
-
- onSortChange(e.target.value)}>
- Select Sorting Options
- Price: Low to High
- Price: High to Low
- New Arrivals
-
-
-
-
{products.map((product) => (
No products found match the selected filters.
- Try adjusting your categories or themes.
+ Try adjusting your categories.
)}
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 32d81a7..d7281f6 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -1,24 +1,18 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { ChevronDown, Filter } from 'lucide-react';
const categories = [
- 'Men Low Top Sneakers',
- 'Men High Top Sneakers',
- 'Men Mid Top Sneakers',
- 'Men Mules',
- 'Men Clogs'
+ 'Running',
+ 'Lifestyle',
+ 'Basketball',
+ 'Training & Gym',
+ 'Jordan',
+ 'Skateboarding',
+ 'Walking',
];
-const themes = [
- 'Urban Tech',
- 'Retro Classic',
- 'Cyber Sport',
- 'Minimalist'
-];
-
-const Sidebar = ({ selectedCategories, selectedThemes, onToggleFilter }) => {
+const Sidebar = ({ selectedCategories, onToggleFilter }) => {
const [isCategoriesOpen, setIsCategoriesOpen] = useState(true);
- const [isThemesOpen, setIsThemesOpen] = useState(true);
return (
@@ -28,14 +22,14 @@ const Sidebar = ({ selectedCategories, selectedThemes, onToggleFilter }) => {
-
setIsCategoriesOpen(!isCategoriesOpen)}
>
CATEGORIES
-
{isCategoriesOpen && (
@@ -43,8 +37,8 @@ const Sidebar = ({ selectedCategories, selectedThemes, onToggleFilter }) => {
{categories.map((cat, i) => (
-
-
-
-
setIsThemesOpen(!isThemesOpen)}
- >
-
THEMES
-
- {isThemesOpen && (
-
- )}
-
-
-
+
);
};
diff --git a/frontend/src/data/products.js b/frontend/src/data/products.js
index 3b4c1ee..cff34d9 100644
--- a/frontend/src/data/products.js
+++ b/frontend/src/data/products.js
@@ -1,488 +1,603 @@
export const ALL_PRODUCTS = [
+ {
+ id: 105,
+ name: "Nike Journey Run",
+ brand: "NIKE",
+ category: "Running",
+ price: 6796,
+ image: "/shoes/Nike Journey Run.jpg",
+ description:
+ "Perfect for daily jogs, these shoes offer a smooth ride and great cushioning for every mile.",
+ },
+ {
+ id: 106,
+ name: "Nike Revolution 8 EasyOn",
+ brand: "NIKE",
+ category: "Running",
+ price: 4295,
+ image: "/shoes/Nike Revolution 8 EasyOn.jpg",
+ description:
+ "Designed for convenience with an EasyOn entry system, making it simple to get out and start running.",
+ },
+ {
+ id: 107,
+ name: "Nike Air Max Alpha Trainer 6",
+ brand: "NIKE",
+ category: "Training & Gym",
+ price: 8495,
+ image: "/shoes/Nike Air Max Alpha Trainer 6.jpg",
+ description:
+ "Stability meets style in this trainer, perfect for heavy lifts and explosive gym movements.",
+ },
+ {
+ id: 108,
+ name: "Nike Winflo 11",
+ brand: "NIKE",
+ category: "Running",
+ price: 6956,
+ image: "/shoes/Nike Winflo 11.jpg",
+ description:
+ "A reliable road runner with updated cushioning that provides a balanced and energetic feel.",
+ },
+ {
+ id: 109,
+ name: "Nike Quest 6",
+ brand: "NIKE",
+ category: "Running",
+ price: 7095,
+ image: "/shoes/Nike Quest 6.jpg",
+ description:
+ "Built for the long road ahead, offering a breathable mesh upper and durable traction.",
+ },
+ {
+ id: 110,
+ name: "Nike Killshot 2 Leather Premium",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 9195,
+ image: "/shoes/Nike Killshot 2 Leather Premium.jpg",
+ description:
+ "Inspired by classic tennis shoes, this leather premium edition brings a retro look to your street style.",
+ },
+ {
+ id: 111,
+ name: "LeBron Witness IX EP",
+ brand: "NIKE",
+ category: "Basketball",
+ price: 6956,
+ image: "/shoes/LeBron Witness IX EP.jpg",
+ description:
+ "Unleash your inner athlete with LeBron's signature performance and lockdown support on the court.",
+ },
+ {
+ id: 112,
+ name: "Nike Air Max Excee",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 7495,
+ image: "/shoes/Nike Air Max Excee.jpg",
+ description:
+ "Featuring a visible Air unit, these sneakers blend iconic design with modern everyday comfort.",
+ },
+ {
+ id: 113,
+ name: "Nike Downshifter 14",
+ brand: "NIKE",
+ category: "Running",
+ price: 4895,
+ image: "/shoes/Nike Downshifter 14.jpg",
+ description:
+ "An entry-level runner that doesn't compromise on support, ideal for beginners starting their journey.",
+ },
+ {
+ id: 114,
+ name: "Nike Air Max Dn Roam",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 16995,
+ image: "/shoes/Nike Air Max Dn Roam.jpg",
+ description:
+ "High-end style meets revolutionary Air technology in this bold, futuristic lifestyle sneaker.",
+ },
+ {
+ id: 115,
+ name: "Nike SB Zoom Blazer Low Pro GT",
+ brand: "NIKE",
+ category: "Skateboarding",
+ price: 6795,
+ image: "/shoes/Nike SB Zoom Blazer Low Pro GT.jpg",
+ description:
+ "Engineered for skaters, this low-profile shoe offers exceptional boardfeel and durability.",
+ },
+ {
+ id: 116,
+ name: "Air Jordan 1 Low SE",
+ brand: "NIKE",
+ category: "Jordan",
+ price: 11495,
+ image: "/shoes/Air Jordan 1 Low SE.jpg",
+ description:
+ "The timeless AJ1 look in a low-top silhouette, featuring premium materials and iconic colorways.",
+ },
+ {
+ id: 117,
+ name: "Nike Killshot 2 Leather",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 7995,
+ image: "/shoes/Nike Killshot 2 Leather.jpg",
+ description:
+ "A versatile wardrobe staple that pairs perfectly with jeans, offering a clean and polished finish.",
+ },
+ {
+ id: 118,
+ name: "Nike Run Defy",
+ brand: "NIKE",
+ category: "Running",
+ price: 3196,
+ image: "/shoes/Nike Run Defy.jpg",
+ description:
+ "Budget-friendly performance shoe that delivers comfort for short runs and daily wear.",
+ },
+ {
+ id: 119,
+ name: "Nike Promina",
+ brand: "NIKE",
+ category: "Walking",
+ price: 3996,
+ image: "/shoes/Nike Promina.jpg",
+ description:
+ "Specifically designed for walking, ensuring all-day comfort with a soft, cushioned midsole.",
+ },
+ {
+ id: 120,
+ name: "Nike P-6000",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 9695,
+ image: "/shoes/Nike P-6000.jpg",
+ description:
+ "A mash-up of past Pegasus sneakers, this model offers a ventilated, breathable and comfortable Y2K vibe.",
+ },
+ {
+ id: 121,
+ name: "Nike Ava Rover",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 11895,
+ image: "/shoes/Nike Ava Rover.jpg",
+ description:
+ "A bold and unique silhouette that stands out in any crowd, perfect for fashion-forward enthusiasts.",
+ },
+ {
+ id: 122,
+ name: "Nike Free Metcon 6",
+ brand: "NIKE",
+ category: "Training & Gym",
+ price: 10795,
+ image: "/shoes/Nike Free Metcon 6.jpg",
+ description:
+ "Combines the flexibility of Nike Free with the stability of Metcon for a truly all-in-one workout shoe.",
+ },
+ {
+ id: 123,
+ name: "Air Jordan 1 Mid",
+ brand: "NIKE",
+ category: "Jordan",
+ price: 11495,
+ image: "/shoes/Air Jordan 1 Mid.jpg",
+ description:
+ "The classic mid-top legend remains a favorite, delivering heritage style and premium comfort.",
+ },
+ {
+ id: 124,
+ name: "Nike Air Max 270",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 13995,
+ image: "/shoes/Nike Air Max 270.jpg",
+ description:
+ "Boasting Nike's tallest heel bag yet, these sneakers offer a super-soft ride that feels as good as it looks.",
+ },
{
- id: 1,
- name: 'The Incredible Hulk',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Cyber Sport',
- price: 3799,
- image: '/shoes/shoe31.jpg',
- isTrending: true,
- description: 'Smash your limits with The Incredible Hulk High Tops. Featuring heavy-duty impact cushioning and gamma-green accents.'
- },
- {
- id: 2,
- name: 'Spider-Man: Spider Verse',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Cyber Sport',
- price: 3999,
- image: '/shoes/shoe2.jpg',
- isTrending: true,
- description: 'Step into the multiverse. These low-tops feature web-reactive textures, striking contrast colors, and an agile profile.'
- },
- {
- id: 3,
- name: 'Urban Blaze: Hawkins',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Urban Tech',
- price: 2599,
- image: '/shoes/shoe3.jpg',
- isTrending: false,
- description: 'Classic Hawkins energy. A vibrant design combining retro aesthetics with modern urban traction technology.'
- },
- {
- id: 4,
- name: 'Rovers: Batman',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Minimalist',
- price: 3499,
- image: '/shoes/shoe4.jpg',
- isTrending: true,
- description: 'Lounge like a Dark Knight. Premium dark synthetic leather construction designed for ultimate comfort and stealth.'
- },
- {
- id: 5,
- name: 'Urban Blaze: Blue Moon',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Retro Classic',
- price: 2599,
- image: '/shoes/shoe5.jpg',
- isTrending: false,
- description: 'A striking blue moon aesthetic. Features reinforced stitching and maximum breathability for everyday street wear.'
- },
- {
- id: 6,
- name: 'Deadpool: 2.0',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Urban Tech',
- price: 2599,
- image: '/shoes/shoe6.jpg',
- isTrending: true,
- description: 'Maximum effort for your feet. Deep red canvas panels mixed with anti-abrasion overlays for the merc on the move.'
- },
- {
- id: 7,
- name: 'Urban Blaze: Cappuccino',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Minimalist',
- price: 2599,
- image: '/shoes/shoe7.jpg',
- isTrending: false,
- description: 'Rich earth tones and creamy accents. A laid-back silhouette built on top of a highly responsive foam midsole.'
- },
- {
- id: 8,
- name: 'Milano: Walnut',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Retro Classic',
- price: 2599,
- image: '/shoes/shoe8.jpg',
- isTrending: false,
- description: 'Sleek Italian-inspired lines. The Milano Walnut blends casual elegance with a durable, long-lasting rubber cupsole.'
- },
- {
- id: 9,
- name: 'Star Wars: Mandalorian',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Cyber Sport',
- price: 3199,
- image: '/shoes/shoe9.jpg',
- isTrending: true,
- description: 'This is the way. Featuring heavy-duty Beskar-inspired metallic finishes and a rugged terrain grip.'
- },
- {
- id: 10,
- name: 'Hydros: The Dark Knight',
- brand: 'ZAPPIFY',
- category: 'Men Clogs',
- theme: 'Minimalist',
- price: 1499,
- image: '/shoes/shoe10.jpg',
- isTrending: true,
- description: 'Waterproof, ultra-light, and effortlessly stealthy. The ultimate companion for quick missions or total relaxation.'
- },
- {
- id: 11,
- name: 'Captain America: First Avenger',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Retro Classic',
- price: 3699,
- image: '/shoes/shoe2.jpg',
- isTrending: true,
- description: 'The shield of the streets. Vintage combat styling paired with highly durable shock-absorbent outsoles.'
- },
- {
- id: 12,
- name: 'Black Panther: Wakanda Forever',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Urban Tech',
- price: 3899,
- image: '/shoes/shoe4.jpg',
- isTrending: true,
- description: 'Sleek, powerful, agile. Built with ultra-responsive vibranium-inspired bounce technology for unmatched speed.'
- },
- {
- id: 13,
- name: 'Venom: Maximum Carnage',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Cyber Sport',
- price: 3499,
- image: '/shoes/shoe3.jpg',
- isTrending: false,
- description: 'Unleash your inner symbiote. Aggressive tread patterns and dark red webbing make this sneaker a force of nature.'
- },
- {
- id: 14,
- name: 'Iron Man: Mark LXXXV',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Cyber Sport',
- price: 4299,
- image: '/shoes/shoe6.jpg',
- isTrending: true,
- description: 'I am Iron Man. Premium nano-tech styling with high-gloss metallic red and gold accents.'
- },
- {
- id: 15,
- name: 'Urban Blaze: Cappuccino',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Urban Tech',
- price: 2599,
- image: '/shoes/shoe15.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 16,
- name: 'Milano: Walnut',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Cyber Sport',
- price: 2599,
- image: '/shoes/shoe16.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 17,
- name: 'Star Wars: Mandalorian',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Urban Tech',
- price: 3199,
- image: '/shoes/shoe17.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 18,
- name: 'Hydros: The Dark Knight',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Minimalist',
- price: 1499,
- image: '/shoes/shoe18.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 19,
- name: 'Velocity: Silver',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Cyber Sport',
- price: 2599,
- image: '/shoes/shoe19.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 20,
- name: 'Urban Blaze: Black',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Minimalist',
- price: 2599,
- image: '/shoes/shoe20.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 21,
- name: 'Urban Blaze: Mafia',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Cyber Sport',
- price: 2599,
- image: '/shoes/shoe21.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 22,
- name: 'Urban Blaze: Green Lab',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Urban Tech',
- price: 1999,
- image: '/shoes/shoe22.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 23,
- name: 'Black Panther: Warrior',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Urban Tech',
- price: 3499,
- image: '/shoes/shoe23.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 24,
- name: 'Velocity: Scarlet',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Cyber Sport',
- price: 2599,
- image: '/shoes/shoe24.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 25,
- name: 'Kanso V2: Beige',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Retro Classic',
- price: 2599,
- image: '/shoes/shoe25.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 26,
- name: 'Kanso ZE: Black',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Urban Tech',
- price: 2599,
- image: '/shoes/shoe26.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 27,
- name: 'Fumes: Toxic',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Cyber Sport',
- price: 17992249450,
- image: '/shoes/shoe27.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 28,
- name: 'UBZ Ascend: Mocha',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Urban Tech',
- price: 3599,
- image: '/shoes/shoe28.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 29,
- name: 'MACH 1',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Retro Classic',
- price: 3499,
- image: '/shoes/shoe29.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 30,
- name: 'Naruto Shippuden: Sasuke',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Urban Tech',
- price: 32993599300,
- image: '/shoes/shoe30.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 31,
- name: 'Kanso V2: Sapphire',
- brand: 'ZAPPIFY',
- category: 'Men Clogs',
- theme: 'Urban Tech',
- price: 2599,
- image: '/shoes/shoe31.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 32,
- name: 'UBZ Ascend: Oasis',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Cyber Sport',
- price: 3499,
- image: '/shoes/shoe32.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 33,
- name: 'MACH 3',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Retro Classic',
- price: 3499,
- image: '/shoes/shoe33.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 34,
- name: 'Daredevil: Hell\'s Knight',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Cyber Sport',
- price: 3799,
- image: '/shoes/shoe34.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 35,
- name: 'Top Gun: Maverick Kicks',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Cyber Sport',
- price: 259936991100,
- image: '/shoes/shoe35.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 36,
- name: 'Mortal Kombat: Scorpion',
- brand: 'ZAPPIFY',
- category: 'Men Slip-ons',
- theme: 'Retro Classic',
- price: 3499,
- image: '/shoes/shoe36.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 37,
- name: 'Urban Blaze: Butter',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Urban Tech',
- price: 2599,
- image: '/shoes/shoe37.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 38,
- name: 'Kanso V2: Emerald',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Cyber Sport',
- price: 2599,
- image: '/shoes/shoe38.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 39,
- name: 'Souled: Outlast',
- brand: 'ZAPPIFY',
- category: 'Men Clogs',
- theme: 'Retro Classic',
- price: 2499,
- image: '/shoes/shoe39.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 40,
- name: 'Mortal Kombat: Sub Zero',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Urban Tech',
- price: 3499,
- image: '/shoes/shoe40.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 41,
- name: 'Rovers: Black Panther',
- brand: 'ZAPPIFY',
- category: 'Men Mid Top Sneakers',
- theme: 'Urban Tech',
- price: 3499,
- image: '/shoes/shoe41.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 42,
- name: 'Rovers: Deadpool',
- brand: 'ZAPPIFY',
- category: 'Men High Top Sneakers',
- theme: 'Urban Tech',
- price: 3499,
- image: '/shoes/shoe42.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 43,
- name: 'Trailz: Ember',
- brand: 'ZAPPIFY',
- category: 'Men Clogs',
- theme: 'Cyber Sport',
- price: 25992999400,
- image: '/shoes/shoe43.jpg',
- isTrending: true,
- description: 'Exclusive release from The Souled Store collection.'
- },
- {
- id: 44,
- name: 'UBZ Ascend: Black',
- brand: 'ZAPPIFY',
- category: 'Men Low Top Sneakers',
- theme: 'Retro Classic',
- price: 3299,
- image: '/shoes/shoe44.jpg',
- isTrending: false,
- description: 'Exclusive release from The Souled Store collection.'
- }
+ id: 201,
+ name: "Men's Street Runner Pro",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 7495,
+ image: "/shoes/shoe1.jpg",
+ description: "Lightweight and responsive, built for men who push the pace on every run.",
+ },
+ {
+ id: 202,
+ name: "Men's Urban Glide",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 8295,
+ image: "/shoes/shoe2.jpg",
+ description: "Sleek silhouette with premium cushioning, perfect for city streets.",
+ },
+ {
+ id: 203,
+ name: "Men's Court Dominator",
+ brand: "NIKE",
+ category: "Basketball",
+ gender: "MEN",
+ price: 9995,
+ image: "/shoes/shoe3.jpg",
+ description: "Ankle support and grip engineered for explosive court performance.",
+ },
+ {
+ id: 204,
+ name: "Men's Trail Blazer",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 8795,
+ image: "/shoes/shoe4.jpg",
+ description: "Rugged outsole and cushioned midsole for off-road adventures.",
+ },
+ {
+ id: 205,
+ name: "Men's Classic Low",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 6495,
+ image: "/shoes/shoe5.jpg",
+ description: "Timeless low-top design that pairs with any outfit effortlessly.",
+ },
+ {
+ id: 206,
+ name: "Men's Power Lift",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 9295,
+ image: "/shoes/shoe6.jpg",
+ description: "Flat, stable base designed for heavy lifts and gym sessions.",
+ },
+ {
+ id: 207,
+ name: "Men's Skate Edge",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 7195,
+ image: "/shoes/shoe7.jpg",
+ description: "Durable canvas upper with vulcanized sole for superior boardfeel.",
+ },
+ {
+ id: 208,
+ name: "Men's Air Cushion Max",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 12495,
+ image: "/shoes/shoe8.jpg",
+ description: "Max Air unit delivers all-day comfort with a bold, modern look.",
+ },
+ {
+ id: 209,
+ name: "Men's Sprint Elite",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 10995,
+ image: "/shoes/shoe9.jpg",
+ description: "Carbon-fiber inspired plate for explosive speed on race day.",
+ },
+ {
+ id: 210,
+ name: "Men's Retro High",
+ brand: "NIKE",
+ category: "Jordan",
+ gender: "MEN",
+ price: 13495,
+ image: "/shoes/shoe10.jpg",
+ description: "Heritage high-top silhouette with modern comfort upgrades.",
+ },
+ {
+ id: 211,
+ name: "Men's Flex Trainer",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 7895,
+ image: "/shoes/shoe15.jpg",
+ description: "Flexible grooves and breathable mesh for dynamic training sessions.",
+ },
+ {
+ id: 212,
+ name: "Men's Walk Comfort",
+ brand: "NIKE",
+ category: "Walking",
+ gender: "MEN",
+ price: 5495,
+ image: "/shoes/shoe16.jpg",
+ description: "Plush foam midsole and wide toe box for all-day walking comfort.",
+ },
+ {
+ id: 213,
+ name: "Men's Hoop Legend",
+ brand: "NIKE",
+ category: "Basketball",
+ gender: "MEN",
+ price: 11295,
+ image: "/shoes/shoe17.jpg",
+ description: "Zoom Air cushioning and herringbone traction for elite court play.",
+ },
+ {
+ id: 214,
+ name: "Men's Everyday Runner",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 5995,
+ image: "/shoes/shoe18.jpg",
+ description: "Reliable daily trainer with responsive foam and breathable upper.",
+ },
+ {
+ id: 215,
+ name: "Men's Street Classic",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 8995,
+ image: "/shoes/shoe19.jpg",
+ description: "Clean lines and premium leather for a polished street look.",
+ },
+ {
+ id: 216,
+ name: "Men's Zoom Speed",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 9495,
+ image: "/shoes/shoe20.jpg",
+ description: "Zoom Air unit in the forefoot for a snappy, fast-paced ride.",
+ },
+ {
+ id: 217,
+ name: "Men's Board King",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 6995,
+ image: "/shoes/shoe21.jpg",
+ description: "Reinforced toe cap and padded collar for skate park sessions.",
+ },
+ {
+ id: 218,
+ name: "Men's Gym Beast",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 10295,
+ image: "/shoes/shoe22.jpg",
+ description: "Wide platform and locked-down fit for heavy compound movements.",
+ },
+ {
+ id: 219,
+ name: "Men's Air Retro 90",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 11995,
+ image: "/shoes/shoe23.jpg",
+ description: "90s-inspired design with modern Air cushioning for everyday wear.",
+ },
+ {
+ id: 220,
+ name: "Men's Jordan Legacy",
+ brand: "NIKE",
+ category: "Jordan",
+ gender: "MEN",
+ price: 14995,
+ image: "/shoes/shoe24.jpg",
+ description: "Iconic Jordan DNA with premium materials and heritage colorways.",
+ },
+ {
+ id: 221,
+ name: "Men's Long Run",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 8195,
+ image: "/shoes/shoe25.jpg",
+ description: "Extra cushioning and energy return for marathon-distance training.",
+ },
+ {
+ id: 222,
+ name: "Men's Low Rider",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 7295,
+ image: "/shoes/shoe26.jpg",
+ description: "Low-profile design with suede overlays for a premium casual look.",
+ },
+ {
+ id: 223,
+ name: "Men's Dunk Force",
+ brand: "NIKE",
+ category: "Basketball",
+ gender: "MEN",
+ price: 10495,
+ image: "/shoes/shoe27.jpg",
+ description: "Dunk-inspired silhouette with modern cushioning for on and off court.",
+ },
+ {
+ id: 224,
+ name: "Men's Cross Trainer",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 8695,
+ image: "/shoes/shoe28.jpg",
+ description: "Versatile trainer built for HIIT, agility drills, and gym work.",
+ },
+ {
+ id: 225,
+ name: "Men's Hike Ready",
+ brand: "NIKE",
+ category: "Walking",
+ gender: "MEN",
+ price: 9195,
+ image: "/shoes/shoe29.jpg",
+ description: "Grippy outsole and waterproof upper for light trail and urban hikes.",
+ },
+ {
+ id: 226,
+ name: "Men's Pegasus Next",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 11495,
+ image: "/shoes/shoe30.jpg",
+ description: "Next-gen Pegasus with React foam and wider fit for long-distance comfort.",
+ },
+ {
+ id: 227,
+ name: "Men's Skate Pro",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 7595,
+ image: "/shoes/shoe31.jpg",
+ description: "Pro-level skate shoe with Zoom Air for impact protection.",
+ },
+ {
+ id: 228,
+ name: "Men's Air Force Classic",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 10995,
+ image: "/shoes/shoe32.jpg",
+ description: "The all-time classic AF1 silhouette in a fresh men's colorway.",
+ },
+ {
+ id: 229,
+ name: "Men's React Infinity",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 13995,
+ image: "/shoes/shoe33.jpg",
+ description: "React foam and wide base designed to reduce injury risk on long runs.",
+ },
+ {
+ id: 230,
+ name: "Men's Jordan Flight",
+ brand: "NIKE",
+ category: "Jordan",
+ gender: "MEN",
+ price: 12995,
+ image: "/shoes/shoe34.jpg",
+ description: "Flight-inspired Jordan with lightweight upper and responsive cushioning.",
+ },
+ {
+ id: 231,
+ name: "Men's Metcon Power",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 11295,
+ image: "/shoes/shoe35.jpg",
+ description: "Metcon stability meets Free flexibility for the ultimate cross-training shoe.",
+ },
+ {
+ id: 232,
+ name: "Men's Blazer Mid",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 9495,
+ image: "/shoes/shoe36.jpg",
+ description: "Mid-top Blazer with vintage basketball DNA and everyday wearability.",
+ },
+ {
+ id: 233,
+ name: "Men's Vomero Plush",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 14495,
+ image: "/shoes/shoe37.jpg",
+ description: "Maximum cushioning Vomero for plush, comfortable long-distance runs.",
+ },
+ {
+ id: 234,
+ name: "Men's Court Vision",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 7995,
+ image: "/shoes/shoe38.jpg",
+ description: "Court-inspired low-top with clean leather upper for everyday style.",
+ },
+ {
+ id: 235,
+ name: "Men's Invincible 3",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 16995,
+ image: "/shoes/shoe39.jpg",
+ description: "Nike's most cushioned running shoe for recovery and easy-day runs.",
+ },
+ {
+ id: 236,
+ name: "Men's Alphafly Next",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 19995,
+ image: "/shoes/shoe40.jpg",
+ description: "Elite race-day shoe with ZoomX foam and carbon fiber plate.",
+ },
+ {
+ id: 237,
+ name: "Men's Dri-FIT Trainer",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 8495,
+ image: "/shoes/shoe41.jpg",
+ description: "Breathable Dri-FIT upper keeps feet cool during intense workouts.",
+ },
+ {
+ id: 238,
+ name: "Men's SB Nyjah",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 8995,
+ image: "/shoes/shoe42.jpg",
+ description: "Nyjah Huston's signature skate shoe with Zoom Air and durable build.",
+ },
+ {
+ id: 239,
+ name: "Men's Air Max 97",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 15995,
+ image: "/shoes/shoe43.jpg",
+ description: "Full-length Air unit and bullet-train inspired design for iconic style.",
+ },
+ {
+ id: 240,
+ name: "Men's Zoom Rival",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 6295,
+ image: "/shoes/shoe44.jpg",
+ description: "Track-inspired road runner with Zoom Air for competitive training.",
+ },
];
-
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f071271..cc1c179 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,8 +4,6 @@
--brand-red: #FF3D00;
--brand-red-light: #FF5722;
--brand-red-dark: #D83100;
-
-
--deep-slate: #0F172A;
--slate-800: #1E293B;
--slate-700: #334155;
@@ -15,18 +13,13 @@
--slate-100: #F1F5F9;
--background: #F8FAFC;
--surface: #FFFFFF;
-
-
--glass-bg: rgba(255, 255, 255, 0.75);
--glass-border: rgba(255, 255, 255, 0.4);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
-
-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--radius-sm: 8px;
--radius-md: 12px;
@@ -71,7 +64,6 @@ ul {
list-style: none;
}
-/* Glass Utility */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(8px);
@@ -80,14 +72,12 @@ ul {
box-shadow: var(--glass-shadow);
}
-/* Container Utility */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
-/* Red Button Style */
.btn-primary {
background: var(--brand-red);
color: white;
@@ -106,7 +96,6 @@ ul {
box-shadow: 0 6px 20px rgba(255, 61, 0, 0.23);
}
-/* Responsive Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -118,699 +107,835 @@ ul {
.container {
padding: 0 1rem;
}
-
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
}
}
-
-/* --- Extracted Component Styles --- */
-
-/* Extracted from App.jsx */
.zappify-app {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- background: var(--background);
- }
- .app-main { flex: 1; }
- .main-layout { width: 100%; position: relative; padding: 2rem 0; }
- .layout-split { display: flex; width: 100%; }
- .container-broad { max-width: 1600px; margin: 0 auto; padding: 0 2rem; width: 100%; }
- .zappify-footer { padding: 2rem 0; background: var(--slate-100); border-top: 1px solid var(--slate-200); margin-top: 2rem; }
- .footer-bottom { text-align: center; font-size: 0.85rem; color: var(--slate-600); font-weight: 500; }
- .grid-view { width: 100%; }
- .detail-view { width: 100%; padding: 2rem 0; }
- @media (max-width: 1024px) {
- .layout-split { flex-direction: column; }
- .container-broad { padding: 0 1rem; }
- }
-
-/* Extracted from App.jsx */
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ background: var(--background);
+}
+.app-main { flex: 1; }
+.main-layout { width: 100%; position: relative; padding: 2rem 0; }
+.layout-split { display: flex; width: 100%; }
+.container-broad { max-width: 1600px; margin: 0 auto; padding: 0 2rem; width: 100%; }
+.zappify-footer { padding: 2rem 0; background: var(--slate-100); border-top: 1px solid var(--slate-200); margin-top: 2rem; }
+.footer-bottom { text-align: center; font-size: 0.85rem; color: var(--slate-600); font-weight: 500; }
+.grid-view { width: 100%; }
+.detail-view { width: 100%; padding: 2rem 0; }
+@media (max-width: 600px) {
+ .layout-split { flex-direction: column; }
+ .container-broad { padding: 0 1rem; }
+}
+
.overlay-system {
- position: fixed;
- inset: 0;
- z-index: 2000;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .backdrop {
- position: absolute;
- inset: 0;
- background: rgba(15, 23, 42, 0.6);
- backdrop-filter: blur(4px);
- }
-
- .drawer {
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- width: 450px;
- background: white;
- box-shadow: -10px 0 30px rgba(0,0,0,0.1);
- display: flex;
- flex-direction: column;
- }
-
- .modal {
- position: relative;
- width: 420px;
- background: white;
- border-radius: var(--radius-lg);
- padding: 2.5rem;
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
- }
-
- .overlay-header, .modal-header {
- padding: 1.5rem 2rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid var(--slate-100);
- }
-
- .modal-header { border: none; padding: 0; justify-content: flex-end; }
-
- .overlay-header h3 {
- font-size: 1.1rem;
- letter-spacing: 2px;
- font-weight: 800;
- color: var(--deep-slate);
- }
-
- .close-btn {
- color: var(--slate-400);
- transition: 0.2s;
- background: none;
- border: none;
- cursor: pointer;
- }
-
- .close-btn:hover { color: var(--brand-red); }
-
- .overlay-content {
- padding: 0;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: stretch;
- overflow-y: auto;
- }
-
- .overlay-content .empty-state {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 2rem;
- }
-
- .empty-state {
- text-align: center;
- color: var(--slate-400);
- }
-
- .empty-state p { margin: 1.5rem 0 2rem; font-weight: 600; }
-
- .login-modal { text-align: center; }
- .user-icon-large { color: var(--brand-red); margin-bottom: 1rem; }
- .login-modal h2 { font-size: 2rem; color: var(--deep-slate); font-weight: 800; letter-spacing: -1px; }
- .login-modal p { color: var(--slate-500); margin-bottom: 2.5rem; font-weight: 500; }
-
- .auth-form { display: flex; flex-direction: column; gap: 1rem; }
- .auth-form input {
- height: 50px;
- border-radius: var(--radius-md);
- border: 1px solid var(--slate-200);
- padding: 0 1.5rem;
- font-size: 1rem;
- outline: none;
- transition: 0.3s;
- }
-
- .auth-form input:focus { border-color: var(--brand-red); }
- .auth-btn { height: 50px; justify-content: center; margin-top: 1rem; }
-
- .separator {
- margin: 1.5rem 0;
- border-bottom: 1px solid var(--slate-100);
- position: relative;
- }
-
- .separator span {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- background: white;
- padding: 0 1rem;
- font-size: 0.75rem;
- color: var(--slate-400);
- font-weight: 700;
- }
-
- .google-btn { height: 50px; justify-content: center; }
-
- .auth-footer { margin-top: 2rem; border-top: 1px solid var(--slate-100); padding-top: 1.5rem; font-size: 0.9rem; }
- .auth-footer span { color: var(--brand-red); font-weight: 700; cursor: pointer; text-decoration: underline; }
-
- @media (max-width: 480px) {
- .drawer { width: 100%; }
- .modal { width: 90%; padding: 1.5rem; }
- }
-
-/* Extracted from components/Header.jsx */
+ position: fixed;
+ inset: 0;
+ z-index: 2000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.backdrop {
+ position: absolute;
+ inset: 0;
+ background: rgba(15, 23, 42, 0.6);
+ backdrop-filter: blur(4px);
+}
+
+.drawer {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 450px;
+ background: white;
+ box-shadow: -10px 0 30px rgba(0,0,0,0.1);
+ display: flex;
+ flex-direction: column;
+}
+
+.modal {
+ position: relative;
+ width: 420px;
+ background: white;
+ border-radius: var(--radius-lg);
+ padding: 2.5rem;
+ box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+}
+
+.overlay-header, .modal-header {
+ padding: 1.5rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid var(--slate-100);
+}
+
+.modal-header { border: none; padding: 0; justify-content: flex-end; }
+
+.overlay-header h3 {
+ font-size: 1.1rem;
+ letter-spacing: 2px;
+ font-weight: 800;
+ color: var(--deep-slate);
+}
+
+.close-btn {
+ color: var(--slate-400);
+ transition: 0.2s;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.close-btn:hover { color: var(--brand-red); }
+
+.overlay-content {
+ padding: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ overflow-y: auto;
+}
+
+.overlay-content .empty-state {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+}
+
+.empty-state {
+ text-align: center;
+ color: var(--slate-400);
+}
+
+.empty-state p { margin: 1.5rem 0 2rem; font-weight: 600; }
+
+.login-modal { text-align: center; }
+.user-icon-large { color: var(--brand-red); margin-bottom: 1rem; }
+.login-modal h2 { font-size: 2rem; color: var(--deep-slate); font-weight: 800; letter-spacing: -1px; }
+.login-modal p { color: var(--slate-500); margin-bottom: 2.5rem; font-weight: 500; }
+
+.auth-form { display: flex; flex-direction: column; gap: 1rem; }
+.auth-form input {
+ height: 50px;
+ border-radius: var(--radius-md);
+ border: 1px solid var(--slate-200);
+ padding: 0 1.5rem;
+ font-size: 1rem;
+ outline: none;
+ transition: 0.3s;
+}
+
+.auth-form input:focus { border-color: var(--brand-red); }
+.auth-btn { height: 50px; justify-content: center; margin-top: 1rem; }
+
+.separator {
+ margin: 1.5rem 0;
+ border-bottom: 1px solid var(--slate-100);
+ position: relative;
+}
+
+.separator span {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ background: white;
+ padding: 0 1rem;
+ font-size: 0.75rem;
+ color: var(--slate-400);
+ font-weight: 700;
+}
+
+.google-btn { height: 50px; justify-content: center; }
+
+.auth-footer { margin-top: 2rem; border-top: 1px solid var(--slate-100); padding-top: 1.5rem; font-size: 0.9rem; text-align: center; }
+.auth-footer span { color: var(--brand-red); font-weight: 700; cursor: pointer; text-decoration: underline; }
+
+@media (max-width: 480px) {
+ .drawer { width: 100%; }
+ .modal { width: 90%; padding: 1.5rem; }
+}
+
.sticky-header {
- position: sticky;
- top: 0;
- z-index: 1000;
- height: 80px;
- display: flex;
- align-items: center;
- transition: var(--transition-smooth);
- }
-
- .header-wrapper {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 2rem;
- }
-
- .logo-section {
- display: flex;
- align-items: center;
- gap: 2rem;
- }
-
- .brand-logo {
- font-family: 'Outfit', sans-serif;
- font-size: 2.2rem;
- font-weight: 800;
- color: var(--deep-slate);
- letter-spacing: -1.5px;
- }
-
- .logo-accent {
- color: var(--brand-red);
- }
-
- .nav-links {
- display: flex;
- gap: 2.5rem;
- list-style: none;
- }
-
- .nav-item {
- font-size: 1rem;
- font-weight: 700;
- color: var(--slate-600);
- position: relative;
- padding: 0.5rem 0;
- letter-spacing: 0.5px;
- background: none;
- border: none;
- cursor: pointer;
- transition: 0.3s;
- }
-
- .nav-item.active {
- color: var(--brand-red);
- }
-
- .nav-item.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 3px;
- background: var(--brand-red);
- }
-
- .search-container {
- flex: 1;
- max-width: 450px;
- height: 48px;
- background: var(--slate-100);
- border-radius: var(--radius-full);
- display: flex;
- align-items: center;
- padding: 0 1.5rem;
- gap: 1rem;
- border: 1px solid transparent;
- transition: var(--transition-smooth);
- }
-
- .search-container.focused {
- background: white;
- border-color: var(--brand-red);
- box-shadow: 0 0 0 4px rgba(255, 61, 0, 0.1);
- }
-
- .search-icon {
- color: var(--slate-400);
- }
-
- .search-container input {
- width: 100%;
- border: none;
- background: transparent;
- outline: none;
- font-size: 1rem;
- color: var(--deep-slate);
- }
-
- .user-actions {
- display: flex;
- gap: 1rem;
- }
-
- .action-btn {
- position: relative;
- padding: 0.6rem;
- color: var(--slate-700);
- border-radius: var(--radius-sm);
- background: none;
- border: none;
- cursor: pointer;
- }
-
- .action-btn:hover {
- background: var(--slate-100);
- color: var(--brand-red);
- }
-
- .badge {
- position: absolute;
- top: 4px;
- right: 4px;
- width: 18px;
- height: 18px;
- font-size: 0.7rem;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- color: white;
- font-weight: bold;
- background: var(--slate-700);
- }
-
- .mobile-toggle {
- display: none;
- background: none;
- border: none;
- cursor: pointer;
- }
-
- @media (max-width: 1024px) {
- .nav-links { display: none; }
- .search-container { display: none; }
- .mobile-toggle { display: block; }
- .brand-logo { font-size: 1.8rem; }
- }
-
-/* Extracted from components/Sidebar.jsx */
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ background: #ffffff;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--slate-100);
+ transition: var(--transition-smooth);
+}
+
+.header-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2rem;
+}
+
+.brand-logo {
+ font-family: 'Outfit', sans-serif;
+ font-size: 2.2rem;
+ font-weight: 800;
+ color: var(--deep-slate);
+ letter-spacing: -1.5px;
+}
+
+.logo-accent {
+ color: var(--brand-red);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2.5rem;
+ list-style: none;
+}
+
+.nav-item {
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--slate-600);
+ position: relative;
+ padding: 0.5rem 0;
+ letter-spacing: 0.5px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ transition: 0.3s;
+}
+
+.nav-item.active {
+ color: var(--brand-red);
+}
+
+.nav-item.active::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background: var(--brand-red);
+}
+
+.search-container {
+ flex: 1;
+ max-width: 450px;
+ height: 48px;
+ background: var(--slate-100);
+ border-radius: var(--radius-full);
+ display: flex;
+ align-items: center;
+ padding: 0 1.5rem;
+ gap: 1rem;
+ border: 1px solid transparent;
+ transition: var(--transition-smooth);
+}
+
+.search-container.focused {
+ background: white;
+ border-color: var(--brand-red);
+ box-shadow: 0 0 0 4px rgba(255, 61, 0, 0.1);
+}
+
+.search-icon {
+ color: var(--slate-400);
+}
+
+.search-container input {
+ width: 100%;
+ border: none;
+ background: transparent;
+ outline: none;
+ font-size: 1rem;
+ color: var(--deep-slate);
+}
+
+.user-actions {
+ display: flex;
+ gap: 1rem;
+}
+
+.action-btn {
+ position: relative;
+ padding: 0.6rem;
+ color: var(--slate-700);
+ border-radius: var(--radius-sm);
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.action-btn:hover {
+ background: var(--slate-100);
+ color: var(--brand-red);
+}
+
+.badge {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 18px;
+ height: 18px;
+ font-size: 0.7rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ color: white;
+ font-weight: bold;
+ background: var(--slate-700);
+}
+
+.mobile-toggle {
+ display: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+@media (max-width: 1024px) {
+ .nav-links { display: none; }
+ .search-container { display: none; }
+ .mobile-toggle { display: block; }
+ .brand-logo { font-size: 1.8rem; }
+}
+
.sidebar {
- width: 320px;
- padding: 2.5rem 2rem;
- background: white;
- border-right: 1px solid var(--slate-200);
- height: calc(100vh - 80px);
- position: sticky;
- top: 80px;
- overflow-y: auto;
- scrollbar-width: thin;
- }
-
- .filter-header {
- display: flex;
- align-items: center;
- gap: 1rem;
- padding-bottom: 2rem;
- border-bottom: 1px solid var(--slate-100);
- margin-bottom: 2rem;
- }
-
- .filter-header h3 {
- font-size: 1.1rem;
- letter-spacing: 2px;
- color: var(--deep-slate);
- font-weight: 800;
- }
-
- .filter-section {
- margin-bottom: 3rem;
- }
-
- .section-title {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 1.5rem;
- cursor: pointer;
- user-select: none;
- }
-
- .section-title h4 {
- font-size: 0.95rem;
- color: var(--slate-800);
- font-weight: 800;
- letter-spacing: 1px;
- }
-
- .filter-list {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
-
- .filter-item {
- display: flex;
- align-items: center;
- font-size: 0.95rem;
- color: var(--slate-700);
- font-weight: 500;
- cursor: pointer;
- transition: var(--transition-smooth);
- }
-
- .filter-item:hover {
- color: var(--brand-red);
- }
-
- .filter-item label {
- display: flex;
- align-items: center;
- gap: 1rem;
- cursor: pointer;
- flex: 1;
- }
-
- .filter-item input {
- display: none;
- }
-
- .checkbox-custom {
- width: 22px;
- height: 22px;
- border: 2px solid var(--slate-200);
- border-radius: 6px;
- position: relative;
- transition: var(--transition-smooth);
- background: var(--background);
- }
-
- .filter-item input:checked + .checkbox-custom {
- background: var(--brand-red);
- border-color: var(--brand-red);
- box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.1);
- }
-
- .filter-item input:checked + .checkbox-custom::after {
- content: '✓';
- position: absolute;
- color: white;
- font-size: 14px;
- font-weight: 900;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
-
- .item-name {
- line-height: 1.4;
- font-weight: 600;
- }
-
- @media (max-width: 1024px) {
- .sidebar { display: none; }
- }
-
-/* Extracted from components/ProductGrid.jsx */
+ width: 320px;
+ padding: 2.5rem 2rem;
+ background: white;
+ border-right: 1px solid var(--slate-200);
+ height: calc(100vh - 80px);
+ position: sticky;
+ top: 80px;
+ overflow-y: auto;
+ scrollbar-width: thin;
+}
+
+.filter-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding-bottom: 2rem;
+ border-bottom: 1px solid var(--slate-100);
+ margin-bottom: 2rem;
+}
+
+.filter-header h3 {
+ font-size: 1.1rem;
+ letter-spacing: 2px;
+ color: var(--deep-slate);
+ font-weight: 800;
+}
+
+.filter-section {
+ margin-bottom: 3rem;
+}
+
+.section-title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+ cursor: pointer;
+ user-select: none;
+}
+
+.section-title h4 {
+ font-size: 0.95rem;
+ color: var(--slate-800);
+ font-weight: 800;
+ letter-spacing: 1px;
+}
+
+.filter-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.filter-item {
+ display: flex;
+ align-items: center;
+ font-size: 0.95rem;
+ color: var(--slate-700);
+ font-weight: 500;
+ cursor: pointer;
+ transition: var(--transition-smooth);
+}
+
+.filter-item:hover {
+ color: var(--brand-red);
+}
+
+.filter-item label {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ cursor: pointer;
+ flex: 1;
+}
+
+.filter-item input {
+ display: none;
+}
+
+.checkbox-custom {
+ width: 22px;
+ height: 22px;
+ border: 2px solid var(--slate-200);
+ border-radius: 6px;
+ position: relative;
+ transition: var(--transition-smooth);
+ background: var(--background);
+}
+
+.filter-item input:checked + .checkbox-custom {
+ background: var(--brand-red);
+ border-color: var(--brand-red);
+ box-shadow: 0 0 0 3px rgba(255, 61, 0, 0.1);
+}
+
+.filter-item input:checked + .checkbox-custom::after {
+ content: '✓';
+ position: absolute;
+ color: white;
+ font-size: 14px;
+ font-weight: 900;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.item-name {
+ line-height: 1.4;
+ font-weight: 600;
+}
+
+@media (max-width: 1024px) {
+ .sidebar { display: none; }
+}
+
.main-content {
- flex: 1;
- padding: 2.5rem 3rem;
- min-height: calc(100vh - 80px);
- background: var(--background);
- }
-
- .content-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 3rem;
- border-bottom: 1px solid var(--slate-100);
- padding-bottom: 1.5rem;
- }
-
- .breadcrumb {
- font-size: 0.9rem;
- color: var(--slate-400);
- font-weight: 600;
- letter-spacing: 0.5px;
- }
-
- .breadcrumb .count {
- color: var(--slate-700);
- font-weight: 800;
- margin-left: 0.5rem;
- }
-
- .sort-dropdown select {
- padding: 0.8rem 1.5rem;
- border: 1px solid var(--slate-200);
- border-radius: var(--radius-md);
- font-size: 0.9rem;
- background: white;
- color: var(--slate-700);
- font-weight: 600;
- outline: none;
- cursor: pointer;
- transition: var(--transition-smooth);
- }
-
- .sort-dropdown select:hover {
- border-color: var(--brand-red);
- }
-
- .product-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 3rem 2rem;
- }
-
- .no-products {
- text-align: center;
- padding: 10rem 0;
- color: var(--slate-400);
- }
-
- .no-products h3 {
- font-size: 1.5rem;
- color: var(--slate-600);
- margin-bottom: 1rem;
- }
-
- @media (max-width: 640px) {
- .product-grid {
- grid-template-columns: repeat(2, 1fr);
- gap: 1.5rem 1rem;
- }
-
- .main-content {
- padding: 1.5rem 1rem;
- }
-
- .content-header {
- flex-direction: column;
- align-items: flex-start;
- gap: 1rem;
- }
- }
-
-/* Extracted from components/ProductDetail.jsx */
+ flex: 1;
+ padding: 2.5rem 3rem;
+ min-height: calc(100vh - 80px);
+ background: var(--background);
+}
+
+.content-header {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-bottom: 1.5rem;
+ border-bottom: 1px solid var(--slate-100);
+ padding-bottom: 1rem;
+}
+
+.sort-dropdown {
+ margin-left: auto;
+}
+
+.sort-dropdown select {
+ padding: 0.4rem 0.8rem;
+ border: 1px solid var(--slate-200);
+ border-radius: var(--radius-md);
+ font-size: 0.75rem;
+ background: white;
+ color: var(--slate-700);
+ font-weight: 600;
+ outline: none;
+ cursor: pointer;
+ transition: var(--transition-smooth);
+ width: fit-content;
+}
+
+.sort-dropdown select:hover {
+ border-color: var(--brand-red);
+}
+
+.product-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 3rem 2rem;
+}
+
+.no-products {
+ text-align: center;
+ padding: 10rem 0;
+ color: var(--slate-400);
+}
+
+/* --- Hero Banner --- */
+.hero-banner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #000000;
+ border-radius: var(--radius-lg);
+ padding: 0.8rem 4rem;
+ margin-bottom: 2rem;
+ overflow: hidden;
+ position: relative;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+ min-height: 180px;
+}
+
+/* Removed Diagonal Overlay for Dark Theme */
+.hero-banner * {
+ z-index: 2;
+}
+
+.hero-content {
+ flex: 1.2;
+ z-index: 2;
+ position: relative;
+}
+
+.hero-tag {
+ color: #FF6B00;
+ font-weight: 800;
+ letter-spacing: 0.3em;
+ font-size: 0.85rem;
+ margin-bottom: 1rem;
+ text-transform: uppercase;
+}
+
+.hero-banner h1 {
+ font-size: 2.6rem;
+ font-weight: 800;
+ line-height: 1.1;
+ margin-bottom: 1.2rem;
+ color: #FFFFFF;
+ letter-spacing: -2px;
+}
+
+.hero-subtitle {
+ font-size: 1.1rem;
+ color: #94A3B8;
+ margin-bottom: 1.5rem;
+ max-width: 440px;
+ line-height: 1.4;
+}
+
+.hero-cta {
+ background: #FF6B00 !important;
+ color: white !important;
+ padding: 0.9rem 2.5rem !important;
+ font-size: 0.9rem !important;
+ font-weight: 800;
+ letter-spacing: 1px;
+ border-radius: 30px !important;
+ box-shadow: 0 10px 25px rgba(255, 107, 0, 0.4) !important;
+}
+
+.hero-image-box {
+ flex: 1;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.hero-image-box img {
+ width: 90%;
+ max-width: none;
+ transform: rotate(-5deg) translateY(0);
+ filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
+}
+
+.hero-glow {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 400px;
+ height: 400px;
+ background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
+ filter: blur(80px);
+ opacity: 0.15;
+ z-index: -1;
+}
+
+.content-area {
+ flex: 1;
+ min-width: 0;
+}
+
+.nike-collection-header {
+ margin-bottom: 1.5rem;
+ padding: 1.5rem 2rem;
+ background: #000;
+ border-radius: var(--radius-lg);
+ color: white;
+}
+
+.nike-collection-header h2 {
+ font-size: 1.8rem;
+ font-weight: 900;
+ letter-spacing: -1px;
+ margin: 0.4rem 0 0.3rem;
+ color: white;
+}
+
+.nike-collection-header p {
+ color: #94A3B8;
+ font-size: 0.9rem;
+ margin: 0;
+}
+
+.back-to-home {
+ background: none;
+ border: none;
+ color: #FF6B00;
+ font-size: 0.85rem;
+ font-weight: 700;
+ cursor: pointer;
+ padding: 0;
+ margin-bottom: 0.5rem;
+ letter-spacing: 0.5px;
+}
+
+@media (max-width: 1200px) {
+ .hero-banner {
+ padding: 2rem;
+ }
+ .hero-image-box img {
+ width: 100%;
+ }
+}
+
+@media (max-width: 991px) {
+ .hero-banner {
+ flex-direction: column;
+ text-align: center;
+ padding: 4rem 2rem;
+ min-height: auto;
+ }
+ .hero-content {
+ margin-bottom: 4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .hero-subtitle {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .hero-image-box img {
+ width: 100%;
+ transform: rotate(-5deg);
+ }
+}
+
+.no-products h3 {
+ font-size: 1.5rem;
+ color: var(--slate-600);
+ margin-bottom: 1rem;
+}
+
+@media (max-width: 640px) {
+ .product-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem 1rem;
+ }
+ .main-content {
+ padding: 1.5rem 1rem;
+ }
+ .content-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+}
+
.product-detail-container { animation: fadeIn 0.5s ease-out; }
- .back-btn { display: flex; align-items: center; gap: 0.5rem; color: var(--slate-400); font-weight: 700; margin-bottom: 2rem; font-size: 0.9rem; transition: 0.2s; background: none; border: none; cursor: pointer; }
- .back-btn:hover { color: var(--brand-red); }
-
- .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
- .image-display { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 1/1; }
- .image-display img { width: 100%; height: 100%; object-fit: cover; }
-
- .brand-tag { font-size: 0.9rem; font-weight: 800; color: var(--brand-red); letter-spacing: 2px; }
- .product-title { font-size: 3rem; font-weight: 800; color: var(--deep-slate); margin: 0.5rem 0; line-height: 1.1; }
- .product-cat { font-size: 1.2rem; color: var(--slate-600); font-weight: 500; margin-bottom: 2rem; }
- .price-tag { font-size: 2.5rem; font-weight: 700; color: var(--deep-slate); margin-bottom: 2rem; font-family: 'Outfit'; }
-
- .description-box { padding: 1.5rem; background: var(--slate-100); border-radius: var(--radius-md); margin-bottom: 2.5rem; color: var(--slate-600); line-height: 1.6; font-size: 1.05rem; }
-
- .size-selection { margin-bottom: 3rem; }
- .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
- .section-head h3 { font-size: 0.9rem; font-weight: 800; color: var(--deep-slate); }
- .section-head span { font-size: 0.8rem; font-weight: 700; color: var(--brand-red); text-decoration: underline; cursor: pointer; }
-
- .sizes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
- .size-btn { height: 50px; border: 2px solid var(--slate-200); border-radius: var(--radius-sm); font-weight: 700; color: var(--slate-600); transition: 0.3s; background: white; cursor: pointer; }
- .size-btn:hover { border-color: var(--brand-red); color: var(--brand-red); }
- .size-btn.active { background: var(--brand-red); border-color: var(--brand-red); color: white; }
-
- .action-buttons { display: flex; gap: 1.5rem; margin-bottom: 3rem; }
- .add-to-cart-btn { flex: 2; height: 60px; font-size: 1.1rem; justify-content: center; }
- .wishlist-btn-large { flex: 1; border: 2px solid var(--slate-200); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 700; color: var(--slate-700); transition: 0.3s; background: white; cursor: pointer; }
- .wishlist-btn-large:hover { border-color: var(--brand-red); color: var(--brand-red); }
-
- .trust-badges { display: flex; flex-direction: column; gap: 1rem; }
- .badge-item { display: flex; align-items: center; gap: 0.75rem; color: var(--slate-500); font-weight: 600; font-size: 0.9rem; }
-
- @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-
- @media (max-width: 768px) {
- .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
- .product-title { font-size: 2.2rem; }
- .price-tag { font-size: 2rem; }
- }
-
-/* Extracted from components/ProductCard.jsx */
+.back-btn { display: flex; align-items: center; gap: 0.5rem; color: var(--slate-400); font-weight: 700; margin-bottom: 2rem; font-size: 0.9rem; transition: 0.2s; background: none; border: none; cursor: pointer; }
+.back-btn:hover { color: var(--brand-red); }
+
+.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
+.image-display { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 1/1; }
+.image-display img { width: 100%; height: 100%; object-fit: cover; }
+
+.brand-tag { font-size: 0.9rem; font-weight: 800; color: var(--brand-red); letter-spacing: 2px; }
+.product-title { font-size: 3rem; font-weight: 800; color: var(--deep-slate); margin: 0.5rem 0; line-height: 1.1; }
+.product-cat { font-size: 1.2rem; color: var(--slate-600); font-weight: 500; margin-bottom: 2rem; }
+.price-tag { font-size: 2.5rem; font-weight: 700; color: var(--deep-slate); margin-bottom: 2rem; font-family: 'Outfit'; }
+
+.description-box { padding: 1.5rem; background: var(--slate-100); border-radius: var(--radius-md); margin-bottom: 2.5rem; color: var(--slate-600); line-height: 1.6; font-size: 1.05rem; }
+
+.size-selection { margin-bottom: 3rem; }
+.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+.section-head h3 { font-size: 0.9rem; font-weight: 800; color: var(--deep-slate); }
+.section-head span { font-size: 0.8rem; font-weight: 700; color: var(--brand-red); text-decoration: underline; cursor: pointer; }
+
+.sizes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
+.size-btn { height: 50px; border: 2px solid var(--slate-200); border-radius: var(--radius-sm); font-weight: 700; color: var(--slate-600); transition: 0.3s; background: white; cursor: pointer; }
+.size-btn:hover { border-color: var(--brand-red); color: var(--brand-red); }
+.size-btn.active { background: var(--brand-red); border-color: var(--brand-red); color: white; }
+
+.action-buttons { display: flex; gap: 1.5rem; margin-bottom: 3rem; }
+.add-to-cart-btn { flex: 2; height: 60px; font-size: 1.1rem; justify-content: center; }
+.wishlist-btn-large { flex: 1; border: 2px solid var(--slate-200); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 700; color: var(--slate-700); transition: 0.3s; background: white; cursor: pointer; }
+.wishlist-btn-large:hover { border-color: var(--brand-red); color: var(--brand-red); }
+
+.trust-badges { display: flex; flex-direction: column; gap: 1rem; }
+.badge-item { display: flex; align-items: center; gap: 0.75rem; color: var(--slate-500); font-weight: 600; font-size: 0.9rem; }
+
+@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+
+@media (max-width: 768px) {
+ .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
+ .product-title { font-size: 2.2rem; }
+ .price-tag { font-size: 2rem; }
+}
+
.product-card {
- background: white;
- border-radius: var(--radius-md);
- overflow: hidden;
- transition: var(--transition-smooth);
- cursor: pointer;
- position: relative;
- }
-
- .card-image-wrap {
- position: relative;
- aspect-ratio: 1/1;
- background: #f0f0f0;
- overflow: hidden;
- }
-
- .card-image-wrap img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
- }
-
- .product-card:hover .card-image-wrap img {
- transform: scale(1.1);
- }
-
- .badge-trending {
- position: absolute;
- top: 12px;
- left: 12px;
- background: rgba(255, 61, 0, 0.9);
- backdrop-filter: blur(4px);
- color: white;
- padding: 4px 8px;
- border-radius: 4px;
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 0.7rem;
- font-weight: 700;
- text-transform: uppercase;
- z-index: 10;
- }
-
- .wishlist-overlay {
- position: absolute;
- top: 12px;
- right: 12px;
- width: 36px;
- height: 36px;
- border-radius: 50%;
- background: white;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--slate-400);
- box-shadow: var(--shadow-sm);
- z-index: 10;
- transition: var(--transition-smooth);
- }
-
- .wishlist-overlay:hover {
- color: var(--brand-red);
- transform: scale(1.1);
- }
-
- .quick-add {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: 0.75rem;
- background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
- transform: translateY(100%);
- transition: var(--transition-smooth);
- display: flex;
- justify-content: center;
- }
-
- .product-card:hover .quick-add {
- transform: translateY(0);
- }
-
- .quick-add button {
- background: white;
- color: black;
- font-weight: 800;
- font-size: 0.75rem;
- padding: 0.6rem 1.2rem;
- border-radius: 4px;
- letter-spacing: 0.5px;
- }
-
- .card-info {
- padding: 1rem;
- }
-
- .brand {
- font-size: 0.7rem;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: var(--slate-400);
- font-weight: 700;
- margin-bottom: 0.25rem;
- }
-
- .name {
- font-size: 1rem;
- color: var(--deep-slate);
- margin-bottom: 0.25rem;
- font-weight: 600;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .category {
- font-size: 0.85rem;
- color: var(--slate-600);
- margin-bottom: 0.75rem;
- }
-
- .price {
- font-weight: 700;
- font-size: 1.1rem;
- color: var(--deep-slate);
- font-family: 'Outfit', sans-serif;
- }
-
-/* --- App.css --- */
+ background: white;
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ transition: var(--transition-smooth);
+ cursor: pointer;
+ position: relative;
+}
+
+.card-image-wrap {
+ position: relative;
+ aspect-ratio: 1/1;
+ background: #f0f0f0;
+ overflow: hidden;
+}
+
+.card-image-wrap img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.product-card:hover .card-image-wrap img {
+ transform: scale(1.1);
+}
+
+.badge-trending {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ background: rgba(255, 61, 0, 0.9);
+ backdrop-filter: blur(4px);
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 0.7rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ z-index: 10;
+}
+
+.wishlist-overlay {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--slate-400);
+ box-shadow: var(--shadow-sm);
+ z-index: 10;
+ transition: var(--transition-smooth);
+}
+
+.wishlist-overlay:hover {
+ color: var(--brand-red);
+ transform: scale(1.1);
+}
+
+.quick-add {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: 0.75rem;
+ background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
+ transform: translateY(100%);
+ transition: var(--transition-smooth);
+ display: flex;
+ justify-content: center;
+}
+
+.product-card:hover .quick-add {
+ transform: translateY(0);
+}
+
+.quick-add button {
+ background: white;
+ color: black;
+ font-weight: 800;
+ font-size: 0.75rem;
+ padding: 0.6rem 1.2rem;
+ border-radius: 4px;
+ letter-spacing: 0.5px;
+}
+
+.card-info {
+ padding: 1rem;
+}
+
+.brand {
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--slate-400);
+ font-weight: 700;
+ margin-bottom: 0.25rem;
+}
+
+.name {
+ font-size: 1rem;
+ color: var(--deep-slate);
+ margin-bottom: 0.25rem;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.category {
+ font-size: 0.85rem;
+ color: var(--slate-600);
+ margin-bottom: 0.75rem;
+}
+
+.price {
+ font-weight: 700;
+ font-size: 1.1rem;
+ color: var(--deep-slate);
+ font-family: 'Outfit', sans-serif;
+}
+
.counter {
font-size: 16px;
padding: 5px 10px;
@@ -820,53 +945,47 @@ ul {
border: 2px solid transparent;
transition: border-color 0.3s;
margin-bottom: 24px;
-
- &:hover {
- border-color: var(--accent-border);
- }
- &:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
- }
+}
+.counter:hover {
+ border-color: var(--accent-border);
+}
+.counter:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
}
.hero {
position: relative;
-
- .base,
- .framework,
- .vite {
- inset-inline: 0;
- margin: 0 auto;
- }
-
- .base {
- width: 170px;
- position: relative;
- z-index: 0;
- }
-
- .framework,
- .vite {
- position: absolute;
- }
-
- .framework {
- z-index: 1;
- top: 34px;
- height: 28px;
- transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
- scale(1.4);
- }
-
- .vite {
- z-index: 0;
- top: 107px;
- height: 26px;
- width: auto;
- transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
- scale(0.8);
- }
+}
+.hero .base,
+.hero .framework,
+.hero .vite {
+ inset-inline: 0;
+ margin: 0 auto;
+}
+.hero .base {
+ width: 170px;
+ position: relative;
+ z-index: 0;
+}
+.hero .framework,
+.hero .vite {
+ position: absolute;
+}
+.hero .framework {
+ z-index: 1;
+ top: 34px;
+ height: 28px;
+ transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+ scale(1.4);
+}
+.hero .vite {
+ z-index: 0;
+ top: 107px;
+ height: 26px;
+ width: auto;
+ transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+ scale(0.8);
}
#center {
@@ -876,8 +995,9 @@ ul {
place-content: center;
place-items: center;
flex-grow: 1;
-
- @media (max-width: 1024px) {
+}
+@media (max-width: 1024px) {
+ #center {
padding: 32px 20px 24px;
gap: 18px;
}
@@ -887,22 +1007,23 @@ ul {
display: flex;
border-top: 1px solid var(--border);
text-align: left;
-
- & > div {
- flex: 1 1 0;
- padding: 32px;
- @media (max-width: 1024px) {
- padding: 24px 20px;
- }
- }
-
- .icon {
- margin-bottom: 16px;
- width: 22px;
- height: 22px;
+}
+#next-steps > div {
+ flex: 1 1 0;
+ padding: 32px;
+}
+@media (max-width: 1024px) {
+ #next-steps > div {
+ padding: 24px 20px;
}
-
- @media (max-width: 1024px) {
+}
+#next-steps .icon {
+ margin-bottom: 16px;
+ width: 22px;
+ height: 22px;
+}
+@media (max-width: 1024px) {
+ #next-steps {
flex-direction: column;
text-align: center;
}
@@ -910,8 +1031,9 @@ ul {
#docs {
border-right: 1px solid var(--border);
-
- @media (max-width: 1024px) {
+}
+@media (max-width: 1024px) {
+ #docs {
border-right: none;
border-bottom: 1px solid var(--border);
}
@@ -923,53 +1045,51 @@ ul {
display: flex;
gap: 8px;
margin: 32px 0 0;
-
- .logo {
- height: 18px;
- }
-
- a {
- color: var(--text-h);
- font-size: 16px;
- border-radius: 6px;
- background: var(--social-bg);
- display: flex;
- padding: 6px 12px;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- transition: box-shadow 0.3s;
-
- &:hover {
- box-shadow: var(--shadow);
- }
- .button-icon {
- height: 18px;
- width: 18px;
- }
- }
-
- @media (max-width: 1024px) {
+}
+#next-steps ul .logo {
+ height: 18px;
+}
+#next-steps ul a {
+ color: var(--text-h);
+ font-size: 16px;
+ border-radius: 6px;
+ background: var(--social-bg);
+ display: flex;
+ padding: 6px 12px;
+ align-items: center;
+ gap: 8px;
+ text-decoration: none;
+ transition: box-shadow 0.3s;
+}
+#next-steps ul a:hover {
+ box-shadow: var(--shadow);
+}
+#next-steps ul a .button-icon {
+ height: 18px;
+ width: 18px;
+}
+@media (max-width: 1024px) {
+ #next-steps ul {
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
-
- li {
- flex: 1 1 calc(50% - 8px);
- }
-
- a {
- width: 100%;
- justify-content: center;
- box-sizing: border-box;
- }
+ }
+ #next-steps ul li {
+ flex: 1 1 calc(50% - 8px);
+ }
+ #next-steps ul a {
+ width: 100%;
+ justify-content: center;
+ box-sizing: border-box;
}
}
#spacer {
height: 88px;
border-top: 1px solid var(--border);
- @media (max-width: 1024px) {
+}
+@media (max-width: 1024px) {
+ #spacer {
height: 48px;
}
}
@@ -977,26 +1097,23 @@ ul {
.ticks {
position: relative;
width: 100%;
-
- &::before,
- &::after {
- content: '';
- position: absolute;
- top: -4.5px;
- border: 5px solid transparent;
- }
-
- &::before {
- left: 0;
- border-left-color: var(--border);
- }
- &::after {
- right: 0;
- border-right-color: var(--border);
- }
+}
+.ticks::before,
+.ticks::after {
+ content: '';
+ position: absolute;
+ top: -4.5px;
+ border: 5px solid transparent;
+}
+.ticks::before {
+ left: 0;
+ border-left-color: var(--border);
+}
+.ticks::after {
+ right: 0;
+ border-right-color: var(--border);
}
-/* Cart & Wishlist Drawer Items */
.cart-items { display: flex; flex-direction: column; gap: 0; padding: 0 20px; flex: 1; overflow-y: auto; }
.cart-item { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid #f2f2f2; }
.cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; background: #f7f7f7; }
@@ -1015,11 +1132,9 @@ ul {
.wishlist-overlay.wishlisted { color: #e85d04; }
.wishlist-btn-large.wishlisted { background: #fff0e6; color: #e85d04; border-color: #e85d04; }
-/* Google Login Button */
.google-custom-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1.5px solid #e0e0e0; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; color: #333; cursor: pointer; margin-top: 4px; }
.google-custom-btn:hover { background: #f5f5f5; border-color: #ccc; }
-/* User Profile in Header */
.user-profile-wrap { position: relative; }
.user-avatar-btn { background: none; border: none; cursor: pointer; padding: 0; border-radius: 50%; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #e85d04; }
@@ -1032,13 +1147,11 @@ ul {
.dropdown-logout { width: 100%; background: #fff0e6; color: #e85d04; border: none; border-radius: 8px; padding: 9px; font-weight: 600; font-size: 13px; cursor: pointer; }
.dropdown-logout:hover { background: #e85d04; color: #fff; }
-/* ── Checkout ── */
.checkout-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.checkout-modal { background: #fff; border-radius: 20px; width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.checkout-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid #f0f0f0; }
.checkout-header h2 { font-size: 16px; font-weight: 800; letter-spacing: 2px; }
-/* Steps */
.checkout-steps { display: flex; align-items: center; justify-content: center; padding: 20px 28px; gap: 0; }
.step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-circle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #aaa; background: #fff; }
@@ -1050,10 +1163,8 @@ ul {
.step-line { flex: 1; height: 2px; background: #eee; min-width: 60px; margin: 0 8px; margin-bottom: 20px; }
.step-line.done { background: #e85d04; }
-/* Body */
.checkout-body { flex: 1; overflow-y: auto; padding: 0 28px 28px; }
-/* Items */
.co-items { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.co-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f2f2f2; align-items: center; }
.co-item img { width: 90px; height: 90px; object-fit: cover; border-radius: 12px; background: #f7f7f7; }
@@ -1065,7 +1176,6 @@ ul {
.co-item-price p { font-weight: 800; font-size: 15px; text-align: right; }
.co-item-price span { font-size: 11px; color: #aaa; white-space: nowrap; }
-/* Billing */
.co-billing { background: #fafafa; border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; }
.co-billing h4 { font-size: 12px; letter-spacing: 1.5px; color: #aaa; margin-bottom: 12px; font-weight: 700; }
.billing-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
@@ -1074,13 +1184,11 @@ ul {
.billing-row.total-row { font-weight: 800; font-size: 15px; }
.free-ship { color: #16a34a; font-weight: 700; }
-/* Buttons */
.co-next-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 14px; font-size: 14px; letter-spacing: 1px; }
.co-btn-row { display: flex; gap: 12px; margin-top: 20px; }
.co-back-btn { flex: 0 0 auto; padding: 16px 24px; border-radius: 14px; font-size: 13px; letter-spacing: 1px; }
.place-order-btn { flex: 2; }
-/* Address Form */
.co-address-form h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; color: #333; }
.co-address-form input { width: 100%; padding: 12px 16px; border: 1.5px solid #e8e8e8; border-radius: 10px; font-size: 14px; margin-bottom: 12px; outline: none; box-sizing: border-box; }
.co-address-form input:focus { border-color: #e85d04; }
@@ -1088,21 +1196,18 @@ ul {
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-row-2 input, .form-row-3 input { margin-bottom: 0; }
-/* Payment */
.co-payment h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; color: #333; }
.payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.payment-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid #e8e8e8; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; }
.payment-option.selected { border-color: #e85d04; background: #fff8f5; }
.payment-option input { accent-color: #e85d04; width: 16px; height: 16px; }
-/* Order Success */
.order-success { text-align: center; padding: 48px 28px; display: flex; flex-direction: column; align-items: center; }
.success-icon { width: 72px; height: 72px; background: #e85d04; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 auto 20px; }
.order-success h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.order-success p { color: #888; margin-bottom: 28px; font-size: 14px; }
.order-success .btn-primary { width: auto; padding: 14px 32px; }
-/* ── Account Drawer ── */
.account-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; flex: 1; overflow-y: auto; }
.account-profile-card { display: flex; align-items: center; gap: 16px; background: #fafafa; border-radius: 16px; padding: 20px; }
.account-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #e85d04; }
@@ -1125,7 +1230,6 @@ ul {
.account-logout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border: 1.5px solid #e8e8e8; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #555; cursor: pointer; }
.account-logout-btn:hover { border-color: #e85d04; color: #e85d04; }
-/* Size Chart */
.size-chart-link { cursor: pointer; font-size: 12px; font-weight: 700; color: #e85d04; text-decoration: underline; }
.size-chart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.size-chart-modal { background: #fff; border-radius: 16px; padding: 24px; width: 340px; }
@@ -1137,10 +1241,8 @@ ul {
.size-table td { padding: 10px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.size-table tr.highlighted td { background: #fff0e6; font-weight: 700; color: #e85d04; }
-/* Auth error */
.auth-error { color: #e85d04; font-size: 13px; text-align: center; margin: -4px 0; }
-/* ── Order Detail & Cancel ── */
.order-detail-view, .cancel-view { display: flex; flex-direction: column; gap: 16px; }
.od-header { display: flex; justify-content: space-between; background: #f7f7f7; border-radius: 10px; padding: 12px 16px; font-size: 13px; }
.od-label { color: #888; }
@@ -1154,7 +1256,6 @@ ul {
.od-cancel-btn { font-size: 12px; font-weight: 700; border: 1.5px solid #ddd; background: #fff; border-radius: 6px; padding: 5px 14px; cursor: pointer; color: #555; }
.od-cancel-btn:hover { border-color: #e85d04; color: #e85d04; }
-/* Tracking */
.od-tracking { display: flex; flex-direction: column; padding: 12px 0; }
.track-step { display: flex; align-items: flex-start; gap: 16px; }
.track-left { display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0; }
@@ -1167,7 +1268,6 @@ ul {
.track-date { font-size: 12px; color: #aaa; margin-top: 2px; }
.od-cancelled-badge { color: #dc2626; font-weight: 700; font-size: 14px; padding: 12px 0; }
-/* Cancel Form */
.cancel-form { display: flex; flex-direction: column; gap: 10px; }
.cancel-form h4 { font-weight: 800; font-size: 14px; }
.cancel-form p { font-size: 13px; color: #888; }
@@ -1180,7 +1280,6 @@ ul {
.cancel-back-btn { flex: 1; padding: 14px; border-radius: 12px; font-size: 13px; letter-spacing: 1px; }
.cancel-confirm-btn { flex: 2; padding: 14px; border-radius: 12px; font-size: 13px; letter-spacing: 1px; }
-/* Cancel Popup */
.cancel-popup-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: inherit; }
.cancel-popup { background: #fff; border-radius: 14px; padding: 24px; margin: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.cancel-popup p { font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 16px; }
@@ -1188,10 +1287,515 @@ ul {
.cancel-popup-btn { float: right; background: none; border: 1.5px solid #e85d04; color: #e85d04; font-weight: 700; font-size: 14px; padding: 8px 20px; border-radius: 8px; cursor: pointer; }
.order-status.cancelled { background: #fef2f2; color: #dc2626; }
-/* Search clear button */
.search-clear { background: none; border: none; cursor: pointer; color: #aaa; font-size: 14px; padding: 0 4px; line-height: 1; }
.search-clear:hover { color: #e85d04; }
-/* Sneakers Banner */
.sneakers-banner-full { width: 100%; overflow: hidden; margin-bottom: 0; }
.sneakers-banner-full img { width: 100%; aspect-ratio: 16 / 7; display: block; object-fit: cover; object-position: center center; }
+
+.category-chips { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
+.category-chips::-webkit-scrollbar { display: none; }
+.cat-chip { flex-shrink: 0; padding: 8px 16px; border-radius: 20px; background: #f5f5f5; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: #888; white-space: nowrap; transition: all 0.2s; }
+.cat-chip.active { background: #e85d04; color: #fff; }
+.cat-chip:hover { background: #ffe8e0; color: #e85d04; }
+.cat-chip.active:hover { background: #e85d04; color: #fff; }
+
+.splash-container {
+ position: fixed;
+ inset: 0;
+ z-index: 10000;
+ background-color: var(--brand-red);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ overflow: hidden;
+}
+
+.splash-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+.splash-logo {
+ font-family: 'Outfit', sans-serif;
+ font-size: clamp(3.5rem, 10vw, 6rem);
+ font-weight: 900;
+ letter-spacing: -3px;
+ line-height: 1;
+ text-shadow: 0 10px 30px rgba(0,0,0,0.15);
+}
+
+.splash-subtitle {
+ font-size: clamp(0.75rem, 2vw, 1rem);
+ letter-spacing: 6px;
+ text-transform: uppercase;
+ font-weight: 600;
+ opacity: 0.9;
+ margin-top: 0.5rem;
+}
+
+.splash-loader {
+ margin-top: 3rem;
+ width: 40px;
+ height: 40px;
+ border: 3px solid rgba(255, 255, 255, 0.3);
+ border-top-color: white;
+ border-radius: 50%;
+ margin-left: auto;
+ margin-right: auto;
+ animation: splash-spin 0.8s linear infinite;
+}
+
+@keyframes splash-spin {
+ to { transform: rotate(360deg); }
+}
+
+.zappify-app {
+ opacity: 1;
+ transition: opacity 0.5s ease;
+}
+
+.zappify-app.loading {
+ height: 100vh;
+ overflow: hidden;
+}
+
+.splash-logo-img {
+ width: clamp(150px, 25vw, 250px);
+ max-height: 250px;
+ object-fit: contain;
+ }
+
+/* --- Nike Collection Page --- */
+.nike-collection-page {
+ min-height: 100vh;
+ background: var(--bg);
+}
+
+.nc-header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background: var(--surface);
+ border-bottom: 1px solid var(--border);
+ padding: 0 2rem;
+}
+
+.nc-header-inner {
+ max-width: 1400px;
+ margin: 0 auto;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+}
+
+.nc-back-btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ background: none;
+ border: none;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ font-weight: 600;
+ cursor: pointer;
+ padding: 6px 12px;
+ border-radius: 8px;
+ transition: background 0.2s;
+}
+
+.nc-back-btn:hover {
+ background: var(--bg);
+ color: var(--text);
+}
+
+.nc-hero {
+ background: #000;
+ padding: 3rem 2rem;
+ text-align: center;
+}
+
+.nc-hero-tag {
+ color: #FF6B00;
+ font-size: 0.75rem;
+ font-weight: 800;
+ letter-spacing: 0.3em;
+ margin-bottom: 0.8rem;
+}
+
+.nc-hero-title {
+ font-size: 3rem;
+ font-weight: 900;
+ color: #fff;
+ letter-spacing: -2px;
+ margin-bottom: 0.5rem;
+}
+
+.nc-hero-sub {
+ color: #94A3B8;
+ font-size: 1rem;
+}
+
+.nc-body {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.nc-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 1.5rem;
+}
+
+/* --- Nike Info Banner --- */
+.nike-info-banner {
+ background: #000;
+ border-radius: 16px;
+ padding: 2rem 2.5rem;
+ margin-bottom: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ overflow: hidden;
+ position: relative;
+ min-height: 180px;
+}
+
+.nike-banner-content {
+ flex: 1;
+ z-index: 2;
+}
+
+.nike-banner-tag {
+ color: #FF6B00;
+ font-size: 0.7rem;
+ font-weight: 800;
+ letter-spacing: 0.25em;
+ text-transform: uppercase;
+ margin-bottom: 0.6rem;
+}
+
+.nike-banner-title {
+ color: #fff;
+ font-size: 2.6rem;
+ font-weight: 900;
+ line-height: 1.05;
+ letter-spacing: -2px;
+ margin-bottom: 0.6rem;
+}
+
+.nike-banner-sub {
+ color: #64748B;
+ font-size: 0.9rem;
+ font-weight: 500;
+ max-width: 320px;
+ margin-bottom: 1.2rem;
+ line-height: 1.5;
+}
+
+.nike-banner-stats {
+ display: flex;
+ align-items: center;
+ gap: 1.2rem;
+ margin-bottom: 1.2rem;
+}
+
+.nike-stat {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.nike-stat-num {
+ color: #fff;
+ font-size: 1.3rem;
+ font-weight: 900;
+ letter-spacing: -1px;
+ line-height: 1;
+}
+
+.nike-stat-label {
+ color: #475569;
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.nike-stat-divider {
+ width: 1px;
+ height: 32px;
+ background: #1e293b;
+}
+
+.nike-banner-btn {
+ background: none;
+ border: 1.5px solid #1e293b;
+ color: #94A3B8;
+ font-size: 0.8rem;
+ font-weight: 700;
+ padding: 0.5rem 1.2rem;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: all 0.2s;
+ letter-spacing: 0.5px;
+}
+
+.nike-banner-btn:hover {
+ border-color: #FF6B00;
+ color: #FF6B00;
+}
+
+.nike-banner-img {
+ flex: 0 0 260px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.nike-banner-img img {
+ width: 260px;
+ transform: rotate(-8deg);
+ filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
+}
+
+.landing-page {
+ position: fixed;
+ inset: 0;
+ z-index: 9999;
+ background: #000;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 8vw;
+ overflow: hidden;
+}
+
+.landing-bg {
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(ellipse at 70% 50%, rgba(255, 107, 0, 0.12) 0%, transparent 60%);
+ pointer-events: none;
+}
+
+.landing-content {
+ flex: 1;
+ z-index: 2;
+ max-width: 560px;
+}
+
+.landing-logo {
+ font-size: 1.8rem;
+ font-weight: 900;
+ letter-spacing: -1px;
+ color: #fff;
+ margin-bottom: 2rem;
+}
+
+.landing-tag {
+ color: #FF6B00;
+ font-size: 0.75rem;
+ font-weight: 800;
+ letter-spacing: 0.3em;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+}
+
+.landing-title {
+ font-size: clamp(3rem, 6vw, 5.5rem);
+ font-weight: 900;
+ color: #fff;
+ line-height: 1.0;
+ letter-spacing: -3px;
+ margin-bottom: 1.5rem;
+}
+
+.landing-sub {
+ font-size: 1.1rem;
+ color: #64748B;
+ line-height: 1.6;
+ max-width: 420px;
+ margin-bottom: 2.5rem;
+}
+
+.landing-cta {
+ background: #FF6B00;
+ color: #fff;
+ border: none;
+ padding: 1rem 3rem;
+ font-size: 1rem;
+ font-weight: 800;
+ letter-spacing: 1.5px;
+ border-radius: 50px;
+ cursor: pointer;
+ box-shadow: 0 15px 40px rgba(255, 107, 0, 0.35);
+ margin-bottom: 3rem;
+}
+
+.landing-scroll-hint {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ color: #475569;
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+}
+
+.scroll-arrow {
+ width: 1px;
+ height: 40px;
+ background: linear-gradient(to bottom, #FF6B00, transparent);
+ animation: scrollPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes scrollPulse {
+ 0%, 100% { opacity: 0.4; transform: scaleY(1); }
+ 50% { opacity: 1; transform: scaleY(1.2); }
+}
+
+.landing-shoe {
+ flex: 0 0 45%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 2;
+}
+
+.landing-shoe img {
+ width: 100%;
+ max-width: 600px;
+ transform: rotate(-10deg);
+ filter: drop-shadow(0 40px 80px rgba(255, 107, 0, 0.2));
+}
+
+@media (max-width: 768px) {
+ .landing-page {
+ flex-direction: column;
+ justify-content: center;
+ padding: 2rem;
+ text-align: center;
+ }
+ .landing-content {
+ max-width: 100%;
+ }
+ .landing-scroll-hint {
+ align-items: center;
+ }
+ .landing-shoe {
+ display: none;
+ }
+}
+
+.login-modal-new {
+ width: 420px !important;
+ max-width: 95vw !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+ border-radius: 20px !important;
+}
+
+.login-hero-banner {
+ position: relative;
+ height: 220px;
+ background: #000;
+ overflow: hidden;
+}
+
+.login-hero-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.75;
+}
+
+.login-close-btn {
+ position: absolute !important;
+ top: 12px !important;
+ right: 12px !important;
+ background: rgba(255,255,255,0.15) !important;
+ border: 1px solid rgba(255,255,255,0.3) !important;
+ border-radius: 20px !important;
+ padding: 6px 12px !important;
+ color: #fff !important;
+}
+
+.login-hero-overlay {
+ position: absolute;
+ bottom: 20px;
+ left: 24px;
+}
+
+.login-hero-tag {
+ color: #FF6B00;
+ font-size: 0.65rem;
+ font-weight: 900;
+ letter-spacing: 3px;
+ margin-bottom: 4px;
+}
+
+.login-hero-title {
+ color: #fff;
+ font-size: 1.8rem;
+ font-weight: 900;
+ line-height: 1.1;
+ letter-spacing: -1px;
+ margin-bottom: 4px;
+}
+
+.login-hero-sub {
+ color: #94A3B8;
+ font-size: 0.85rem;
+}
+
+.login-form-card {
+ padding: 24px 28px 28px;
+ background: #fff;
+}
+
+.login-form-card h2 {
+ font-size: 1.4rem;
+ font-weight: 800;
+ color: #0F172A;
+ margin-bottom: 4px;
+}
+
+.login-form-card > p {
+ font-size: 0.9rem;
+ color: #64748B;
+ margin-bottom: 20px;
+}
+
+.google-proper-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ width: 100%;
+ padding: 12px;
+ border: 1.5px solid #e0e0e0;
+ border-radius: 12px;
+ background: #fff;
+ cursor: pointer;
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #1a1a1a;
+ transition: background 0.2s;
+}
+
+.google-proper-btn:hover {
+ background: #f5f5f5;
+}
+
+.google-icon-large {
+ width: 22px;
+ height: 22px;
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index af05417..6105491 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,18 +3,15 @@ import { createRoot } from 'react-dom/client'
import { GoogleOAuthProvider } from '@react-oauth/google'
import './index.css'
import App from './App.jsx'
-import Preview from './Preview.jsx'
-const isPreview = window.location.pathname === '/preview';
+if (window.location.pathname === '/preview') {
+ window.location.replace('/');
+}
createRoot(document.getElementById('root')).render(
- {isPreview ? (
-
-
- )}
+
+
,
)
diff --git a/frontend/vercel.json b/frontend/vercel.json
index 0d199b2..2ffe2c5 100644
--- a/frontend/vercel.json
+++ b/frontend/vercel.json
@@ -1,4 +1,7 @@
{
+ "redirects": [
+ { "source": "/preview", "destination": "/", "permanent": true }
+ ],
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 9ffcc67..b94a372 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -3,4 +3,7 @@ import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
+ server: {
+ historyApiFallback: true,
+ },
})
diff --git a/mobile/App.js b/mobile/App.js
index 235b24f..de37f3c 100644
--- a/mobile/App.js
+++ b/mobile/App.js
@@ -1,9 +1,10 @@
import 'react-native-gesture-handler';
-import React from 'react';
-import { View, Text } from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated, StatusBar, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
+import AsyncStorage from '@react-native-async-storage/async-storage';
import { AppProvider } from './src/context/AppContext';
import HomeScreen from './src/screens/HomeScreen';
@@ -17,11 +18,53 @@ import AccountScreen from './src/screens/AccountScreen';
const Stack = createNativeStackNavigator();
export default function App() {
+ const [showSplash, setShowSplash] = useState(true);
+ const [initialRoute, setInitialRoute] = useState('Login');
+ const fadeAnim = useRef(new Animated.Value(1)).current;
+ const scaleAnim = useRef(new Animated.Value(0.95)).current;
+
+ useEffect(() => {
+ AsyncStorage.getItem('zappify_user').then(saved => {
+ if (saved) setInitialRoute('Home');
+ });
+
+ Animated.loop(
+ Animated.sequence([
+ Animated.timing(scaleAnim, { toValue: 1.05, duration: 1000, useNativeDriver: true }),
+ Animated.timing(scaleAnim, { toValue: 0.95, duration: 1000, useNativeDriver: true }),
+ ])
+ ).start();
+
+ const timer = setTimeout(() => {
+ Animated.timing(fadeAnim, {
+ toValue: 0,
+ duration: 800,
+ useNativeDriver: true,
+ }).start(() => setShowSplash(false));
+ }, 2500);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (showSplash) {
+ return (
+
+
+
+ Premium Shoe Store
+
+
+
+ );
+ }
+
return (
-
+
);
}
+
+const styles = StyleSheet.create({
+ splashContainer: {
+ flex: 1,
+ backgroundColor: '#FF3D00',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ splashLogoImg: {
+ width: 280,
+ height: 280,
+ resizeMode: 'contain',
+ },
+ splashSubtitle: {
+ fontSize: 12,
+ color: '#FFFFFF',
+ opacity: 0.9,
+ textTransform: 'uppercase',
+ letterSpacing: 6,
+ textAlign: 'center',
+ marginTop: 8,
+ fontWeight: '700',
+ },
+});
diff --git a/mobile/app.json b/mobile/app.json
index ae02df6..295b730 100644
--- a/mobile/app.json
+++ b/mobile/app.json
@@ -7,10 +7,18 @@
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"newArchEnabled": true,
+ "updates": {
+ "url": "https://u.expo.dev/4e2e0935-79af-41b1-a1b8-af2b90d261d2",
+ "enabled": true,
+ "checkAutomatically": "ON_LOAD"
+ },
+ "runtimeVersion": {
+ "policy": "appVersion"
+ },
"splash": {
- "image": "./assets/splash-icon.png",
+ "image": "./assets/logo.png",
"resizeMode": "contain",
- "backgroundColor": "#ffffff"
+ "backgroundColor": "#FF3D00"
},
"ios": {
"supportsTablet": true,
diff --git a/mobile/assets/hero-nike.png b/mobile/assets/hero-nike.png
new file mode 100644
index 0000000..c3e6045
Binary files /dev/null and b/mobile/assets/hero-nike.png differ
diff --git a/mobile/assets/logo.png b/mobile/assets/logo.png
new file mode 100644
index 0000000..c3d6c53
Binary files /dev/null and b/mobile/assets/logo.png differ
diff --git a/mobile/assets/shoes/Air Jordan 1 Low SE.jpg b/mobile/assets/shoes/Air Jordan 1 Low SE.jpg
new file mode 100644
index 0000000..2fdf962
Binary files /dev/null and b/mobile/assets/shoes/Air Jordan 1 Low SE.jpg differ
diff --git a/mobile/assets/shoes/Air Jordan 1 Mid.jpg b/mobile/assets/shoes/Air Jordan 1 Mid.jpg
new file mode 100644
index 0000000..cd98828
Binary files /dev/null and b/mobile/assets/shoes/Air Jordan 1 Mid.jpg differ
diff --git a/mobile/assets/shoes/LeBron Witness IX EP.jpg b/mobile/assets/shoes/LeBron Witness IX EP.jpg
new file mode 100644
index 0000000..2de46fd
Binary files /dev/null and b/mobile/assets/shoes/LeBron Witness IX EP.jpg differ
diff --git a/mobile/assets/shoes/Nike Air Max 270.jpg b/mobile/assets/shoes/Nike Air Max 270.jpg
new file mode 100644
index 0000000..a270adb
Binary files /dev/null and b/mobile/assets/shoes/Nike Air Max 270.jpg differ
diff --git a/mobile/assets/shoes/Nike Air Max Alpha Trainer 6.jpg b/mobile/assets/shoes/Nike Air Max Alpha Trainer 6.jpg
new file mode 100644
index 0000000..3748134
Binary files /dev/null and b/mobile/assets/shoes/Nike Air Max Alpha Trainer 6.jpg differ
diff --git a/mobile/assets/shoes/Nike Air Max Dn Roam.jpg b/mobile/assets/shoes/Nike Air Max Dn Roam.jpg
new file mode 100644
index 0000000..f4dec56
Binary files /dev/null and b/mobile/assets/shoes/Nike Air Max Dn Roam.jpg differ
diff --git a/mobile/assets/shoes/Nike Air Max Excee.jpg b/mobile/assets/shoes/Nike Air Max Excee.jpg
new file mode 100644
index 0000000..3f951fd
Binary files /dev/null and b/mobile/assets/shoes/Nike Air Max Excee.jpg differ
diff --git a/mobile/assets/shoes/Nike Ava Rover.jpg b/mobile/assets/shoes/Nike Ava Rover.jpg
new file mode 100644
index 0000000..72d7dc9
Binary files /dev/null and b/mobile/assets/shoes/Nike Ava Rover.jpg differ
diff --git a/mobile/assets/shoes/Nike Downshifter 14.jpg b/mobile/assets/shoes/Nike Downshifter 14.jpg
new file mode 100644
index 0000000..05f6713
Binary files /dev/null and b/mobile/assets/shoes/Nike Downshifter 14.jpg differ
diff --git a/mobile/assets/shoes/Nike Free Metcon 6.jpg b/mobile/assets/shoes/Nike Free Metcon 6.jpg
new file mode 100644
index 0000000..0eadd04
Binary files /dev/null and b/mobile/assets/shoes/Nike Free Metcon 6.jpg differ
diff --git a/mobile/assets/shoes/Nike Journey Run.jpg b/mobile/assets/shoes/Nike Journey Run.jpg
new file mode 100644
index 0000000..9b2d1e6
Binary files /dev/null and b/mobile/assets/shoes/Nike Journey Run.jpg differ
diff --git a/mobile/assets/shoes/Nike Killshot 2 Leather Premium.jpg b/mobile/assets/shoes/Nike Killshot 2 Leather Premium.jpg
new file mode 100644
index 0000000..5ab6884
Binary files /dev/null and b/mobile/assets/shoes/Nike Killshot 2 Leather Premium.jpg differ
diff --git a/mobile/assets/shoes/Nike Killshot 2 Leather.jpg b/mobile/assets/shoes/Nike Killshot 2 Leather.jpg
new file mode 100644
index 0000000..9070846
Binary files /dev/null and b/mobile/assets/shoes/Nike Killshot 2 Leather.jpg differ
diff --git a/mobile/assets/shoes/Nike P-6000.jpg b/mobile/assets/shoes/Nike P-6000.jpg
new file mode 100644
index 0000000..3188e76
Binary files /dev/null and b/mobile/assets/shoes/Nike P-6000.jpg differ
diff --git a/mobile/assets/shoes/Nike Promina.jpg b/mobile/assets/shoes/Nike Promina.jpg
new file mode 100644
index 0000000..b4ff48f
Binary files /dev/null and b/mobile/assets/shoes/Nike Promina.jpg differ
diff --git a/mobile/assets/shoes/Nike Quest 6.jpg b/mobile/assets/shoes/Nike Quest 6.jpg
new file mode 100644
index 0000000..dd1fcb3
Binary files /dev/null and b/mobile/assets/shoes/Nike Quest 6.jpg differ
diff --git a/mobile/assets/shoes/Nike Revolution 8 EasyOn.jpg b/mobile/assets/shoes/Nike Revolution 8 EasyOn.jpg
new file mode 100644
index 0000000..0edbc56
Binary files /dev/null and b/mobile/assets/shoes/Nike Revolution 8 EasyOn.jpg differ
diff --git a/mobile/assets/shoes/Nike Run Defy.jpg b/mobile/assets/shoes/Nike Run Defy.jpg
new file mode 100644
index 0000000..d492a3f
Binary files /dev/null and b/mobile/assets/shoes/Nike Run Defy.jpg differ
diff --git a/mobile/assets/shoes/Nike SB Zoom Blazer Low Pro GT.jpg b/mobile/assets/shoes/Nike SB Zoom Blazer Low Pro GT.jpg
new file mode 100644
index 0000000..122981a
Binary files /dev/null and b/mobile/assets/shoes/Nike SB Zoom Blazer Low Pro GT.jpg differ
diff --git a/mobile/assets/shoes/Nike Winflo 11.jpg b/mobile/assets/shoes/Nike Winflo 11.jpg
new file mode 100644
index 0000000..b98fe28
Binary files /dev/null and b/mobile/assets/shoes/Nike Winflo 11.jpg differ
diff --git a/mobile/assets/shoes/shoe1.jpg b/mobile/assets/shoes/shoe1.jpg
new file mode 100644
index 0000000..0019210
Binary files /dev/null and b/mobile/assets/shoes/shoe1.jpg differ
diff --git a/mobile/assets/shoes/shoe10.jpg b/mobile/assets/shoes/shoe10.jpg
new file mode 100644
index 0000000..2468204
Binary files /dev/null and b/mobile/assets/shoes/shoe10.jpg differ
diff --git a/mobile/assets/shoes/shoe15.jpg b/mobile/assets/shoes/shoe15.jpg
new file mode 100644
index 0000000..56f16b8
Binary files /dev/null and b/mobile/assets/shoes/shoe15.jpg differ
diff --git a/mobile/assets/shoes/shoe16.jpg b/mobile/assets/shoes/shoe16.jpg
new file mode 100644
index 0000000..80890cb
Binary files /dev/null and b/mobile/assets/shoes/shoe16.jpg differ
diff --git a/mobile/assets/shoes/shoe17.jpg b/mobile/assets/shoes/shoe17.jpg
new file mode 100644
index 0000000..5b5418b
Binary files /dev/null and b/mobile/assets/shoes/shoe17.jpg differ
diff --git a/mobile/assets/shoes/shoe18.jpg b/mobile/assets/shoes/shoe18.jpg
new file mode 100644
index 0000000..e33bad3
Binary files /dev/null and b/mobile/assets/shoes/shoe18.jpg differ
diff --git a/mobile/assets/shoes/shoe19.jpg b/mobile/assets/shoes/shoe19.jpg
new file mode 100644
index 0000000..c3bbef7
Binary files /dev/null and b/mobile/assets/shoes/shoe19.jpg differ
diff --git a/mobile/assets/shoes/shoe2.jpg b/mobile/assets/shoes/shoe2.jpg
new file mode 100644
index 0000000..78c8878
Binary files /dev/null and b/mobile/assets/shoes/shoe2.jpg differ
diff --git a/mobile/assets/shoes/shoe20.jpg b/mobile/assets/shoes/shoe20.jpg
new file mode 100644
index 0000000..8b049ce
Binary files /dev/null and b/mobile/assets/shoes/shoe20.jpg differ
diff --git a/mobile/assets/shoes/shoe21.jpg b/mobile/assets/shoes/shoe21.jpg
new file mode 100644
index 0000000..6db7b76
Binary files /dev/null and b/mobile/assets/shoes/shoe21.jpg differ
diff --git a/mobile/assets/shoes/shoe22.jpg b/mobile/assets/shoes/shoe22.jpg
new file mode 100644
index 0000000..16c76c8
Binary files /dev/null and b/mobile/assets/shoes/shoe22.jpg differ
diff --git a/mobile/assets/shoes/shoe23.jpg b/mobile/assets/shoes/shoe23.jpg
new file mode 100644
index 0000000..b4a7f5f
Binary files /dev/null and b/mobile/assets/shoes/shoe23.jpg differ
diff --git a/mobile/assets/shoes/shoe24.jpg b/mobile/assets/shoes/shoe24.jpg
new file mode 100644
index 0000000..d5b72e4
Binary files /dev/null and b/mobile/assets/shoes/shoe24.jpg differ
diff --git a/mobile/assets/shoes/shoe25.jpg b/mobile/assets/shoes/shoe25.jpg
new file mode 100644
index 0000000..a1e135e
Binary files /dev/null and b/mobile/assets/shoes/shoe25.jpg differ
diff --git a/mobile/assets/shoes/shoe26.jpg b/mobile/assets/shoes/shoe26.jpg
new file mode 100644
index 0000000..a87ef2d
Binary files /dev/null and b/mobile/assets/shoes/shoe26.jpg differ
diff --git a/mobile/assets/shoes/shoe27.jpg b/mobile/assets/shoes/shoe27.jpg
new file mode 100644
index 0000000..4f92f1b
Binary files /dev/null and b/mobile/assets/shoes/shoe27.jpg differ
diff --git a/mobile/assets/shoes/shoe28.jpg b/mobile/assets/shoes/shoe28.jpg
new file mode 100644
index 0000000..0c0e05d
Binary files /dev/null and b/mobile/assets/shoes/shoe28.jpg differ
diff --git a/mobile/assets/shoes/shoe29.jpg b/mobile/assets/shoes/shoe29.jpg
new file mode 100644
index 0000000..b34cc41
Binary files /dev/null and b/mobile/assets/shoes/shoe29.jpg differ
diff --git a/mobile/assets/shoes/shoe3.jpg b/mobile/assets/shoes/shoe3.jpg
new file mode 100644
index 0000000..a805fb9
Binary files /dev/null and b/mobile/assets/shoes/shoe3.jpg differ
diff --git a/mobile/assets/shoes/shoe30.jpg b/mobile/assets/shoes/shoe30.jpg
new file mode 100644
index 0000000..bc76c94
Binary files /dev/null and b/mobile/assets/shoes/shoe30.jpg differ
diff --git a/mobile/assets/shoes/shoe31.jpg b/mobile/assets/shoes/shoe31.jpg
new file mode 100644
index 0000000..d84513f
Binary files /dev/null and b/mobile/assets/shoes/shoe31.jpg differ
diff --git a/mobile/assets/shoes/shoe32.jpg b/mobile/assets/shoes/shoe32.jpg
new file mode 100644
index 0000000..39e3038
Binary files /dev/null and b/mobile/assets/shoes/shoe32.jpg differ
diff --git a/mobile/assets/shoes/shoe33.jpg b/mobile/assets/shoes/shoe33.jpg
new file mode 100644
index 0000000..a01b346
Binary files /dev/null and b/mobile/assets/shoes/shoe33.jpg differ
diff --git a/mobile/assets/shoes/shoe34.jpg b/mobile/assets/shoes/shoe34.jpg
new file mode 100644
index 0000000..7f8fc74
Binary files /dev/null and b/mobile/assets/shoes/shoe34.jpg differ
diff --git a/mobile/assets/shoes/shoe35.jpg b/mobile/assets/shoes/shoe35.jpg
new file mode 100644
index 0000000..e20ba58
Binary files /dev/null and b/mobile/assets/shoes/shoe35.jpg differ
diff --git a/mobile/assets/shoes/shoe36.jpg b/mobile/assets/shoes/shoe36.jpg
new file mode 100644
index 0000000..7a915c7
Binary files /dev/null and b/mobile/assets/shoes/shoe36.jpg differ
diff --git a/mobile/assets/shoes/shoe37.jpg b/mobile/assets/shoes/shoe37.jpg
new file mode 100644
index 0000000..eca4cda
Binary files /dev/null and b/mobile/assets/shoes/shoe37.jpg differ
diff --git a/mobile/assets/shoes/shoe38.jpg b/mobile/assets/shoes/shoe38.jpg
new file mode 100644
index 0000000..651ada1
Binary files /dev/null and b/mobile/assets/shoes/shoe38.jpg differ
diff --git a/mobile/assets/shoes/shoe39.jpg b/mobile/assets/shoes/shoe39.jpg
new file mode 100644
index 0000000..3655032
Binary files /dev/null and b/mobile/assets/shoes/shoe39.jpg differ
diff --git a/mobile/assets/shoes/shoe4.jpg b/mobile/assets/shoes/shoe4.jpg
new file mode 100644
index 0000000..ca7d255
Binary files /dev/null and b/mobile/assets/shoes/shoe4.jpg differ
diff --git a/mobile/assets/shoes/shoe40.jpg b/mobile/assets/shoes/shoe40.jpg
new file mode 100644
index 0000000..d19d701
Binary files /dev/null and b/mobile/assets/shoes/shoe40.jpg differ
diff --git a/mobile/assets/shoes/shoe41.jpg b/mobile/assets/shoes/shoe41.jpg
new file mode 100644
index 0000000..150a50e
Binary files /dev/null and b/mobile/assets/shoes/shoe41.jpg differ
diff --git a/mobile/assets/shoes/shoe42.jpg b/mobile/assets/shoes/shoe42.jpg
new file mode 100644
index 0000000..186bbef
Binary files /dev/null and b/mobile/assets/shoes/shoe42.jpg differ
diff --git a/mobile/assets/shoes/shoe43.jpg b/mobile/assets/shoes/shoe43.jpg
new file mode 100644
index 0000000..35d41b0
Binary files /dev/null and b/mobile/assets/shoes/shoe43.jpg differ
diff --git a/mobile/assets/shoes/shoe44.jpg b/mobile/assets/shoes/shoe44.jpg
new file mode 100644
index 0000000..2ebbfb8
Binary files /dev/null and b/mobile/assets/shoes/shoe44.jpg differ
diff --git a/mobile/assets/shoes/shoe5.jpg b/mobile/assets/shoes/shoe5.jpg
new file mode 100644
index 0000000..3268966
Binary files /dev/null and b/mobile/assets/shoes/shoe5.jpg differ
diff --git a/mobile/assets/shoes/shoe6.jpg b/mobile/assets/shoes/shoe6.jpg
new file mode 100644
index 0000000..4a6dfb3
Binary files /dev/null and b/mobile/assets/shoes/shoe6.jpg differ
diff --git a/mobile/assets/shoes/shoe7.jpg b/mobile/assets/shoes/shoe7.jpg
new file mode 100644
index 0000000..f633541
Binary files /dev/null and b/mobile/assets/shoes/shoe7.jpg differ
diff --git a/mobile/assets/shoes/shoe8.jpg b/mobile/assets/shoes/shoe8.jpg
new file mode 100644
index 0000000..5ee7fba
Binary files /dev/null and b/mobile/assets/shoes/shoe8.jpg differ
diff --git a/mobile/assets/shoes/shoe9.jpg b/mobile/assets/shoes/shoe9.jpg
new file mode 100644
index 0000000..92d4e52
Binary files /dev/null and b/mobile/assets/shoes/shoe9.jpg differ
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index e2832d1..07ebc2a 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -14,16 +14,19 @@
"@react-navigation/native": "^7.2.2",
"@react-navigation/native-stack": "^7.14.10",
"expo": "~54.0.33",
- "expo-auth-session": "~7.0.10",
+ "expo-auth-session": "~55.0.12",
"expo-crypto": "~15.0.8",
"expo-dev-client": "~6.0.20",
"expo-status-bar": "~3.0.9",
+ "expo-updates": "~29.0.16",
"expo-web-browser": "~15.0.10",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "~2.28.0",
+ "react-native-razorpay": "^2.3.1",
"react-native-safe-area-context": "~5.6.0",
- "react-native-screens": "~4.16.0"
+ "react-native-screens": "~4.16.0",
+ "react-native-webview": "^13.16.1"
}
},
"node_modules/@0no-co/graphql.web": {
@@ -63,7 +66,6 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/code-frame": "^7.29.0",
"@babel/generator": "^7.29.0",
@@ -1418,7 +1420,6 @@
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
"integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=6.9.0"
}
@@ -2192,6 +2193,39 @@
"xmlbuilder": "^15.1.1"
}
},
+ "node_modules/@expo/require-utils": {
+ "version": "55.0.3",
+ "resolved": "https://registry.npmjs.org/@expo/require-utils/-/require-utils-55.0.3.tgz",
+ "integrity": "sha512-TS1m5tW45q4zoaTlt6DwmdYHxvFTIxoLrTHKOFrIirHIqIXnHCzpceg8wumiBi+ZXSaGY2gobTbfv+WVhJY6Fw==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/code-frame": "^7.20.0",
+ "@babel/core": "^7.25.2",
+ "@babel/plugin-transform-modules-commonjs": "^7.24.8"
+ },
+ "peerDependencies": {
+ "typescript": "^5.0.0 || ^5.0.0-0"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@expo/require-utils/node_modules/@babel/code-frame": {
+ "version": "7.29.0",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+ "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/helper-validator-identifier": "^7.28.5",
+ "js-tokens": "^4.0.0",
+ "picocolors": "^1.1.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
"node_modules/@expo/schema-utils": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/@expo/schema-utils/-/schema-utils-0.1.8.tgz",
@@ -3061,7 +3095,6 @@
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.2.2.tgz",
"integrity": "sha512-kem1Ko2BcbAjmbQIv66dNmr6EtfDut3QU0qjsVhMnLLhktwyXb6FzZYp8gTrUb6AvkAbaJoi+BF5Pl55pAUa5w==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@react-navigation/core": "^7.17.2",
"escape-string-regexp": "^4.0.0",
@@ -3845,7 +3878,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.10.12",
"caniuse-lite": "^1.0.30001782",
@@ -4485,7 +4517,6 @@
"resolved": "https://registry.npmjs.org/expo/-/expo-54.0.33.tgz",
"integrity": "sha512-3yOEfAKqo+gqHcV8vKcnq0uA5zxlohnhA3fu4G43likN8ct5ZZ3LjAh9wDdKteEkoad3tFPvwxmXW711S5OHUw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/runtime": "^7.20.0",
"@expo/cli": "54.0.23",
@@ -4534,16 +4565,16 @@
}
},
"node_modules/expo-auth-session": {
- "version": "7.0.10",
- "resolved": "https://registry.npmjs.org/expo-auth-session/-/expo-auth-session-7.0.10.tgz",
- "integrity": "sha512-XDnKkudvhHSKkZfJ+KkodM+anQcrxB71i+h0kKabdLa5YDXTQ81aC38KRc3TMqmnBDHAu0NpfbzEVd9WDFY3Qg==",
+ "version": "55.0.12",
+ "resolved": "https://registry.npmjs.org/expo-auth-session/-/expo-auth-session-55.0.12.tgz",
+ "integrity": "sha512-UXtLP3V9R8a9eZSZhjC3lpFvH1RBVQQNn2NBZ1SdClq4D83HRUaFBmtzkpKxODk2t3ZWDMcyhpwV1O+A6rsqKw==",
"license": "MIT",
"dependencies": {
- "expo-application": "~7.0.8",
- "expo-constants": "~18.0.11",
- "expo-crypto": "~15.0.8",
- "expo-linking": "~8.0.10",
- "expo-web-browser": "~15.0.10",
+ "expo-application": "~55.0.12",
+ "expo-constants": "~55.0.11",
+ "expo-crypto": "~55.0.12",
+ "expo-linking": "~55.0.11",
+ "expo-web-browser": "~55.0.12",
"invariant": "^2.2.4"
},
"peerDependencies": {
@@ -4551,29 +4582,189 @@
"react-native": "*"
}
},
+ "node_modules/expo-auth-session/node_modules/@expo/config": {
+ "version": "55.0.12",
+ "resolved": "https://registry.npmjs.org/@expo/config/-/config-55.0.12.tgz",
+ "integrity": "sha512-qVih0IrjupykH/yAUilZqW1RCpqm8TKG8XJabji2VHI1LstGqw0NJAsBjX927yns08u/fFJTwOsB4PYOoq1HiA==",
+ "license": "MIT",
+ "dependencies": {
+ "@expo/config-plugins": "~55.0.7",
+ "@expo/config-types": "^55.0.5",
+ "@expo/json-file": "^10.0.13",
+ "@expo/require-utils": "^55.0.3",
+ "deepmerge": "^4.3.1",
+ "getenv": "^2.0.0",
+ "glob": "^13.0.0",
+ "resolve-from": "^5.0.0",
+ "resolve-workspace-root": "^2.0.0",
+ "semver": "^7.6.0",
+ "slugify": "^1.3.4"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/@expo/config-plugins": {
+ "version": "55.0.7",
+ "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-55.0.7.tgz",
+ "integrity": "sha512-XZUoDWrsHEkH3yasnDSJABM/UxP5a1ixzRwU/M+BToyn/f0nTrSJJe/Ay/FpxkI4JSNz2n0e06I23b2bleXKVA==",
+ "license": "MIT",
+ "dependencies": {
+ "@expo/config-types": "^55.0.5",
+ "@expo/json-file": "~10.0.12",
+ "@expo/plist": "^0.5.2",
+ "@expo/sdk-runtime-versions": "^1.0.0",
+ "chalk": "^4.1.2",
+ "debug": "^4.3.5",
+ "getenv": "^2.0.0",
+ "glob": "^13.0.0",
+ "resolve-from": "^5.0.0",
+ "semver": "^7.5.4",
+ "slugify": "^1.6.6",
+ "xcode": "^3.0.1",
+ "xml2js": "0.6.0"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/@expo/config-types": {
+ "version": "55.0.5",
+ "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-55.0.5.tgz",
+ "integrity": "sha512-sCmSUZG4mZ/ySXvfyyBdhjivz8Q539X1NondwDdYG7s3SBsk+wsgPJzYsqgAG/P9+l0xWjUD2F+kQ1cAJ6NNLg==",
+ "license": "MIT"
+ },
+ "node_modules/expo-auth-session/node_modules/@expo/env": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/@expo/env/-/env-2.1.1.tgz",
+ "integrity": "sha512-rVvHC4I6xlPcg+mAO09ydUi2Wjv1ZytpLmHOSzvXzBAz9mMrJggqCe4s4dubjJvi/Ino/xQCLhbaLCnTtLpikg==",
+ "license": "MIT",
+ "dependencies": {
+ "chalk": "^4.0.0",
+ "debug": "^4.3.4",
+ "getenv": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=20.12.0"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/@expo/plist": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.5.2.tgz",
+ "integrity": "sha512-o4xdVdBpe4aTl3sPMZ2u3fJH4iG1I768EIRk1xRZP+GaFI93MaR3JvoFibYqxeTmLQ1p1kNEVqylfUjezxx45g==",
+ "license": "MIT",
+ "dependencies": {
+ "@xmldom/xmldom": "^0.8.8",
+ "base64-js": "^1.5.1",
+ "xmlbuilder": "^15.1.1"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "license": "MIT",
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "license": "MIT",
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "license": "MIT",
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "license": "MIT"
+ },
"node_modules/expo-auth-session/node_modules/expo-application": {
- "version": "7.0.8",
- "resolved": "https://registry.npmjs.org/expo-application/-/expo-application-7.0.8.tgz",
- "integrity": "sha512-qFGyxk7VJbrNOQWBbE09XUuGuvkOgFS9QfToaK2FdagM2aQ+x3CvGV2DuVgl/l4ZxPgIf3b/MNh9xHpwSwn74Q==",
+ "version": "55.0.12",
+ "resolved": "https://registry.npmjs.org/expo-application/-/expo-application-55.0.12.tgz",
+ "integrity": "sha512-pDmgZKWZDCgLF9CUlPPBEDKEvYKaAELMXkS7EMz5tRsWTQswwvaa9DW7Lfz9cTn3Bw4fz8agliuF/AU2Ce9T+A==",
"license": "MIT",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-auth-session/node_modules/expo-constants": {
- "version": "18.0.13",
- "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.13.tgz",
- "integrity": "sha512-FnZn12E1dRYKDHlAdIyNFhBurKTS3F9CrfrBDJI5m3D7U17KBHMQ6JEfYlSj7LG7t+Ulr+IKaj58L1k5gBwTcQ==",
+ "version": "55.0.11",
+ "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-55.0.11.tgz",
+ "integrity": "sha512-efWOJr0oVDId0lhvXJwoWfzucwi1/upDDseuYAhK0m8v5Hg7ObDehMmKRMGL0dgABmlSnppNmmYIeTVe7e2yVg==",
"license": "MIT",
"dependencies": {
- "@expo/config": "~12.0.13",
- "@expo/env": "~2.0.8"
+ "@expo/config": "~55.0.12",
+ "@expo/env": "~2.1.1"
},
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
+ "node_modules/expo-auth-session/node_modules/expo-crypto": {
+ "version": "55.0.12",
+ "resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-55.0.12.tgz",
+ "integrity": "sha512-P6GHuypnOV2rUw8mCoVFlpBQtvXbIQSOjA3UECE72dTNAYUfa5nHZtB8HNEVAycNn+fW6f58vNlnl5oIYdMPkA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "expo": "*"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/expo-web-browser": {
+ "version": "55.0.12",
+ "resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-55.0.12.tgz",
+ "integrity": "sha512-fMmDx/belJ7oW3+Ee7LbPMYKWxQlRYY/JXWFkQ72Zm1cg9Fmxzcu8iSu8gzdvjViM3B545PPv3src5TWq9qDdA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "expo": "*",
+ "react-native": "*"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/expo-auth-session/node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "license": "MIT",
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/expo-crypto": {
"version": "15.0.8",
"resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-15.0.8.tgz",
@@ -4637,6 +4828,12 @@
"expo": "*"
}
},
+ "node_modules/expo-eas-client": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/expo-eas-client/-/expo-eas-client-1.0.8.tgz",
+ "integrity": "sha512-5or11NJhSeDoHHI6zyvQDW2cz/yFyE+1Cz8NTs5NK8JzC7J0JrkUgptWtxyfB6Xs/21YRNifd3qgbBN3hfKVgA==",
+ "license": "MIT"
+ },
"node_modules/expo-json-utils": {
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.15.0.tgz",
@@ -4644,12 +4841,12 @@
"license": "MIT"
},
"node_modules/expo-linking": {
- "version": "8.0.11",
- "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-8.0.11.tgz",
- "integrity": "sha512-+VSaNL5om3kOp/SSKO5qe6cFgfSIWnnQDSbA7XLs3ECkYzXRquk5unxNS3pg7eK5kNUmQ4kgLI7MhTggAEUBLA==",
+ "version": "55.0.11",
+ "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-55.0.11.tgz",
+ "integrity": "sha512-qVKOeaFZvaJl99mB1gle0AWaC+36t4SxIIf23rkqyjEs/ZJtt7Zr2NKcQpzNhxUyWms8CSKTAlMO1k9Hx9z9zw==",
"license": "MIT",
"dependencies": {
- "expo-constants": "~18.0.12",
+ "expo-constants": "~55.0.11",
"invariant": "^2.2.4"
},
"peerDependencies": {
@@ -4657,20 +4854,161 @@
"react-native": "*"
}
},
+ "node_modules/expo-linking/node_modules/@expo/config": {
+ "version": "55.0.12",
+ "resolved": "https://registry.npmjs.org/@expo/config/-/config-55.0.12.tgz",
+ "integrity": "sha512-qVih0IrjupykH/yAUilZqW1RCpqm8TKG8XJabji2VHI1LstGqw0NJAsBjX927yns08u/fFJTwOsB4PYOoq1HiA==",
+ "license": "MIT",
+ "dependencies": {
+ "@expo/config-plugins": "~55.0.7",
+ "@expo/config-types": "^55.0.5",
+ "@expo/json-file": "^10.0.13",
+ "@expo/require-utils": "^55.0.3",
+ "deepmerge": "^4.3.1",
+ "getenv": "^2.0.0",
+ "glob": "^13.0.0",
+ "resolve-from": "^5.0.0",
+ "resolve-workspace-root": "^2.0.0",
+ "semver": "^7.6.0",
+ "slugify": "^1.3.4"
+ }
+ },
+ "node_modules/expo-linking/node_modules/@expo/config-plugins": {
+ "version": "55.0.7",
+ "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-55.0.7.tgz",
+ "integrity": "sha512-XZUoDWrsHEkH3yasnDSJABM/UxP5a1ixzRwU/M+BToyn/f0nTrSJJe/Ay/FpxkI4JSNz2n0e06I23b2bleXKVA==",
+ "license": "MIT",
+ "dependencies": {
+ "@expo/config-types": "^55.0.5",
+ "@expo/json-file": "~10.0.12",
+ "@expo/plist": "^0.5.2",
+ "@expo/sdk-runtime-versions": "^1.0.0",
+ "chalk": "^4.1.2",
+ "debug": "^4.3.5",
+ "getenv": "^2.0.0",
+ "glob": "^13.0.0",
+ "resolve-from": "^5.0.0",
+ "semver": "^7.5.4",
+ "slugify": "^1.6.6",
+ "xcode": "^3.0.1",
+ "xml2js": "0.6.0"
+ }
+ },
+ "node_modules/expo-linking/node_modules/@expo/config-types": {
+ "version": "55.0.5",
+ "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-55.0.5.tgz",
+ "integrity": "sha512-sCmSUZG4mZ/ySXvfyyBdhjivz8Q539X1NondwDdYG7s3SBsk+wsgPJzYsqgAG/P9+l0xWjUD2F+kQ1cAJ6NNLg==",
+ "license": "MIT"
+ },
+ "node_modules/expo-linking/node_modules/@expo/env": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/@expo/env/-/env-2.1.1.tgz",
+ "integrity": "sha512-rVvHC4I6xlPcg+mAO09ydUi2Wjv1ZytpLmHOSzvXzBAz9mMrJggqCe4s4dubjJvi/Ino/xQCLhbaLCnTtLpikg==",
+ "license": "MIT",
+ "dependencies": {
+ "chalk": "^4.0.0",
+ "debug": "^4.3.4",
+ "getenv": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=20.12.0"
+ }
+ },
+ "node_modules/expo-linking/node_modules/@expo/plist": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.5.2.tgz",
+ "integrity": "sha512-o4xdVdBpe4aTl3sPMZ2u3fJH4iG1I768EIRk1xRZP+GaFI93MaR3JvoFibYqxeTmLQ1p1kNEVqylfUjezxx45g==",
+ "license": "MIT",
+ "dependencies": {
+ "@xmldom/xmldom": "^0.8.8",
+ "base64-js": "^1.5.1",
+ "xmlbuilder": "^15.1.1"
+ }
+ },
+ "node_modules/expo-linking/node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "license": "MIT",
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/expo-linking/node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "license": "MIT",
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/expo-linking/node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "license": "MIT",
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/expo-linking/node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "license": "MIT"
+ },
"node_modules/expo-linking/node_modules/expo-constants": {
- "version": "18.0.13",
- "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.13.tgz",
- "integrity": "sha512-FnZn12E1dRYKDHlAdIyNFhBurKTS3F9CrfrBDJI5m3D7U17KBHMQ6JEfYlSj7LG7t+Ulr+IKaj58L1k5gBwTcQ==",
+ "version": "55.0.11",
+ "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-55.0.11.tgz",
+ "integrity": "sha512-efWOJr0oVDId0lhvXJwoWfzucwi1/upDDseuYAhK0m8v5Hg7ObDehMmKRMGL0dgABmlSnppNmmYIeTVe7e2yVg==",
"license": "MIT",
"dependencies": {
- "@expo/config": "~12.0.13",
- "@expo/env": "~2.0.8"
+ "@expo/config": "~55.0.12",
+ "@expo/env": "~2.1.1"
},
"peerDependencies": {
"expo": "*",
"react-native": "*"
}
},
+ "node_modules/expo-linking/node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/expo-linking/node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "license": "MIT",
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/expo-manifests": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-1.0.10.tgz",
@@ -4805,6 +5143,42 @@
"react-native": "*"
}
},
+ "node_modules/expo-structured-headers": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-5.0.0.tgz",
+ "integrity": "sha512-RmrBtnSphk5REmZGV+lcdgdpxyzio5rJw8CXviHE6qH5pKQQ83fhMEcigvrkBdsn2Efw2EODp4Yxl1/fqMvOZw==",
+ "license": "MIT"
+ },
+ "node_modules/expo-updates": {
+ "version": "29.0.16",
+ "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-29.0.16.tgz",
+ "integrity": "sha512-E9/fxRz/Eurtc7hxeI/6ZPyHH3To9Xoccm1kXoICZTRojmuTo+dx0Xv53UHyHn4G5zGMezyaKF2Qtj3AKcT93w==",
+ "license": "MIT",
+ "dependencies": {
+ "@expo/code-signing-certificates": "^0.0.6",
+ "@expo/plist": "^0.4.8",
+ "@expo/spawn-async": "^1.7.2",
+ "arg": "4.1.0",
+ "chalk": "^4.1.2",
+ "debug": "^4.3.4",
+ "expo-eas-client": "~1.0.8",
+ "expo-manifests": "~1.0.10",
+ "expo-structured-headers": "~5.0.0",
+ "expo-updates-interface": "~2.0.0",
+ "getenv": "^2.0.0",
+ "glob": "^13.0.0",
+ "ignore": "^5.3.1",
+ "resolve-from": "^5.0.0"
+ },
+ "bin": {
+ "expo-updates": "bin/cli.js"
+ },
+ "peerDependencies": {
+ "expo": "*",
+ "react": "*",
+ "react-native": "*"
+ }
+ },
"node_modules/expo-updates-interface": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-2.0.0.tgz",
@@ -4814,6 +5188,82 @@
"expo": "*"
}
},
+ "node_modules/expo-updates/node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "license": "MIT",
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/expo-updates/node_modules/arg": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+ "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==",
+ "license": "MIT"
+ },
+ "node_modules/expo-updates/node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "license": "MIT",
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/expo-updates/node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "license": "MIT",
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/expo-updates/node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "license": "MIT"
+ },
+ "node_modules/expo-updates/node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/expo-updates/node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "license": "MIT",
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/expo-web-browser": {
"version": "15.0.10",
"resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-15.0.10.tgz",
@@ -5145,7 +5595,6 @@
"resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.11.tgz",
"integrity": "sha512-ga0q61ny4s/kr4k8JX9hVH69exVSIfcIc19+qZ7gt71Mqtm7xy2c6kwsPTCyhBW2Ro5yXTT8EaZOpuRi35rHbg==",
"license": "MIT",
- "peer": true,
"dependencies": {
"fontfaceobserver": "^2.1.0"
},
@@ -7721,7 +8170,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -7759,7 +8207,6 @@
"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz",
"integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@jest/create-cache-key-function": "^29.7.0",
"@react-native/assets-registry": "0.81.5",
@@ -7837,12 +8284,21 @@
"react-native": "*"
}
},
+ "node_modules/react-native-razorpay": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/react-native-razorpay/-/react-native-razorpay-2.3.1.tgz",
+ "integrity": "sha512-aEod2YigiWx9Vik+2YRpTh9kNKK9KZbfhrRpk5tU8z8ZPDdLt57rRsqd7lVuDybqqO6nLY6ughPjMN+FPyX8Ag==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-native": ">=0.66.0"
+ }
+ },
"node_modules/react-native-safe-area-context": {
"version": "5.6.2",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.2.tgz",
"integrity": "sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==",
"license": "MIT",
- "peer": true,
"peerDependencies": {
"react": "*",
"react-native": "*"
@@ -7853,7 +8309,6 @@
"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz",
"integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==",
"license": "MIT",
- "peer": true,
"dependencies": {
"react-freeze": "^1.0.0",
"react-native-is-edge-to-edge": "^1.2.1",
@@ -7864,6 +8319,32 @@
"react-native": "*"
}
},
+ "node_modules/react-native-webview": {
+ "version": "13.16.1",
+ "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.16.1.tgz",
+ "integrity": "sha512-If0eHhoEdOYDcHsX+xBFwHMbWBGK1BvGDQDQdVkwtSIXiq1uiqjkpWVP2uQ1as94J0CzvFE9PUNDuhiX0Z6ubw==",
+ "license": "MIT",
+ "dependencies": {
+ "escape-string-regexp": "^4.0.0",
+ "invariant": "2.2.4"
+ },
+ "peerDependencies": {
+ "react": "*",
+ "react-native": "*"
+ }
+ },
+ "node_modules/react-native-webview/node_modules/escape-string-regexp": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/react-native/node_modules/@react-native/virtualized-lists": {
"version": "0.81.5",
"resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.81.5.tgz",
@@ -7953,7 +8434,6 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
"integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -8855,7 +9335,6 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=12"
},
diff --git a/mobile/package.json b/mobile/package.json
index 344ac99..ab55731 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -4,6 +4,7 @@
"main": "index.js",
"scripts": {
"start": "expo start",
+ "go": "expo start --go",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
@@ -15,16 +16,19 @@
"@react-navigation/native": "^7.2.2",
"@react-navigation/native-stack": "^7.14.10",
"expo": "~54.0.33",
- "expo-auth-session": "~7.0.10",
+ "expo-auth-session": "~55.0.12",
"expo-crypto": "~15.0.8",
"expo-dev-client": "~6.0.20",
"expo-status-bar": "~3.0.9",
+ "expo-updates": "~29.0.16",
"expo-web-browser": "~15.0.10",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "~2.28.0",
+ "react-native-razorpay": "^2.3.1",
"react-native-safe-area-context": "~5.6.0",
- "react-native-screens": "~4.16.0"
+ "react-native-screens": "~4.16.0",
+ "react-native-webview": "^13.16.1"
},
"private": true
}
diff --git a/mobile/src/components/ProductCard.js b/mobile/src/components/ProductCard.js
index 19e0f58..c9cd6cd 100644
--- a/mobile/src/components/ProductCard.js
+++ b/mobile/src/components/ProductCard.js
@@ -1,54 +1,139 @@
-import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../theme/colors';
import { useApp } from '../context/AppContext';
-const W = Dimensions.get('window').width;
-const CARD_W = (W - 36) / 2;
+const { width } = Dimensions.get('window');
+const CARD_W = (width - 40) / 2;
export default function ProductCard({ product, onPress }) {
const { toggleWishlist, isWishlisted } = useApp();
const wishlisted = isWishlisted(product.id);
return (
-
+
-
- Trending
+ TRENDING
)}
- toggleWishlist(product)}
>
-
+
- {product.brand}
- {product.name}
- {product.category}
- ₹ {product.price.toLocaleString('en-IN')}
+ {product.brand}
+ {product.name}
+
+ {product.category.slice(0, 4) === 'Men ' ? product.category.slice(4) : product.category}
+
+
+ ₹{product.price.toLocaleString('en-IN')}
+
);
}
const styles = StyleSheet.create({
- card: { backgroundColor: colors.white, borderRadius: 14, marginBottom: 12, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 8, elevation: 3 },
- imageWrap: { position: 'relative' },
- image: { width: '100%', height: CARD_W, backgroundColor: colors.lightGray },
- trendBadge: { position: 'absolute', top: 8, left: 8, backgroundColor: colors.brand, borderRadius: 6, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 6, paddingVertical: 3, gap: 3 },
- trendText: { color: colors.white, fontSize: 9, fontWeight: '700' },
- wishBtn: { position: 'absolute', top: 8, right: 8, backgroundColor: colors.white, borderRadius: 20, padding: 6, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 4, elevation: 2 },
- wishBtnActive: { backgroundColor: colors.brandLight },
- info: { padding: 10 },
- brand: { fontSize: 10, fontWeight: '700', color: colors.gray, letterSpacing: 1, marginBottom: 2 },
- name: { fontSize: 13, fontWeight: '700', color: colors.dark, marginBottom: 2 },
- category: { fontSize: 11, color: colors.gray, marginBottom: 6 },
- price: { fontSize: 14, fontWeight: '800', color: colors.dark },
+ card: {
+ width: CARD_W,
+ backgroundColor: colors.surface,
+ borderRadius: 20,
+ marginBottom: 16,
+ overflow: 'hidden',
+ shadowColor: colors.dark,
+ shadowOffset: { width: 0, height: 6 },
+ shadowOpacity: 0.1,
+ shadowRadius: 12,
+ elevation: 8,
+ },
+ imageWrap: {
+ backgroundColor: '#F1F5F9',
+ height: CARD_W * 1.1,
+ overflow: 'hidden',
+ position: 'relative',
+ },
+ image: {
+ width: '100%',
+ height: '100%',
+ },
+ trendBadge: {
+ position: 'absolute',
+ top: 10,
+ left: 10,
+ backgroundColor: colors.brand,
+ paddingHorizontal: 8,
+ paddingVertical: 4,
+ borderRadius: 6,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ },
+ trendText: {
+ color: colors.white,
+ fontSize: 8,
+ fontWeight: '900',
+ letterSpacing: 0.5,
+ },
+ wishBtn: {
+ position: 'absolute',
+ top: 10,
+ right: 10,
+ width: 28,
+ height: 28,
+ borderRadius: 14,
+ backgroundColor: colors.white,
+ alignItems: 'center',
+ justifyContent: 'center',
+ shadowColor: colors.dark,
+ shadowOpacity: 0.1,
+ shadowRadius: 4,
+ elevation: 3,
+ },
+ wishBtnActive: {
+ backgroundColor: '#FFF0F0',
+ },
+ info: {
+ padding: 12,
+ },
+ brand: {
+ fontSize: 9,
+ fontWeight: '800',
+ color: colors.gray,
+ letterSpacing: 1.2,
+ marginBottom: 3,
+ textTransform: 'uppercase',
+ },
+ name: {
+ fontSize: 14,
+ fontWeight: '700',
+ color: colors.dark,
+ marginBottom: 2,
+ },
+ category: {
+ fontSize: 11,
+ color: colors.slate,
+ marginBottom: 8,
+ },
+ priceRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ price: {
+ fontSize: 15,
+ fontWeight: '900',
+ color: colors.brand,
+ }
});
diff --git a/mobile/src/data/products.js b/mobile/src/data/products.js
index 448762d..16491ec 100644
--- a/mobile/src/data/products.js
+++ b/mobile/src/data/products.js
@@ -1,44 +1,603 @@
-const BASE = 'https://raw.githubusercontent.com/Mishra-coder/Zappify/main/frontend/public/shoes/shoe';
-const img = (n) => `${BASE}${n}.jpg`;
-
export const ALL_PRODUCTS = [
- { id: 1, name: 'The Incredible Hulk', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Cyber Sport', price: 3799, image: img(31), isTrending: true, description: 'Smash your limits with The Incredible Hulk High Tops. Featuring heavy-duty impact cushioning and gamma-green accents.' },
- { id: 2, name: 'Spider-Man: Spider Verse', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Cyber Sport', price: 3999, image: img(2), isTrending: true, description: 'Step into the multiverse. These low-tops feature web-reactive textures, striking contrast colors, and an agile profile.' },
- { id: 3, name: 'Urban Blaze: Hawkins', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Urban Tech', price: 2599, image: img(3), isTrending: false, description: 'Classic Hawkins energy. A vibrant design combining retro aesthetics with modern urban traction technology.' },
- { id: 4, name: 'Rovers: Batman', brand: 'ZAPPIFY', category: 'Men Slip-ons', theme: 'Minimalist', price: 3499, image: img(4), isTrending: true, description: 'Lounge like a Dark Knight. Premium dark synthetic leather construction designed for ultimate comfort and stealth.' },
- { id: 5, name: 'Urban Blaze: Blue Moon', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Retro Classic', price: 2599, image: img(5), isTrending: false, description: 'A striking blue moon aesthetic. Features reinforced stitching and maximum breathability for everyday street wear.' },
- { id: 6, name: 'Deadpool: 2.0', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Urban Tech', price: 2599, image: img(6), isTrending: true, description: 'Maximum effort for your feet. Deep red canvas panels mixed with anti-abrasion overlays for the merc on the move.' },
- { id: 7, name: 'Urban Blaze: Cappuccino', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Minimalist', price: 2599, image: img(7), isTrending: false, description: 'Rich earth tones and creamy accents. A laid-back silhouette built on top of a highly responsive foam midsole.' },
- { id: 8, name: 'Milano: Walnut', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Retro Classic', price: 2599, image: img(8), isTrending: false, description: 'Sleek Italian-inspired lines. The Milano Walnut blends casual elegance with a durable, long-lasting rubber cupsole.' },
- { id: 9, name: 'Star Wars: Mandalorian', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Cyber Sport', price: 3199, image: img(9), isTrending: true, description: 'This is the way. Featuring heavy-duty Beskar-inspired metallic finishes and a rugged terrain grip.' },
- { id: 10, name: 'Hydros: The Dark Knight', brand: 'ZAPPIFY', category: 'Men Clogs', theme: 'Minimalist', price: 1499, image: img(10), isTrending: true, description: 'Waterproof, ultra-light, and effortlessly stealthy. The ultimate companion for quick missions or total relaxation.' },
- { id: 11, name: 'Captain America: First Avenger', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Retro Classic', price: 3699, image: img(2), isTrending: true, description: 'The shield of the streets. Vintage combat styling paired with highly durable shock-absorbent outsoles.' },
- { id: 12, name: 'Black Panther: Wakanda Forever', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Urban Tech', price: 3899, image: img(4), isTrending: true, description: 'Sleek, powerful, agile. Built with ultra-responsive vibranium-inspired bounce technology for unmatched speed.' },
- { id: 15, name: 'Urban Blaze: Cappuccino', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Urban Tech', price: 2599, image: img(15), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 16, name: 'Milano: Walnut', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Cyber Sport', price: 2599, image: img(16), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 17, name: 'Star Wars: Mandalorian', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Urban Tech', price: 3199, image: img(17), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 18, name: 'Hydros: The Dark Knight', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Minimalist', price: 1499, image: img(18), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 19, name: 'Velocity: Silver', brand: 'ZAPPIFY', category: 'Men Slip-ons', theme: 'Cyber Sport', price: 2599, image: img(19), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 20, name: 'Urban Blaze: Black', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Minimalist', price: 2599, image: img(20), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 21, name: 'Urban Blaze: Mafia', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Cyber Sport', price: 2599, image: img(21), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 22, name: 'Urban Blaze: Green Lab', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Urban Tech', price: 1999, image: img(22), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 23, name: 'Black Panther: Warrior', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Urban Tech', price: 3499, image: img(23), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 24, name: 'Velocity: Scarlet', brand: 'ZAPPIFY', category: 'Men Slip-ons', theme: 'Cyber Sport', price: 2599, image: img(24), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 25, name: 'Kanso V2: Beige', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Retro Classic', price: 2599, image: img(25), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 26, name: 'Kanso ZE: Black', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Urban Tech', price: 2599, image: img(26), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 28, name: 'UBZ Ascend: Mocha', brand: 'ZAPPIFY', category: 'Men Slip-ons', theme: 'Urban Tech', price: 3599, image: img(28), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 29, name: 'MACH 1', brand: 'ZAPPIFY', category: 'Men Slip-ons', theme: 'Retro Classic', price: 3499, image: img(29), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 30, name: 'Naruto Shippuden: Sasuke', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Urban Tech', price: 3299, image: img(30), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 31, name: 'Kanso V2: Sapphire', brand: 'ZAPPIFY', category: 'Men Clogs', theme: 'Urban Tech', price: 2599, image: img(31), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 32, name: 'UBZ Ascend: Oasis', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Cyber Sport', price: 3499, image: img(32), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 33, name: 'MACH 3', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Retro Classic', price: 3499, image: img(33), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 34, name: "Daredevil: Hell's Knight", brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Cyber Sport', price: 3799, image: img(34), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 36, name: 'Mortal Kombat: Scorpion', brand: 'ZAPPIFY', category: 'Men Slip-ons', theme: 'Retro Classic', price: 3499, image: img(36), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 37, name: 'Urban Blaze: Butter', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Urban Tech', price: 2599, image: img(37), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 38, name: 'Kanso V2: Emerald', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Cyber Sport', price: 2599, image: img(38), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 39, name: 'Souled: Outlast', brand: 'ZAPPIFY', category: 'Men Clogs', theme: 'Retro Classic', price: 2499, image: img(39), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 40, name: 'Mortal Kombat: Sub Zero', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Urban Tech', price: 3499, image: img(40), isTrending: true, description: 'Exclusive release from The Souled Store collection.' },
- { id: 41, name: 'Rovers: Black Panther', brand: 'ZAPPIFY', category: 'Men Mid Top Sneakers', theme: 'Urban Tech', price: 3499, image: img(41), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 42, name: 'Rovers: Deadpool', brand: 'ZAPPIFY', category: 'Men High Top Sneakers', theme: 'Urban Tech', price: 3499, image: img(42), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
- { id: 44, name: 'UBZ Ascend: Black', brand: 'ZAPPIFY', category: 'Men Low Top Sneakers', theme: 'Retro Classic', price: 3299, image: img(44), isTrending: false, description: 'Exclusive release from The Souled Store collection.' },
+ {
+ id: 105,
+ name: "Nike Journey Run",
+ brand: "NIKE",
+ category: "Running",
+ price: 6796,
+ image: require("../../assets/shoes/Nike Journey Run.jpg"),
+ description:
+ "Perfect for daily jogs, these shoes offer a smooth ride and great cushioning for every mile.",
+ },
+ {
+ id: 106,
+ name: "Nike Revolution 8 EasyOn",
+ brand: "NIKE",
+ category: "Running",
+ price: 4295,
+ image: require("../../assets/shoes/Nike Revolution 8 EasyOn.jpg"),
+ description:
+ "Designed for convenience with an EasyOn entry system, making it simple to get out and start running.",
+ },
+ {
+ id: 107,
+ name: "Nike Air Max Alpha Trainer 6",
+ brand: "NIKE",
+ category: "Training & Gym",
+ price: 8495,
+ image: require("../../assets/shoes/Nike Air Max Alpha Trainer 6.jpg"),
+ description:
+ "Stability meets style in this trainer, perfect for heavy lifts and explosive gym movements.",
+ },
+ {
+ id: 108,
+ name: "Nike Winflo 11",
+ brand: "NIKE",
+ category: "Running",
+ price: 6956,
+ image: require("../../assets/shoes/Nike Winflo 11.jpg"),
+ description:
+ "A reliable road runner with updated cushioning that provides a balanced and energetic feel.",
+ },
+ {
+ id: 109,
+ name: "Nike Quest 6",
+ brand: "NIKE",
+ category: "Running",
+ price: 7095,
+ image: require("../../assets/shoes/Nike Quest 6.jpg"),
+ description:
+ "Built for the long road ahead, offering a breathable mesh upper and durable traction.",
+ },
+ {
+ id: 110,
+ name: "Nike Killshot 2 Leather Premium",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 9195,
+ image: require("../../assets/shoes/Nike Killshot 2 Leather Premium.jpg"),
+ description:
+ "Inspired by classic tennis shoes, this leather premium edition brings a retro look to your street style.",
+ },
+ {
+ id: 111,
+ name: "LeBron Witness IX EP",
+ brand: "NIKE",
+ category: "Basketball",
+ price: 6956,
+ image: require("../../assets/shoes/LeBron Witness IX EP.jpg"),
+ description:
+ "Unleash your inner athlete with LeBron's signature performance and lockdown support on the court.",
+ },
+ {
+ id: 112,
+ name: "Nike Air Max Excee",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 7495,
+ image: require("../../assets/shoes/Nike Air Max Excee.jpg"),
+ description:
+ "Featuring a visible Air unit, these sneakers blend iconic design with modern everyday comfort.",
+ },
+ {
+ id: 113,
+ name: "Nike Downshifter 14",
+ brand: "NIKE",
+ category: "Running",
+ price: 4895,
+ image: require("../../assets/shoes/Nike Downshifter 14.jpg"),
+ description:
+ "An entry-level runner that doesn't compromise on support, ideal for beginners starting their journey.",
+ },
+ {
+ id: 114,
+ name: "Nike Air Max Dn Roam",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 16995,
+ image: require("../../assets/shoes/Nike Air Max Dn Roam.jpg"),
+ description:
+ "High-end style meets revolutionary Air technology in this bold, futuristic lifestyle sneaker.",
+ },
+ {
+ id: 115,
+ name: "Nike SB Zoom Blazer Low Pro GT",
+ brand: "NIKE",
+ category: "Skateboarding",
+ price: 6795,
+ image: require("../../assets/shoes/Nike SB Zoom Blazer Low Pro GT.jpg"),
+ description:
+ "Engineered for skaters, this low-profile shoe offers exceptional boardfeel and durability.",
+ },
+ {
+ id: 116,
+ name: "Air Jordan 1 Low SE",
+ brand: "NIKE",
+ category: "Jordan",
+ price: 11495,
+ image: require("../../assets/shoes/Air Jordan 1 Low SE.jpg"),
+ description:
+ "The timeless AJ1 look in a low-top silhouette, featuring premium materials and iconic colorways.",
+ },
+ {
+ id: 117,
+ name: "Nike Killshot 2 Leather",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 7995,
+ image: require("../../assets/shoes/Nike Killshot 2 Leather.jpg"),
+ description:
+ "A versatile wardrobe staple that pairs perfectly with jeans, offering a clean and polished finish.",
+ },
+ {
+ id: 118,
+ name: "Nike Run Defy",
+ brand: "NIKE",
+ category: "Running",
+ price: 3196,
+ image: require("../../assets/shoes/Nike Run Defy.jpg"),
+ description:
+ "Budget-friendly performance shoe that delivers comfort for short runs and daily wear.",
+ },
+ {
+ id: 119,
+ name: "Nike Promina",
+ brand: "NIKE",
+ category: "Walking",
+ price: 3996,
+ image: require("../../assets/shoes/Nike Promina.jpg"),
+ description:
+ "Specifically designed for walking, ensuring all-day comfort with a soft, cushioned midsole.",
+ },
+ {
+ id: 120,
+ name: "Nike P-6000",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 9695,
+ image: require("../../assets/shoes/Nike P-6000.jpg"),
+ description:
+ "A mash-up of past Pegasus sneakers, this model offers a ventilated, breathable and comfortable Y2K vibe.",
+ },
+ {
+ id: 121,
+ name: "Nike Ava Rover",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 11895,
+ image: require("../../assets/shoes/Nike Ava Rover.jpg"),
+ description:
+ "A bold and unique silhouette that stands out in any crowd, perfect for fashion-forward enthusiasts.",
+ },
+ {
+ id: 122,
+ name: "Nike Free Metcon 6",
+ brand: "NIKE",
+ category: "Training & Gym",
+ price: 10795,
+ image: require("../../assets/shoes/Nike Free Metcon 6.jpg"),
+ description:
+ "Combines the flexibility of Nike Free with the stability of Metcon for a truly all-in-one workout shoe.",
+ },
+ {
+ id: 123,
+ name: "Air Jordan 1 Mid",
+ brand: "NIKE",
+ category: "Jordan",
+ price: 11495,
+ image: require("../../assets/shoes/Air Jordan 1 Mid.jpg"),
+ description:
+ "The classic mid-top legend remains a favorite, delivering heritage style and premium comfort.",
+ },
+ {
+ id: 124,
+ name: "Nike Air Max 270",
+ brand: "NIKE",
+ category: "Lifestyle",
+ price: 13995,
+ image: require("../../assets/shoes/Nike Air Max 270.jpg"),
+ description:
+ "Boasting Nike's tallest heel bag yet, these sneakers offer a super-soft ride that feels as good as it looks.",
+ },
+
+ {
+ id: 201,
+ name: "Men's Street Runner Pro",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 7495,
+ image: require("../../assets/shoes/shoe1.jpg"),
+ description: "Lightweight and responsive, built for men who push the pace on every run.",
+ },
+ {
+ id: 202,
+ name: "Men's Urban Glide",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 8295,
+ image: require("../../assets/shoes/shoe2.jpg"),
+ description: "Sleek silhouette with premium cushioning, perfect for city streets.",
+ },
+ {
+ id: 203,
+ name: "Men's Court Dominator",
+ brand: "NIKE",
+ category: "Basketball",
+ gender: "MEN",
+ price: 9995,
+ image: require("../../assets/shoes/shoe3.jpg"),
+ description: "Ankle support and grip engineered for explosive court performance.",
+ },
+ {
+ id: 204,
+ name: "Men's Trail Blazer",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 8795,
+ image: require("../../assets/shoes/shoe4.jpg"),
+ description: "Rugged outsole and cushioned midsole for off-road adventures.",
+ },
+ {
+ id: 205,
+ name: "Men's Classic Low",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 6495,
+ image: require("../../assets/shoes/shoe5.jpg"),
+ description: "Timeless low-top design that pairs with any outfit effortlessly.",
+ },
+ {
+ id: 206,
+ name: "Men's Power Lift",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 9295,
+ image: require("../../assets/shoes/shoe6.jpg"),
+ description: "Flat, stable base designed for heavy lifts and gym sessions.",
+ },
+ {
+ id: 207,
+ name: "Men's Skate Edge",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 7195,
+ image: require("../../assets/shoes/shoe7.jpg"),
+ description: "Durable canvas upper with vulcanized sole for superior boardfeel.",
+ },
+ {
+ id: 208,
+ name: "Men's Air Cushion Max",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 12495,
+ image: require("../../assets/shoes/shoe8.jpg"),
+ description: "Max Air unit delivers all-day comfort with a bold, modern look.",
+ },
+ {
+ id: 209,
+ name: "Men's Sprint Elite",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 10995,
+ image: require("../../assets/shoes/shoe9.jpg"),
+ description: "Carbon-fiber inspired plate for explosive speed on race day.",
+ },
+ {
+ id: 210,
+ name: "Men's Retro High",
+ brand: "NIKE",
+ category: "Jordan",
+ gender: "MEN",
+ price: 13495,
+ image: require("../../assets/shoes/shoe10.jpg"),
+ description: "Heritage high-top silhouette with modern comfort upgrades.",
+ },
+ {
+ id: 211,
+ name: "Men's Flex Trainer",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 7895,
+ image: require("../../assets/shoes/shoe15.jpg"),
+ description: "Flexible grooves and breathable mesh for dynamic training sessions.",
+ },
+ {
+ id: 212,
+ name: "Men's Walk Comfort",
+ brand: "NIKE",
+ category: "Walking",
+ gender: "MEN",
+ price: 5495,
+ image: require("../../assets/shoes/shoe16.jpg"),
+ description: "Plush foam midsole and wide toe box for all-day walking comfort.",
+ },
+ {
+ id: 213,
+ name: "Men's Hoop Legend",
+ brand: "NIKE",
+ category: "Basketball",
+ gender: "MEN",
+ price: 11295,
+ image: require("../../assets/shoes/shoe17.jpg"),
+ description: "Zoom Air cushioning and herringbone traction for elite court play.",
+ },
+ {
+ id: 214,
+ name: "Men's Everyday Runner",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 5995,
+ image: require("../../assets/shoes/shoe18.jpg"),
+ description: "Reliable daily trainer with responsive foam and breathable upper.",
+ },
+ {
+ id: 215,
+ name: "Men's Street Classic",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 8995,
+ image: require("../../assets/shoes/shoe19.jpg"),
+ description: "Clean lines and premium leather for a polished street look.",
+ },
+ {
+ id: 216,
+ name: "Men's Zoom Speed",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 9495,
+ image: require("../../assets/shoes/shoe20.jpg"),
+ description: "Zoom Air unit in the forefoot for a snappy, fast-paced ride.",
+ },
+ {
+ id: 217,
+ name: "Men's Board King",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 6995,
+ image: require("../../assets/shoes/shoe21.jpg"),
+ description: "Reinforced toe cap and padded collar for skate park sessions.",
+ },
+ {
+ id: 218,
+ name: "Men's Gym Beast",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 10295,
+ image: require("../../assets/shoes/shoe22.jpg"),
+ description: "Wide platform and locked-down fit for heavy compound movements.",
+ },
+ {
+ id: 219,
+ name: "Men's Air Retro 90",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 11995,
+ image: require("../../assets/shoes/shoe23.jpg"),
+ description: "90s-inspired design with modern Air cushioning for everyday wear.",
+ },
+ {
+ id: 220,
+ name: "Men's Jordan Legacy",
+ brand: "NIKE",
+ category: "Jordan",
+ gender: "MEN",
+ price: 14995,
+ image: require("../../assets/shoes/shoe24.jpg"),
+ description: "Iconic Jordan DNA with premium materials and heritage colorways.",
+ },
+ {
+ id: 221,
+ name: "Men's Long Run",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 8195,
+ image: require("../../assets/shoes/shoe25.jpg"),
+ description: "Extra cushioning and energy return for marathon-distance training.",
+ },
+ {
+ id: 222,
+ name: "Men's Low Rider",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 7295,
+ image: require("../../assets/shoes/shoe26.jpg"),
+ description: "Low-profile design with suede overlays for a premium casual look.",
+ },
+ {
+ id: 223,
+ name: "Men's Dunk Force",
+ brand: "NIKE",
+ category: "Basketball",
+ gender: "MEN",
+ price: 10495,
+ image: require("../../assets/shoes/shoe27.jpg"),
+ description: "Dunk-inspired silhouette with modern cushioning for on and off court.",
+ },
+ {
+ id: 224,
+ name: "Men's Cross Trainer",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 8695,
+ image: require("../../assets/shoes/shoe28.jpg"),
+ description: "Versatile trainer built for HIIT, agility drills, and gym work.",
+ },
+ {
+ id: 225,
+ name: "Men's Hike Ready",
+ brand: "NIKE",
+ category: "Walking",
+ gender: "MEN",
+ price: 9195,
+ image: require("../../assets/shoes/shoe29.jpg"),
+ description: "Grippy outsole and waterproof upper for light trail and urban hikes.",
+ },
+ {
+ id: 226,
+ name: "Men's Pegasus Next",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 11495,
+ image: require("../../assets/shoes/shoe30.jpg"),
+ description: "Next-gen Pegasus with React foam and wider fit for long-distance comfort.",
+ },
+ {
+ id: 227,
+ name: "Men's Skate Pro",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 7595,
+ image: require("../../assets/shoes/shoe31.jpg"),
+ description: "Pro-level skate shoe with Zoom Air for impact protection.",
+ },
+ {
+ id: 228,
+ name: "Men's Air Force Classic",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 10995,
+ image: require("../../assets/shoes/shoe32.jpg"),
+ description: "The all-time classic AF1 silhouette in a fresh men's colorway.",
+ },
+ {
+ id: 229,
+ name: "Men's React Infinity",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 13995,
+ image: require("../../assets/shoes/shoe33.jpg"),
+ description: "React foam and wide base designed to reduce injury risk on long runs.",
+ },
+ {
+ id: 230,
+ name: "Men's Jordan Flight",
+ brand: "NIKE",
+ category: "Jordan",
+ gender: "MEN",
+ price: 12995,
+ image: require("../../assets/shoes/shoe34.jpg"),
+ description: "Flight-inspired Jordan with lightweight upper and responsive cushioning.",
+ },
+ {
+ id: 231,
+ name: "Men's Metcon Power",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 11295,
+ image: require("../../assets/shoes/shoe35.jpg"),
+ description: "Metcon stability meets Free flexibility for the ultimate cross-training shoe.",
+ },
+ {
+ id: 232,
+ name: "Men's Blazer Mid",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 9495,
+ image: require("../../assets/shoes/shoe36.jpg"),
+ description: "Mid-top Blazer with vintage basketball DNA and everyday wearability.",
+ },
+ {
+ id: 233,
+ name: "Men's Vomero Plush",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 14495,
+ image: require("../../assets/shoes/shoe37.jpg"),
+ description: "Maximum cushioning Vomero for plush, comfortable long-distance runs.",
+ },
+ {
+ id: 234,
+ name: "Men's Court Vision",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 7995,
+ image: require("../../assets/shoes/shoe38.jpg"),
+ description: "Court-inspired low-top with clean leather upper for everyday style.",
+ },
+ {
+ id: 235,
+ name: "Men's Invincible 3",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 16995,
+ image: require("../../assets/shoes/shoe39.jpg"),
+ description: "Nike's most cushioned running shoe for recovery and easy-day runs.",
+ },
+ {
+ id: 236,
+ name: "Men's Alphafly Next",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 19995,
+ image: require("../../assets/shoes/shoe40.jpg"),
+ description: "Elite race-day shoe with ZoomX foam and carbon fiber plate.",
+ },
+ {
+ id: 237,
+ name: "Men's Dri-FIT Trainer",
+ brand: "NIKE",
+ category: "Training & Gym",
+ gender: "MEN",
+ price: 8495,
+ image: require("../../assets/shoes/shoe41.jpg"),
+ description: "Breathable Dri-FIT upper keeps feet cool during intense workouts.",
+ },
+ {
+ id: 238,
+ name: "Men's SB Nyjah",
+ brand: "NIKE",
+ category: "Skateboarding",
+ gender: "MEN",
+ price: 8995,
+ image: require("../../assets/shoes/shoe42.jpg"),
+ description: "Nyjah Huston's signature skate shoe with Zoom Air and durable build.",
+ },
+ {
+ id: 239,
+ name: "Men's Air Max 97",
+ brand: "NIKE",
+ category: "Lifestyle",
+ gender: "MEN",
+ price: 15995,
+ image: require("../../assets/shoes/shoe43.jpg"),
+ description: "Full-length Air unit and bullet-train inspired design for iconic style.",
+ },
+ {
+ id: 240,
+ name: "Men's Zoom Rival",
+ brand: "NIKE",
+ category: "Running",
+ gender: "MEN",
+ price: 6295,
+ image: require("../../assets/shoes/shoe44.jpg"),
+ description: "Track-inspired road runner with Zoom Air for competitive training.",
+ },
];
diff --git a/mobile/src/screens/AccountScreen.js b/mobile/src/screens/AccountScreen.js
index cd41b61..ca6bdaf 100644
--- a/mobile/src/screens/AccountScreen.js
+++ b/mobile/src/screens/AccountScreen.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, useEffect } from 'react';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet, Alert, Modal } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
@@ -17,19 +17,11 @@ export default function AccountScreen({ navigation }) {
const [cancelReason, setCancelReason] = useState('');
const [showConfirm, setShowConfirm] = useState(false);
- if (!user) {
- return (
-
-
- You're not logged in
- navigation.navigate('Login')}>
- LOGIN / SIGN UP
-
-
-
- );
- }
+ useEffect(() => {
+ if (!user) navigation.replace('Login');
+ }, [user]);
+
+ if (!user) return null;
const handleCancelConfirm = () => {
if (!cancelReason) { Alert.alert('Select Reason', 'Please select a reason'); return; }
@@ -84,7 +76,7 @@ export default function AccountScreen({ navigation }) {
) : (
orders.map((order, i) => (
{ setSelectedOrder(order); setView('detail'); }}>
-
{order.name}
Size: UK {order.size} · Qty: {order.qty}
@@ -114,7 +106,7 @@ export default function AccountScreen({ navigation }) {
Date: {formatDate(selectedOrder.placedAt)}
-
{selectedOrder.name}
Size: UK {selectedOrder.size} · Qty: {selectedOrder.qty}
@@ -212,10 +204,6 @@ const styles = StyleSheet.create({
statusTxtCancelled: { color: colors.danger },
logoutBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingVertical: 14, marginTop: 8 },
logoutTxt: { fontSize: 13, fontWeight: '700', color: colors.gray, letterSpacing: 1 },
- guestBox: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 },
- guestTitle: { fontSize: 16, fontWeight: '700', color: colors.gray },
- loginBtn: { backgroundColor: colors.brand, paddingHorizontal: 32, paddingVertical: 14, borderRadius: 12 },
- loginBtnTxt: { color: colors.white, fontWeight: '800', fontSize: 14, letterSpacing: 1 },
odHeader: { backgroundColor: colors.lightGray, borderRadius: 10, padding: 14, gap: 4 },
odLabel: { fontSize: 13, color: colors.gray },
odVal: { fontWeight: '700', color: colors.dark },
diff --git a/mobile/src/screens/CartScreen.js b/mobile/src/screens/CartScreen.js
index 429fc3d..0d0fabf 100644
--- a/mobile/src/screens/CartScreen.js
+++ b/mobile/src/screens/CartScreen.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { View, Text, FlatList, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
@@ -44,7 +43,7 @@ export default function CartScreen({ navigation }) {
contentContainerStyle={styles.list}
renderItem={({ item }) => (
-
{item.name}
Size: UK {item.size} · Qty: {item.qty}
@@ -95,10 +94,10 @@ const styles = StyleSheet.create({
totalRow: { paddingTop: 8, borderTopWidth: 1, borderTopColor: colors.border, marginTop: 4 },
totalLabel: { fontSize: 16, fontWeight: '800', color: colors.dark },
totalVal: { fontSize: 18, fontWeight: '900', color: colors.dark },
- checkoutBtn: { backgroundColor: colors.brand, borderRadius: 14, paddingVertical: 16, alignItems: 'center', marginTop: 8 },
+ checkoutBtn: { backgroundColor: '#D83100', borderRadius: 14, paddingVertical: 16, alignItems: 'center', marginTop: 8 },
checkoutTxt: { color: colors.white, fontWeight: '800', fontSize: 14, letterSpacing: 1 },
empty: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 },
emptyTitle: { fontSize: 16, fontWeight: '700', color: colors.gray },
- shopBtn: { backgroundColor: colors.brand, paddingHorizontal: 24, paddingVertical: 12, borderRadius: 10 },
+ shopBtn: { backgroundColor: '#D83100', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 10 },
shopBtnTxt: { color: colors.white, fontWeight: '700', fontSize: 13 },
});
diff --git a/mobile/src/screens/CheckoutScreen.js b/mobile/src/screens/CheckoutScreen.js
index 654b1ec..c705114 100644
--- a/mobile/src/screens/CheckoutScreen.js
+++ b/mobile/src/screens/CheckoutScreen.js
@@ -1,9 +1,13 @@
-import React, { useState } from 'react';
+import { useState, Fragment } from 'react';
import { View, Text, ScrollView, TouchableOpacity, TextInput, StyleSheet, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../theme/colors';
import { useApp } from '../context/AppContext';
+import RazorpayCheckout from 'react-native-razorpay';
+
+const API_URL = 'https://zappify-dz5a.vercel.app';
+const RAZORPAY_KEY_ID = 'rzp_test_SZtLthHdKYuLeQ';
const STEPS = ['MY BAG', 'ADDRESS', 'PAYMENT'];
const PAYMENT_OPTIONS = [
@@ -21,8 +25,54 @@ export default function CheckoutScreen({ navigation }) {
const shipping = cartTotal > 999 ? 0 : 99;
const handlePlaceOrder = async () => {
- await placeOrder(cartItems);
- setDone(true);
+ if (payment === 'cod') {
+ await placeOrder(cartItems);
+ setDone(true);
+ return;
+ }
+ try {
+ const res = await fetch(`${API_URL}/api/payment/create-order`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ amount: cartTotal + shipping }),
+ });
+ const data = await res.json();
+
+ const options = {
+ description: 'Shoe Purchase',
+ image: 'https://zappify-sepia.vercel.app/logo.png',
+ currency: 'INR',
+ key: RAZORPAY_KEY_ID,
+ amount: data.amount,
+ order_id: data.orderId,
+ name: 'Zappify',
+ prefill: { contact: address.phone, name: address.name },
+ theme: { color: '#D83100' },
+ };
+
+ RazorpayCheckout.open(options)
+ .then(async (response) => {
+ const verifyRes = await fetch(`${API_URL}/api/payment/verify`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(response),
+ });
+ const verifyData = await verifyRes.json();
+ if (verifyData.success) {
+ await placeOrder(cartItems);
+ setDone(true);
+ } else {
+ Alert.alert('Failed', 'Payment verification failed.');
+ }
+ })
+ .catch((error) => {
+ if (error.code !== 'PAYMENT_CANCELLED') {
+ Alert.alert('Payment Failed', error.description || 'Something went wrong.');
+ }
+ });
+ } catch {
+ Alert.alert('Error', 'Could not connect to server. Is backend running?');
+ }
};
if (done) {
@@ -48,7 +98,7 @@ export default function CheckoutScreen({ navigation }) {
{STEPS.map((s, i) => (
-
+
{i < step
@@ -59,7 +109,7 @@ export default function CheckoutScreen({ navigation }) {
{s}
{i < STEPS.length - 1 &&
+
))}
@@ -91,14 +141,14 @@ export default function CheckoutScreen({ navigation }) {
DELIVERY ADDRESS
- setAddress({ ...address, name: v })} />
- setAddress({ ...address, phone: v })} keyboardType="phone-pad" />
+ setAddress({ ...address, name: v })} />
+ setAddress({ ...address, phone: v })} keyboardType="phone-pad" />
- setAddress({ ...address, street: v })} />
+ setAddress({ ...address, street: v })} />
- setAddress({ ...address, pincode: v })} keyboardType="numeric" />
- setAddress({ ...address, city: v })} />
- setAddress({ ...address, state: v })} />
+ setAddress({ ...address, pincode: v })} keyboardType="numeric" />
+ setAddress({ ...address, city: v })} />
+ setAddress({ ...address, state: v })} />
setStep(0)}>BACK
@@ -148,15 +198,14 @@ const styles = StyleSheet.create({
title: { fontSize: 16, fontWeight: '800', letterSpacing: 1.5, color: colors.dark },
stepsRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 16 },
stepItem: { alignItems: 'center', gap: 4 },
- stepCircle: { width: 28, height: 28, borderRadius: 14, borderWidth: 2, borderColor: colors.border, alignItems: 'center', justifyContent: 'center' },
- stepCircleActive: { borderColor: colors.brand },
- stepCircleDone: { backgroundColor: colors.brand, borderColor: colors.brand },
+ stepCircleDone: { backgroundColor: '#D83100', borderColor: '#D83100' },
+ stepCircleActive: { borderColor: '#D83100' },
stepNum: { fontSize: 12, fontWeight: '700', color: colors.gray },
- stepNumActive: { color: colors.brand },
+ stepNumActive: { color: '#D83100' },
stepLabel: { fontSize: 10, fontWeight: '700', color: colors.gray, letterSpacing: 0.5 },
- stepLabelActive: { color: colors.brand },
+ stepLabelActive: { color: '#D83100' },
stepLine: { flex: 1, height: 2, backgroundColor: colors.border, marginBottom: 16 },
- stepLineDone: { backgroundColor: colors.brand },
+ stepLineDone: { backgroundColor: '#D83100' },
body: { padding: 20, paddingBottom: 40 },
bagItem: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.border },
bagInfo: { flex: 1 },
@@ -170,7 +219,7 @@ const styles = StyleSheet.create({
totalRow: { paddingTop: 8, borderTopWidth: 1, borderTopColor: colors.border, marginTop: 4 },
totalLabel: { fontSize: 15, fontWeight: '800', color: colors.dark },
totalVal: { fontSize: 16, fontWeight: '900', color: colors.dark },
- nextBtn: { flex: 1, backgroundColor: colors.brand, borderRadius: 12, paddingVertical: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6 },
+ nextBtn: { flex: 1, backgroundColor: '#D83100', borderRadius: 12, paddingVertical: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6 },
nextTxt: { color: colors.white, fontWeight: '800', fontSize: 13, letterSpacing: 0.5 },
btnRow: { flexDirection: 'row', gap: 10, marginTop: 8 },
backBtn: { paddingHorizontal: 20, paddingVertical: 14, borderRadius: 12, borderWidth: 1.5, borderColor: colors.border, alignItems: 'center', justifyContent: 'center' },
@@ -179,15 +228,15 @@ const styles = StyleSheet.create({
formRow: { flexDirection: 'row', gap: 10 },
input: { borderWidth: 1.5, borderColor: colors.border, borderRadius: 10, paddingHorizontal: 14, paddingVertical: 12, fontSize: 14, color: colors.dark, marginBottom: 12 },
payOption: { flexDirection: 'row', alignItems: 'center', gap: 12, padding: 14, borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, marginBottom: 10 },
- payOptionActive: { borderColor: colors.brand, backgroundColor: colors.brandLight },
+ payOptionActive: { borderColor: '#D83100', backgroundColor: 'rgba(216,49,0,0.06)' },
radio: { width: 18, height: 18, borderRadius: 9, borderWidth: 2, borderColor: colors.border, alignItems: 'center', justifyContent: 'center' },
- radioActive: { borderColor: colors.brand },
- radioDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: colors.brand },
+ radioActive: { borderColor: '#D83100' },
+ radioDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: '#D83100' },
payLabel: { fontSize: 14, fontWeight: '500', color: colors.dark },
successBox: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 16 },
- successIcon: { width: 72, height: 72, borderRadius: 36, backgroundColor: colors.brand, alignItems: 'center', justifyContent: 'center' },
+ successIcon: { width: 72, height: 72, borderRadius: 36, backgroundColor: '#D83100', alignItems: 'center', justifyContent: 'center' },
successTitle: { fontSize: 24, fontWeight: '800', color: colors.dark },
successMsg: { fontSize: 14, color: colors.gray, textAlign: 'center', lineHeight: 22 },
- continueBtn: { backgroundColor: colors.brand, paddingHorizontal: 32, paddingVertical: 14, borderRadius: 12, marginTop: 8 },
+ continueBtn: { backgroundColor: '#D83100', paddingHorizontal: 32, paddingVertical: 14, borderRadius: 12, marginTop: 8 },
continueTxt: { color: colors.white, fontWeight: '800', fontSize: 14, letterSpacing: 1 },
});
diff --git a/mobile/src/screens/HomeScreen.js b/mobile/src/screens/HomeScreen.js
index 3b6e420..a27072f 100644
--- a/mobile/src/screens/HomeScreen.js
+++ b/mobile/src/screens/HomeScreen.js
@@ -1,5 +1,5 @@
-import React, { useState, useMemo } from 'react';
-import { View, Text, FlatList, TextInput, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
+import { useState, useMemo } from 'react';
+import { View, Text, FlatList, TextInput, TouchableOpacity, StyleSheet, StatusBar, Image, Modal } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { ALL_PRODUCTS } from '../data/products';
@@ -7,82 +7,137 @@ import { colors } from '../theme/colors';
import ProductCard from '../components/ProductCard';
import { useApp } from '../context/AppContext';
-const CATEGORIES = ['All', 'Men Low Top Sneakers', 'Men High Top Sneakers', 'Men Mid Top Sneakers', 'Men Clogs', 'Men Slip-ons'];
+const CATEGORIES = ['Running', 'Lifestyle', 'Basketball', 'Training & Gym', 'Jordan', 'Skateboarding', 'Walking'];
+const GENDER_TABS = ['ALL', 'MEN', 'SNEAKERS'];
export default function HomeScreen({ navigation }) {
const [search, setSearch] = useState('');
- const [activeCategory, setActiveCategory] = useState('All');
- const { cartCount, wishlistItems, user } = useApp();
+ const [activeGender, setActiveGender] = useState('ALL');
+ const [showNikeBanner, setShowNikeBanner] = useState(false);
+ const [showFilter, setShowFilter] = useState(false);
+ const [selectedCategories, setSelectedCategories] = useState([]);
+ const { cartCount, wishlistItems } = useApp();
const filtered = useMemo(() => {
- return ALL_PRODUCTS.filter(p => {
- const catMatch = activeCategory === 'All' || p.category === activeCategory;
- const searchMatch = search.trim() === '' ||
- p.name.toLowerCase().includes(search.toLowerCase()) ||
- p.brand.toLowerCase().includes(search.toLowerCase());
- return catMatch && searchMatch;
- });
- }, [search, activeCategory]);
+ const catMatch = (p) => selectedCategories.length === 0 || selectedCategories.includes(p.category);
- return (
-
-
- Z appify
+ Z
+ appify
+
navigation.navigate('Wishlist')}>
{wishlistItems.length}
navigation.navigate('Cart')}>
- {cartCount}
navigation.navigate('Account')}>
- {user
- ? {user.name[0]}
-
- setSearch('')}>
-
- )}
+
+
+
+ setShowFilter(true)}>
+
- item}
- style={styles.catList}
- contentContainerStyle={{ paddingHorizontal: 16, paddingVertical: 6, alignItems: 'center' }}
- renderItem={({ item }) => (
+ {!search && (
+
+
+ SPRING COLLECTION 2026
+ Experience The{'\n'}Future of{'\n'}Streetwear
+ Unmatched comfort. Uncompromising style. Crafted for those who move.
+ { setShowNikeBanner(true); setSearch('Nike'); }}>
+ EXPLORE NOW
+
+
+
+
+
+ )}
+
+
+ {GENDER_TABS.map(tab => (
setActiveCategory(item)}
+ key={tab}
+ style={[styles.genderTab, activeGender === tab && styles.genderTabActive]}
+ onPress={() => { setActiveGender(tab); setShowNikeBanner(false); setSearch(''); }}
>
- {item}
+
+ {tab}
+
- )}
- />
+ ))}
+
+
+ {showNikeBanner && (
+
+
+ SPRING COLLECTION 2026
+ 20 Iconic{'\n'}Nike Shoes
+ Handpicked for you
+ { setShowNikeBanner(false); setSearch(''); }}>
+ ← Back to All
+
+
+
+ )}
+
+ );
+ return (
+
+ item.id.toString()}
numColumns={2}
contentContainerStyle={styles.grid}
@@ -93,33 +148,104 @@ export default function HomeScreen({ navigation }) {
)}
ListEmptyComponent={
- No products found
+ No kicks found for your search
}
/>
+
+
+
+
+
+ CATEGORIES
+ setShowFilter(false)}>
+
+
+ {CATEGORIES.map(cat => (
+ {
+ if (selectedCategories.includes(cat)) {
+ setSelectedCategories(selectedCategories.filter(c => c !== cat));
+ } else {
+ setSelectedCategories([...selectedCategories, cat]);
+ }
+ }}
+ >
+
+ {selectedCategories.includes(cat) &&
+ {cat}
+
+ ))}
+
+ setSelectedCategories([])}>
+ Clear All
+
+ setShowFilter(false)}>
+ Apply
+
+
+
+
+
);
}
const styles = StyleSheet.create({
- safe: { flex: 1, backgroundColor: colors.white },
- header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 12 },
- logo: { fontSize: 22, fontWeight: '800', color: colors.dark },
- logoZ: { color: colors.brand },
+ safe: { flex: 1, backgroundColor: colors.lightGray },
+ header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 12, backgroundColor: colors.white, borderBottomWidth: 1, borderBottomColor: colors.border },
+ logoRow: { flexDirection: 'row', alignItems: 'center' },
+ logoZ: { fontSize: 26, fontWeight: '900', color: '#FF6B00', letterSpacing: -1 },
+ logoRest: { fontSize: 26, fontWeight: '900', color: colors.dark, letterSpacing: -1 },
headerActions: { flexDirection: 'row', gap: 8 },
- iconBtn: { padding: 6, position: 'relative' },
- badge: { position: 'absolute', top: 0, right: 0, backgroundColor: colors.brand, borderRadius: 8, minWidth: 16, height: 16, alignItems: 'center', justifyContent: 'center' },
- badgeText: { color: colors.white, fontSize: 10, fontWeight: '700' },
- avatarSmall: { width: 28, height: 28, borderRadius: 14, backgroundColor: colors.brand, alignItems: 'center', justifyContent: 'center' },
- searchBar: { flexDirection: 'row', alignItems: 'center', backgroundColor: colors.lightGray, marginHorizontal: 16, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 10, gap: 8, marginBottom: 8 },
- searchInput: { flex: 1, fontSize: 14, color: colors.dark },
- catList: { marginBottom: 10, maxHeight: 48 },
- catChip: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20, backgroundColor: colors.lightGray, marginRight: 8, height: 36, justifyContent: 'center' },
- catChipActive: { backgroundColor: colors.brand },
- catText: { fontSize: 12, fontWeight: '600', color: colors.gray },
- catTextActive: { color: colors.white },
- grid: { paddingHorizontal: 12, paddingBottom: 20 },
- row: { justifyContent: 'space-between' },
- empty: { alignItems: 'center', marginTop: 60 },
- emptyText: { color: colors.gray, fontSize: 15 },
+ iconBtn: { width: 38, height: 38, borderRadius: 19, backgroundColor: colors.lightGray, alignItems: 'center', justifyContent: 'center' },
+ badge: { position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: 4, backgroundColor: '#D83100', borderWidth: 1.5, borderColor: colors.white },
+ searchContainer: { flexDirection: 'row', paddingHorizontal: 20, gap: 12, marginBottom: 20 },
+ searchBar: { flex: 1, flexDirection: 'row', alignItems: 'center', backgroundColor: colors.white, borderRadius: 15, paddingHorizontal: 15, height: 50, gap: 10, shadowColor: colors.dark, shadowOpacity: 0.05, shadowRadius: 10, elevation: 2 },
+ searchInput: { flex: 1, fontSize: 15, color: colors.dark, fontWeight: '500' },
+ filterBtn: { width: 50, height: 50, borderRadius: 15, backgroundColor: colors.dark, alignItems: 'center', justifyContent: 'center' },
+ heroContainer: { marginHorizontal: 20, height: 200, borderRadius: 20, overflow: 'hidden', marginBottom: 15, backgroundColor: '#000000', flexDirection: 'row', shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15, elevation: 8 },
+ heroLeft: { flex: 1.3, padding: 16, justifyContent: 'center' },
+ heroRight: { flex: 1, overflow: 'hidden', justifyContent: 'center', alignItems: 'center' },
+ heroImage: { width: '120%', height: '120%', transform: [{ rotate: '-5deg' }] },
+ heroTag: { color: '#FF6B00', fontSize: 9, fontWeight: '900', letterSpacing: 1.5, marginBottom: 6, textTransform: 'uppercase' },
+ heroTitle: { color: colors.white, fontSize: 16, fontWeight: '900', lineHeight: 20, marginBottom: 6 },
+ heroSubtitle: { color: '#94A3B8', fontSize: 11, fontWeight: '500', lineHeight: 15, marginBottom: 10 },
+ heroBtn: { backgroundColor: '#FF6B00', paddingHorizontal: 16, paddingVertical: 9, borderRadius: 20, alignSelf: 'flex-start' },
+ heroBtnText: { color: colors.white, fontSize: 11, fontWeight: '900', letterSpacing: 0.5 },
+ genderTabsRow: { flexDirection: 'row', paddingHorizontal: 20, marginBottom: 14, gap: 10 },
+ genderTab: { flex: 1, paddingVertical: 10, borderRadius: 12, backgroundColor: colors.white, borderWidth: 1.5, borderColor: colors.border, alignItems: 'center' },
+ genderTabActive: { backgroundColor: '#D83100', borderColor: '#D83100' },
+ genderTabText: { fontSize: 14, fontWeight: '800', color: colors.gray, letterSpacing: 1 },
+ genderTabTextActive: { color: colors.white },
+ nikeBanner: { marginHorizontal: 16, marginBottom: 14, backgroundColor: '#000', borderRadius: 16, padding: 18, flexDirection: 'row', alignItems: 'center', overflow: 'hidden' },
+ nikeBannerContent: { flex: 1 },
+ nikeBannerTag: { color: '#FF6B00', fontSize: 9, fontWeight: '800', letterSpacing: 2, marginBottom: 6, textTransform: 'uppercase' },
+ nikeBannerTitle: { color: '#fff', fontSize: 20, fontWeight: '900', lineHeight: 24, marginBottom: 4 },
+ nikeBannerSub: { color: '#64748B', fontSize: 12, marginBottom: 12 },
+ nikeBannerBtn: { borderWidth: 1.5, borderColor: '#333', borderRadius: 20, paddingHorizontal: 14, paddingVertical: 6, alignSelf: 'flex-start' },
+ nikeBannerBtnTxt: { color: '#aaa', fontSize: 11, fontWeight: '700' },
+ nikeBannerImg: { width: 110, height: 100, transform: [{ rotate: '-8deg' }] },
+ grid: { paddingBottom: 20 },
+ row: { paddingHorizontal: 15, justifyContent: 'space-between' },
+ empty: { alignItems: 'center', marginTop: 100, gap: 10 },
+ emptyText: { color: colors.gray, fontSize: 14, fontWeight: '500' },
+ filterOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
+ filterSheet: { backgroundColor: colors.white, borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 40 },
+ filterSheetHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 },
+ filterSheetTitle: { fontSize: 14, fontWeight: '800', letterSpacing: 1.5, color: colors.dark },
+ filterOption: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: colors.border },
+ filterCheck: { width: 22, height: 22, borderRadius: 6, borderWidth: 2, borderColor: colors.border, alignItems: 'center', justifyContent: 'center' },
+ filterCheckActive: { backgroundColor: '#D83100', borderColor: '#D83100' },
+ filterOptionTxt: { fontSize: 15, fontWeight: '600', color: colors.dark },
+ filterBtnRow: { flexDirection: 'row', gap: 12, marginTop: 20 },
+ filterClearBtn: { flex: 1, paddingVertical: 14, borderRadius: 12, borderWidth: 1.5, borderColor: colors.border, alignItems: 'center' },
+ filterClearTxt: { fontSize: 13, fontWeight: '700', color: colors.gray },
+ filterApplyBtn: { flex: 2, paddingVertical: 14, borderRadius: 12, backgroundColor: '#D83100', alignItems: 'center' },
+ filterApplyTxt: { fontSize: 13, fontWeight: '800', color: colors.white, letterSpacing: 0.5 },
});
diff --git a/mobile/src/screens/LoginScreen.js b/mobile/src/screens/LoginScreen.js
index 20d2258..1dbc35d 100644
--- a/mobile/src/screens/LoginScreen.js
+++ b/mobile/src/screens/LoginScreen.js
@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { useState, useEffect } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvoidingView, Platform, ScrollView, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
-import { Ionicons } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { colors } from '../theme/colors';
import { useApp } from '../context/AppContext';
@@ -25,6 +24,14 @@ export default function LoginScreen({ navigation }) {
const [form, setForm] = useState({ name: '', email: '', password: '', confirm: '' });
const { login } = useApp();
+ useEffect(() => {
+ const checkUser = async () => {
+ const saved = await AsyncStorage.getItem('zappify_user');
+ if (saved) navigation.replace('Home');
+ };
+ checkUser();
+ }, []);
+
const handleGoogleSignIn = async () => {
if (!GoogleSignin) {
Alert.alert('Not Available', 'Google Sign In is only available in the production build.');
@@ -39,7 +46,7 @@ export default function LoginScreen({ navigation }) {
picture: userInfo.data.user.photo,
};
await login(user);
- navigation.goBack();
+ navigation.replace('Home');
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) return;
if (error.code === statusCodes.IN_PROGRESS) return;
@@ -55,14 +62,14 @@ export default function LoginScreen({ navigation }) {
if (form.password.length < 6) { Alert.alert('Error', 'Password must be at least 6 characters'); return; }
const user = { name: form.name, email: form.email, picture: null };
await login(user);
- navigation.goBack();
+ navigation.replace('Home');
} else {
const saved = await AsyncStorage.getItem('zappify_user');
if (saved) {
const u = JSON.parse(saved);
if (u.email === form.email) {
await login(u);
- navigation.goBack();
+ navigation.replace('Home');
} else {
Alert.alert('Error', 'Account not found. Please sign up first.');
}
@@ -75,43 +82,62 @@ export default function LoginScreen({ navigation }) {
return (
-
-
-
+
+
+ navigation.replace('Home')}>
+ SKIP
+
+
+ ZAPPIFY
+ Premium{'\n'}Footwear
+ Step into the future
+
- {isSignUp ? 'Create Account' : 'Welcome Back'}
- {isSignUp ? 'Join Zappify today' : 'Login to your Zappify account'}
- {isSignUp && (
- setForm({ ...form, name: v })} />
- )}
- setForm({ ...form, email: v })} keyboardType="email-address" autoCapitalize="none" />
- setForm({ ...form, password: v })} secureTextEntry />
- {isSignUp && (
- setForm({ ...form, confirm: v })} secureTextEntry />
- )}
+
+ {isSignUp ? 'Create Account' : 'Welcome Back'}
+ {isSignUp ? 'Join Zappify today' : 'Login to your Zappify account'}
-
- {isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}
-
+ {isSignUp && (
+ setForm({ ...form, name: v })} />
+ )}
+ setForm({ ...form, email: v })} keyboardType="email-address" autoCapitalize="none" />
+ setForm({ ...form, password: v })} secureTextEntry />
+ {isSignUp && (
+ setForm({ ...form, confirm: v })} secureTextEntry />
+ )}
-
- OR CONTINUE WITH
-
+
+ {isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}
+
-
- G
- {isSignUp ? 'Sign up with Google' : 'Sign in with Google'}
-
+
+ OR
+
+
+
+
+ G
+
+ Continue with Google
+
+
+ setIsSignUp(!isSignUp)}>
+
+ {isSignUp ? 'Already have an account? ' : "Don't have an account? "}
+ {isSignUp ? 'Sign In' : 'Sign Up'}
+
+
+
- setIsSignUp(!isSignUp)}>
-
- {isSignUp ? 'Already have an account? ' : "Don't have an account? "}
- {isSignUp ? 'Sign In' : 'Sign Up'}
-
-
@@ -120,20 +146,85 @@ export default function LoginScreen({ navigation }) {
const styles = StyleSheet.create({
safe: { flex: 1, backgroundColor: colors.white },
- container: { padding: 28, alignItems: 'center' },
- iconWrap: { width: 80, height: 80, borderRadius: 40, backgroundColor: colors.brandLight, alignItems: 'center', justifyContent: 'center', marginBottom: 20, marginTop: 20 },
- heading: { fontSize: 26, fontWeight: '800', color: colors.dark, marginBottom: 6 },
- sub: { fontSize: 14, color: colors.gray, marginBottom: 28 },
- input: { width: '100%', borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 15, color: colors.dark, marginBottom: 14 },
- authBtn: { width: '100%', backgroundColor: colors.brand, borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 4 },
+ container: { flexGrow: 1 },
+ heroBanner: {
+ height: 280,
+ backgroundColor: '#000',
+ position: 'relative',
+ overflow: 'hidden',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ heroImage: {
+ width: '100%',
+ height: '100%',
+ position: 'absolute',
+ opacity: 0.7,
+ },
+ heroBannerOverlay: {
+ position: 'absolute',
+ bottom: 24,
+ left: 24,
+ },
+ skipBtn: {
+ position: 'absolute',
+ top: 16,
+ right: 16,
+ backgroundColor: 'rgba(255,255,255,0.15)',
+ paddingHorizontal: 14,
+ paddingVertical: 6,
+ borderRadius: 20,
+ borderWidth: 1,
+ borderColor: 'rgba(255,255,255,0.3)',
+ },
+ skipTxt: {
+ color: '#fff',
+ fontSize: 12,
+ fontWeight: '700',
+ letterSpacing: 1,
+ },
+ heroBrandTag: {
+ color: '#FF6B00',
+ fontSize: 10,
+ fontWeight: '900',
+ letterSpacing: 3,
+ marginBottom: 6,
+ },
+ heroTitle: {
+ color: '#fff',
+ fontSize: 32,
+ fontWeight: '900',
+ lineHeight: 36,
+ letterSpacing: -1,
+ marginBottom: 4,
+ },
+ heroSub: {
+ color: '#94A3B8',
+ fontSize: 13,
+ fontWeight: '500',
+ },
+ formCard: {
+ flex: 1,
+ backgroundColor: colors.white,
+ borderTopLeftRadius: 28,
+ borderTopRightRadius: 28,
+ padding: 28,
+ paddingBottom: 40,
+ marginTop: -20,
+ },
+ heading: { fontSize: 24, fontWeight: '800', color: colors.dark, marginBottom: 4 },
+ sub: { fontSize: 14, color: colors.gray, marginBottom: 24 },
+ input: { borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 15, color: colors.dark, marginBottom: 14 },
+ authBtn: { backgroundColor: '#D83100', borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 4 },
authBtnTxt: { color: colors.white, fontWeight: '800', fontSize: 15, letterSpacing: 1 },
- separator: { flexDirection: 'row', alignItems: 'center', width: '100%', marginVertical: 16, gap: 10 },
+ separator: { flexDirection: 'row', alignItems: 'center', marginVertical: 20, gap: 10 },
sepLine: { flex: 1, height: 1, backgroundColor: colors.border },
- sepTxt: { fontSize: 11, color: colors.gray, fontWeight: '600', letterSpacing: 0.5 },
- googleBtn: { width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingVertical: 14 },
- googleG: { fontSize: 18, fontWeight: '800', color: '#4285F4' },
- googleBtnTxt: { fontSize: 14, fontWeight: '600', color: colors.dark },
- switchBtn: { marginTop: 20 },
- switchTxt: { fontSize: 14, color: colors.gray },
- switchLink: { color: colors.brand, fontWeight: '700' },
+ sepTxt: { fontSize: 12, color: colors.gray, fontWeight: '600', letterSpacing: 1 },
+ googleBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 12, borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingVertical: 14, backgroundColor: colors.white },
+ googleIconWrap: { width: 24, height: 24, borderRadius: 12, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#e0e0e0' },
+ googleG: { fontSize: 14, fontWeight: '900', color: '#4285F4' },
+ googleBtnTxt: { fontSize: 15, fontWeight: '600', color: colors.dark },
+ switchBtn: { marginTop: 20, alignItems: 'center', width: '100%' },
+ switchTxt: { fontSize: 14, color: colors.gray, textAlign: 'center' },
+ switchLink: { color: '#D83100', fontWeight: '700' },
});
diff --git a/mobile/src/screens/ProductDetailScreen.js b/mobile/src/screens/ProductDetailScreen.js
index 12981f3..f221eba 100644
--- a/mobile/src/screens/ProductDetailScreen.js
+++ b/mobile/src/screens/ProductDetailScreen.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet, Alert, Modal, Dimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
@@ -26,74 +26,99 @@ export default function ProductDetailScreen({ route, navigation }) {
const handleAddToCart = () => {
if (!selectedSize) { Alert.alert('Select Size', 'Please select a size first'); return; }
addToCart(product, selectedSize);
- Alert.alert('Added!', `${product.name} (UK ${selectedSize}) added to cart`);
+ navigation.navigate('Cart');
};
return (
-
-
- navigation.goBack()} style={styles.backBtn}>
-
- {product.name}
-
+
+
+
+ navigation.goBack()} style={styles.iconBtn}>
+
+ {product.brand}
+ toggleWishlist(product)} style={styles.iconBtn}>
+
+
+
-
-
- {product.brand}
- {product.name}
- {product.category}
- ₹ {product.price.toLocaleString('en-IN')}
- {product.description}
+
+
+
-
- SELECT SIZE (UK)
- setShowChart(true)}>
- SIZE CHART
-
+
+
+
+ {product.name}
+ {product.category}
+
+ ₹ {product.price.toLocaleString('en-IN')}
-
- {SIZES.map(s => (
- setSelectedSize(s)}
- >
- {s}
+ Product Description
+ {product.description}
+
+
+
+ Select Size (UK)
+ setShowChart(true)}>
+ Size Guide
- ))}
+
+
+ {SIZES.map(s => (
+ setSelectedSize(s)}
+ >
+ {s}
+
+ ))}
+
-
- 100% Authentic 30-Day Returns
+
+
+ Authentic Product
+ Verified & Quality Checked
+
+
+
+
+ Expedited Shipping
+ Delivery in 2-3 Business Days
+
+
- toggleWishlist(product)}
- >
-
- ADD TO CART
+ Add to Cart • ₹{product.price.toLocaleString('en-IN')}
-
+
- UK SIZE CHART
- setShowChart(false)}>
- UK Size Chart
+ setShowChart(false)} style={styles.modalClose}>
+
@@ -109,46 +134,51 @@ export default function ProductDetailScreen({ route, navigation }) {
-
+
);
}
const styles = StyleSheet.create({
- safe: { flex: 1, backgroundColor: colors.white },
- topBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16, paddingVertical: 10 },
- backBtn: { padding: 4 },
- topTitle: { flex: 1, textAlign: 'center', fontSize: 15, fontWeight: '700', color: colors.dark, marginHorizontal: 8 },
- image: { width: W, height: W * 0.85, backgroundColor: colors.lightGray },
- body: { padding: 20 },
- brand: { fontSize: 11, fontWeight: '700', color: colors.gray, letterSpacing: 1.5, marginBottom: 4 },
- name: { fontSize: 22, fontWeight: '800', color: colors.dark, marginBottom: 4 },
- category: { fontSize: 13, color: colors.gray, marginBottom: 10 },
- price: { fontSize: 24, fontWeight: '900', color: colors.dark, marginBottom: 16 },
- desc: { fontSize: 14, color: colors.slate, lineHeight: 22, marginBottom: 20 },
- sizeHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 },
- sizeTitle: { fontSize: 13, fontWeight: '800', color: colors.dark, letterSpacing: 1 },
- chartLink: { fontSize: 12, fontWeight: '700', color: colors.brand, textDecorationLine: 'underline' },
- sizesRow: { flexDirection: 'row', gap: 10, marginBottom: 20 },
- sizeBtn: { width: 48, height: 48, borderRadius: 10, borderWidth: 1.5, borderColor: colors.border, alignItems: 'center', justifyContent: 'center' },
- sizeBtnActive: { borderColor: colors.brand, backgroundColor: colors.brand },
- sizeTxt: { fontSize: 14, fontWeight: '700', color: colors.dark },
+ container: { flex: 1, backgroundColor: colors.white },
+ safeTop: { backgroundColor: colors.white },
+ topBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 20, paddingVertical: 10 },
+ iconBtn: { width: 44, height: 44, borderRadius: 22, backgroundColor: colors.lightGray, alignItems: 'center', justifyContent: 'center' },
+ topTitle: { fontSize: 16, fontWeight: '800', letterSpacing: 0.5, color: colors.dark, textTransform: 'uppercase' },
+ scroll: { paddingBottom: 100 },
+ imageContainer: { width: W, height: W, backgroundColor: '#F8F9FA', alignItems: 'center', justifyContent: 'center' },
+ image: { width: '85%', height: '85%' },
+ body: { padding: 25, marginTop: -30, backgroundColor: colors.white, borderTopLeftRadius: 30, borderTopRightRadius: 30 },
+ titleRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 15 },
+ name: { fontSize: 24, fontWeight: '900', color: colors.dark, flex: 1, marginRight: 10 },
+ category: { fontSize: 14, color: colors.gray, fontWeight: '600', marginTop: 4 },
+ price: { fontSize: 22, fontWeight: '900', color: colors.brand },
+ divider: { height: 1, backgroundColor: colors.border, marginVertical: 20 },
+ sectionTitle: { fontSize: 16, fontWeight: '800', color: colors.dark, marginBottom: 12 },
+ desc: { fontSize: 15, color: colors.slate, lineHeight: 24, fontWeight: '400' },
+ sizeSection: { marginTop: 25 },
+ sizeHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 },
+ chartLink: { fontSize: 13, fontWeight: '700', color: colors.brand },
+ sizesRow: { flexDirection: 'row', gap: 12 },
+ sizeBtn: { flex: 1, height: 50, borderRadius: 15, borderWidth: 1.5, borderColor: colors.border, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.white },
+ sizeBtnActive: { borderColor: colors.dark, backgroundColor: colors.dark },
+ sizeTxt: { fontSize: 15, fontWeight: '700', color: colors.dark },
sizeTxtActive: { color: colors.white },
- badges: { flexDirection: 'row', gap: 16 },
- badgeItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
- badgeTxt: { fontSize: 12, color: colors.slate, fontWeight: '500' },
- footer: { flexDirection: 'row', padding: 16, gap: 12, borderTopWidth: 1, borderTopColor: colors.border },
- wishlistBtn: { width: 52, height: 52, borderRadius: 12, borderWidth: 1.5, borderColor: colors.border, alignItems: 'center', justifyContent: 'center' },
- wishlistBtnActive: { borderColor: colors.brand, backgroundColor: colors.brandLight },
- cartBtn: { flex: 1, height: 52, backgroundColor: colors.brand, borderRadius: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 },
- cartBtnTxt: { color: colors.white, fontWeight: '800', fontSize: 14, letterSpacing: 1 },
- modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center' },
- modalBox: { backgroundColor: colors.white, borderRadius: 16, padding: 20, width: W - 60 },
- modalHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
- modalTitle: { fontSize: 14, fontWeight: '800', letterSpacing: 1 },
- tableHeader: { flexDirection: 'row', backgroundColor: colors.lightGray, borderRadius: 8, paddingVertical: 8, marginBottom: 4 },
- tableHead: { flex: 1, textAlign: 'center', fontSize: 12, fontWeight: '700', color: colors.slate },
- tableRow: { flexDirection: 'row', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.border },
+ perks: { marginTop: 30, gap: 20 },
+ perkItem: { flexDirection: 'row', alignItems: 'center', gap: 15 },
+ perkTitle: { fontSize: 14, fontWeight: '700', color: colors.dark },
+ perkSub: { fontSize: 12, color: colors.gray, fontWeight: '500' },
+ footer: { position: 'absolute', bottom: 0, width: '100%', padding: 20, paddingBottom: 35, backgroundColor: colors.white, shadowColor: colors.dark, shadowOpacity: 0.1, shadowRadius: 10, elevation: 10, borderTopWidth: 1, borderTopColor: colors.border },
+ cartBtn: { height: 60, backgroundColor: '#D83100', borderRadius: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 12 },
+ cartBtnTxt: { color: colors.white, fontWeight: '800', fontSize: 16, letterSpacing: 0.5 },
+ modalOverlay: { flex: 1, backgroundColor: 'rgba(15,23,42,0.8)', justifyContent: 'flex-end' },
+ modalBox: { backgroundColor: colors.white, borderTopLeftRadius: 30, borderTopRightRadius: 30, padding: 25, maxHeight: '60%' },
+ modalHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 25 },
+ modalTitle: { fontSize: 18, fontWeight: '800' },
+ modalClose: { padding: 5 },
+ tableHeader: { flexDirection: 'row', backgroundColor: colors.lightGray, borderRadius: 12, paddingVertical: 12, marginBottom: 8 },
+ tableHead: { flex: 1, textAlign: 'center', fontSize: 13, fontWeight: '800', color: colors.slate },
+ tableRow: { flexDirection: 'row', paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: colors.border },
tableRowActive: { backgroundColor: colors.brandLight },
- tableCell: { flex: 1, textAlign: 'center', fontSize: 13, color: colors.dark },
- tableCellActive: { fontWeight: '700', color: colors.brand },
+ tableCell: { flex: 1, textAlign: 'center', fontSize: 14, color: colors.dark, fontWeight: '500' },
+ tableCellActive: { fontWeight: '800', color: colors.brand },
});
diff --git a/mobile/src/screens/WishlistScreen.js b/mobile/src/screens/WishlistScreen.js
index 53a9f0e..19a7680 100644
--- a/mobile/src/screens/WishlistScreen.js
+++ b/mobile/src/screens/WishlistScreen.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { View, Text, FlatList, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
@@ -37,7 +36,7 @@ export default function WishlistScreen({ navigation }) {
contentContainerStyle={styles.list}
renderItem={({ item }) => (
navigation.navigate('ProductDetail', { product: item })} activeOpacity={0.9}>
-
{item.brand}
{item.name}
diff --git a/mobile/src/theme/colors.js b/mobile/src/theme/colors.js
index f6d8d86..849cda3 100644
--- a/mobile/src/theme/colors.js
+++ b/mobile/src/theme/colors.js
@@ -1,12 +1,13 @@
export const colors = {
- brand: '#e85d04',
- brandLight: '#fff0e6',
- dark: '#1a1a1a',
- slate: '#4a5568',
- gray: '#888888',
- lightGray: '#f5f5f5',
- border: '#e8e8e8',
- white: '#ffffff',
- success: '#16a34a',
- danger: '#dc2626',
+ brand: '#FF3D00',
+ brandLight: 'rgba(255, 61, 0, 0.08)',
+ dark: '#0F172A',
+ slate: '#334155',
+ gray: '#64748B',
+ lightGray: '#F8FAFC',
+ border: '#E2E8F0',
+ surface: '#FFFFFF',
+ white: '#FFFFFF',
+ success: '#10B981',
+ danger: '#EF4444',
};
+
+