@dailyautomations/ui 1.0.1 → 1.2.0

package/examples/pages/ContactPage.tsx

@@ -0,0 +1,328 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../src/components/common/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../src/components/common/card"
+import { Input } from "../../src/components/common/input"
+import { Label } from "../../src/components/common/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../src/components/ui/select"
+import { cn } from "../../src/utils/cn"
+
+// Icons
+const Icons = {
+  mail: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+    </svg>
+  ),
+  phone: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+    </svg>
+  ),
+  location: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+    </svg>
+  ),
+  clock: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+  ),
+  chat: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+    </svg>
+  ),
+  twitter: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+    </svg>
+  ),
+  linkedin: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+    </svg>
+  ),
+}
+
+// Contact Method Card
+interface ContactMethodProps {
+  icon: React.ReactNode
+  title: string
+  description: string
+  action: string
+  href: string
+}
+
+function ContactMethod({ icon, title, description, action, href }: ContactMethodProps) {
+  return (
+    <Card className="group hover:border-purple-500/50 transition-colors">
+      <CardContent className="p-6 text-center">
+        <div className="w-12 h-12 rounded-full bg-purple-500/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-500/20 transition-colors">
+          {icon}
+        </div>
+        <h3 className="font-semibold mb-1">{title}</h3>
+        <p className="text-sm text-zinc-400 mb-3">{description}</p>
+        <a href={href} className="text-sm text-purple-400 hover:text-purple-300 font-medium">
+          {action}
+        </a>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Office Location Card
+interface OfficeProps {
+  city: string
+  address: string[]
+  timezone: string
+}
+
+function OfficeCard({ city, address, timezone }: OfficeProps) {
+  return (
+    <div className="p-5 rounded-lg bg-zinc-900/50 border border-zinc-800">
+      <h4 className="font-semibold mb-2">{city}</h4>
+      <div className="text-sm text-zinc-400 space-y-1 mb-3">
+        {address.map((line, i) => (
+          <p key={i}>{line}</p>
+        ))}
+      </div>
+      <p className="text-xs text-zinc-500 flex items-center gap-1">
+        <Icons.clock className="w-3 h-3" />
+        {timezone}
+      </p>
+    </div>
+  )
+}
+
+export function ContactPage() {
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const [submitted, setSubmitted] = React.useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsSubmitting(false)
+    setSubmitted(true)
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0F0F14] text-white">
+      {/* Header */}
+      <header className="border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+          <span className="text-xl font-bold">
+            <span className="text-purple-500">daily</span>
+            <span className="text-orange-500">X</span>
+          </span>
+          <nav className="hidden md:flex items-center gap-6">
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Product</a>
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">Pricing</a>
+            <a href="#" className="text-sm text-zinc-400 hover:text-white transition-colors">About</a>
+            <a href="#" className="text-sm text-white font-medium">Contact</a>
+            <Button size="sm">Get Started</Button>
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="py-16 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6 text-center">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+            Get in Touch
+          </h1>
+          <p className="text-xl text-zinc-400 max-w-2xl mx-auto">
+            Have a question or want to learn more? We'd love to hear from you.
+          </p>
+        </div>
+      </section>
+
+      {/* Contact Methods */}
+      <section className="py-12 border-b border-zinc-800">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="grid md:grid-cols-3 gap-6">
+            <ContactMethod
+              icon={<Icons.chat className="w-6 h-6 text-purple-400" />}
+              title="Live Chat"
+              description="Chat with our team in real-time"
+              action="Start a conversation"
+              href="#"
+            />
+            <ContactMethod
+              icon={<Icons.mail className="w-6 h-6 text-purple-400" />}
+              title="Email Us"
+              description="We'll respond within 24 hours"
+              action="hello@dailyx.com"
+              href="mailto:hello@dailyx.com"
+            />
+            <ContactMethod
+              icon={<Icons.phone className="w-6 h-6 text-purple-400" />}
+              title="Call Us"
+              description="Mon-Fri from 9am to 6pm"
+              action="+1 (555) 000-0000"
+              href="tel:+15550000000"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="py-16">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="grid lg:grid-cols-2 gap-12">
+            {/* Contact Form */}
+            <div>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Send us a message</CardTitle>
+                  <CardDescription>
+                    Fill out the form below and we'll get back to you as soon as possible.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {submitted ? (
+                    <div className="text-center py-8">
+                      <div className="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4">
+                        <svg className="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                      </div>
+                      <h3 className="text-lg font-semibold mb-2">Message sent!</h3>
+                      <p className="text-zinc-400 mb-4">
+                        Thanks for reaching out. We'll get back to you within 24 hours.
+                      </p>
+                      <Button variant="outline" onClick={() => setSubmitted(false)}>
+                        Send another message
+                      </Button>
+                    </div>
+                  ) : (
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="space-y-2">
+                          <Label htmlFor="firstName">First name</Label>
+                          <Input id="firstName" placeholder="John" required />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="lastName">Last name</Label>
+                          <Input id="lastName" placeholder="Doe" required />
+                        </div>
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input id="email" type="email" placeholder="john@company.com" required />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="company">Company</Label>
+                        <Input id="company" placeholder="Acme Inc." />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="subject">Subject</Label>
+                        <Select>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select a topic" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="sales">Sales inquiry</SelectItem>
+                            <SelectItem value="support">Technical support</SelectItem>
+                            <SelectItem value="partnership">Partnership</SelectItem>
+                            <SelectItem value="feedback">Product feedback</SelectItem>
+                            <SelectItem value="other">Other</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="message">Message</Label>
+                        <textarea
+                          id="message"
+                          rows={4}
+                          placeholder="Tell us how we can help..."
+                          required
+                          className="w-full px-3 py-2 rounded-md bg-zinc-900 border border-zinc-800 text-sm placeholder:text-zinc-500 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 resize-none"
+                        />
+                      </div>
+
+                      <Button type="submit" className="w-full" loading={isSubmitting}>
+                        Send message
+                      </Button>
+                    </form>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Sidebar */}
+            <div className="space-y-8">
+              {/* Office Locations */}
+              <div>
+                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Icons.location className="w-5 h-5 text-purple-400" />
+                  Our Offices
+                </h3>
+                <div className="space-y-4">
+                  <OfficeCard
+                    city="San Francisco"
+                    address={["123 Market Street", "Suite 400", "San Francisco, CA 94105"]}
+                    timezone="PST (UTC-8)"
+                  />
+                  <OfficeCard
+                    city="New York"
+                    address={["456 Broadway", "Floor 12", "New York, NY 10013"]}
+                    timezone="EST (UTC-5)"
+                  />
+                  <OfficeCard
+                    city="London"
+                    address={["78 Shoreditch High St", "London E1 6JJ", "United Kingdom"]}
+                    timezone="GMT (UTC+0)"
+                  />
+                </div>
+              </div>
+
+              {/* Social */}
+              <div>
+                <h3 className="text-lg font-semibold mb-4">Follow us</h3>
+                <div className="flex gap-3">
+                  <a href="#" className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-zinc-700 transition-colors">
+                    <Icons.twitter className="w-5 h-5" />
+                  </a>
+                  <a href="#" className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-zinc-700 transition-colors">
+                    <Icons.linkedin className="w-5 h-5" />
+                  </a>
+                </div>
+              </div>
+
+              {/* FAQ CTA */}
+              <Card className="bg-gradient-to-br from-purple-900/30 to-orange-900/30 border-0">
+                <CardContent className="p-6">
+                  <h3 className="font-semibold mb-2">Looking for quick answers?</h3>
+                  <p className="text-sm text-zinc-400 mb-4">
+                    Check out our FAQ and documentation for instant help.
+                  </p>
+                  <div className="flex gap-3">
+                    <Button variant="outline" size="sm">View FAQ</Button>
+                    <Button variant="outline" size="sm">Read Docs</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default ContactPage