Made background white

cart page updated

src/app/(storefront)/cart/page.tsx

@@ -3,7 +3,6 @@
 import { Minus, Plus, Trash2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { useCart } from '@/providers/cart';
 
@@ -11,19 +10,14 @@ export default function MyCartComponent() {
   const { cart, updateQuantity, removeItem } = useCart();
 
   return (
-    <div className='container mx-auto px-4 py-8'>
+    <div className='pb-12 pt-28 flex flex-wrap flex-col md:flex-row'>
-      <h1 className='text-3xl font-bold mb-8'>My Cart</h1>
+      <h1 className='text-3xl font-bold mb-8 basis-full'>My Cart</h1>
-      <div className='grid gap-8 md:grid-cols-3'>
+      <div className='gap-8 basis-3/4 divide-y divide-slate-200 border-y border-slate-200'>
-        <div className='md:col-span-2'>
         {cart?.items?.map((item) => (
-            <Card key={item.id} className='mb-4'>
+          <div key={item.id} className='p-4 flex items-center'>
-              <CardContent className='p-4'>
+            {item.thumbnail && (
-                <div className='flex items-center'>
+              <img src={item.thumbnail} alt={item.title} className='w-20 h-20 object-cover rounded mr-4' />
-                  {/* <img
+            )}
-                    src={item.image}
-                    alt={item.name}
-                    className="w-20 h-20 object-cover rounded mr-4"
-                  /> */}
             <div className='flex-grow'>
               <h3 className='font-semibold'>
                 {item.product_title} ({item.variant_title})
@@ -43,16 +37,10 @@ export default function MyCartComponent() {
               <Trash2 className='h-4 w-4' />
             </Button>
           </div>
-              </CardContent>
-            </Card>
         ))}
       </div>
-        <div>
+      <div className='basis-1/4 p-4 bg-[#f5f5f5]'>
-          <Card>
+        <h3 className='font-semibold leading-none tracking-tight'>Summary</h3>
-            <CardHeader>
-              <CardTitle>Order Summary</CardTitle>
-            </CardHeader>
-            <CardContent>
         <div className='space-y-1'>
           <div className='flex justify-between'>
             <span>Subtotal</span>
@@ -63,17 +51,15 @@ export default function MyCartComponent() {
             <span>₹{cart?.tax_total?.toFixed(2)}</span>
           </div>
         </div>
-            </CardContent>
         <Separator />
-            <CardFooter className='justify-between'>
+        <div className='flex justify-between'>
           <span className='font-semibold'>Total</span>
           <span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
-            </CardFooter>
+        </div>
-          </Card>
+        <Button className='w-full mt-4 bg-white' size='lg'>
-          <Button className='w-full mt-4' size='lg'>
           Proceed to Checkout
         </Button>
-        </div>
+        Need Help? Call us at 9915020200
       </div>
     </div>
   );

src/app/(storefront)/products/page.tsx

@@ -32,7 +32,7 @@ async function fetchProducts() {
 export default async function ProductsPage() {
   const products: HttpTypes.StoreProduct[] = await fetchProducts();
   return (
-    <div className='py-12 pt-28'>
+    <div className='pb-12 pt-28'>
       {/* Products Grid */}
       <div
         className='grid gap-8 mb-8'

src/app/globals.css

@@ -3,7 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --background: 20, 18%, 97%;
+  /* --background: 20, 18%, 97%; */
+  --background: 0, 0%, 100%;
+  /* --foreground: 358, 39%, 32%; */
   --foreground: 358, 39%, 32%;
   --normal-font: 1.25rem;
   --title-font: 3rem;
@@ -13,7 +15,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: 20, 18%, 97%;
+    /* --background: 20, 18%, 97%; */
+    --background: 0, 0%, 100%;
+    /* --foreground: 358, 39%, 32%; */
     --foreground: 358, 39%, 32%;
   }
 }