From 21f337cece0eb0bc5add92feb49cb1ef4c3e51bb Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 01:48:28 +0700
Subject: [PATCH] Fix card height alignment and remove banner border radius
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
1. Remove rounded-xl from consulting banner (conflicts with narrow border theme)
2. Make all cards equal height with h-full flex flex-col
3. Simplify consulting card to match product card structure:
   - Remove Clock/Calendar feature icons (made card too tall)
   - Use line-clamp-2 for description (same as products)
   - Add line-clamp-1 to title (same as products)
   - Use flex-1 justify-end on CardContent (same as products)
   - Keep decorative element and gradient background
4. Remove unused Clock and Calendar imports

Result: All cards in the grid now have equal height and aligned bottoms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/Products.tsx | 42 ++++++++++++++++--------------------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
index ece70bd..bae41df 100644
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -9,7 +9,7 @@ import { useCart } from '@/contexts/CartContext';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
 import { formatIDR } from '@/lib/format';
-import { Video, Clock, Calendar, Package, Check, Search, X } from 'lucide-react';
+import { Video, Package, Check, Search, X } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 
 interface Product {
@@ -120,7 +120,7 @@ export default function Products() {
 
         {/* Consulting Availability Banner */}
         {!loading && consultingSettings?.is_consulting_enabled && (
-          <div className="mb-6 p-4 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border-2 border-primary/30 rounded-xl flex items-center gap-3 hover:border-primary/50 transition-colors">
+          <div className="mb-6 p-4 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border-2 border-primary/30 flex items-center gap-3 hover:border-primary/50 transition-colors">
             <div className="bg-primary text-primary-foreground p-2 rounded-full shrink-0">
               <Video className="w-5 h-5" />
             </div>
@@ -208,40 +208,30 @@ export default function Products() {
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
             {/* Consulting Card - Only show when enabled */}
             {consultingSettings?.is_consulting_enabled && (
-              <Card className="border-2 border-primary shadow-md hover:shadow-lg transition-all bg-gradient-to-br from-primary/10 to-primary/5 relative overflow-hidden">
+              <Card className="border-2 border-primary shadow-md hover:shadow-lg transition-all bg-gradient-to-br from-primary/10 to-primary/5 relative overflow-hidden h-full flex flex-col">
                 {/* Decorative element */}
                 <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2" />
 
-                <CardHeader className="relative">
-                  <div className="flex justify-between items-start gap-2">
-                    <CardTitle className="text-xl flex items-center gap-2">
-                      <Video className="w-5 h-5 text-primary" />
+                <CardHeader className="relative pb-4">
+                  <div className="flex justify-between items-start gap-2 mb-2">
+                    <CardTitle className="text-xl flex items-center gap-2 line-clamp-1">
+                      <Video className="w-5 h-5 text-primary shrink-0" />
                       Konsultasi 1-on-1
                     </CardTitle>
                     <Badge className="bg-primary text-white shadow-sm shrink-0">
                       Konsultasi
                     </Badge>
                   </div>
-                  <CardDescription className="text-base">
+                  <CardDescription className="line-clamp-2">
                     Sesi konsultasi pribadi dengan mentor. Diskusikan masalah spesifik dan dapatkan solusi langsung.
                   </CardDescription>
                 </CardHeader>
-                <CardContent className="relative">
-                  <div className="space-y-3 mb-4">
-                    <div className="flex items-center gap-2 text-sm">
-                      <Clock className="w-4 h-4 text-primary" />
-                      <span>{consultingSettings.consulting_block_duration_minutes} menit per sesi</span>
-                    </div>
-                    <div className="flex items-center gap-2 text-sm">
-                      <Calendar className="w-4 h-4 text-primary" />
-                      <span>Pilih jadwal yang tersedia</span>
-                    </div>
-                    <div className="flex items-baseline gap-1 pt-2">
-                      <span className="text-3xl font-bold text-primary">
-                        {formatIDR(consultingSettings.consulting_block_price)}
-                      </span>
-                      <span className="text-muted-foreground">/ sesi</span>
-                    </div>
+                <CardContent className="relative flex-1 flex flex-col justify-end">
+                  <div className="flex items-baseline gap-2 mb-4">
+                    <span className="text-3xl font-bold text-primary">
+                      {formatIDR(consultingSettings.consulting_block_price)}
+                    </span>
+                    <span className="text-muted-foreground">/ sesi</span>
                   </div>
                   <Link to="/consulting">
                     <Button className="w-full shadow-md hover:shadow-lg transition-shadow">
@@ -254,7 +244,7 @@ export default function Products() {
 
             {/* Regular Products */}
             {filteredProducts.map((product) => (
-              <Card key={product.id} className="border-2 border-border shadow-sm hover:shadow-md transition-shadow">
+              <Card key={product.id} className="border-2 border-border shadow-sm hover:shadow-md transition-shadow h-full flex flex-col">
                 <CardHeader className="pb-4">
                   <div className="flex justify-between items-start gap-2 mb-2">
                     <CardTitle className="text-xl line-clamp-1">{product.title}</CardTitle>
@@ -266,7 +256,7 @@ export default function Products() {
                     {stripHtml(product.description)}
                   </CardDescription>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="flex-1 flex flex-col justify-end">
                   <div className="flex items-baseline gap-2 mb-4">
                     {product.sale_price ? (
                       <>