@dailyautomations/ui 1.2.0 → 1.4.1

package/examples/home-page.tsx

@@ -6,26 +6,26 @@ import { Badge } from '../src/components/common/badge';
 
 /**
  * Daily X Homepage Template
- * Dark theme with purple (#8B5CF6) and orange (#F97316) accents
- * Per handoff document specifications
+ * Dark theme with purple primary and configurable accent colors
+ * Uses CSS variables for theme switching support
  */
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-[#0F0F14] text-white font-['Inter',sans-serif]">
+    <div className="min-h-screen bg-background text-foreground font-['Inter',sans-serif]">
       {/* Navigation */}
-      <nav className="border-b border-zinc-800 bg-[#0F0F14]/90 backdrop-blur-md sticky top-0 z-50">
+      <nav className="border-b border-border bg-background/90 backdrop-blur-md sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center gap-3">
-              <div className="w-9 h-9 bg-gradient-to-br from-purple-500 to-orange-500 rounded-lg flex items-center justify-center">
+              <div className="w-9 h-9 bg-gradient-to-br from-primary to-accent rounded-lg flex items-center justify-center">
                 <span className="text-white font-extrabold text-sm">dX</span>
               </div>
-              <span className="font-bold text-white text-lg tracking-tight">daily x</span>
+              <span className="font-bold text-foreground text-lg tracking-tight">daily x</span>
             </div>
             <div className="hidden md:flex items-center gap-8">
-              <a href="#products" className="text-sm text-zinc-400 hover:text-white transition-colors">Products</a>
-              <a href="#features" className="text-sm text-zinc-400 hover:text-white transition-colors">Features</a>
-              <a href="#pricing" className="text-sm text-zinc-400 hover:text-white transition-colors">Pricing</a>
+              <a href="#products" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Products</a>
+              <a href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Features</a>
+              <a href="#pricing" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Pricing</a>
               <Button variant="ghost" size="sm">Sign In</Button>
               <Button size="sm">Get Started</Button>
             </div>
@@ -36,21 +36,21 @@ export default function HomePage() {
       {/* Hero Section */}
       <section className="pt-24 pb-32 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
         {/* Background gradient orbs */}
-        <div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl" />
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
 
         <div className="max-w-7xl mx-auto relative">
           <div className="text-center max-w-4xl mx-auto">
-            <Badge className="mb-8 bg-purple-500/10 text-purple-400 border-purple-500/30 hover:bg-purple-500/20">
+            <Badge className="mb-8 bg-primary/10 text-primary border-primary/30 hover:bg-primary/20">
               AI-Powered Automation Suite
             </Badge>
             <h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-8 leading-[1.1]">
               Automate Your
-              <span className="block bg-gradient-to-r from-purple-400 via-purple-500 to-orange-500 bg-clip-text text-transparent">
+              <span className="block bg-gradient-to-r from-primary via-primary to-accent bg-clip-text text-transparent">
                 Daily Workflows
               </span>
             </h1>
-            <p className="text-xl md:text-2xl text-zinc-400 mb-12 leading-relaxed max-w-2xl mx-auto">
+            <p className="text-xl md:text-2xl text-muted-foreground mb-12 leading-relaxed max-w-2xl mx-auto">
               Five intelligent tools that transform how teams work. From LinkedIn coordination to SEO automation—powered by AI that learns your patterns.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
@@ -74,10 +74,10 @@ export default function HomePage() {
             ].map((product) => (
               <div
                 key={product.name}
-                className="px-4 py-2 bg-zinc-900 border border-zinc-800 rounded-full text-sm hover:border-purple-500/50 hover:bg-zinc-800 transition-all cursor-pointer group"
+                className="px-4 py-2 bg-card border border-border rounded-full text-sm hover:border-primary/50 hover:bg-muted transition-all cursor-pointer group"
               >
-                <span className="text-purple-400 font-semibold group-hover:text-purple-300">{product.name}</span>
-                <span className="text-zinc-500 ml-2">{product.desc}</span>
+                <span className="text-accent font-semibold group-hover:text-accent">{product.name}</span>
+                <span className="text-muted-foreground ml-2">{product.desc}</span>
               </div>
             ))}
           </div>
@@ -85,55 +85,55 @@ export default function HomePage() {
       </section>
 
       {/* Features Grid */}
-      <section id="features" className="py-24 px-4 sm:px-6 lg:px-8 bg-zinc-900/50">
+      <section id="features" className="py-24 px-4 sm:px-6 lg:px-8 bg-card/50">
         <div className="max-w-7xl mx-auto">
           <div className="text-center mb-16">
             <h2 className="text-3xl md:text-4xl font-extrabold mb-4">
               Built for Modern Teams
             </h2>
-            <p className="text-lg text-zinc-400 max-w-2xl mx-auto">
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
               AI-driven tools designed to eliminate repetitive work and amplify your impact
             </p>
           </div>
 
           <div className="grid md:grid-cols-3 gap-6">
-            <Card className="bg-zinc-900 border-zinc-800 hover:border-purple-500/30 transition-colors group">
+            <Card className="bg-card border-border hover:border-primary/30 transition-colors group">
               <CardHeader>
-                <div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-500/20 transition-colors">
-                  <svg className="w-6 h-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                  <svg className="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                   </svg>
                 </div>
-                <CardTitle className="text-xl text-white">Intelligent Memory</CardTitle>
-                <CardDescription className="text-base text-zinc-400">
+                <CardTitle className="text-xl text-foreground">Intelligent Memory</CardTitle>
+                <CardDescription className="text-base text-muted-foreground">
                   AI that learns from your work patterns and surfaces the right information exactly when you need it.
                 </CardDescription>
               </CardHeader>
             </Card>
 
-            <Card className="bg-zinc-900 border-zinc-800 hover:border-orange-500/30 transition-colors group">
+            <Card className="bg-card border-border hover:border-accent/30 transition-colors group">
               <CardHeader>
-                <div className="w-12 h-12 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-500/20 transition-colors">
-                  <svg className="w-6 h-6 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <div className="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-accent/20 transition-colors">
+                  <svg className="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                 </div>
-                <CardTitle className="text-xl text-white">Lightning Fast</CardTitle>
-                <CardDescription className="text-base text-zinc-400">
+                <CardTitle className="text-xl text-foreground">Lightning Fast</CardTitle>
+                <CardDescription className="text-base text-muted-foreground">
                   Sub-2-second load times. Lighthouse scores above 90. Optimized for speed at every layer.
                 </CardDescription>
               </CardHeader>
             </Card>
 
-            <Card className="bg-zinc-900 border-zinc-800 hover:border-purple-500/30 transition-colors group">
+            <Card className="bg-card border-border hover:border-primary/30 transition-colors group">
               <CardHeader>
-                <div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-500/20 transition-colors">
-                  <svg className="w-6 h-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                  <svg className="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                   </svg>
                 </div>
-                <CardTitle className="text-xl text-white">Real-time Sync</CardTitle>
-                <CardDescription className="text-base text-zinc-400">
+                <CardTitle className="text-xl text-foreground">Real-time Sync</CardTitle>
+                <CardDescription className="text-base text-muted-foreground">
                   Changes propagate instantly across all devices. Conflict-free collaboration built in.
                 </CardDescription>
               </CardHeader>
@@ -147,13 +147,13 @@ export default function HomePage() {
         <div className="max-w-7xl mx-auto">
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <div>
-              <Badge className="mb-6 bg-orange-500/10 text-orange-400 border-orange-500/30">
+              <Badge className="mb-6 bg-accent/10 text-accent border-accent/30">
                 Featured Product
               </Badge>
               <h2 className="text-4xl md:text-5xl font-extrabold mb-6">
                 dailyreach.ai
               </h2>
-              <p className="text-xl text-zinc-400 mb-8 leading-relaxed">
+              <p className="text-xl text-muted-foreground mb-8 leading-relaxed">
                 Coordinate your team's LinkedIn presence with AI-powered content recommendations, optimal posting times, and engagement analytics.
               </p>
               <ul className="space-y-4 mb-8">
@@ -163,9 +163,9 @@ export default function HomePage() {
                   'Automated scheduling',
                   'Engagement analytics',
                 ].map((feature) => (
-                  <li key={feature} className="flex items-center gap-3 text-zinc-300">
-                    <div className="w-5 h-5 bg-purple-500/20 rounded-full flex items-center justify-center">
-                      <svg className="w-3 h-3 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
+                  <li key={feature} className="flex items-center gap-3 text-foreground/80">
+                    <div className="w-5 h-5 bg-primary/20 rounded-full flex items-center justify-center">
+                      <svg className="w-3 h-3 text-primary" fill="currentColor" viewBox="0 0 20 20">
                         <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                       </svg>
                     </div>
@@ -178,31 +178,31 @@ export default function HomePage() {
               </Button>
             </div>
             <div className="relative">
-              <div className="rounded-2xl border border-zinc-800 bg-zinc-900 overflow-hidden shadow-2xl">
-                <div className="aspect-[4/3] bg-gradient-to-br from-purple-500/5 to-orange-500/5 flex items-center justify-center">
+              <div className="rounded-2xl border border-border bg-card overflow-hidden shadow-2xl">
+                <div className="aspect-[4/3] bg-gradient-to-br from-primary/5 to-accent/5 flex items-center justify-center">
                   <div className="text-center">
-                    <div className="w-20 h-20 bg-gradient-to-br from-purple-500/20 to-orange-500/20 rounded-2xl mx-auto mb-4 flex items-center justify-center">
-                      <svg className="w-10 h-10 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div className="w-20 h-20 bg-gradient-to-br from-primary/20 to-accent/20 rounded-2xl mx-auto mb-4 flex items-center justify-center">
+                      <svg className="w-10 h-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                       </svg>
                     </div>
-                    <p className="text-zinc-500 text-sm">Product Screenshot</p>
+                    <p className="text-muted-foreground text-sm">Product Screenshot</p>
                   </div>
                 </div>
               </div>
               {/* Floating accent */}
-              <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-orange-500/10 rounded-full blur-2xl" />
+              <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-accent/10 rounded-full blur-2xl" />
             </div>
           </div>
         </div>
       </section>
 
       {/* Social Proof */}
-      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-zinc-900/50">
+      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-card/50">
         <div className="max-w-4xl mx-auto text-center">
           <div className="inline-flex items-center gap-1 mb-8">
             {[...Array(5)].map((_, i) => (
-              <svg key={i} className="w-5 h-5 text-orange-400" fill="currentColor" viewBox="0 0 20 20">
+              <svg key={i} className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
               </svg>
             ))}
@@ -211,12 +211,12 @@ export default function HomePage() {
             "Daily X cut our context switching by 60%. It's like having a second brain for the entire team."
           </blockquote>
           <div className="flex items-center justify-center gap-4">
-            <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-orange-500 rounded-full flex items-center justify-center">
+            <div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center">
               <span className="text-white font-semibold">SJ</span>
             </div>
             <div className="text-left">
-              <p className="font-semibold text-white">Sarah Johnson</p>
-              <p className="text-sm text-zinc-500">Head of Engineering, TechCorp</p>
+              <p className="font-semibold text-foreground">Sarah Johnson</p>
+              <p className="text-sm text-muted-foreground">Head of Engineering, TechCorp</p>
             </div>
           </div>
         </div>
@@ -224,89 +224,89 @@ export default function HomePage() {
 
       {/* CTA Section */}
       <section className="py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-orange-500/10" />
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-accent/10" />
         <div className="max-w-4xl mx-auto text-center relative">
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-6">
             Ready to transform your workflow?
           </h2>
-          <p className="text-xl text-zinc-400 mb-10">
+          <p className="text-xl text-muted-foreground mb-10">
             Join teams who've automated their daily work with AI.
           </p>
           <div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
             <Input
               type="email"
               placeholder="Enter your email"
-              className="bg-zinc-900 border-zinc-700 text-white placeholder:text-zinc-500 h-12"
+              className="bg-card border-border text-foreground placeholder:text-muted-foreground h-12"
             />
             <Button size="lg" className="whitespace-nowrap h-12">
               Get Started
             </Button>
           </div>
-          <p className="text-sm text-zinc-500 mt-4">
+          <p className="text-sm text-muted-foreground mt-4">
             No credit card required • 14-day free trial
           </p>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="bg-zinc-950 border-t border-zinc-800 py-12 px-4 sm:px-6 lg:px-8">
+      <footer className="bg-background border-t border-border py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-7xl mx-auto">
           <div className="grid md:grid-cols-5 gap-8 mb-12">
             <div className="md:col-span-2">
               <div className="flex items-center gap-3 mb-4">
-                <div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-orange-500 rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-lg flex items-center justify-center">
                   <span className="text-white font-extrabold text-xs">dX</span>
                 </div>
-                <span className="font-bold text-white">daily x</span>
+                <span className="font-bold text-foreground">daily x</span>
               </div>
-              <p className="text-sm text-zinc-500 max-w-xs">
+              <p className="text-sm text-muted-foreground max-w-xs">
                 AI-powered automation suite for modern teams. Transform how you work, one daily task at a time.
               </p>
             </div>
             <div>
-              <h3 className="font-semibold text-white mb-4">Products</h3>
-              <ul className="space-y-2 text-sm text-zinc-500">
-                <li><a href="#" className="hover:text-purple-400 transition-colors">dailyreach.ai</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">dailyseo.ai</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">dailydashboards.ai</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">dailyscrape.ai</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">dailycoverage.ai</a></li>
+              <h3 className="font-semibold text-foreground mb-4">Products</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li><a href="#" className="hover:text-primary transition-colors">dailyreach.ai</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">dailyseo.ai</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">dailydashboards.ai</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">dailyscrape.ai</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">dailycoverage.ai</a></li>
               </ul>
             </div>
             <div>
-              <h3 className="font-semibold text-white mb-4">Company</h3>
-              <ul className="space-y-2 text-sm text-zinc-500">
-                <li><a href="#" className="hover:text-purple-400 transition-colors">About</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">Blog</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">Careers</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">Contact</a></li>
+              <h3 className="font-semibold text-foreground mb-4">Company</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li><a href="#" className="hover:text-primary transition-colors">About</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">Blog</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">Careers</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">Contact</a></li>
               </ul>
             </div>
             <div>
-              <h3 className="font-semibold text-white mb-4">Legal</h3>
-              <ul className="space-y-2 text-sm text-zinc-500">
-                <li><a href="#" className="hover:text-purple-400 transition-colors">Privacy</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">Terms</a></li>
-                <li><a href="#" className="hover:text-purple-400 transition-colors">Security</a></li>
+              <h3 className="font-semibold text-foreground mb-4">Legal</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li><a href="#" className="hover:text-primary transition-colors">Privacy</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">Terms</a></li>
+                <li><a href="#" className="hover:text-primary transition-colors">Security</a></li>
               </ul>
             </div>
           </div>
-          <div className="border-t border-zinc-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="text-sm text-zinc-600">© 2026 Daily X. All rights reserved.</p>
+          <div className="border-t border-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+            <p className="text-sm text-muted-foreground">© 2026 Daily X. All rights reserved.</p>
             <div className="flex gap-6">
-              <a href="#" className="text-zinc-600 hover:text-purple-400 transition-colors">
+              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
                 <span className="sr-only">Twitter</span>
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                 </svg>
               </a>
-              <a href="#" className="text-zinc-600 hover:text-purple-400 transition-colors">
+              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
                 <span className="sr-only">GitHub</span>
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                 </svg>
               </a>
-              <a href="#" className="text-zinc-600 hover:text-purple-400 transition-colors">
+              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
                 <span className="sr-only">LinkedIn</span>
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />

package/examples/main.tsx

@@ -1,7 +1,10 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import './styles.css'
 
+// Import theme system
+import { ThemeTester, initializeTheme } from '../src'
+
 // Import example pages
 import { DashboardPage } from './pages/DashboardPage'
 import { ListPage, ListPageEmpty } from './pages/ListPage'
@@ -13,12 +16,16 @@ import { BlogPage } from './pages/BlogPage'
 import { ContactPage } from './pages/ContactPage'
 import { AboutPage } from './pages/AboutPage'
 import { PricingPage } from './pages/PricingPage'
+import { LandingPage } from './pages/LandingPage'
+import { ComponentsPage } from './pages/ComponentsPage'
 import HomePage from './home-page'
 
-type PageKey = 'home' | 'about' | 'pricing' | 'blog' | 'contact' | 'dashboard' | 'list' | 'list-empty' | 'login' | 'signup' | 'settings' | 'onboarding'
+type PageKey = 'components' | 'home' | 'landing' | 'about' | 'pricing' | 'blog' | 'contact' | 'dashboard' | 'list' | 'list-empty' | 'login' | 'signup' | 'settings' | 'onboarding'
 
 const pages: Record<PageKey, { label: string; component: React.ComponentType }> = {
+  components: { label: 'Components', component: ComponentsPage },
   home: { label: 'Home (Marketing)', component: HomePage },
+  landing: { label: 'Landing (Conversion)', component: LandingPage },
   about: { label: 'About Us', component: AboutPage },
   pricing: { label: 'Pricing', component: PricingPage },
   blog: { label: 'Blog', component: BlogPage },
@@ -33,19 +40,24 @@ const pages: Record<PageKey, { label: string; component: React.ComponentType }>
 }
 
 function App() {
-  const [currentPage, setCurrentPage] = useState<PageKey>('home')
+  const [currentPage, setCurrentPage] = useState<PageKey>('components')
   const [navOpen, setNavOpen] = useState(true)
 
+  // Initialize theme on mount
+  useEffect(() => {
+    initializeTheme()
+  }, [])
+
   const CurrentComponent = pages[currentPage].component
 
   return (
-    <div className="min-h-screen bg-[#0F0F14]">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Floating Nav */}
       <div className={`fixed top-4 left-4 z-50 transition-all ${navOpen ? 'w-56' : 'w-auto'}`}>
-        <div className="bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl overflow-hidden">
+        <div className="bg-card border border-border rounded-lg shadow-xl overflow-hidden">
           <button
             onClick={() => setNavOpen(!navOpen)}
-            className="w-full px-4 py-3 flex items-center justify-between text-white hover:bg-zinc-800 transition-colors"
+            className="w-full px-4 py-3 flex items-center justify-between text-foreground hover:bg-muted transition-colors"
           >
             <span className="font-semibold text-sm">
               {navOpen ? 'Page Examples' : '☰'}
@@ -58,15 +70,15 @@ function App() {
           </button>
 
           {navOpen && (
-            <nav className="border-t border-zinc-800">
+            <nav className="border-t border-border">
               {(Object.keys(pages) as PageKey[]).map((key) => (
                 <button
                   key={key}
                   onClick={() => setCurrentPage(key)}
                   className={`w-full px-4 py-2.5 text-left text-sm transition-colors ${
                     currentPage === key
-                      ? 'bg-purple-500/20 text-purple-400 border-l-2 border-purple-500'
-                      : 'text-zinc-400 hover:bg-zinc-800 hover:text-white border-l-2 border-transparent'
+                      ? 'bg-accent/20 text-accent border-l-2 border-accent'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground border-l-2 border-transparent'
                   }`}
                 >
                   {pages[key].label}
@@ -79,6 +91,9 @@ function App() {
 
       {/* Page Content */}
       <CurrentComponent />
+
+      {/* Theme Tester - Floating button in bottom-right */}
+      <ThemeTester />
     </div>
   )
 }