deepspace 0.3.10 → 0.4.0

package/features/landing/src/primitives.tsx

@@ -0,0 +1,389 @@
+/**
+ * Landing Page Primitives
+ *
+ * Shared animation and UI primitives used by the landing page shell
+ * and all landing section components.
+ */
+
+import { useEffect, useState, useRef, type ReactNode } from 'react'
+import { motion, AnimatePresence, useInView } from 'framer-motion'
+import { ImageIcon, ChevronDown } from 'lucide-react'
+import { cn } from 'deepspace'
+
+// ============================================================================
+// Smooth Typewriter
+// ============================================================================
+
+function useTypewriter(
+  text: string,
+  options: { baseSpeed?: number; variance?: number; startDelay?: number } = {},
+) {
+  const { baseSpeed = 65, variance = 0.4, startDelay = 300 } = options
+  const [displayedCount, setDisplayedCount] = useState(0)
+  const [isComplete, setIsComplete] = useState(false)
+  const [hasStarted, setHasStarted] = useState(false)
+
+  useEffect(() => {
+    setDisplayedCount(0)
+    setIsComplete(false)
+    setHasStarted(false)
+    const startTimer = setTimeout(() => setHasStarted(true), startDelay)
+    return () => clearTimeout(startTimer)
+  }, [text, startDelay])
+
+  useEffect(() => {
+    if (!hasStarted || displayedCount >= text.length) {
+      if (hasStarted && displayedCount >= text.length) setIsComplete(true)
+      return
+    }
+    const char = text[displayedCount]
+    const nextChar = text[displayedCount + 1]
+    let delay = baseSpeed
+    if (char === ' ') delay = baseSpeed * 0.3
+    else if ('.!?,;:'.includes(char)) delay = baseSpeed * 2.5
+    else if (nextChar === ' ' || displayedCount === text.length - 1) delay = baseSpeed * 1.3
+    const varianceFactor = 1 + (Math.random() - 0.5) * 2 * variance
+    delay *= varianceFactor
+    const timer = setTimeout(() => setDisplayedCount(prev => prev + 1), delay)
+    return () => clearTimeout(timer)
+  }, [hasStarted, displayedCount, text, baseSpeed, variance])
+
+  return { displayedText: text.slice(0, displayedCount), isComplete }
+}
+
+export function Typewriter({
+  text,
+  className,
+  cursorClassName,
+  baseSpeed,
+  variance,
+  startDelay,
+  onComplete,
+}: {
+  text: string
+  className?: string
+  cursorClassName?: string
+  baseSpeed?: number
+  variance?: number
+  startDelay?: number
+  onComplete?: () => void
+}) {
+  const { displayedText, isComplete } = useTypewriter(text, { baseSpeed, variance, startDelay })
+
+  useEffect(() => {
+    if (isComplete && onComplete) onComplete()
+  }, [isComplete, onComplete])
+
+  return (
+    <span className={className} aria-label={text}>
+      <span>{displayedText}</span>
+      <motion.span
+        className={cn(
+          'inline-block w-[3px] h-[0.9em] ml-[2px] align-middle rounded-full',
+          cursorClassName ?? 'bg-foreground',
+        )}
+        animate={{ opacity: isComplete ? [1, 0] : [1, 1] }}
+        transition={
+          isComplete
+            ? { duration: 0.8, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut' }
+            : { duration: 0 }
+        }
+      />
+    </span>
+  )
+}
+
+// ============================================================================
+// Scroll-triggered animation primitives
+// ============================================================================
+
+export function ScrollReveal({
+  children,
+  className,
+  delay = 0,
+  direction = 'up',
+}: {
+  children: ReactNode
+  className?: string
+  delay?: number
+  direction?: 'up' | 'down' | 'left' | 'right'
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, margin: '-80px 0px' })
+  const directionMap = {
+    up: { y: 40, x: 0 },
+    down: { y: -40, x: 0 },
+    left: { x: 40, y: 0 },
+    right: { x: -40, y: 0 },
+  }
+  const offset = directionMap[direction]
+
+  return (
+    <motion.div
+      ref={ref}
+      className={className}
+      initial={{ opacity: 0, x: offset.x, y: offset.y }}
+      animate={isInView ? { opacity: 1, x: 0, y: 0 } : { opacity: 0, x: offset.x, y: offset.y }}
+      transition={{ duration: 0.7, delay, ease: [0.25, 0.4, 0.25, 1] }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function StaggerContainer({
+  children,
+  className,
+  staggerDelay = 0.1,
+}: {
+  children: ReactNode
+  className?: string
+  staggerDelay?: number
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, margin: '-60px 0px' })
+
+  return (
+    <motion.div
+      ref={ref}
+      className={className}
+      initial="hidden"
+      animate={isInView ? 'visible' : 'hidden'}
+      variants={{
+        hidden: {},
+        visible: { transition: { staggerChildren: staggerDelay } },
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export const staggerChild = {
+  hidden: { opacity: 0, y: 30, scale: 0.97 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.5, ease: 'easeOut' as const },
+  },
+}
+
+// ============================================================================
+// Animated counter
+// ============================================================================
+
+function parseStatValue(value: string): { prefix: string; number: number; suffix: string } {
+  const match = value.match(/^([<>]?)(\d+(?:\.\d+)?)(.*)$/)
+  if (!match) return { prefix: '', number: 0, suffix: value }
+  return { prefix: match[1], number: parseFloat(match[2]), suffix: match[3] }
+}
+
+function useCountUp(target: number, duration: number = 1800, shouldStart: boolean = false): number {
+  const [current, setCurrent] = useState(0)
+  const startTimeRef = useRef<number | null>(null)
+  const rafRef = useRef<number>(0)
+
+  useEffect(() => {
+    if (!shouldStart) return
+    startTimeRef.current = null
+
+    function tick(timestamp: number) {
+      if (startTimeRef.current === null) startTimeRef.current = timestamp
+      const elapsed = timestamp - startTimeRef.current
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = 1 - Math.pow(1 - progress, 3)
+      setCurrent(eased * target)
+      if (progress < 1) rafRef.current = requestAnimationFrame(tick)
+    }
+
+    rafRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(rafRef.current)
+  }, [target, duration, shouldStart])
+
+  return current
+}
+
+export function AnimatedStat({ value, label }: { value: string; label: string }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, margin: '-40px 0px' })
+  const { prefix, number, suffix } = parseStatValue(value)
+  const animated = useCountUp(number, 1800, isInView)
+
+  const hasDecimal = number % 1 !== 0
+  const displayed = hasDecimal ? animated.toFixed(1) : Math.round(animated).toString()
+
+  return (
+    <motion.div ref={ref} variants={staggerChild} className="text-center">
+      <div className="text-3xl md:text-4xl font-bold text-foreground tracking-tight">
+        {prefix}{displayed}{suffix}
+      </div>
+      <div className="text-muted-foreground/60 text-sm font-medium mt-1">{label}</div>
+    </motion.div>
+  )
+}
+
+// ============================================================================
+// Glassmorphic Card
+// ============================================================================
+
+export function GlassCard({
+  children,
+  className,
+  hoverEffect = true,
+}: {
+  children: ReactNode
+  className?: string
+  hoverEffect?: boolean
+}) {
+  return (
+    <motion.div
+      className={cn(
+        'relative rounded-2xl overflow-hidden',
+        'bg-background/70',
+        'border border-foreground/[0.08]',
+        'shadow-[0_8px_32px_rgba(0,0,0,0.3)]',
+        hoverEffect && 'group transition-all duration-500',
+        className,
+      )}
+      whileHover={hoverEffect ? { y: -4, transition: { duration: 0.3, ease: 'easeOut' } } : undefined}
+    >
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/20 to-transparent" />
+      {children}
+    </motion.div>
+  )
+}
+
+// ============================================================================
+// Placeholder Image
+// ============================================================================
+
+export function PlaceholderImage({
+  className,
+  label,
+  src,
+  aspectRatio = 'aspect-video',
+}: {
+  className?: string
+  label?: string
+  src?: string
+  aspectRatio?: string
+}) {
+  if (src) {
+    return (
+      <div className={cn('relative rounded-xl overflow-hidden', aspectRatio, className)}>
+        <img src={src} alt={label ?? ''} className="absolute inset-0 w-full h-full object-cover" />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative rounded-xl overflow-hidden',
+        'bg-foreground/[0.03] border-2 border-dashed border-foreground/[0.12]',
+        aspectRatio,
+        className,
+      )}
+    >
+      <div className="absolute inset-0 flex flex-col items-center justify-center gap-3">
+        <div className="w-12 h-12 rounded-xl bg-foreground/[0.06] border border-foreground/[0.1] flex items-center justify-center">
+          <ImageIcon className="w-6 h-6 text-muted-foreground/50" />
+        </div>
+        {label && (
+          <span className="text-[11px] font-medium tracking-wider uppercase text-muted-foreground/50">
+            {label}
+          </span>
+        )}
+      </div>
+      <svg className="absolute inset-0 w-full h-full opacity-[0.04]" preserveAspectRatio="none">
+        <pattern id="diag" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+          <line x1="0" y1="0" x2="0" y2="20" stroke="currentColor" strokeWidth="1" />
+        </pattern>
+        <rect width="100%" height="100%" fill="url(#diag)" />
+      </svg>
+    </div>
+  )
+}
+
+// ============================================================================
+// Browser Mockup
+// ============================================================================
+
+export function BrowserMockup({
+  className,
+  label,
+  src,
+  glowBorder = false,
+}: {
+  className?: string
+  label?: string
+  src?: string
+  glowBorder?: boolean
+}) {
+  return (
+    <div
+      className={cn(
+        'rounded-xl overflow-hidden border border-foreground/[0.1] shadow-2xl',
+        glowBorder && 'landing-gradient-border',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 px-4 py-3 bg-foreground/[0.04] border-b border-foreground/[0.08]">
+        <div className="flex gap-1.5">
+          <div className="w-3 h-3 rounded-full bg-foreground/[0.1]" />
+          <div className="w-3 h-3 rounded-full bg-foreground/[0.1]" />
+          <div className="w-3 h-3 rounded-full bg-foreground/[0.1]" />
+        </div>
+        <div className="flex-1 mx-4">
+          <div className="h-6 rounded-md bg-foreground/[0.05] border border-foreground/[0.08] max-w-xs mx-auto flex items-center justify-center">
+            <span className="text-[10px] text-muted-foreground/50 font-medium">myapp.com</span>
+          </div>
+        </div>
+      </div>
+      <PlaceholderImage src={src} label={label} aspectRatio="aspect-[16/10]" className="rounded-none border-0 border-dashed-0" />
+    </div>
+  )
+}
+
+// ============================================================================
+// Section Heading
+// ============================================================================
+
+export function SectionHeading({
+  tag,
+  title,
+  titleHighlight,
+  subtitle,
+}: {
+  tag: string
+  title: string
+  titleHighlight?: string
+  subtitle?: string
+}) {
+  return (
+    <ScrollReveal className="text-center mb-16">
+      <span className="inline-block text-xs font-semibold tracking-[0.2em] uppercase text-primary/80 mb-4">
+        {tag}
+      </span>
+      <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground leading-tight tracking-[-0.02em]">
+        {title}
+        {titleHighlight && (
+          <>
+            <br />
+            <span className="bg-gradient-to-r from-primary via-violet-400 to-purple-300 bg-clip-text text-transparent">
+              {titleHighlight}
+            </span>
+          </>
+        )}
+      </h2>
+      {subtitle && (
+        <p className="mt-5 text-muted-foreground max-w-xl mx-auto text-lg leading-relaxed">
+          {subtitle}
+        </p>
+      )}
+    </ScrollReveal>
+  )
+}
+
+export { cn, AnimatePresence, motion, useInView, ChevronDown }

package/features/landing/src/sections/FAQSection.tsx

@@ -0,0 +1,110 @@
+/**
+ * Landing Section: FAQ
+ *
+ * Accordion FAQ inside a glassmorphic card.
+ */
+
+import { useState, useCallback } from 'react'
+import { Plus, Minus } from 'lucide-react'
+import { ScrollReveal, GlassCard, SectionHeading, cn, motion, AnimatePresence } from '../primitives'
+
+const FAQ_ITEMS = [
+  {
+    question: 'How do I get started?',
+    answer: 'Just launch the app and follow the guided setup. You\'ll be up and running in under a minute -- no complicated configuration needed.',
+  },
+  {
+    question: 'Is it free to use?',
+    answer: 'Yes, the core features are completely free. Premium features are available for teams and power users who need more.',
+  },
+  {
+    question: 'Can I customize it?',
+    answer: 'Absolutely. The app is designed to be flexible -- adjust settings, layouts, and workflows to match exactly how you like to work.',
+  },
+  {
+    question: 'How does collaboration work?',
+    answer: 'Invite your team and work together in real time. Everyone sees changes instantly, and permissions keep things organized.',
+  },
+  {
+    question: 'Where can I get help?',
+    answer: 'Check out the built-in help section, browse the documentation, or reach out to the community. Support is always available.',
+  },
+]
+
+function FAQItem({ item, isOpen, onToggle }: {
+  item: typeof FAQ_ITEMS[number]
+  isOpen: boolean
+  onToggle: () => void
+}) {
+  return (
+    <div className="border-b border-foreground/[0.06] last:border-b-0">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between gap-4 py-5 text-left group"
+      >
+        <span className={cn(
+          'text-base font-medium transition-colors duration-200',
+          isOpen ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground',
+        )}>
+          {item.question}
+        </span>
+        <div className={cn(
+          'shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-300',
+          isOpen
+            ? 'bg-primary/20 text-primary rotate-0'
+            : 'bg-foreground/[0.06] text-muted-foreground group-hover:bg-foreground/[0.1]',
+        )}>
+          {isOpen ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
+        </div>
+      </button>
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: [0.25, 0.4, 0.25, 1] }}
+            className="overflow-hidden"
+          >
+            <p className="pb-5 text-sm text-muted-foreground leading-relaxed max-w-2xl">
+              {item.answer}
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export default function FAQSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  const handleToggle = useCallback((index: number) => {
+    setOpenIndex(prev => prev === index ? null : index)
+  }, [])
+
+  return (
+    <section id="faq" className="relative py-28 md:py-36">
+      <div className="max-w-3xl mx-auto px-6">
+        <SectionHeading
+          tag="FAQ"
+          title="Common questions"
+          subtitle="Everything you need to know to get started."
+        />
+
+        <ScrollReveal>
+          <GlassCard className="px-7 md:px-10 py-2" hoverEffect={false}>
+            {FAQ_ITEMS.map((item, idx) => (
+              <FAQItem
+                key={item.question}
+                item={item}
+                isOpen={openIndex === idx}
+                onToggle={() => handleToggle(idx)}
+              />
+            ))}
+          </GlassCard>
+        </ScrollReveal>
+      </div>
+    </section>
+  )
+}