hey-pharmacist-ecommerce 1.1.12 → 1.1.14

package/src/providers/NotificationProvider.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { NotificationContainer, NotificationData, NotificationType } from '@/components/Notification';
+
+interface NotificationContextValue {
+    success: (message: string, description?: string, duration?: number) => void;
+    error: (message: string, description?: string, duration?: number) => void;
+    warning: (message: string, description?: string, duration?: number) => void;
+    info: (message: string, description?: string, duration?: number) => void;
+}
+
+const NotificationContext = createContext<NotificationContextValue | undefined>(undefined);
+
+export function useNotification() {
+    const context = useContext(NotificationContext);
+    if (!context) {
+        throw new Error('useNotification must be used within NotificationProvider');
+    }
+    return context;
+}
+
+interface NotificationProviderProps {
+    children: React.ReactNode;
+}
+
+export function NotificationProvider({ children }: NotificationProviderProps) {
+    const [notifications, setNotifications] = useState<NotificationData[]>([]);
+
+    const addNotification = useCallback(
+        (type: NotificationType, message: string, description?: string, duration?: number) => {
+            const id = Math.random().toString(36).substring(2, 9);
+            const notification: NotificationData = {
+                id,
+                type,
+                message,
+                description,
+                duration: duration || 4000,
+            };
+
+            setNotifications((prev) => [...prev, notification]);
+        },
+        []
+    );
+
+    const dismissNotification = useCallback((id: string) => {
+        setNotifications((prev) => prev.filter((n) => n.id !== id));
+    }, []);
+
+    const value: NotificationContextValue = {
+        success: useCallback(
+            (message: string, description?: string, duration?: number) =>
+                addNotification('success', message, description, duration),
+            [addNotification]
+        ),
+        error: useCallback(
+            (message: string, description?: string, duration?: number) =>
+                addNotification('error', message, description, duration),
+            [addNotification]
+        ),
+        warning: useCallback(
+            (message: string, description?: string, duration?: number) =>
+                addNotification('warning', message, description, duration),
+            [addNotification]
+        ),
+        info: useCallback(
+            (message: string, description?: string, duration?: number) =>
+                addNotification('info', message, description, duration),
+            [addNotification]
+        ),
+    };
+
+    return (
+        <NotificationContext.Provider value={value}>
+            {children}
+            <NotificationContainer notifications={notifications} onDismiss={dismissNotification} />
+        </NotificationContext.Provider>
+    );
+}

package/src/providers/WishlistProvider.tsx

@@ -4,10 +4,10 @@ import React, { createContext, useContext, useState, useEffect, ReactNode, useCa
 import { WishlistApi } from '@/lib/Apis/apis/wishlist-api';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useAuth } from './AuthProvider';
-import { toast } from 'sonner';
 import { useMemo } from 'react';
 import { Wishlist } from '@/lib/Apis';
 import { Product } from '@/lib/Apis/models';
+import { useNotification } from './NotificationProvider';
 
 
 interface WishlistContextType extends Wishlist {
@@ -31,6 +31,7 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
   } as unknown as Wishlist);
 
   const { isAuthenticated } = useAuth() || {};
+  const notification = useNotification();
   const wishlistApi = useMemo(() => new WishlistApi(AXIOS_CONFIG), []);
 
   const fetchWishlist = useCallback(async () => {
@@ -74,14 +75,20 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
 
   const addToWishlist = async (product: Product) => {
     if (!isAuthenticated) {
-      toast.error('Please sign in to add items to your wishlist');
+      notification.error(
+        'Sign-in required',
+        'Please sign in to add items to your wishlist.'
+      );
       return;
     }
 
     try {
       // First check if the item is already in the wishlist
       if (isInWishlist(product?._id || '')) {
-        toast.info('This item is already in your wishlist');
+        notification.info(
+          'Already saved',
+          'This item is already in your wishlist.'
+        );
         return;
       }
 
@@ -92,10 +99,16 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
       // This ensures we're in sync with the server and prevents duplicates
       await fetchWishlist();
 
-      toast.success('Added to wishlist');
+      notification.success(
+        'Added to wishlist',
+        `${product?.name || 'Item'} was added to your wishlist.`
+      );
     } catch (error) {
       console.error('Error adding to wishlist:', error);
-      toast.error('Failed to add to wishlist');
+      notification.error(
+        'Could not add to wishlist',
+        'Something went wrong while adding this item. Please try again.'
+      );
       throw error;
     }
   };
@@ -113,10 +126,16 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
 
       });
 
-      toast.success('Removed from wishlist');
+      notification.success(
+        'Removed from wishlist',
+        'The item has been removed from your wishlist.'
+      );
     } catch (error) {
       console.error('Error removing from wishlist:', error);
-      toast.error('Failed to remove from wishlist');
+      notification.error(
+        'Could not remove item',
+        'Something went wrong while removing this item. Please try again.'
+      );
       throw error;
     }
   };
@@ -128,10 +147,16 @@ export function WishlistProvider({ children }: { children: ReactNode }) {
         ...prev,
         products: [],
       }));
-      toast.success('Wishlist cleared');
+      notification.success(
+        'Wishlist cleared',
+        'All items have been removed from your wishlist.'
+      );
     } catch (error) {
       console.error('Error clearing wishlist:', error);
-      toast.error('Failed to clear wishlist');
+      notification.error(
+        'Could not clear wishlist',
+        'We could not clear your wishlist. Please try again.'
+      );
       throw error;
     }
   };

package/src/screens/AddressesScreen.tsx

@@ -23,7 +23,6 @@ import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/EmptyState';
 import { useAddresses } from '@/hooks/useAddresses';
-import { toast } from 'sonner';
 import { Address, AddressAddressTypeEnum, CreateAddressDtoAddressTypeEnum, UpdateAddressDto, UpdateAddressDtoAddressTypeEnum } from '@/lib/Apis';
 
 const addressFormSchema = z.object({
@@ -86,6 +85,9 @@ export function AddressesScreen() {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editingAddress, setEditingAddress] = useState<Address | null>(null);
+  const [banner, setBanner] = useState<{ type: 'success' | 'error'; message: string } | null>(
+    null
+  );
 
   const {
     register,
@@ -147,10 +149,10 @@ export function AddressesScreen() {
     if (editingAddress) {
       const response = await updateAddress(editingAddress.id, payload);
       if (response) {
-        toast.success('Address updated');
+        setBanner({ type: 'success', message: 'Address updated successfully' });
         closeModal();
       } else {
-        toast.error('Unable to update address');
+        setBanner({ type: 'error', message: 'Unable to update address' });
       }
     } else {
       const response = await addAddress({
@@ -165,10 +167,10 @@ export function AddressesScreen() {
         addressType: values.addressType as CreateAddressDtoAddressTypeEnum,
       });
       if (response) {
-        toast.success('Address added successfu  lly');
+        setBanner({ type: 'success', message: 'Address added successfully' });
         closeModal();
       } else {
-        toast.error('Failed to add address');
+        setBanner({ type: 'error', message: 'Failed to add address' });
       }
     }
   };
@@ -181,10 +183,12 @@ export function AddressesScreen() {
 
     try {
       await removeAddress(address.id);
-      toast.success('Address removed successfully');
+      setBanner({ type: 'success', message: 'Address removed successfully' });
     } catch (error) {
-      toast.error('Failed to remove address', {
-        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+      setBanner({
+        type: 'error',
+        message:
+          error instanceof Error ? error.message : 'Failed to remove address. Please try again.',
       });
     }
   };
@@ -192,10 +196,12 @@ export function AddressesScreen() {
   const handleSetDefault = async (address: Address) => {
     try {
       await markAsDefault(address.id);
-      toast.success(`${address.name} is now your default address`);
+      setBanner({ type: 'success', message: `${address.name} is now your default address` });
     } catch (error) {
-      toast.error('Failed to set default address', {
-        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+      setBanner({
+        type: 'error',
+        message:
+          error instanceof Error ? error.message : 'Failed to set default address. Try again.',
       });
     }
   };
@@ -226,65 +232,70 @@ export function AddressesScreen() {
   }, [addresses]);
 
   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.3),_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-5"
-            >
-              <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">
+    <div className="min-h-screen bg-slate-50 text-slate-900">
+      <div className="container mx-auto px-4 pb-16 pt-10">
+        <div className="rounded-3xl border border-slate-200 bg-white/95 p-6 shadow-xl shadow-primary-50">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="space-y-2">
+              <div className="inline-flex items-center gap-2 rounded-full bg-slate-900 text-white px-4 py-1 text-xs font-semibold uppercase tracking-[0.32em]">
                 <MapPin className="h-4 w-4" />
                 Address book
-              </span>
-              <h1 className="text-4xl font-bold md:text-5xl">
-                Manage where your care arrives
-              </h1>
-              <p className="max-w-2xl text-white/80 md:text-lg">
-                Add home, office, or loved ones&apos; addresses and toggle a default for lightning-fast
-                checkout and delivery.
+              </div>
+              <h1 className="text-3xl font-semibold md:text-4xl">Manage where your care arrives</h1>
+              <p className="max-w-2xl text-sm text-slate-600">
+                Save home, office, or loved ones&apos; addresses and choose a default for faster checkout and delivery.
               </p>
-              <div className="flex flex-wrap items-center gap-3 text-sm text-white/75">
-                <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1">
-                  <Sparkles className="h-4 w-4 text-white" />
-                  Default address: {defaultAddress ? defaultAddress.name : 'Not set'}
+              <div className="flex flex-wrap gap-3 text-xs text-slate-500">
+                <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2">
+                  <Sparkles className="h-4 w-4 text-primary-600" />
+                  Default: {defaultAddress ? defaultAddress.name : 'Not set'}
                 </span>
-                <Button variant="ghost" className="text-white hover:bg-white/10" onClick={openCreateModal}>
-                  <Plus className="h-5 w-5" />
-                  Add address
-                </Button>
               </div>
-            </motion.div>
+            </div>
+            <div className="flex items-center gap-3">
+              {banner && (
+                <div
+                  className={`flex items-start gap-2 rounded-2xl border px-3 py-2 text-xs ${
+                    banner.type === 'success'
+                      ? 'border-green-200 bg-green-50 text-green-700'
+                      : 'border-red-200 bg-red-50 text-red-700'
+                  }`}
+                >
+                  <span className="mt-[1px] text-base">{banner.type === 'success' ? '✔' : '!'}</span>
+                  <span>{banner.message}</span>
+                </div>
+              )}
+              <Button
+                variant="outline"
+                size="md"
+                className="border-slate-300 text-slate-800 hover:bg-white"
+                onClick={openCreateModal}
+              >
+                <Plus className="h-5 w-5" />
+                Add address
+              </Button>
+            </div>
+          </div>
 
-            <motion.div
-              initial={{ opacity: 0, y: 24 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-              className="grid gap-4 rounded-3xl bg-white/15 p-6 text-sm text-white/80 backdrop-blur"
-            >
-              {stats.map((stat) => (
-                <div key={stat.id} className="flex items-center justify-between">
-                  <div>
-                    <p className="text-xs font-semibold uppercase tracking-[0.3em] text-white/70">
-                      {stat.label}
-                    </p>
-                    <p className="text-white">{stat.helper}</p>
-                  </div>
-                  <span className="text-3xl font-semibold text-white">{stat.value}</span>
+          <div className="mt-6 grid gap-4 sm:grid-cols-3">
+            {stats.map((stat) => (
+              <div
+                key={stat.id}
+                className="rounded-2xl border border-slate-200 bg-slate-50/70 px-4 py-3 text-sm text-slate-600"
+              >
+                <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">
+                  {stat.label}
+                </p>
+                <div className="mt-1 flex items-center justify-between">
+                  <p className="text-slate-800">{stat.helper}</p>
+                  <span className="text-xl font-semibold text-slate-900">{stat.value}</span>
                 </div>
-              ))}
-            </motion.div>
+              </div>
+            ))}
           </div>
         </div>
-      </section>
-
-      <div className="relative -mt-16 pb-20">
-        <div className="container mx-auto px-4">
-
 
+        <div className="mt-10">
           {isLoading ? (
             <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
               {Array.from({ length: 3 }).map((_, index) => (
@@ -317,7 +328,7 @@ export function AddressesScreen() {
                     key={address.id}
                     initial={{ opacity: 0, y: 24 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="group relative flex h-full flex-col rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
+                    className="group relative flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:border-primary-200 hover:shadow-lg"
                   >
                     {address.isDefault && (
                       <span className="absolute right-6 top-6 inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">

package/src/screens/CartScreen.tsx

@@ -17,22 +17,22 @@ import { formatPrice } from '@/lib/utils/format';
 import { useRouter } from 'next/navigation';
 import { CartItemPopulated } from '@/lib/Apis';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { useAuth } from '@/providers/AuthProvider';
+import { useNotification } from '@/providers/NotificationProvider';
 
 
 export function CartScreen() {
   const router = useRouter();
   const { cart, isLoading } = useCart();
   const { buildPath } = useBasePath();
+  const { isAuthenticated, user } = useAuth();
+  const notification = useNotification();
 
   if (!cart || cart.cartBody.items.length === 0) {
     return (
       <div className="bg-white">
         <div className="min-h-screen bg-white max-w-6xl mx-auto">
           <div className="container mx-auto px-4 py-8">
-            <div className="mb-6">
-              <h1 className="text-2xl font-bold text-slate-900">Shopping Cart</h1>
-              <p className="text-sm text-gray-500 mt-1">0 items in your cart</p>
-            </div>
 
             <div className="flex flex-col items-center justify-center py-20">
               <motion.div
@@ -42,15 +42,15 @@ export function CartScreen() {
               >
                 <div className="flex justify-center">
                   <div className="rounded-full bg-gray-100 p-6">
-                    <ShoppingBag className="h-12 w-12 text-gray-400" />
+                    <ShoppingBag className="h-12 w-12 text-secondary" />
                   </div>
                 </div>
 
                 <div className="space-y-2">
-                  <h2 className="text-2xl font-bold text-slate-900">
+                  <h2 className="text-2xl font-bold text-secondary">
                     Your cart is empty
                   </h2>
-                  <p className="text-gray-500">
+                  <p className="text-muted">
                     Start adding products to your cart to see them here.
                   </p>
                 </div>
@@ -59,7 +59,7 @@ export function CartScreen() {
                   <button
                     type="button"
                     onClick={() => router.push(buildPath('/shop'))}
-                    className="rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
+                    className="rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
                   >
                     Discover products
                     <ArrowRight className="h-5 w-5" />
@@ -68,15 +68,15 @@ export function CartScreen() {
 
                 <div className="mt-8 space-y-3 pt-6 border-t border-gray-200">
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
                     <span>Free shipping on all orders</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
                     <span>Easy returns within 30 days</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
@@ -94,22 +94,38 @@ export function CartScreen() {
   const total = subtotal + shipping + tax;
   const itemCount = cart.cartBody.items.length;
 
+  const handleSubmit = async (e?: React.FormEvent<HTMLFormElement> | React.MouseEvent) => {
+    if (!isAuthenticated) {
+      notification.error(
+        'Sign-in required',
+        'Please log in to complete your checkout.'
+      );
+      setTimeout(() => router.push(buildPath('/login?redirect=/checkout')), 50);
+      return;
+    }
+
+    router.push(buildPath('/checkout'));
+  };
+
   return (
-    <div className="bg-white">
-      <div className="min-h-screen bg-white max-w-6xl mx-auto">
+    <div className="min-h-screen bg-white">
+      <div className="max-w-[1400px] mx-auto px-8 md:px-12">
         <div className="container mx-auto px-4 py-8">
-          <div className="mb-6">
-            <h1 className="text-2xl font-bold text-slate-900">Shopping Cart</h1>
-            <p className="text-sm text-gray-500 mt-1">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-2px] mb-2 text-4xl">
+              Shopping Cart
+            </h1>
+            <p className="font-['Poppins',sans-serif] text-[16px] text-muted">
               {itemCount} {itemCount === 1 ? 'item' : 'items'} in your cart
             </p>
           </div>
-          <div className="grid gap-8 lg:grid-cols-[1.5fr_1fr]">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
             {/* Shopping Cart Section */}
             <motion.section
               initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
-              className="space-y-6"
+              className="space-y-6 lg:col-span-2"
             >
 
 
@@ -132,15 +148,15 @@ export function CartScreen() {
               initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="space-y-6 lg:sticky lg:top-8 h-fit"
+              className="space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
             >
-              <div className="rounded-xl border-2 border-primary-200 bg-white p-6 shadow-md">
-                <h2 className="text-xl font-bold text-slate-900 mb-6">Order Summary</h2>
+              <div className="bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+                <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6">Order Summary</h2>
 
                 <div className="space-y-4 mb-6">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-gray-600">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
-                    <span className="font-semibold text-slate-900">{formatPrice(subtotal)}</span>
+                  <div className="flex items-center justify-between">
+                    <span className="font-['Poppins',sans-serif] text-[14px] text-muted">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
+                    <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary">{formatPrice(subtotal)}</span>
                   </div>
                   <div className="flex items-center justify-between text-sm">
                     <span className="text-gray-600">Shipping</span>
@@ -150,7 +166,7 @@ export function CartScreen() {
                   </div>
                   <div className="border-t border-gray-200 pt-4 mt-4">
                     <div className="flex items-center justify-between">
-                      <span className="text-lg font-bold text-slate-900">Total</span>
+                      <span className="text-lg font-bold text-secondary">Total</span>
                       <span className="text-2xl font-bold text-orange-600">{formatPrice(total)}</span>
                     </div>
                   </div>
@@ -158,8 +174,8 @@ export function CartScreen() {
 
                 <div className="space-y-3">
                   <button
-                    type="button"
-                    onClick={() => router.push(buildPath('/checkout'))}
+                    type="submit"
+                    onClick={handleSubmit}
                     className="w-full rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
                   >
                     Proceed to Checkout
@@ -168,7 +184,7 @@ export function CartScreen() {
                   <button
                     type="button"
                     onClick={() => router.push(buildPath('/shop'))}
-                    className="w-full rounded-full border-2 border-primary-300 bg-white px-4 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors"
+                    className="w-full rounded-full border-2 border-muted bg-white px-4 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors"
                   >
                     Continue Shopping
                   </button>
@@ -176,23 +192,23 @@ export function CartScreen() {
 
                 <div className="mt-6 space-y-3 pt-6 border-t border-gray-200">
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-muted flex-shrink-0 mt-0.5" />
                     <span>Easy returns within 30 days</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-muted flex-shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
               </div>
 
-              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+              {/* <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 help?</p>
                 <p className="mt-2 leading-relaxed">
                   Chat with a pharmacist to optimize your regimen or discuss substitutions before you
                   check out.
                 </p>
-              </div>
+              </div> */}
             </motion.aside>
           </div>
         </div>