feat(www): add basic layout including header, footer and meta (#3)

- Added new UI components including Badge, Button, Card, Checkbox, Dialog, Footer, Input, Label, SubscriptionForm, Textarea, and Tooltip.
- Implemented a new layout configuration with improved navigation and metadata handling.
- Integrated third-party libraries for enhanced functionality (e.g., Radix UI, Lucide).
- Updated global styles and added custom CSS variables for theming.
- Introduced new pages for Changelog, Contact, Community, and GitHub redirection.
- Updated package dependencies in package.json and pnpm-lock.yaml.
- Added Open Graph image generation for better social media sharing.
- Included favicon and application icons for branding.

apps/www/app/(home)/changelog/page.tsx

@@ -0,0 +1,16 @@
+import Changelog from "@/components/ui/changelog";
+import { SubscriptionForm } from "@/components/ui/subscription-form";
+
+export const metadata = {
+  title: "Changelog",
+  description: "Get the latest product updates and changes to Amical.",
+};
+
+export default function ChangelogPage() {
+  return (
+    <>
+      <Changelog />
+    </>
+  );
+}
+

apps/www/app/(home)/contact/page.tsx

@@ -0,0 +1,10 @@
+import Contact from "@/components/ui/contact";
+
+export const metadata = {
+  title: "Contact",
+  description: "Get in touch with the authors of Amical for any questions or support.",
+};
+
+export default function ContactPage() {
+  return <Contact />;
+}

apps/www/app/(home)/layout.tsx

@@ -1,19 +1,21 @@
 import type { ReactNode } from 'react';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
 import { baseOptions } from '@/app/layout.config';
+import { Footer } from '@/components/ui/footer';
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default function Layout({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
   return (
-    <HomeLayout
-      {...baseOptions}
-      links={[
-        {
-          text: 'Documentation',
-          url: '/docs',
-        },
-      ]}
-    >
-      {children}
+    <HomeLayout {...baseOptions}>
+      <div className="fixed inset-0 pointer-events-none">
+      </div>
+      <div className="relative min-h-screen w-full">
+        {children}
+        <Footer />
+      </div>
     </HomeLayout>
   );
 }

apps/www/app/(home)/page.tsx

@@ -1,19 +1,6 @@
-import Link from 'next/link';
-
 export default function HomePage() {
   return (
-    <main className="flex flex-1 flex-col justify-center text-center">
-      <h1 className="mb-4 text-2xl font-bold">Hello World</h1>
-      <p className="text-fd-muted-foreground">
-        You can open{' '}
-        <Link
-          href="/docs"
-          className="text-fd-foreground font-semibold underline"
-        >
-          /docs
-        </Link>{' '}
-        and see the documentation.
-      </p>
+    <main className="flex flex-1 flex-col">
     </main>
   );
-}
+}

apps/www/app/api/search/route.ts

@@ -1,4 +1,7 @@
 import { source } from '@/lib/source';
 import { createFromSource } from 'fumadocs-core/search/server';
 
-export const { GET } = createFromSource(source);
+// it should be cached forever
+export const revalidate = false;
+
+export const { staticGET: GET } = createFromSource(source);

apps/www/app/community/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default async function CommunityPage() {
+    redirect('https://discord.gg/x7pGh8Q34e')
+}

apps/www/app/github/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default async function CommunityPage() {
+    redirect('https://github.com/amicalhq/amical')
+}

apps/www/app/global.css

@@ -1,3 +1,122 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/www/app/layout.config.tsx

@@ -1,4 +1,5 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import Image from 'next/image';
 
 /**
  * Shared layout configurations
@@ -8,19 +9,46 @@ import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
  * Docs Layout: app/docs/layout.tsx
  */
 export const baseOptions: BaseLayoutProps = {
+  githubUrl: 'https://github.com/amicalhq/amical',
+  disableThemeSwitch: true,
   nav: {
     title: (
       <>
-        <svg
-          width="24"
-          height="24"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-label="Logo"
-        >
-          <circle cx={12} cy={12} r={12} fill="currentColor" />
-        </svg>
-        My App
+        <Image
+          src="/amical-icon.svg"
+          width={32}
+          height={32}
+          alt="Amical Logo"
+        />
+        Amical
       </>
     ),
   },
+  links: [
+    {
+      text: 'Docs',
+      url: '/docs',
+    },
+    {
+      text: 'Contact',
+      url: '/contact',
+      active: 'nested-url',
+    },
+    {
+      text: 'Changelog',
+      url: '/changelog',
+      active: 'nested-url',
+    },
+    {
+      type: 'icon',
+      url: '/community',
+      text: 'Discord',
+      icon: (
+        <svg role="img" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/>
+        </svg>
+      ),
+      external: true,
+    },
+  ],
 };

apps/www/app/layout.tsx

@@ -2,6 +2,13 @@ import './global.css';
 import { RootProvider } from 'fumadocs-ui/provider';
 import { Inter } from 'next/font/google';
 import type { ReactNode } from 'react';
+import PlausibleProvider from 'next-plausible';
+import { GoogleTagManager } from '@next/third-parties/google'
+import { createMetadata } from '@/lib/metadata';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+
+
+export const metadata = createMetadata({});
 
 const inter = Inter({
   subsets: ['latin'],
@@ -10,9 +17,30 @@ const inter = Inter({
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
+      <head>
+        <PlausibleProvider
+          domain="amical.ai"
+          trackOutboundLinks={true}
+          trackFileDownloads={true}
+          taggedEvents={true}
+          hash={true}
+        />
+      </head>
       <body className="flex flex-col min-h-screen">
-        <RootProvider>{children}</RootProvider>
+        <RootProvider
+          search={{
+            options: {
+              type: 'static',
+              }
+          }}
+          theme={{
+            defaultTheme: 'dark',
+          }}>
+          <TooltipProvider>
+            {children}
+          </TooltipProvider>
+        </RootProvider>
       </body>
     </html>
   );
-}
+}

apps/www/app/opengraph-image.tsx

@@ -0,0 +1,65 @@
+import { ImageResponse } from 'next/og';
+import { Geist } from 'next/font/google';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-static';
+
+export const alt = 'Amical - Open Source Speech-to-Text App powered by Gen AI';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+export const contentType = 'image/png';
+
+const geist = Geist({
+  weight: '400',
+  subsets: ['latin'],
+});
+
+export default async function Image() {
+  const logoPath = join(process.cwd(), 'public', 'amical-icon@2x.png');
+  const logoData = readFileSync(logoPath);
+  const logoBase64 = `data:image/png;base64,${logoData.toString('base64')}`;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: ' #000000',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '40px',
+        }}
+      >
+        <img
+          src={logoBase64}
+          alt="Amical Logo"
+          style={{
+            width: '400px',
+            marginBottom: '32px',
+          }}
+        />
+        <div
+          style={{
+            fontSize: 38,
+            color: '#a0a0a0',
+            textAlign: 'center',
+            maxWidth: '800px',
+            fontFamily: geist.style.fontFamily,
+          }}
+        >
+          Open Source Speech-to-Text App powered by Gen AI
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

apps/www/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

apps/www/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

apps/www/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

apps/www/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

apps/www/components/ui/changelog.tsx

@@ -0,0 +1,103 @@
+import { Badge } from "@/components/ui/badge";
+import { SubscriptionForm } from "@/components/ui/subscription-form";
+export type ChangelogEntry = {
+  version: string;
+  date: string;
+  title: string;
+  description: string;
+  items?: string[];
+  image?: string;
+};
+
+export interface ChangelogProps {
+  title?: string;
+  description?: string;
+  entries?: ChangelogEntry[];
+  className?: string;
+}
+
+const Changelog = ({
+  title = "Changelog",
+  description = "Get the latest product updates and changes to Amical.",
+  entries = defaultChangelogData,
+}: ChangelogProps) => {
+  return (
+    <section className="py-32">
+      <div className="container">
+        <div className="mx-auto max-w-3xl text-center">
+          <h1 className="mb-4 text-3xl font-bold tracking-tight md:text-5xl">
+            {title}
+          </h1>
+          <p className="mb-6 text-base text-muted-foreground md:text-lg">
+            {description}
+          </p>
+        </div>
+        <SubscriptionForm
+        variant="blog"
+        formName="changelog_subscription"
+        redirectUrl="https://amical.ai/changelog?submission=true&form_type=subscribe"
+        showHeader={false}
+      />
+        <div className="mx-auto mt-16 max-w-3xl space-y-16 md:mt-24 md:space-y-24">
+          {entries.map((entry, index) => (
+            <div
+              key={index}
+              className="relative flex flex-col gap-4 md:flex-row md:gap-16"
+            >
+              <div className="top-28 flex h-min shrink-0 items-center gap-4 md:sticky">
+                <Badge variant="secondary" className="text-xs">
+                  {entry.version}
+                </Badge>
+                <span className="text-xs font-medium text-muted-foreground">
+                  {entry.date}
+                </span>
+              </div>
+              <div>
+                <h2 className="mb-3 text-lg leading-tight font-bold text-foreground/90 md:text-2xl">
+                  {entry.title}
+                </h2>
+                <p className="text-sm text-muted-foreground md:text-base">
+                  {entry.description}
+                </p>
+                {entry.items && entry.items.length > 0 && (
+                  <ul className="mt-4 ml-4 space-y-1.5 text-sm text-muted-foreground md:text-base">
+                    {entry.items.map((item, itemIndex) => (
+                      <li key={itemIndex} className="list-disc">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {entry.image && (
+                  <img
+                    src={entry.image}
+                    alt={`${entry.version} visual`}
+                    className="mt-8 w-full rounded-lg object-cover"
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Changelog;
+
+export const defaultChangelogData: ChangelogEntry[] = [
+  {
+    version: "Version 0.1.0",
+    date: "28 April 2025",
+    title: "Amical 0.1 coming soon!",
+    description:
+      "First version of Amical is coming soon by end of May 2025! What to expect:",
+    items: [
+      "Mac",
+      "Speech-to-Text",
+      "Context-aware"
+    ],
+    image: "https://placehold.co/1200x600/6b46c1/ffffff?text=Announcing+Amical+0.1",
+  }
+];

apps/www/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

apps/www/components/ui/contact.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { CheckCircle2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+const Contact = () => {
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    setShowSuccess(urlParams.get('submission') === 'true');
+  }, []);
+
+  return (
+    <section className="py-32">
+      <div className="container">
+        <div className="mb-14 text-center">
+          <h1 className="mb-3 mt-1 text-balance text-3xl font-semibold md:text-4xl">
+            Contact Us
+          </h1>
+          <p className="text-lg text-muted-foreground">
+            Get in touch with the authors of Amical for any questions or support.
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <div className={cn(
+            "mx-auto flex w-full flex-col gap-6 rounded-lg p-10 md:max-w-[464px]",
+            "bg-muted dark:bg-muted/30 dark:border dark:border-border"
+          )}>
+            <form action="https://submit-form.com/nItcloafD">
+              <input type="hidden" name="form_name" value="contact_form" />
+              <input type="hidden" name="_redirect" value="https://amical.ai/contact?submission=true" />
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="grid w-full items-center gap-1.5">
+                  <Label htmlFor="firstname">
+                    First Name<sup className="ml-0.5">*</sup>
+                  </Label>
+                  <Input
+                    type="text"
+                    id="firstname"
+                    name="firstname"
+                    placeholder="Your First Name"
+                    className="dark:border-border"
+                    required
+                  />
+                </div>
+                <div className="grid w-full items-center gap-1.5">
+                  <Label htmlFor="lastname">
+                    Last Name<sup className="ml-0.5">*</sup>
+                  </Label>
+                  <Input
+                    type="text"
+                    id="lastname"
+                    name="lastname"
+                    placeholder="Your Last Name"
+                    className="dark:border-border"
+                    required
+                  />
+                </div>
+              </div>
+              <div className="grid w-full items-center gap-1.5 mt-6">
+                <Label htmlFor="email">
+                  Email Address<sup className="ml-0.5">*</sup>
+                </Label>
+                <Input
+                  type="email"
+                  id="email"
+                  name="email"
+                  placeholder="Your Email"
+                  className="dark:border-border"
+                  required
+                />
+              </div>
+
+              <div className="grid w-full gap-1.5 mt-6">
+                <Label htmlFor="message">
+                  Your Message<sup className="ml-0.5">*</sup>
+                </Label>
+                <Textarea
+                  placeholder="How can we help you?"
+                  id="message"
+                  name="message"
+                  className="dark:border-border"
+                  required
+                />
+              </div>
+              <div className="flex items-center space-x-2 mt-6">
+                <Checkbox id="terms" name="terms" required />
+                <label
+                  htmlFor="terms"
+                  className="text-sm font-medium leading-none text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  I agree to the
+                  <a href="/privacy" className="ml-1 underline hover:text-foreground">
+                    privacy policy
+                  </a>
+                </label>
+              </div>
+              <Button type="submit" className="w-full mt-6">Submit</Button>
+            </form>
+            <Dialog open={showSuccess} onOpenChange={setShowSuccess}>
+              <DialogContent className="sm:max-w-md">
+                <div className="flex flex-col items-center gap-4 text-center">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-50">
+                    <CheckCircle2 className="h-8 w-8 text-green-600" />
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <h3 className="text-lg font-semibold">Message Sent!</h3>
+                    <p className="text-muted-foreground">Thank you for reaching out. We&apos;ll get back to you shortly.</p>
+                  </div>
+                  <Button onClick={() => setShowSuccess(false)} className="mt-2">Close</Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Contact;

apps/www/components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

apps/www/components/ui/footer.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { SubscriptionForm } from '@/components/ui/subscription-form';
+
+// SVG components
+const DiscordIcon = () => (
+  <svg role="img" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
+    <path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/>
+  </svg>
+);
+
+const GithubIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+    <path d="M9 18c-4.51 2-5-2-7-2" />
+  </svg>
+);
+
+const LinkedInIcon = () => (
+  <svg role="img" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
+    <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>
+);
+
+const TwitterIcon = () => (
+  <svg role="img" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
+    <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>
+);
+
+export function Footer() {
+  return (
+    <footer className="py-12 md:py-16">
+      <div className="container border-t pt-12 md:pt-16">
+        <div className="grid gap-8 md:grid-cols-12">
+          {/* Logo and tagline */}
+          <div className="md:col-span-4">
+            <Link href="/" className="flex items-center gap-2">
+              <Image
+                src="/amical-icon.svg"
+                width={32}
+                height={32}
+                alt="Amical Logo"
+              />
+              <span className="font-medium">Amical</span>
+            </Link>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Open source Speech-to-Text App
+            </p>
+          </div>
+
+          {/* Links columns */}
+          <div className="grid grid-cols-2 gap-8 md:col-span-4">
+            <div>
+              <h4 className="mb-3 text-sm font-semibold">Product</h4>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li><Link href="/">Overview</Link></li>
+                <li><Link href="/docs">Documentation</Link></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="mb-3 text-sm font-semibold">Resources</h4>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li><Link href="/docs">Docs</Link></li>
+                <li><Link href="/changelog">Changelog</Link></li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Subscribe section */}
+          <div className="md:col-span-4">
+            <div className="flex gap-4 mb-4">
+              <Link href="https://www.linkedin.com/company/amicalhq" className="text-muted-foreground hover:text-foreground">
+                <LinkedInIcon />
+              </Link>
+              <Link href="https://x.com/amicalhq" className="text-muted-foreground hover:text-foreground">
+                <TwitterIcon />
+              </Link>
+              <Link href="https://github.com/amicalhq/amical" className="text-muted-foreground hover:text-foreground">
+                <GithubIcon />
+              </Link>
+              <Link href="/community" className="text-muted-foreground hover:text-foreground">
+                <DiscordIcon />
+              </Link>
+            </div>
+            <SubscriptionForm
+              variant="footer"
+              formName="footer_subscription"
+              redirectUrl="https://amical.ai/?submission=true&form_type=subscribe"
+              showHeader={false}
+            />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/www/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

apps/www/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

apps/www/components/ui/subscription-form.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { CheckCircle2 } from "lucide-react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface SubscriptionFormProps {
+  variant?: 'blog' | 'footer';
+  formName?: string;
+  redirectUrl?: string;
+  showHeader?: boolean;
+}
+
+export function SubscriptionForm({
+  variant = 'blog',
+  formName = 'subscription',
+  redirectUrl = 'https://amical.ai/blog?submission=true&form_type=subscribe',
+  showHeader = true
+}: SubscriptionFormProps) {
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    setShowSuccess(urlParams.get('submission') === 'true' && urlParams.get('form_type') === 'subscribe');
+  }, []);
+
+  return (
+    <>
+      {showHeader && (
+        <>
+          <Badge variant="secondary" className="mb-6">
+            Latest Updates
+          </Badge>
+          <h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
+            Amical <span className="animate-text-gradient inline-flex bg-gradient-to-r from-neutral-900 via-slate-500 to-neutral-500 bg-[200%_auto] bg-clip-text leading-tight text-transparent dark:from-neutral-100 dark:via-slate-400 dark:to-neutral-400">Blog</span>
+          </h2>
+          <p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
+            Discover the latest news and updates from Amical.
+          </p>
+        </>
+      )}
+
+      <form action="https://submit-form.com/nItcloafD" className={`flex flex-col ${variant === 'blog' ? 'items-center' : ''} gap-4`}>
+        <input type="hidden" name="form_name" value={formName} />
+        <input type="hidden" name="_redirect" value={redirectUrl} />
+        <div className={`flex ${variant === 'blog' ? 'w-full max-w-md' : ''} gap-2`}>
+          <Input placeholder="Enter your email" type="email" name="email" required />
+          <Button type="submit">Subscribe</Button>
+        </div>
+      </form>
+
+      <Dialog open={showSuccess} onOpenChange={setShowSuccess}>
+        <DialogContent className="sm:max-w-md">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-50">
+              <CheckCircle2 className="h-8 w-8 text-green-600" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <h3 className="text-lg font-semibold">Successfully Subscribed!</h3>
+              <p className="text-muted-foreground">We&apos;ll send you updates about Amical at most once a month.</p>
+            </div>
+            <Button onClick={() => setShowSuccess(false)} className="mt-2">Close</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

apps/www/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

apps/www/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

apps/www/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/www/lib/metadata.ts

@@ -0,0 +1,27 @@
+import { Metadata } from 'next';
+
+export const baseUrl = new URL(
+  process.env.NEXT_PUBLIC_APP_URL ?? 'https://amical.ai'
+);
+
+export function createMetadata(metadata: Metadata): Metadata {
+  return {
+    ...metadata,
+    title: {
+      template: '%s | Amical - Open Source Speech-to-Text App powered by Gen AI',
+      default: 'Amical - Open Source Speech-to-Text App powered by Gen AI',
+    },
+    description: 'Type 10x faster, no keyboards needed. Fast, Accurate, Context-aware and Private.',
+    metadataBase: baseUrl,
+    openGraph: {
+      title: 'Amical - Open Source Speech-to-Text App powered by Gen AI',
+      description: 'Type 10x faster, no keyboards needed. Fast, Accurate, Context-aware and Private.',
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'Amical - Open Source Speech-to-Text App powered by Gen AI',
+      description: 'Type 10x faster, no keyboards needed. Fast, Accurate, Context-aware and Private.',
+    },
+  };
+}

apps/www/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

apps/www/next.config.mjs

@@ -4,7 +4,12 @@ const withMDX = createMDX();
 
 /** @type {import('next').NextConfig} */
 const config = {
+  output: 'export',
   reactStrictMode: true,
+  images: {
+    domains: ['amical.ai'],
+    unoptimized: true
+  }
 };
 
 export default withMDX(config);

apps/www/package.json

@@ -6,24 +6,38 @@
     "build": "next build",
     "dev": "next dev --turbo",
     "start": "next start",
+    "serve": "pnpm dlx serve out -p 3000",
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@next/third-parties": "^15.3.2",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "fumadocs-core": "15.3.0",
+    "fumadocs-mdx": "11.6.3",
+    "fumadocs-ui": "15.3.0",
+    "lucide-react": "^0.509.0",
     "next": "15.3.1",
+    "next-plausible": "^3.12.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "fumadocs-ui": "15.3.0",
-    "fumadocs-core": "15.3.0",
-    "fumadocs-mdx": "11.6.3"
+    "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.5",
+    "@types/mdx": "^2.0.13",
     "@types/node": "22.15.12",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
-    "typescript": "^5.8.3",
-    "@types/mdx": "^2.0.13",
-    "@tailwindcss/postcss": "^4.1.5",
+    "postcss": "^8.5.3",
+    "server": "^1.0.41",
     "tailwindcss": "^4.1.5",
-    "postcss": "^8.5.3"
+    "tw-animate-css": "^1.2.9",
+    "typescript": "^5.8.3"
   }
 }