feat: add BannerCard component to CartPage and update button styles

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

@@ -4,19 +4,21 @@ import Link from 'next/link'
 import { Title } from '@/components'
 import { ProductsInCart } from './ui/ProductsInCart'
 import { OrderSummary } from './ui/OrderSummary'
+import { BannerCard } from './ui/BannerCard'
 
 export default function CartPage() {
   // redirect('/empty')
 
   return (
     <div className="mb-72 flex items-center justify-center px-10 sm:px-0">
-      <div className="flex w-[1000px] flex-col">
+      <div className="flex max-w-5xl flex-col">
         <Title title="Carrito" />
 
         <div className="grid grid-cols-1 gap-10 sm:grid-cols-2">
           {/* Cart */}
-          <div className="mt-5 flex flex-col">
-            <span className="text-xl">Agregar más items</span>
+          <div className="mt-5 flex flex-col space-y-5">
+            <BannerCard />
+            <h3 className="text-3xl">Bolsa de compra</h3>
             <Link className="mb-5 underline" href="/">
               Continúa comprando
             </Link>
@@ -30,7 +32,7 @@ export default function CartPage() {
 
             <OrderSummary />
 
-            <div className="mb-2 mt-5 w-full">
+            <div className="mt-5 mb-2 w-full">
               <Link
                 className="btn-primary flex justify-center"
                 href="/checkout/address"

src/app/(shop)/cart/ui/BannerCard.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useSession } from 'next-auth/react'
+import Link from 'next/link'
+
+export const BannerCard = () => {
+  const session = useSession()
+
+  if (session.status === 'authenticated') {
+    return null
+  }
+
+  return (
+    <div className="border-cgrey space-y-1 border p-4">
+      <h2 className="text-orange text-3xl font-semibold">
+        Envío gratuito para miembros.
+      </h2>
+      <p className="text-cgrey">
+        Hazte miembro de Teslo para disfrutar de envíos rápidos y gratuitos.{' '}
+        <Link className="font-semibold" href="/auth/new-account">
+          Únete
+        </Link>{' '}
+        o{' '}
+        <Link className="font-semibold" href="/auth/login">
+          Iniciar sesión
+        </Link>
+      </p>
+    </div>
+  )
+}

src/app/globals.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import "tw-animate-css";
+@import 'tw-animate-css';
 /*
   ---break---
 */
@@ -104,7 +104,7 @@
 }
 
 .btn-primary {
-  @apply rounded-sm bg-blue-600 px-4 py-2 text-white transition-all hover:bg-blue-800;
+  @apply bg-black-1 rounded-sm px-4 py-2 text-white transition-all hover:bg-gray-800;
 }
 
 .btn-secondary {