hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/CurrentOrdersScreen.tsx

@@ -2,84 +2,148 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Truck, Package } from 'lucide-react';
+import { EmptyState } from '@/components/EmptyState';
 import { OrderCard } from '@/components/OrderCard';
 import { OrderCardSkeleton } from '@/components/ui/Skeleton';
-import { EmptyState } from '@/components/EmptyState';
 import { useCurrentOrders } from '@/hooks/useOrders';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
+import {
+  ArrowUpRight,
+  BellRing,
+  PackageCheck,
+  Truck,
+  Warehouse,
+} from 'lucide-react';
 
 export function CurrentOrdersScreen() {
   const router = useRouter();
   const { orders, isLoading } = useCurrentOrders();
 
+  const hasOrders = orders.length > 0;
+
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
-      <div className="container mx-auto px-4 max-w-5xl">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center gap-3">
-                <Truck className="w-10 h-10 text-primary-600" />
-                Current Orders
-              </h1>
-              <p className="text-gray-600">
-                Track your active orders and deliveries
+    <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">
+        <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">
+          <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="space-y-4"
+            >
+              <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">
+                <Truck className="h-4 w-4" />
+                Live order tracking
+              </span>
+              <h1 className="text-4xl font-bold md:text-5xl">Current orders</h1>
+              <p className="max-w-2xl text-white/80 md:text-lg">
+                Follow your pharmacy orders from preparation to delivery. Real-time updates, SMS
+                alerts, and pharmacist oversight come standard.
               </p>
-            </div>
-            <Link
-              href="/orders"
-              className="text-primary-600 hover:text-primary-700 font-medium"
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="rounded-3xl bg-white/15 p-6 backdrop-blur"
             >
-              View All Orders →
-            </Link>
+              <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
+                Quick actions
+              </p>
+              <div className="mt-4 space-y-3 text-sm text-white/80">
+                <Link
+                  href="/orders"
+                  className="flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3 transition hover:bg-white/20"
+                >
+                  <span className="font-semibold text-white">View order history</span>
+                  <ArrowUpRight className="h-4 w-4" />
+                </Link>
+                <p>
+                  Need help fast? Chat with a pharmacist and we will triage your request in under 10
+                  minutes.
+                </p>
+              </div>
+            </motion.div>
           </div>
-        </motion.div>
+        </div>
+      </section>
 
-        {/* Info Banner */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.1 }}
-          className="bg-blue-50 border border-blue-200 rounded-2xl p-6 mb-8"
-        >
-          <h3 className="font-semibold text-blue-900 mb-2">Track Your Orders</h3>
-          <p className="text-blue-700 text-sm">
-            Stay updated on your orders' status. You'll receive notifications when your order is
-            being prepared, shipped, and delivered.
-          </p>
-        </motion.div>
+      <div className="relative -mt-16 pb-16">
+        <div className="container mx-auto px-4">
+          <motion.section
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"
+          >
+            <div className="space-y-6">
+              {isLoading ? (
+                <div className="space-y-4">
+                  {Array.from({ length: 3 }).map((_, index) => (
+                    <OrderCardSkeleton key={index} />
+                  ))}
+                </div>
+              ) : hasOrders ? (
+                <div className="space-y-4">
+                  {orders.map((order) => (
+                    <OrderCard key={order.id} order={order} />
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded-3xl border border-slate-100 bg-white p-10 shadow-sm">
+                  <EmptyState
+                    icon={PackageCheck}
+                    title="No active orders"
+                    description="Start a new order to see live preparation, packing, and delivery updates here."
+                    actionLabel="Shop wellness essentials"
+                    onAction={() => router.push('/shop')}
+                  />
+                </div>
+              )}
+            </div>
 
-        {/* Orders List */}
-        {isLoading ? (
-          <div className="space-y-4">
-            {Array.from({ length: 2 }).map((_, i) => (
-              <OrderCardSkeleton key={i} />
-            ))}
-          </div>
-        ) : orders.length > 0 ? (
-          <div className="space-y-4">
-            {orders.map((order) => (
-              <OrderCard key={order.id} order={order} />
-            ))}
-          </div>
-        ) : (
-          <EmptyState
-            icon={Package}
-            title="No active orders"
-            description="You don't have any orders in progress right now"
-            actionLabel="Start Shopping"
-            onAction={() => router.push('/shop')}
-          />
-        )}
+            <aside className="space-y-6">
+              <div className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50">
+                <h2 className="text-lg font-semibold text-slate-900">
+                  Real-time milestones
+                </h2>
+                <div className="mt-4 space-y-4 text-sm text-slate-600">
+                  <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
+                    <Warehouse className="h-5 w-5 text-primary-500" />
+                    <div>
+                      <p className="font-semibold text-slate-800">Preparation</p>
+                      <p>Our pharmacists verify ingredients and pack thermo-sensitive items.</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
+                    <Truck className="h-5 w-5 text-primary-500" />
+                    <div>
+                      <p className="font-semibold text-slate-800">In transit</p>
+                      <p>Track live courier location with ETA updates tailored to your delivery window.</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
+                    <BellRing className="h-5 w-5 text-primary-500" />
+                    <div>
+                      <p className="font-semibold text-slate-800">Arrival alerts</p>
+                      <p>Receive SMS and email notifications when parcels are out for delivery.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+                <p className="font-semibold uppercase tracking-[0.3em]">Need support?</p>
+                <p className="mt-3 leading-relaxed">
+                  Our fulfillment team is online 7 days a week. Message us if you need to adjust
+                  delivery instructions or review dosage guidance.
+                </p>
+              </div>
+            </aside>
+          </motion.section>
+        </div>
       </div>
     </div>
   );
 }
-

package/src/screens/HomeScreen.tsx

@@ -0,0 +1,209 @@
+'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 { useProducts } from '@/hooks/useProducts';
+
+export default function HomeScreen() {
+    const router = useRouter();
+    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('/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('/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(`/products/${p.id}`)}
+                                        />
+                                    </motion.div>
+                                );
+                            })}
+                        </div>
+                    )}
+
+                    <div className="text-center mt-12">
+                        <Button
+                            size="lg"
+                            onClick={() => router.push('/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('/register')}
+                            className="text-lg px-8 py-4"
+                        >
+                            Create an Account
+                            <ArrowRight className="w-6 h-6" />
+                        </Button>
+                    </motion.div>
+                </div>
+            </section>
+        </div>
+    );
+}
+