Refine image page, add about page

src/components/cards/GlowingBorderWrapper.tsx

@@ -9,6 +9,7 @@ interface GlowingBorderWrapperProps {
   className?: string
   animate?: boolean
   colors?: string[]
+  size?: "default" | "large"
 }
 
 export function GlowingBorderWrapper({
@@ -16,6 +17,7 @@ export function GlowingBorderWrapper({
   className,
   animate = true,
   colors = [],
+  size = "default"
 }: GlowingBorderWrapperProps) {
   const { theme } = useTheme()
 
@@ -25,10 +27,16 @@ export function GlowingBorderWrapper({
       ? "rgba(255,255,255,0.2), rgba(255,255,255,0.05)"
       : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
 
+  const padding = size === "large" ? "p-[6px]" : "p-[2px]"
+  const roundedOuter = size === "large" ? "rounded-xl" : "rounded-lg"
+  const roundedInner = size === "large" ? "rounded-lg" : "rounded-md"
+
   return (
     <div
       className={cn(
-        "relative rounded-lg p-[2px]",
+        "relative",
+        padding,
+        roundedOuter,
         animate && "animate-glow",
         className
       )}
@@ -36,7 +44,7 @@ export function GlowingBorderWrapper({
         background: `linear-gradient(135deg, ${gradientColors})`,
       }}
     >
-      <div className="rounded-md overflow-hidden">{children}</div>
+      <div className={cn("overflow-hidden", roundedInner)}>{children}</div>
     </div>
   )
 }