feat: enhance images and button styles and layout across checkout and…

… tasting components
franco14lorenzo · Nov 17, 2024 · 1e52ca3 · 1e52ca3
1 parent 9140c8b
commit 1e52ca3
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 19 deletions.
diff --git a/src/app/(store)/checkout/page.tsx b/src/app/(store)/checkout/page.tsx
@@ -51,7 +51,7 @@ export default async function CheckoutPage() {
               ¡Agrega algunos artículos para comenzar!
             </p>
             <Link
-              className="mt-4 max-w-fit rounded-full border border-white bg-black px-4 py-2 font-medium text-white hover:bg-opacity-80"
+              className="mt-4 h-10 max-w-fit rounded-full border border-white bg-black px-4 py-2 font-medium text-white hover:bg-opacity-80"
               href="/degustaciones"
             >
               Descubre nuestras degustaciones

diff --git a/src/app/(store)/components/home/help.tsx b/src/app/(store)/components/home/help.tsx
@@ -11,7 +11,7 @@ function Help() {
         </h3>
         <div className="flex max-w-md flex-col items-center justify-center gap-2 md:flex-row md:justify-between">
           <Link
-            className="w-full gap-2 rounded-full border border-primary bg-transparent px-4 py-2 text-sm font-medium text-primary hover:bg-opacity-80 md:w-fit"
+            className="w-full min-w-48 gap-2 rounded-full border border-primary bg-transparent px-4 py-2 text-sm font-medium text-primary hover:bg-opacity-80 md:w-fit"
             href="/faqs"
           >
             <HelpCircle className="mr-2 inline size-5" />
@@ -20,7 +20,7 @@ function Help() {
           </Link>
 
           <Link
-            className="w-full gap-2 rounded-full border border-white bg-black px-4 py-2 text-sm font-medium text-white hover:bg-opacity-80 md:w-fit"
+            className="w-full min-w-48 gap-2 rounded-full border border-white bg-black px-4 py-2 text-sm font-medium text-white hover:bg-opacity-80 md:w-fit"
             href="/contacto"
           >
             <MessageCircle className="mr-2 inline size-5" />

diff --git a/src/app/(store)/components/home/hero.tsx b/src/app/(store)/components/home/hero.tsx
@@ -17,11 +17,11 @@ const Hero = () => {
           seleccionadas
         </p>
         <Link
-          className="mt-4 max-w-fit rounded-full border border-white bg-black px-4 py-2 font-medium text-white hover:bg-opacity-80"
+          className="mt-4 flex h-12 min-w-48 max-w-fit items-center justify-center gap-2 rounded-full border border-white bg-black px-4 font-medium text-white hover:bg-opacity-80"
           href="/degustaciones"
         >
-          Descubre nuestras catas
-          <ArrowRight className="ml-2 inline size-5" />
+          <span>Descubre nuestras catas</span>
+          <ArrowRight className="inline size-5" />
         </Link>
       </div>
     </section>

diff --git a/src/app/(store)/components/layout/header/cart/index.tsx b/src/app/(store)/components/layout/header/cart/index.tsx
@@ -104,7 +104,7 @@ const Cart = () => {
                       ¡Agrega algunos artículos para comenzar!
                     </p>
                     <Link
-                      className="mt-4 max-w-fit rounded-full border border-white bg-black px-4 py-2 font-medium text-white hover:bg-opacity-80"
+                      className="mt-4 h-10 max-w-fit rounded-full border border-white bg-black px-4 py-2 font-medium text-white hover:bg-opacity-80"
                       href="/degustaciones"
                       onClick={() => setDialogOpen(null)}
                     >

diff --git a/src/app/(store)/degustaciones/[slug]/components/actions.tsx b/src/app/(store)/degustaciones/[slug]/components/actions.tsx
@@ -31,7 +31,7 @@ const Actions = ({
   const totalDesiredQuantity = currentQuantityInCart + quantity
 
   return (
-    <section className="grid w-full grid-cols-1 gap-4 self-start py-2 md:w-72">
+    <section className="grid w-full grid-cols-1 gap-2 self-start py-3 md:w-72">
       <div className="flex w-full justify-between">
         <p className="text-xl font-bold leading-10">
           {formatCurrency(item.price)}{' '}
@@ -65,7 +65,7 @@ const Actions = ({
       </div>
 
       <Button
-        className="h-10 w-full rounded-full bg-black py-3 text-white hover:opacity-80"
+        className="h-12 w-full rounded-full bg-black py-3 text-white hover:opacity-80"
         disabled={item.stock <= 0 || totalDesiredQuantity > item.stock}
         onClick={() => {
           addItem({

diff --git a/src/app/(store)/degustaciones/[slug]/page.tsx b/src/app/(store)/degustaciones/[slug]/page.tsx
@@ -65,9 +65,11 @@ export default async function TastingDetailsPage({
           <Image
             src={getImageUrl(data.image as string)}
             priority
-            width={624}
-            height={624}
+            /*             width={624}
+            height={624} */
             alt={data.name}
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
           />
         </div>
 

diff --git a/src/app/(store)/degustaciones/components/tastings.tsx b/src/app/(store)/degustaciones/components/tastings.tsx
@@ -49,14 +49,16 @@ export const Tasting = ({
       href={`/degustaciones/${slug}`}
     >
       <article className="flex flex-col items-start justify-start gap-4 overflow-hidden rounded-lg p-4 text-left text-sm">
-        <Image
-          className="overflow-hidden rounded-xl bg-neutral-100"
-          src={getImageUrl(image as string)}
-          priority={index === 0}
-          width={368}
-          height={368}
-          alt={name}
-        />
+        <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-neutral-100">
+          <Image
+            className="overflow-hidden rounded-xl bg-neutral-100"
+            src={getImageUrl(image as string)}
+            priority={index === 0}
+            fill
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+            alt={name}
+          />
+        </div>
 
         <section className="flex flex-col items-start justify-start gap-2">
           <h2 className="mb-2 mt-4 text-center font-kalnia text-2xl font-bold text-zinc-950">