David/Wfdash-OnlineShop
1
0
Fork 0
mirror of https://gitlab.com/davidels1986/ore-cart-checkout.git synced 2026-10-30 02:59:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reverted to commit f66675d6e6

Browse source
This commit is contained in:
gpt-engineer-app[bot] 2026-01-29 21:40:24 +00:00
parent bf177d94b1
commit bb3e4c1f9c
1 changed files with 4 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/pages/Index.tsx
View file

@ -1,4 +1,4 @@
import { useState, useMemo, useEffect, useRef } from 'react';
import { useState, useMemo, useEffect } from 'react';
import { SearchBar } from '@/components/SearchBar';
import { CategorySidebar } from '@/components/CategorySidebar';
import { ProductCard } from '@/components/ProductCard';
@ -6,7 +6,6 @@ import { FeatureBar } from '@/components/FeatureBar';
import { QuoteRequestForm } from '@/components/QuoteRequestForm';
import { products } from '@/data/products';
import heroBg from '@/assets/hero-banner.png';
import { ChevronDown } from 'lucide-react';
import Fuse from 'fuse.js';
// Animated counter hook
@ -34,11 +33,6 @@ function useAnimatedCounter(end: number, duration: number = 2000) {
const Index = () => {
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const shopRef = useRef<HTMLElement>(null);
const scrollToShop = () => {
shopRef.current?.scrollIntoView({ behavior: 'smooth' });
};
// Animated stats
const productsCount = useAnimatedCounter(1000, 2000);
@ -79,18 +73,9 @@ const Index = () => {
return <div className="min-h-screen bg-background">
<section className="relative">
{/* Hero Image - Full width with aspect ratio */}
<div className="relative w-full aspect-[16/9] md:aspect-[16/7] lg:aspect-[16/6] bg-cover bg-center bg-no-repeat bg-muted" style={{
<div className="w-full aspect-[16/9] md:aspect-[16/7] lg:aspect-[16/6] bg-cover bg-center bg-no-repeat bg-zinc-700" style={{
backgroundImage: `url(${heroBg})`
}}>
{/* Shop Now Button */}
<button
onClick={scrollToShop}
className="absolute bottom-4 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 text-primary-foreground bg-primary/90 hover:bg-primary px-6 py-2 rounded-full transition-all duration-300 hover:scale-105 shadow-lg animate-bounce"
>
<span className="text-sm font-semibold uppercase tracking-wide">Shop Now</span>
<ChevronDown className="h-5 w-5" />
</button>
</div>
}} />
{/* Animated Stats Bar - Bottom of hero */}
<div className="bg-zinc-700 py-4 border-0">
@ -117,7 +102,7 @@ const Index = () => {
<FeatureBar />
{/* Main Content: Categories + Products */}
<section ref={shopRef} className="container mx-auto px-4 py-8 scroll-mt-4">
<section className="container mx-auto px-4 py-8">
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
{/* Category Sidebar - Sticky */}
<div className="lg:sticky lg:top-4 lg:self-start">