feature: Add Card and SkillCard components with global style updates

Introduced a reusable Card component and its subcomponents (Header, Footer, Title, etc.) to structure UI elements consistently. Added a SkillCard component leveraging the Card for displaying skills with an icon, title, and description. Updated global styles to enhance border and background consistency.

Author: Y-RyuZU

src/app/globals.css

@@ -70,3 +70,14 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/custom/SkillCard.tsx

@@ -0,0 +1,31 @@
+import { Card, CardContent } from "@/components/ui/card"
+import Image from "next/image"
+
+interface SkillCardProps {
+    title: string
+    description: string
+    iconUrl: string
+}
+
+export default function SkillCard({ title, description, iconUrl }: SkillCardProps) {
+    return (
+        <Card className="w-full max-w-md overflow-hidden transition-shadow hover:shadow-lg">
+            <CardContent className="p-6">
+                <div className="flex items-start gap-2">
+                    <div className="relative h-8 w-8">
+                        <Image
+                            src={iconUrl || "/placeholder.svg"}
+                            alt={`${title} icon`}
+                            width={32}
+                            height={32}
+                            className="object-contain"
+                        />
+                    </div>
+                    <span className="text-sm font-medium text-muted-foreground">{title}</span>
+                </div>
+                <p className="mt-4 text-sm text-muted-foreground">{description}</p>
+            </CardContent>
+        </Card>
+    )
+}
+