@rubytech/create-maxy 1.0.0

package/payload/maxy/app/bot/page.tsx

@@ -0,0 +1,373 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import {
+  Home, Wallet, HeartPulse, Briefcase, Users, Plane,
+  Search,
+} from 'lucide-react'
+
+function useReveal() {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          el.classList.add('visible')
+          observer.unobserve(el)
+        }
+      },
+      { threshold: 0.1 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+  return ref
+}
+
+function Section({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  const ref = useReveal()
+  return (
+    <section ref={ref} className={`section reveal ${className}`}>
+      {children}
+    </section>
+  )
+}
+
+const skills = [
+  {
+    name: 'Home',
+    icon: Home,
+    price: '\u00A35',
+    description: 'Coordinates tradespeople, tracks maintenance schedules, manages home insurance renewals, and keeps your household running without you chasing it.',
+  },
+  {
+    name: 'Finance',
+    icon: Wallet,
+    price: '\u00A35',
+    description: 'Catches subscription renewals before they charge, tracks bills and due dates, flags unusual spending, and reminds you about things that need cancelling.',
+  },
+  {
+    name: 'Wellness',
+    icon: HeartPulse,
+    price: '\u00A35',
+    description: 'Manages medication reminders, books and tracks medical appointments, stores health notes, and keeps your family\u2019s wellness information in one place.',
+  },
+  {
+    name: 'Professional',
+    icon: Briefcase,
+    price: '\u00A35',
+    description: 'Handles work admin \u2014 meeting prep, expense tracking, deadline reminders, and email triage so you start each day knowing what actually matters.',
+  },
+  {
+    name: 'Family',
+    icon: Users,
+    price: '\u00A35',
+    description: 'Coordinates schedules across the household, tracks kids\u2019 activities, manages school communications, and makes sure nothing falls through the cracks.',
+  },
+  {
+    name: 'Travel',
+    icon: Plane,
+    price: '\u00A35',
+    description: 'Plans trips, tracks bookings and confirmations, manages itineraries, reminds you about passport renewals, and handles the admin side of getting away.',
+  },
+]
+
+function SkillModal({ skill, onClose }: { skill: typeof skills[number]; onClose: () => void }) {
+  const Icon = skill.icon
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+  return (
+    <div className="skill-modal-backdrop" onClick={onClose}>
+      <div className="skill-modal" onClick={e => e.stopPropagation()}>
+        <button className="skill-modal-close" onClick={onClose} aria-label="Close">&times;</button>
+        <div className="skill-modal-icon"><Icon size={36} strokeWidth={1.5} /></div>
+        <h3 className="skill-modal-name">{skill.name}</h3>
+        <p className="skill-modal-price">{skill.price}</p>
+        <p className="skill-modal-desc">{skill.description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default function ProductPage() {
+  const [activeSkill, setActiveSkill] = useState<string | null>(null)
+  const activeSkillData = skills.find(s => s.name === activeSkill)
+
+  return (
+    <div className="product-page">
+      {/* Hero */}
+      <div className="hero-section">
+        <div className="hero">
+          <img src="/brand/maxy-black.png" alt="Maxy" className="hero-logo" />
+          <h1 className="hero-tagline">No Stress. Quiet Life.</h1>
+          <p className="hero-description">
+            Maxy is a personal AI assistant that lives in your home.
+            It handles the stress &mdash; bills, appointments, coordination, the
+            endless admin &mdash; so you can be present instead of managing.
+          </p>
+          <p className="hero-description" style={{ marginBottom: 0, fontSize: '15px' }}>
+            Your data never leaves your house.
+          </p>
+          <div className="hero-ctas" style={{ marginTop: '32px' }}>
+            <a href="https://maxy.chat" className="btn btn-primary">Chat with Maxy first</a>
+            <a href="#pricing" className="btn btn-secondary">See pricing</a>
+          </div>
+        </div>
+        <div className="hero-image">
+          <img src="/marketing/maxy-family.png" alt="A family interacting with Maxy" />
+        </div>
+      </div>
+
+      {/* How it works */}
+      <Section>
+        <p className="section-label">How it works</p>
+        <h2 className="section-heading">Four steps. That&rsquo;s it.</h2>
+        <div className="steps">
+          <div className="step">
+            <div className="step-number">1</div>
+            <div className="step-content">
+              <h3>Plug in your Maxy</h3>
+              <p>A small device that sits next to your router. Power and Wi-Fi &mdash; nothing else needed.</p>
+            </div>
+          </div>
+          <div className="step">
+            <div className="step-number">2</div>
+            <div className="step-content">
+              <h3>Set a PIN and connect Claude</h3>
+              <p>Claude is the AI that powers Maxy. You need your own subscription &mdash; like a Netflix account for AI.</p>
+            </div>
+          </div>
+          <div className="step">
+            <div className="step-number">3</div>
+            <div className="step-content">
+              <h3>Open your browser and start talking</h3>
+              <p>Maxy has its own chat interface on your home network &mdash; just open a browser on any device. For when you&rsquo;re out, connect WhatsApp, Signal, or Telegram too.</p>
+            </div>
+          </div>
+          <div className="step">
+            <div className="step-number">4</div>
+            <div className="step-content">
+              <h3>Tell Maxy about your life</h3>
+              <p>It learns as you go. The more you share, the more it can handle for you.</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Before / After */}
+      <Section>
+        <p className="section-label">What changes</p>
+        <h2 className="section-heading">Before and after Maxy.</h2>
+        <div className="before-after-layout">
+          <div className="section-image">
+            <img src="/marketing/maxy-woman.png" alt="A woman relaxing at home with Maxy" />
+          </div>
+          <div className="scenarios">
+            <div className="scenario">
+              <div className="scenario-before">
+                <p className="scenario-label">Before</p>
+                <p className="scenario-text">You miss a renewal notice. Charged &pound;120 for something you don&rsquo;t use.</p>
+              </div>
+              <div className="scenario-after">
+                <p className="scenario-label">After</p>
+                <p className="scenario-text">Maxy caught it, asked if you wanted to cancel, and handled it.</p>
+              </div>
+            </div>
+            <div className="scenario">
+              <div className="scenario-before">
+                <p className="scenario-label">Before</p>
+                <p className="scenario-text">Sunday spent coordinating next week &mdash; kids, dentist, groceries, car service.</p>
+              </div>
+              <div className="scenario-after">
+                <p className="scenario-label">After</p>
+                <p className="scenario-text">Maxy already sorted it. Dentist reminded, groceries listed, car booked.</p>
+              </div>
+            </div>
+            <div className="scenario">
+              <div className="scenario-before">
+                <p className="scenario-label">Before</p>
+                <p className="scenario-text">Mum needs help with a form. You forget to call back.</p>
+              </div>
+              <div className="scenario-after">
+                <p className="scenario-label">After</p>
+                <p className="scenario-text">Maxy reminded you at 7pm. You called her back that evening.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Hardware */}
+      <Section>
+        <p className="section-label">Choose your Maxy</p>
+        <h2 className="section-heading">Two ways to bring Maxy home.</h2>
+        <div className="hardware-options">
+          <div className="hardware-card">
+            <div className="hardware-image">
+              <img src="/marketing/maxy-pi.png" alt="Maxy Pi device" />
+            </div>
+            <h3>Maxy Pi</h3>
+            <p className="hardware-price">From &pound;125</p>
+            <p className="hardware-desc">
+              A compact, silent device that sits next to your router. Everything Maxy can do,
+              in a box the size of a deck of cards. Available in 4&thinsp;GB, 8&thinsp;GB or 16&thinsp;GB RAM
+              &mdash; 4&thinsp;GB handles one person comfortably, 16&thinsp;GB is recommended
+              for families. Built on the Raspberry Pi 5, included at cost with your order.
+            </p>
+          </div>
+          <div className="hardware-card featured">
+            <div className="hardware-image">
+              <img src="/marketing/maxy-girl.png" alt="A girl chatting with Maxy Mini" />
+            </div>
+            <h3>Maxy Mini</h3>
+            <p className="hardware-price">
+              Powered by{' '}
+              <a href="https://huggingface.co/blog/reachy-mini" target="_blank" rel="noopener noreferrer">Reachy Mini</a>
+            </p>
+            <p className="hardware-desc">
+              A tabletop companion with a built-in camera, expressive movements, and personality.
+              Everything the Pi does, plus it sees you, reacts, and feels present.
+              Reachy Mini is a separate purchase &mdash; we provide the brain,
+              see their site for hardware details and pricing.
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      {/* Pricing */}
+      <Section>
+        <div id="pricing" style={{ position: 'relative', top: '-80px' }} />
+        <p className="section-label">Pricing</p>
+        <h2 className="section-heading">Simple, honest pricing.</h2>
+        <div className="pricing-cards">
+          <div className="pricing-card">
+            <p className="pricing-tier">Solo</p>
+            <p className="pricing-price">&pound;20</p>
+            <p className="pricing-period">per month</p>
+            <ul className="pricing-features">
+              <li>Everything for one person</li>
+              <li>Web chat on your home network</li>
+              <li>WhatsApp, Signal, or Telegram when you&rsquo;re out</li>
+              <li>Email integration</li>
+              <li>All base capabilities</li>
+              <li>Pi device: &pound;125 (one-time)</li>
+              <li>Claude Pro (&pound;16/mo, paid direct to Anthropic)</li>
+            </ul>
+          </div>
+          <div className="pricing-card featured">
+            <p className="pricing-tier">Family</p>
+            <p className="pricing-price">&pound;60</p>
+            <p className="pricing-period">per month</p>
+            <ul className="pricing-features">
+              <li>Up to 6 people</li>
+              <li>Each person gets their own private space</li>
+              <li>Web chat on your home network</li>
+              <li>WhatsApp, Signal, or Telegram when you&rsquo;re out</li>
+              <li>Family coordination features</li>
+              <li>Pi device: &pound;180 (one-time)</li>
+              <li>Claude Max (&pound;80/mo, paid direct to Anthropic)</li>
+            </ul>
+          </div>
+        </div>
+      </Section>
+
+      {/* Skill packs */}
+      <Section>
+        <p className="section-label">Plugin packs</p>
+        <h2 className="section-heading">Teach Maxy what you need.</h2>
+        <p className="section-text">
+          Everyone&rsquo;s life is different. Plugin packs let you add exactly the capabilities
+          you need &mdash; nothing you don&rsquo;t. Tap a plugin to see what it does.
+        </p>
+        <div className="skill-grid">
+          {skills.map(skill => {
+            const Icon = skill.icon
+            return (
+              <button
+                key={skill.name}
+                className="skill-card"
+                onClick={() => setActiveSkill(skill.name)}
+              >
+                <div className="skill-card-icon">
+                  <Icon size={28} strokeWidth={1.5} />
+                </div>
+                <div className="skill-card-name">{skill.name}</div>
+                <div className="skill-card-price">{skill.price}</div>
+              </button>
+            )
+          })}
+        </div>
+        {activeSkillData && (
+          <SkillModal skill={activeSkillData} onClose={() => setActiveSkill(null)} />
+        )}
+        <p className="pricing-note">
+          Or get all 6 for &pound;20. More packs added based on what people actually ask for.
+        </p>
+
+        <div className="premium-skills">
+          <h3 className="premium-skills-heading">Premium plugins</h3>
+          <p className="section-text">
+            Capabilities that go beyond reminders and organisation &mdash; Maxy takes action on your behalf.
+          </p>
+          <a href="https://beagle.bot" target="_blank" rel="noopener noreferrer" className="premium-card">
+            <div className="premium-card-header">
+              <div className="premium-card-icon"><Search size={28} strokeWidth={1.5} /></div>
+              <div>
+                <div className="premium-card-name">Beagle</div>
+                <div className="premium-card-tag">AI Booking Agent</div>
+              </div>
+            </div>
+            <p className="premium-card-desc">
+              Tell Maxy what you need done &mdash; leaking tap, end-of-tenancy clean, boiler repair.
+              Beagle contacts local professionals, compares quotes, and books the best one in.
+              Within 4&nbsp;hours, via WhatsApp, with nothing to pay upfront.
+            </p>
+            <span className="premium-card-link">
+              Learn more at beagle.bot &rarr;
+            </span>
+          </a>
+        </div>
+      </Section>
+
+      {/* Privacy */}
+      <Section className="privacy-section">
+        <p className="section-label">Privacy</p>
+        <h2 className="section-heading">Your data lives in your home.</h2>
+        <div className="privacy-block">
+          <p>
+            Maxy runs on a small device you own. Your conversations,
+            your family&rsquo;s details, your bills, your appointments &mdash; none
+            of it leaves your house. No cloud. No data centre. No ads.
+          </p>
+          <p>
+            We can&rsquo;t see your data. We don&rsquo;t want to.
+          </p>
+        </div>
+      </Section>
+
+      {/* Final CTA */}
+      <div className="final-cta">
+        <p className="final-tagline">No Stress. Quiet Life.</p>
+        <div className="hero-ctas">
+          <a href="https://maxy.chat" className="btn btn-primary">Chat with Maxy</a>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="product-footer">
+        <p>
+          Maxy by <a href="https://rubytech.co" target="_blank" rel="noopener noreferrer">Rubytech</a>
+          {' '}&middot;{' '}
+          <a href="/privacy">Privacy</a>
+          {' '}&middot;{' '}
+          <a href="https://maxy.chat">maxy.chat</a>
+        </p>
+      </footer>
+    </div>
+  )
+}