dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix card height alignment and remove banner border radius

Browse Source 
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>
This commit is contained in:
dwindown
2025-12-25 01:48:28 +07:00
parent 608fae740a
commit 21f337cece
1 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Products.tsx
View File

@@ -9,7 +9,7 @@ import { useCart } from '@/contexts/CartContext';
import { toast } from '@/hooks/use-toast'; import { toast } from '@/hooks/use-toast';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import { formatIDR } from '@/lib/format'; 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'; import { Input } from '@/components/ui/input';
interface Product { interface Product {
@@ -120,7 +120,7 @@ export default function Products() {
{/* Consulting Availability Banner */} {/* Consulting Availability Banner */}
{!loading && consultingSettings?.is_consulting_enabled && ( {!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"> <div className="bg-primary text-primary-foreground p-2 rounded-full shrink-0">
<Video className="w-5 h-5" /> <Video className="w-5 h-5" />
</div> </div>
@@ -208,41 +208,31 @@ export default function Products() {
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
{/* Consulting Card - Only show when enabled */} {/* Consulting Card - Only show when enabled */}
{consultingSettings?.is_consulting_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 */} {/* 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" /> <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"> <CardHeader className="relative pb-4">
<div className="flex justify-between items-start gap-2"> <div className="flex justify-between items-start gap-2 mb-2">
<CardTitle className="text-xl flex items-center gap-2"> <CardTitle className="text-xl flex items-center gap-2 line-clamp-1">
<Video className="w-5 h-5 text-primary" /> <Video className="w-5 h-5 text-primary shrink-0" />
Konsultasi 1-on-1 Konsultasi 1-on-1
</CardTitle> </CardTitle>
<Badge className="bg-primary text-white shadow-sm shrink-0"> <Badge className="bg-primary text-white shadow-sm shrink-0">
Konsultasi Konsultasi
</Badge> </Badge>
</div> </div>
<CardDescription className="text-base"> <CardDescription className="line-clamp-2">
Sesi konsultasi pribadi dengan mentor. Diskusikan masalah spesifik dan dapatkan solusi langsung. Sesi konsultasi pribadi dengan mentor. Diskusikan masalah spesifik dan dapatkan solusi langsung.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="relative"> <CardContent className="relative flex-1 flex flex-col justify-end">
<div className="space-y-3 mb-4"> <div className="flex items-baseline gap-2 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"> <span className="text-3xl font-bold text-primary">
{formatIDR(consultingSettings.consulting_block_price)} {formatIDR(consultingSettings.consulting_block_price)}
</span> </span>
<span className="text-muted-foreground">/ sesi</span> <span className="text-muted-foreground">/ sesi</span>
</div> </div>
</div>
<Link to="/consulting"> <Link to="/consulting">
<Button className="w-full shadow-md hover:shadow-lg transition-shadow"> <Button className="w-full shadow-md hover:shadow-lg transition-shadow">
Booking Jadwal Booking Jadwal
@@ -254,7 +244,7 @@ export default function Products() {
{/* Regular Products */} {/* Regular Products */}
{filteredProducts.map((product) => ( {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"> <CardHeader className="pb-4">
<div className="flex justify-between items-start gap-2 mb-2"> <div className="flex justify-between items-start gap-2 mb-2">
<CardTitle className="text-xl line-clamp-1">{product.title}</CardTitle> <CardTitle className="text-xl line-clamp-1">{product.title}</CardTitle>
@@ -266,7 +256,7 @@ export default function Products() {
{stripHtml(product.description)} {stripHtml(product.description)}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="flex-1 flex flex-col justify-end">
<div className="flex items-baseline gap-2 mb-4"> <div className="flex items-baseline gap-2 mb-4">
{product.sale_price ? ( {product.sale_price ? (
<> <>