hey-pharmacist-ecommerce 1.1.13 → 1.1.15

package/src/screens/CategoriesScreen.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Package, Sparkles } from 'lucide-react';
-import { EmptyState } from '@/components/EmptyState';
-import { useCategories } from '@/hooks/useProducts';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useBasePath } from '@/providers/BasePathProvider';
-
-export function CategoriesScreen() {
-  const { categories, isLoading } = useCategories();
-  const router = useRouter();
-  const { buildPath } = useBasePath();
-
-  return (
-    <div className="min-h-screen bg-slate-50">
-      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
-        <div className="relative container mx-auto px-4 py-16">
-          <motion.div
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="space-y-6"
-          >
-            <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
-              <Package className="h-4 w-4" />
-              Product Categories
-            </span>
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div className="space-y-4">
-                <h1 className="text-4xl font-bold md:text-5xl">Browse Our Product Range</h1>
-                <p className="max-w-2xl text-white/80 md:text-lg">
-                  Explore our comprehensive selection of healthcare products, carefully curated by our pharmacists to meet all your wellness needs.
-                </p>
-              </div>
-              <div className="rounded-3xl bg-white/15 p-6 backdrop-blur">
-                <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
-                  Quick tip
-                </p>
-                <p className="mt-3 text-sm text-white/80">
-                  Use the categories below to quickly find the products you&apos;re looking for, or use the search function for specific items.
-                </p>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      <div className="relative -mt-16 pb-16">
-        <div className="container mx-auto px-4">
-          <motion.div
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
-          >
-            <div className="flex items-center gap-3 text-sm text-slate-500 mb-6">
-              <Sparkles className="h-4 w-4 text-primary-500" />
-              <span>Browse our complete product catalog organized by categories.</span>
-            </div>
-
-            {isLoading ? (
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                {[...Array(8)].map((_, i) => (
-                  <div key={i} className="animate-pulse">
-                    <div className="bg-gray-200 rounded-lg aspect-square mb-2"></div>
-                    <div className="h-4 bg-gray-200 rounded w-3/4 mb-1"></div>
-                    <div className="h-3 bg-gray-200 rounded w-1/2"></div>
-                  </div>
-                ))}
-              </div>
-            ) : categories.length > 0 ? (
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                {categories.map((category) => (
-                  <Link
-                    key={category.id}
-                    href={buildPath(`/shop?category=${category.name}`)}
-                    className="group block overflow-hidden rounded-xl border border-gray-100 bg-white p-4 text-center transition hover:shadow-lg hover:border-primary-500"
-                  >
-                    <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-gray-50 mb-3">
-                      {category.image ? (
-                        <Image
-                          src={category.image}
-                          alt={category.name || 'Category Image'}
-                          fill
-                          className="object-cover transition-transform group-hover:scale-105"
-                          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
-                        />
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center bg-gray-100 text-gray-400">
-                          <Package className="h-12 w-12" />
-                        </div>
-                      )}
-                    </div>
-                    <h3 className="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
-                      {category.name}
-                    </h3>
-                    {category.productCount > 0 && (
-                      <p className="mt-1 text-sm text-gray-500">
-                        {category.productCount} {category.productCount === 1 ? 'product' : 'products'}
-                      </p>
-                    )}
-                  </Link>
-                ))}
-              </div>
-            ) : (
-              <EmptyState
-                title="No categories found"
-                description="There are currently no product categories available."
-                icon={Package}
-                actionLabel="Shop products"
-                onAction={() => router.push(buildPath('/shop'))}
-              />
-            )}
-          </motion.div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/screens/HomeScreen.tsx

@@ -1,211 +0,0 @@
-'use client';
-
-import React from 'react';
-import { motion } from 'framer-motion';
-import { ArrowRight, ShoppingBag, Truck, Shield, CreditCard } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
-import { ProductCard } from '@/components/ProductCard';
-import { useWishlist } from '@/providers/WishlistProvider';
-import { ProductCardSkeleton } from '@/components/ui/Skeleton';
-import { useRouter } from 'next/navigation';
-import { useBasePath } from '@/providers/BasePathProvider';
-import { useProducts } from '@/hooks/useProducts';
-
-export default function HomeScreen() {
-  const router = useRouter();
-  const { buildPath } = useBasePath();
-    const { products, isLoading } = useProducts();
-    const { isInWishlist } = useWishlist();
-
-    const features = [
-        {
-            icon: Truck,
-            title: 'Free Shipping',
-            description: 'On orders over $50',
-        },
-        {
-            icon: Shield,
-            title: 'Secure Payment',
-            description: '100% secure transactions',
-        },
-        {
-            icon: CreditCard,
-            title: 'Easy Returns',
-            description: '30-day money back guarantee',
-        },
-        {
-            icon: ShoppingBag,
-            title: 'Quality Products',
-            description: 'Handpicked for you',
-        },
-    ];
-
-    return (
-        <div>
-            {/* Hero Section */}
-            <section className="relative bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-600 text-white py-32 overflow-hidden">
-                <div className="absolute inset-0 opacity-10">
-                    <div className="absolute inset-0" style={{
-                        backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)',
-                        backgroundSize: '40px 40px',
-                    }} />
-                </div>
-
-                <div className="container mx-auto px-4 relative z-10">
-                    <motion.div
-                        initial={{ opacity: 0, y: 30 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8 }}
-                        className="max-w-3xl mx-auto text-center"
-                    >
-                        <h1 className="text-6xl md:text-7xl font-bold mb-6">
-                            Shop the Best Products
-                        </h1>
-                        <p className="text-xl md:text-2xl text-primary-100 mb-10">
-                            Discover our curated collection of high-quality products at unbeatable prices
-                        </p>
-                        <div className="flex flex-wrap gap-4 justify-center">
-                            <Button
-                                size="lg"
-                                variant="secondary"
-                                onClick={() => router.push(buildPath('/shop'))}
-                                className="text-lg px-8 py-4"
-                            >
-                                Shop Now
-                                <ArrowRight className="w-6 h-6" />
-                            </Button>
-                            <Button
-                                size="lg"
-                                variant="outline"
-                                onClick={() => router.push(buildPath('/about'))}
-                                className="text-lg px-8 py-4 bg-white/10 backdrop-blur-sm border-white text-white hover:bg-white/20"
-                            >
-                                Learn More
-                            </Button>
-                        </div>
-                    </motion.div>
-                </div>
-
-                {/* Decorative Elements */}
-                <div className="absolute bottom-0 left-0 right-0">
-                    <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="rgb(249, 250, 251)" />
-                    </svg>
-                </div>
-            </section>
-
-            {/* Features Section */}
-            <section className="py-20 bg-gray-50">
-                <div className="container mx-auto px-4">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-                        {features.map((feature, index) => (
-                            <motion.div
-                                key={feature.title}
-                                initial={{ opacity: 0, y: 20 }}
-                                whileInView={{ opacity: 1, y: 0 }}
-                                transition={{ delay: index * 0.1 }}
-                                viewport={{ once: true }}
-                                className="text-center"
-                            >
-                                <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                                    <feature.icon className="w-8 h-8 text-primary-600" />
-                                </div>
-                                <h3 className="text-xl font-bold text-gray-900 mb-2">
-                                    {feature.title}
-                                </h3>
-                                <p className="text-gray-600">{feature.description}</p>
-                            </motion.div>
-                        ))}
-                    </div>
-                </div>
-            </section>
-
-            {/* Featured Products Section */}
-            <section className="py-20 bg-white">
-                <div className="container mx-auto px-4">
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        className="text-center mb-12"
-                    >
-                        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-                            Featured Products
-                        </h2>
-                        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-                            Check out our handpicked selection of trending products
-                        </p>
-                    </motion.div>
-
-                    {isLoading ? (
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-                            {Array.from({ length: 8 }).map((_, i) => (
-                                <ProductCardSkeleton key={i} />
-                            ))}
-                        </div>
-                    ) : (
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-                            {products.map((product, index) => {
-
-                                return (
-                                    <motion.div
-                                        key={product.id}
-                                        initial={{ opacity: 0, y: 20 }}
-                                        whileInView={{ opacity: 1, y: 0 }}
-                                        transition={{ delay: index * 0.1 }}
-                                        viewport={{ once: true }}
-                                    >
-                                        <ProductCard
-                                            product={product}
-                                            isFavorited={isInWishlist(product.id)}
-                                            onClickProduct={(p) => router.push(buildPath(`/products/${p.id}`))}
-                                        />
-                                    </motion.div>
-                                );
-                            })}
-                        </div>
-                    )}
-
-                    <div className="text-center mt-12">
-                        <Button
-                            size="lg"
-                            onClick={() => router.push(buildPath('/shop'))}
-                        >
-                            View All Products
-                            <ArrowRight className="w-5 h-5" />
-                        </Button>
-                    </div>
-                </div>
-            </section>
-
-            {/* CTA Section */}
-            <section className="py-20 bg-gradient-to-br from-primary-600 to-secondary-600 text-white">
-                <div className="container mx-auto px-4">
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        className="max-w-3xl mx-auto text-center"
-                    >
-                        <h2 className="text-4xl md:text-5xl font-bold mb-6">
-                            Ready to Start Shopping?
-                        </h2>
-                        <p className="text-xl text-primary-100 mb-10">
-                            Join thousands of satisfied customers and discover amazing products today
-                        </p>
-                        <Button
-                            size="lg"
-                            variant="secondary"
-                            onClick={() => router.push(buildPath('/register'))}
-                            className="text-lg px-8 py-4"
-                        >
-                            Create an Account
-                            <ArrowRight className="w-6 h-6" />
-                        </Button>
-                    </motion.div>
-                </div>
-            </section>
-        </div>
-    );
-}
-