ar-saas 0.2.1 → 0.3.1

package/templates/frontend/src/components/dashboard/header.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { User, Settings, CreditCard, LogOut } from 'lucide-react'
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+const breadcrumbMap: Record<string, string> = {
+  '/dashboard': 'Dashboard',
+  '/profile': 'Perfil',
+  '/settings': 'Ajustes',
+  '/billing': 'Facturación',
+  '/team': 'Equipo',
+}
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+export function DashboardHeader() {
+  const { user, logout } = useAuth()
+  const pathname = usePathname()
+  const pageTitle = breadcrumbMap[pathname] ?? 'Dashboard'
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b bg-background px-6">
+      <h1 className="text-sm font-semibold">{pageTitle}</h1>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="flex items-center gap-2 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <Avatar className="size-8">
+              <AvatarFallback className="text-xs">
+                {user?.name ? getInitials(user.name) : 'U'}
+              </AvatarFallback>
+            </Avatar>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-52">
+          <DropdownMenuLabel className="font-normal">
+            <p className="font-medium leading-none">{user?.name}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{user?.email}</p>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/profile">
+              <User className="mr-2 size-4" />
+              Perfil
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link href="/settings">
+              <Settings className="mr-2 size-4" />
+              Ajustes
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link href="/billing">
+              <CreditCard className="mr-2 size-4" />
+              Facturación
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={logout}
+          >
+            <LogOut className="mr-2 size-4" />
+            Cerrar sesión
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </header>
+  )
+}

package/templates/frontend/src/components/dashboard/sidebar.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  LayoutDashboard,
+  User,
+  Settings,
+  CreditCard,
+  Users,
+  LogOut,
+} from 'lucide-react'
+import { siteConfig } from '@/config/site'
+import { useAuth } from '@/lib/hooks/use-auth'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+const navItems = [
+  { label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
+  { label: 'Perfil', href: '/profile', icon: User },
+  { label: 'Ajustes', href: '/settings', icon: Settings },
+  { label: 'Facturación', href: '/billing', icon: CreditCard },
+  { label: 'Equipo', href: '/team', icon: Users },
+]
+
+export function DashboardSidebar() {
+  const pathname = usePathname()
+  const { logout } = useAuth()
+
+  return (
+    <aside className="flex w-60 shrink-0 flex-col border-r bg-card">
+      <div className="flex h-14 items-center border-b px-4">
+        <Link href="/" className="text-sm font-bold tracking-tight">
+          {siteConfig.name}
+        </Link>
+      </div>
+
+      <nav className="flex-1 space-y-1 p-3">
+        {navItems.map(({ label, href, icon: Icon }) => (
+          <Button
+            key={href}
+            asChild
+            variant={pathname === href ? 'secondary' : 'ghost'}
+            className={cn(
+              'w-full justify-start',
+              pathname === href && 'font-medium',
+            )}
+          >
+            <Link href={href}>
+              <Icon className="mr-2 size-4" />
+              {label}
+            </Link>
+          </Button>
+        ))}
+      </nav>
+
+      <div className="p-3">
+        <Separator className="mb-3" />
+        <Button
+          variant="ghost"
+          className="w-full justify-start text-muted-foreground hover:text-foreground"
+          onClick={logout}
+        >
+          <LogOut className="mr-2 size-4" />
+          Cerrar sesión
+        </Button>
+      </div>
+    </aside>
+  )
+}

package/templates/frontend/src/components/dashboard/stat-card.tsx

@@ -0,0 +1,34 @@
+import { type LucideIcon } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface StatCardProps {
+  title: string
+  value: string
+  description?: string
+  icon: LucideIcon
+  trend?: { value: string; positive: boolean }
+  className?: string
+}
+
+export function StatCard({ title, value, description, icon: Icon, trend, className }: StatCardProps) {
+  return (
+    <Card className={cn('', className)}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <Icon className="size-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {trend && (
+          <p className={cn('mt-1 text-xs', trend.positive ? 'text-green-600' : 'text-red-500')}>
+            {trend.positive ? '+' : ''}{trend.value} vs. mes anterior
+          </p>
+        )}
+        {description && !trend && (
+          <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/templates/frontend/src/components/landing/faq.tsx

@@ -0,0 +1,39 @@
+import { siteConfig } from '@/config/site'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+
+export function LandingFaq() {
+  return (
+    <section id="faq" className="py-20 md:py-28">
+      <div className="mx-auto max-w-3xl px-4">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Preguntas frecuentes
+          </h2>
+          <p className="mt-4 text-muted-foreground">
+            Si no encontrás lo que buscás, escribinos a{' '}
+            <a
+              href={`mailto:${siteConfig.supportEmail}`}
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              {siteConfig.supportEmail}
+            </a>
+          </p>
+        </div>
+
+        <Accordion type="single" collapsible className="mt-12">
+          {siteConfig.faq.map((item, index) => (
+            <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
+              <AccordionContent className="text-muted-foreground">{item.answer}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  )
+}

package/templates/frontend/src/components/landing/features.tsx

@@ -0,0 +1,54 @@
+import {
+  Zap,
+  Shield,
+  BarChart3,
+  Users,
+  Globe,
+  Headphones,
+  type LucideIcon,
+} from 'lucide-react'
+import { siteConfig } from '@/config/site'
+
+const iconMap: Record<string, LucideIcon> = {
+  Zap,
+  Shield,
+  BarChart3,
+  Users,
+  Globe,
+  Headphones,
+}
+
+export function LandingFeatures() {
+  return (
+    <section id="features" className="py-20 md:py-28">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Todo lo que necesitás para lanzar
+          </h2>
+          <p className="mt-4 text-muted-foreground">
+            Funcionalidades pensadas para que te enfoques en el negocio, no en la infraestructura.
+          </p>
+        </div>
+
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {siteConfig.features.map((feature) => {
+            const Icon = iconMap[feature.icon] ?? Zap
+            return (
+              <div
+                key={feature.title}
+                className="group rounded-xl border bg-card p-6 transition-shadow hover:shadow-md"
+              >
+                <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <Icon className="size-5" />
+                </div>
+                <h3 className="font-semibold">{feature.title}</h3>
+                <p className="mt-2 text-sm text-muted-foreground">{feature.description}</p>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/frontend/src/components/landing/footer.tsx

@@ -0,0 +1,76 @@
+import Link from 'next/link'
+import { Twitter, Github, Linkedin } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+
+export function LandingFooter() {
+  const { footer } = siteConfig
+
+  return (
+    <footer className="border-t bg-card">
+      <div className="mx-auto max-w-6xl px-4 py-12">
+        <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
+          {/* Brand */}
+          <div className="sm:col-span-2 md:col-span-1">
+            <p className="text-lg font-bold">{siteConfig.name}</p>
+            <p className="mt-2 text-sm text-muted-foreground">{siteConfig.tagline}</p>
+            <div className="mt-4 flex gap-3">
+              {footer.social.twitter && (
+                <a
+                  href={footer.social.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <Twitter className="size-4" />
+                </a>
+              )}
+              {footer.social.github && (
+                <a
+                  href={footer.social.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <Github className="size-4" />
+                </a>
+              )}
+              {footer.social.linkedin && (
+                <a
+                  href={footer.social.linkedin}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <Linkedin className="size-4" />
+                </a>
+              )}
+            </div>
+          </div>
+
+          {/* Link columns */}
+          {footer.columns.map((col) => (
+            <div key={col.title}>
+              <p className="text-sm font-semibold">{col.title}</p>
+              <ul className="mt-4 space-y-3">
+                {col.links.map((link) => (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 border-t pt-6 text-center text-sm text-muted-foreground">
+          {footer.copyright}
+        </div>
+      </div>
+    </footer>
+  )
+}

package/templates/frontend/src/components/landing/hero.tsx

@@ -0,0 +1,72 @@
+import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+
+export function LandingHero() {
+  return (
+    <section className="relative overflow-hidden py-20 md:py-32">
+      {/* Background gradient */}
+      <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,hsl(var(--primary)/0.12),transparent)]" />
+
+      <div className="mx-auto max-w-6xl px-4 text-center">
+        <Badge variant="outline" className="mb-6 px-4 py-1.5 text-sm">
+          Listo para producción en minutos
+        </Badge>
+
+        <h1 className="mx-auto max-w-4xl text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl">
+          {siteConfig.hero.headline}
+        </h1>
+
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl">
+          {siteConfig.hero.description}
+        </p>
+
+        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+          <Button size="lg" asChild className="gap-2">
+            <Link href={siteConfig.hero.cta.href}>
+              {siteConfig.hero.cta.label}
+              <ArrowRight className="size-4" />
+            </Link>
+          </Button>
+          <Button size="lg" variant="outline" asChild>
+            <Link href={siteConfig.hero.ctaSecondary.href}>
+              {siteConfig.hero.ctaSecondary.label}
+            </Link>
+          </Button>
+        </div>
+
+        {/* Social proof */}
+        <p className="mt-8 text-sm text-muted-foreground">
+          Sin tarjeta de crédito &middot; Cancelá cuando quieras &middot; Soporte en español
+        </p>
+
+        {/* App mockup placeholder */}
+        <div className="mx-auto mt-16 max-w-4xl overflow-hidden rounded-xl border bg-muted/50 shadow-2xl">
+          <div className="flex h-8 items-center gap-2 border-b bg-muted px-4">
+            <div className="size-3 rounded-full bg-red-400" />
+            <div className="size-3 rounded-full bg-yellow-400" />
+            <div className="size-3 rounded-full bg-green-400" />
+            <div className="mx-2 h-4 flex-1 rounded bg-muted-foreground/20" />
+          </div>
+          <div className="grid grid-cols-[200px_1fr] divide-x" style={{ minHeight: 320 }}>
+            <div className="space-y-2 bg-card p-4">
+              {[...Array(6)].map((_, i) => (
+                <div key={i} className="h-7 rounded-md bg-muted" />
+              ))}
+            </div>
+            <div className="space-y-4 p-6">
+              <div className="grid grid-cols-3 gap-3">
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="h-20 rounded-lg border bg-card" />
+                ))}
+              </div>
+              <div className="h-40 rounded-lg border bg-card" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/frontend/src/components/landing/navbar.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+import { Menu, X } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+import { Button } from '@/components/ui/button'
+
+export function LandingNavbar() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
+        <Link href="/" className="text-lg font-bold tracking-tight">
+          {siteConfig.name}
+        </Link>
+
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-6 md:flex">
+          {siteConfig.nav.links.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="hidden items-center gap-2 md:flex">
+          <Button variant="ghost" asChild size="sm">
+            <Link href="/login">Iniciar sesión</Link>
+          </Button>
+          <Button asChild size="sm">
+            <Link href="/register">Empezar gratis</Link>
+          </Button>
+        </div>
+
+        {/* Mobile toggle */}
+        <button
+          className="md:hidden"
+          onClick={() => setOpen((v) => !v)}
+          aria-label="Menú"
+        >
+          {open ? <X className="size-5" /> : <Menu className="size-5" />}
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="border-t bg-background px-4 pb-4 md:hidden">
+          <nav className="flex flex-col gap-3 pt-4">
+            {siteConfig.nav.links.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-sm text-muted-foreground"
+                onClick={() => setOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <div className="mt-2 flex flex-col gap-2">
+              <Button variant="outline" asChild>
+                <Link href="/login">Iniciar sesión</Link>
+              </Button>
+              <Button asChild>
+                <Link href="/register">Empezar gratis</Link>
+              </Button>
+            </div>
+          </nav>
+        </div>
+      )}
+    </header>
+  )
+}

package/templates/frontend/src/components/landing/pricing.tsx

@@ -0,0 +1,90 @@
+import Link from 'next/link'
+import { Check } from 'lucide-react'
+import { siteConfig } from '@/config/site'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+export function LandingPricing() {
+  return (
+    <section id="pricing" className="py-20 md:py-28">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
+            Precios claros y sin sorpresas
+          </h2>
+          <p className="mt-4 text-muted-foreground">
+            Elegí el plan que mejor se adapte a tu equipo. Cambiá cuando quieras.
+          </p>
+        </div>
+
+        <div className="mt-16 grid gap-8 md:grid-cols-3">
+          {siteConfig.pricing.map((plan) => (
+            <div
+              key={plan.name}
+              className={cn(
+                'relative flex flex-col rounded-xl border p-8',
+                plan.highlight
+                  ? 'border-primary bg-primary text-primary-foreground shadow-lg'
+                  : 'bg-card',
+              )}
+            >
+              {plan.highlight && (
+                <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-background text-foreground shadow">
+                  Más popular
+                </Badge>
+              )}
+
+              <div>
+                <h3 className="text-lg font-semibold">{plan.name}</h3>
+                <p
+                  className={cn(
+                    'mt-1 text-sm',
+                    plan.highlight ? 'text-primary-foreground/80' : 'text-muted-foreground',
+                  )}
+                >
+                  {plan.description}
+                </p>
+                <div className="mt-4 flex items-end gap-1">
+                  <span className="text-4xl font-bold">{plan.price}</span>
+                  {plan.period && (
+                    <span
+                      className={cn(
+                        'mb-1 text-sm',
+                        plan.highlight ? 'text-primary-foreground/70' : 'text-muted-foreground',
+                      )}
+                    >
+                      {plan.period}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <ul className="my-8 flex-1 space-y-3">
+                {plan.features.map((f) => (
+                  <li key={f} className="flex items-center gap-3 text-sm">
+                    <Check
+                      className={cn(
+                        'size-4 shrink-0',
+                        plan.highlight ? 'text-primary-foreground' : 'text-primary',
+                      )}
+                    />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+
+              <Button
+                asChild
+                variant={plan.highlight ? 'secondary' : 'outline'}
+                className="w-full"
+              >
+                <Link href={plan.href}>{plan.cta}</Link>
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/frontend/src/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }