feat: Refactor UI components by extracting Navigation, Footer, LogoMark, and Card; implement responsive design and improve code organization

src/components/ui/Card.tsx

@@ -0,0 +1,23 @@
+import { LucideIcon } from 'lucide-react'
+
+interface CardProps {
+  title: string
+  icon: LucideIcon
+  children: React.ReactNode
+}
+
+export function Card({ title, icon: Icon, children }: CardProps) {
+  return (
+    <div className="card">
+      <div className="flex items-center gap-3">
+        <div className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow">
+          <Icon className="h-5 w-5" />
+        </div>
+        <div className="font-semibold tracking-tight">{title}</div>
+      </div>
+      <div className="mt-3">{children}</div>
+    </div>
+  )
+}
+
+export default Card

src/components/ui/LogoMark.tsx

@@ -0,0 +1,24 @@
+// LogoMark component
+import { motion } from 'framer-motion'
+import { Sparkles } from 'lucide-react'
+
+export function LogoMark() {
+  return (
+    <div className="relative grid h-10 w-10 place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 via-secondary-500 to-secondary-600 shadow-lg shadow-primary-500/20">
+      <motion.div
+        className="absolute inset-0 opacity-60"
+        animate={{
+          background: [
+            "radial-gradient(120px 80px at 20% 20%, rgba(255,255,255,0.4), transparent)",
+            "radial-gradient(120px 80px at 80% 30%, rgba(255,255,255,0.4), transparent)",
+            "radial-gradient(120px 80px at 50% 80%, rgba(255,255,255,0.4), transparent)",
+          ]
+        }}
+        transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+      />
+      <Sparkles className="relative h-6 w-6 text-white drop-shadow" />
+    </div>
+  )
+}
+
+export default LogoMark

src/components/ui/Magnetic.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface MagneticProps {
+  children: React.ReactNode
+}
+
+export function Magnetic({ children }: MagneticProps) {
+  return (
+    <div className="relative">
+      {children}
+    </div>
+  )
+}
+
+export default Magnetic

src/components/ui/SectionHeader.tsx

@@ -0,0 +1,17 @@
+interface SectionHeaderProps {
+  eyebrow?: string
+  title: string
+  subtitle?: string
+}
+
+export function SectionHeader({ eyebrow, title, subtitle }: SectionHeaderProps) {
+  return (
+    <div className="section-header">
+      {eyebrow && <div className="section-eyebrow">{eyebrow}</div>}
+      <h2 className="section-title">{title}</h2>
+      {subtitle && <p className="section-subtitle">{subtitle}</p>}
+    </div>
+  )
+}
+
+export default SectionHeader

src/components/ui/index.tsx

@@ -0,0 +1,11 @@
+// UI Component Exports
+export { LogoMark } from './LogoMark'
+export { Magnetic } from './Magnetic'
+export { SectionHeader } from './SectionHeader'
+export { Card } from './Card'
+
+// Re-export everything
+export * from './LogoMark'
+export * from './Magnetic'
+export * from './SectionHeader'
+export * from './Card'