feat: add businesses logos

app/components/business-section.tsx

@@ -8,6 +8,8 @@ import {
 import { Globe, Instagram, Facebook } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { SiTiktok } from "react-icons/si";
+import vivecoffee from "@/assets/business-logos/vivecoffee.png";
+import aravista from "@/assets/business-logos/aravista.png";
 
 interface Business {
 	_id: string;
@@ -34,69 +36,88 @@ export function BusinessSection({ businesses = [] }: BusinessSectionProps) {
 				<h2 className="text-4xl font-bold text-center mb-16">Businesses</h2>
 
 				<div className="grid md:grid-cols-2 gap-8">
-					{businesses.map((business) => (
+					{businesses.map((business) => {
-						<Card
+						return (
-							key={business._id}
+							<Card
-							className="hover:shadow-lg transition-shadow"
+								key={business._id}
-						>
+								className="hover:shadow-lg transition-shadow"
-							<CardHeader>
+							>
-								<CardTitle className="flex items-center justify-between">
+								<CardHeader>
-									{business.name}
+									<CardTitle className="flex items-center justify-between">
-									<Badge variant="secondary">Est. {business.established}</Badge>
+										{business.name}
-								</CardTitle>
+										<Badge variant="secondary">
-								<div className="text-sm text-foreground mb-1">
+											Est. {business.established}
-									{business.role}
+										</Badge>
-								</div>
+									</CardTitle>
-								<CardDescription className="leading-relaxed">
+									<div className="text-sm text-foreground mb-1">
-									{business.description}
+										{business.role}
-								</CardDescription>
+									</div>
-							</CardHeader>
+									{business.logo && (
-							<CardContent className="space-y-2">
+										<div className="flex justify-center mb-3">
-								<div className="flex gap-3 pt-2">
+											<img
-									{business.websiteUrl && (
+												src={
-										<a
+													business.logo === "vivecoffee"
-											href={business.websiteUrl}
+														? vivecoffee
-											target="_blank"
+														: business.logo === "aravista"
-											rel="noopener noreferrer"
+														? aravista
-											aria-label="Website"
+														: ""
-										>
+												}
-											<Globe className="w-5 h-5 text-blue-500" />
+												alt={`${business.name} logo`}
-										</a>
+												className="w-full max-h-24 object-contain rounded-md shadow"
+											/>
+										</div>
 									)}
-									{business.instagramUrl && (
+									<CardDescription className="leading-relaxed">
-										<a
+										{business.description}
-											href={business.instagramUrl}
+									</CardDescription>
-											target="_blank"
+								</CardHeader>
-											rel="noopener noreferrer"
+								<CardContent className="space-y-2">
-											aria-label="Instagram"
+									<div className="flex gap-3 pt-2">
-										>
+										{business.websiteUrl && (
-											<Instagram className="w-5 h-5 text-pink-500" />
+											<a
-										</a>
+												href={business.websiteUrl}
-									)}
+												target="_blank"
-									{business.facebookUrl && (
+												rel="noopener noreferrer"
-										<a
+												aria-label="Website"
-											href={business.facebookUrl}
+											>
-											target="_blank"
+												<Globe className="w-5 h-5 text-blue-500" />
-											rel="noopener noreferrer"
+											</a>
-											aria-label="Facebook"
+										)}
-										>
+										{business.instagramUrl && (
-											<Facebook className="w-5 h-5 text-blue-700" />
+											<a
-										</a>
+												href={business.instagramUrl}
-									)}
+												target="_blank"
-									{business.tiktokUrl && (
+												rel="noopener noreferrer"
-										<a
+												aria-label="Instagram"
-											href={business.tiktokUrl}
+											>
-											target="_blank"
+												<Instagram className="w-5 h-5 text-pink-500" />
-											rel="noopener noreferrer"
+											</a>
-											aria-label="TikTok"
+										)}
-										>
+										{business.facebookUrl && (
-											<SiTiktok className="w-5 h-5 text-black" />
+											<a
-										</a>
+												href={business.facebookUrl}
-									)}
+												target="_blank"
-								</div>
+												rel="noopener noreferrer"
-							</CardContent>
+												aria-label="Facebook"
-						</Card>
+											>
-					))}
+												<Facebook className="w-5 h-5 text-blue-700" />
+											</a>
+										)}
+										{business.tiktokUrl && (
+											<a
+												href={business.tiktokUrl}
+												target="_blank"
+												rel="noopener noreferrer"
+												aria-label="TikTok"
+											>
+												<SiTiktok className="w-5 h-5 text-black" />
+											</a>
+										)}
+									</div>
+								</CardContent>
+							</Card>
+						);
+					})}
 				</div>
 			</div>
 		</section>

app/data/portfolio.ts

@@ -206,6 +206,7 @@ export const portfolioData = {
 			description:
 				"Vive Coffee is a coffee beans reseller in Brunei Darussalam, offering a range of specialty coffees from all over the world. We focus on quality and sustainability, sourcing our beans from local farmers.",
 			instagramUrl: "https://www.instagram.com/vivecoffee.bn/",
+			logo: "vivecoffee",
 		},
 		{
 			_id: "2",
@@ -218,6 +219,7 @@ export const portfolioData = {
 			instagramUrl: "https://www.instagram.com/aravista.official/",
 			facebookUrl: "https://www.facebook.com/profile.php?id=61576677113507",
 			tiktokUrl: "https://www.tiktok.com/@aravista.official",
+			logo: "aravista",
 		},
 	],
 };