@dailyautomations/ui 1.0.1 → 1.2.0

package/examples/home-page.tsx

@@ -0,0 +1,321 @@
+import React from 'react';
+import { Button } from '../src/components/common/button';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../src/components/common/card';
+import { Input } from '../src/components/common/input';
+import { Badge } from '../src/components/common/badge';
+
+/**
+ * Daily X Homepage Template
+ * Dark theme with purple (#8B5CF6) and orange (#F97316) accents
+ * Per handoff document specifications
+ */
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-[#0F0F14] text-white font-['Inter',sans-serif]">
+      {/* Navigation */}
+      <nav className="border-b border-zinc-800 bg-[#0F0F14]/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">
+                <span className="text-white font-extrabold text-sm">dX</span>
+              </div>
+              <span className="font-bold text-white 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>
+              <Button variant="ghost" size="sm">Sign In</Button>
+              <Button size="sm">Get Started</Button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* 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="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">
+              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">
+                Daily Workflows
+              </span>
+            </h1>
+            <p className="text-xl md:text-2xl text-zinc-400 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">
+              <Button size="lg" className="text-base">
+                Start Free Trial
+              </Button>
+              <Button size="lg" variant="outline" className="text-base">
+                Watch Demo
+              </Button>
+            </div>
+          </div>
+
+          {/* Product Pills */}
+          <div className="mt-20 flex flex-wrap justify-center gap-3">
+            {[
+              { name: 'dailyreach.ai', desc: 'LinkedIn Coordination' },
+              { name: 'dailyseo.ai', desc: 'SEO Automation' },
+              { name: 'dailydashboards.ai', desc: 'Business Intelligence' },
+              { name: 'dailyscrape.ai', desc: 'Data Extraction' },
+              { name: 'dailycoverage.ai', desc: 'Content Generation' },
+            ].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"
+              >
+                <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>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section id="features" className="py-24 px-4 sm:px-6 lg:px-8 bg-zinc-900/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">
+              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">
+              <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">
+                    <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">
+                  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">
+              <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">
+                    <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">
+                  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">
+              <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">
+                    <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">
+                  Changes propagate instantly across all devices. Conflict-free collaboration built in.
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* Product Showcase */}
+      <section id="products" className="py-24 px-4 sm:px-6 lg:px-8">
+        <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">
+                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">
+                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">
+                {[
+                  'AI-powered content recommendations',
+                  'Team coordination dashboard',
+                  '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">
+                        <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>
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+              <Button size="lg">
+                Try dailyreach.ai Free
+              </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="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">
+                        <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>
+                  </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>
+          </div>
+        </div>
+      </section>
+
+      {/* Social Proof */}
+      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-zinc-900/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">
+                <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>
+            ))}
+          </div>
+          <blockquote className="text-2xl md:text-3xl font-medium mb-8 leading-relaxed">
+            "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">
+              <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>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 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="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">
+            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"
+            />
+            <Button size="lg" className="whitespace-nowrap h-12">
+              Get Started
+            </Button>
+          </div>
+          <p className="text-sm text-zinc-500 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">
+        <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">
+                  <span className="text-white font-extrabold text-xs">dX</span>
+                </div>
+                <span className="font-bold text-white">daily x</span>
+              </div>
+              <p className="text-sm text-zinc-500 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>
+              </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>
+              </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>
+              </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="flex gap-6">
+              <a href="#" className="text-zinc-600 hover:text-purple-400 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">
+                <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">
+                <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" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/examples/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Daily Platform - Home Page Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/main.tsx"></script>
+</body>
+</html>

package/examples/main.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom/client'
+import './styles.css'
+
+// Import example pages
+import { DashboardPage } from './pages/DashboardPage'
+import { ListPage, ListPageEmpty } from './pages/ListPage'
+import { LoginPage } from './pages/LoginPage'
+import { SignupPage } from './pages/SignupPage'
+import { SettingsPage } from './pages/SettingsPage'
+import { OnboardingPage } from './pages/OnboardingPage'
+import { BlogPage } from './pages/BlogPage'
+import { ContactPage } from './pages/ContactPage'
+import { AboutPage } from './pages/AboutPage'
+import { PricingPage } from './pages/PricingPage'
+import HomePage from './home-page'
+
+type PageKey = 'home' | 'about' | 'pricing' | 'blog' | 'contact' | 'dashboard' | 'list' | 'list-empty' | 'login' | 'signup' | 'settings' | 'onboarding'
+
+const pages: Record<PageKey, { label: string; component: React.ComponentType }> = {
+  home: { label: 'Home (Marketing)', component: HomePage },
+  about: { label: 'About Us', component: AboutPage },
+  pricing: { label: 'Pricing', component: PricingPage },
+  blog: { label: 'Blog', component: BlogPage },
+  contact: { label: 'Contact', component: ContactPage },
+  dashboard: { label: 'Dashboard', component: DashboardPage },
+  list: { label: 'List Page', component: ListPage },
+  'list-empty': { label: 'List (Empty State)', component: ListPageEmpty },
+  login: { label: 'Login', component: LoginPage },
+  signup: { label: 'Sign Up', component: SignupPage },
+  settings: { label: 'Settings', component: SettingsPage },
+  onboarding: { label: 'Onboarding', component: OnboardingPage },
+}
+
+function App() {
+  const [currentPage, setCurrentPage] = useState<PageKey>('home')
+  const [navOpen, setNavOpen] = useState(true)
+
+  const CurrentComponent = pages[currentPage].component
+
+  return (
+    <div className="min-h-screen bg-[#0F0F14]">
+      {/* 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">
+          <button
+            onClick={() => setNavOpen(!navOpen)}
+            className="w-full px-4 py-3 flex items-center justify-between text-white hover:bg-zinc-800 transition-colors"
+          >
+            <span className="font-semibold text-sm">
+              {navOpen ? 'Page Examples' : '☰'}
+            </span>
+            {navOpen && (
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            )}
+          </button>
+
+          {navOpen && (
+            <nav className="border-t border-zinc-800">
+              {(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'
+                  }`}
+                >
+                  {pages[key].label}
+                </button>
+              ))}
+            </nav>
+          )}
+        </div>
+      </div>
+
+      {/* Page Content */}
+      <CurrentComponent />
+    </div>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)