[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/modern-office-workspace-with-creative-team-collabo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-office-workspace-with-creative-team-collabo-8UQGrXKlYmftfL1SRIRCUTZstwKGFK.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-headshot-of-female-ceo-with-warm-smil.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-female-ceo-with-warm-smil-gdskd7fvWlpdOTxINC3Wec8r5PM5aY.jpg" isMerged="true" [V0_FILE]png:file="public/team-member-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/team-member-2-scp5LCWJ6JGFg4A12IAkZZEoWkQkfa.png" isMerged="true" [V0_FILE]png:file="public/female-design-director-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-design-director-headshot-FQN4PUQPrzVuF3VQsXE3OGCHDZUQRb.png" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --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); --destructive-foreground: 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); --radius: 0.625rem; --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.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 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.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 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(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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-destructive-foreground: var(--destructive-foreground); --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); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added explicit button contrast styles */ /* High contrast button styles for accessibility */ .btn-primary { background: linear-gradient(135deg, #c2410c 0%, #dc2626 100%) !important; color: white !important; border: none !important; } .btn-primary:hover { background: linear-gradient(135deg, #9a3412 0%, #b91c1c 100%) !important; color: white !important; } .btn-secondary { background: #92400e !important; color: white !important; border: none !important; } .btn-secondary:hover { background: #78350f !important; color: white !important; } /* Paper texture pattern and animation styles */ /* Paper texture pattern */ .paper-texture { background-image: radial-gradient(circle at 25% 25%, rgba(212, 165, 116, 0.1) 1px, transparent 1px), radial-gradient(circle at 75% 25%, rgba(212, 165, 116, 0.1) 1px, transparent 1px), radial-gradient(circle at 25% 75%, rgba(212, 165, 116, 0.1) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(212, 165, 116, 0.1) 1px, transparent 1px); background-size: 60px 60px; background-position: 0 0, 30px 0, 0 30px, 30px 30px; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(12deg); } 50% { transform: translateY(-20px) rotate(12deg); } } @keyframes float-delayed { 0%, 100% { transform: translateY(0px) rotate(-6deg); } 50% { transform: translateY(-15px) rotate(-6deg); } } @keyframes float-slow { 0%, 100% { transform: translateY(0px) rotate(45deg); } 50% { transform: translateY(-10px) rotate(45deg); } } @keyframes paper-fold { 0% { transform: rotateY(-90deg) rotateX(10deg); opacity: 0; } 100% { transform: rotateY(0deg) rotateX(0deg); opacity: 1; } } @keyframes paper-unfold { 0% { transform: scaleY(0) rotateX(-90deg); opacity: 0; } 100% { transform: scaleY(1) rotateX(0deg); opacity: 1; } } @keyframes paper-stack-animate { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-5px) rotate(1deg); } 66% { transform: translateY(-3px) rotate(-1deg); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-float-delayed { animation: float-delayed 8s ease-in-out infinite; } .animate-float-slow { animation: float-slow 10s ease-in-out infinite; } .paper-fold-container { perspective: 1000px; } .paper-sheet { animation: paper-fold 1s ease-out; transform-style: preserve-3d; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 240, 0.9) 100%); border-radius: 8px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); position: relative; } .paper-sheet::before { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: linear-gradient(-45deg, transparent 46%, rgba(0, 0, 0, 0.1) 50%, transparent 54%); border-radius: 0 8px 0 0; } .paper-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 240, 0.95) 100%); border-radius: 12px; padding: 2rem; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); transform: perspective(1000px) rotateX(2deg); transition: all 0.3s ease; } .paper-card:hover { transform: perspective(1000px) rotateX(0deg) translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .feature-card { background: rgba(255, 255, 255, 0.8); border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); } .feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .paper-stack { position: relative; width: 300px; height: 400px; margin: 0 auto; } .paper-layer { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 240, 0.9) 100%); border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); animation: paper-stack-animate 8s ease-in-out infinite; } .paper-layer-1 { z-index: 3; animation-delay: 0s; } .paper-layer-2 { z-index: 2; transform: translate(8px, 8px) rotate(2deg); animation-delay: 2s; } .paper-layer-3 { z-index: 1; transform: translate(16px, 16px) rotate(-1deg); animation-delay: 4s; } .paper-unfold { animation: paper-unfold 0.8s ease-out; } .paper-button { position: relative; overflow: hidden; } .paper-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .paper-button:hover::before { left: 100%; } .cta-button { position: relative; overflow: hidden; } .cta-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; } .cta-button:hover::after { width: 300px; height: 300px; } /* Added pricing card and team card styles */ .pricing-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 240, 0.95) 100%); border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); transform: perspective(1000px) rotateX(2deg); transition: all 0.3s ease; position: relative; overflow: hidden; } .pricing-card:hover { transform: perspective(1000px) rotateX(0deg) translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .pricing-card.featured { border: 2px solid #f97316; transform: perspective(1000px) rotateX(0deg) scale(1.05); } .pricing-card.featured:hover { transform: perspective(1000px) rotateX(0deg) scale(1.05) translateY(-8px); } .value-card { background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 2rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); } .value-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); } .team-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 240, 0.95) 100%); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; text-align: center; } .team-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); } /* Added shader effects and cursor follower styles */ /* Cursor Follower */ .cursor-follower { position: fixed; width: 20px; height: 20px; background: radial-gradient(circle, rgba(251, 146, 60, 0.8) 0%, rgba(239, 68, 68, 0.6) 50%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: all 0.1s ease-out; mix-blend-mode: multiply; filter: blur(1px); } /* Shader Overlay */ .shader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(251, 146, 60, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.08) 0%, transparent 50%); pointer-events: none; z-index: 1; animation: shader-drift 20s ease-in-out infinite; } @keyframes shader-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.8; } 25% { transform: translate(10px, -10px) rotate(1deg); opacity: 0.6; } 50% { transform: translate(-5px, 10px) rotate(-0.5deg); opacity: 0.9; } 75% { transform: translate(-10px, -5px) rotate(0.5deg); opacity: 0.7; } } /* Shader Effects for Elements */ .shader-paper { position: relative; overflow: hidden; } .shader-paper::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(251, 146, 60, 0.1) 50%, transparent 70%); animation: shader-sweep 8s ease-in-out infinite; pointer-events: none; } @keyframes shader-sweep { 0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; } 50% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 1; } } .shader-text { position: relative; background-size: 200% 200%; animation: shader-gradient 4s ease infinite; } @keyframes shader-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .shader-card { position: relative; overflow: hidden; } .shader-card::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(251, 146, 60, 0.2), transparent); transition: left 0.8s ease; } .shader-card:hover::after { left: 100%; } .shader-icon { position: relative; filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.3)); transition: all 0.3s ease; } .shader-icon:hover { filter: drop-shadow(0 0 20px rgba(251, 146, 60, 0.5)); transform: scale(1.1); } .shader-element { position: relative; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); transition: all 0.3s ease; } .shader-element::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%); border-radius: inherit; pointer-events: none; } .shader-layer { position: relative; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); } .shader-layer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 0%, transparent 30%, rgba(251, 146, 60, 0.1) 70%, transparent 100% ); border-radius: inherit; pointer-events: none; animation: shader-shimmer 6s ease-in-out infinite; } @keyframes shader-shimmer { 0%, 100% { opacity: 0.3; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(10px); } } .shader-stack { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2)); } /* Enhanced hover effects with shaders */ .feature-card:hover .shader-icon { animation: shader-pulse 1s ease-in-out infinite; } @keyframes shader-pulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.3)); } 50% { filter: drop-shadow(0 0 25px rgba(251, 146, 60, 0.6)); } } /* Responsive shader adjustments */ @media (max-width: 768px) { .cursor-follower { width: 15px; height: 15px; } .shader-overlay { opacity: 0.5; } .shader-card::after { display: none; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { .cursor-follower { display: none; } .shader-overlay { animation: none; } .shader-paper::before, .shader-layer::before { animation: none; } .shader-text { animation: none; } } @media (max-width: 768px) { .paper-stack { width: 250px; height: 320px; } .paper-sheet { padding: 1.5rem; } .paper-card { padding: 1.5rem; } .pricing-card { border-radius: 14px; } .value-card { border-radius: 10px; } .team-card { border-radius: 14px; } } [V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { ArrowLeft, Award, Brain, Mail, Sparkles } from "lucide-react" import Link from "next/link" import Image from "next/image" export default function AboutPage() { const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) return (

{/* Paper texture overlay */}

{/* Navigation */} {/* Hero Section */}

Our Story

We believe that great communication should be accessible to everyone. Our AI-powered platform transforms how people write emails, making professional communication effortless and effective.

Founded on AI Innovation

Started in 2022 by a team of AI researchers and communication experts who were frustrated with the time and effort required to write effective emails, EmailCraft AI was born from a simple idea: artificial intelligence should make professional communication effortless.

Today, we serve over 100,000 professionals worldwide, helping them craft compelling emails that get results while saving hours of writing time every week.

Our AI research team collaborating in a modern workspace

{/* Values Section */}

Our Values

These principles guide our AI development and shape how we help people communicate better.

AI-First

We leverage cutting-edge AI to understand context, tone, and intent, making email writing intelligent and intuitive.

Communication

Great communication builds relationships and drives results. We help you express ideas clearly and persuasively.

Simplicity

Complex AI should feel simple. Our interface is intuitive, making professional email writing accessible to everyone.

Excellence

We continuously improve our AI models to deliver the highest quality email suggestions and writing assistance.

{/* Team Section */}

Meet Our Team

The AI researchers and communication experts behind EmailCraft AI, dedicated to revolutionizing how we write emails.

Dr. Sarah Chen

CEO & Co-founder

Former AI researcher at Stanford with a PhD in Natural Language Processing. Sarah leads our mission to make AI-powered communication accessible to everyone.

Marcus Rodriguez

CTO & Co-founder

Machine learning engineer with 12 years of experience in AI systems. Marcus architected our core AI engine that powers intelligent email generation.

Emma Thompson

Head of AI Research

Emma leads our AI research team, continuously improving our language models to better understand context, tone, and communication effectiveness.

{/* CTA Section */}

Join the AI Email Revolution

Be part of the future of professional communication. Start writing better emails with AI assistance today.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { ChevronDown, Check, Star, Zap, Mail, Brain, Wand2 } from "lucide-react" import Link from "next/link" export default function PaperLandingPage() { const [isLoaded, setIsLoaded] = useState(false) const [activeSection, setActiveSection] = useState(0) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const cursorFollowerRef = useRef(null) useEffect(() => { setIsLoaded(true) const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) return (

{/* Paper texture overlay */}

{/* Navigation */} {/* Hero Section */}

{/* Animated paper fold effect */}

{/* Paper fold animation container */}

Craft Perfect Emails with AI

Transform your email communication with AI-powered writing assistance. Create compelling, professional emails that get results in seconds, not hours.

{/* Scroll indicator */}

{/* Features Section */}

AI-Powered Email Features

Discover the intelligent tools that make email writing effortless, effective, and engaging for every situation.

Smart AI Writing

Advanced AI understands context and tone to generate perfectly crafted emails for any situation.

Tone Adjustment

Instantly adjust your email's tone from formal to casual, persuasive to friendly, with one click.

Instant Generation

Generate complete, professional emails in seconds. No more staring at blank screens.

{/* Left side - Illustrated features */}

Smart AI Analysis

Our AI analyzes your writing style, recipient context, and communication goals to suggest the most effective approach for every email.

98% accuracy rate

Instant Tone Adaptation

Switch between professional, casual, persuasive, or friendly tones instantly. Perfect for any situation or audience.

Professional Friendly Persuasive

{/* Right side - Large illustration */}

{/* Email interface mockup */}

EmailCraft AI Studio

{/* Email composition area */}

To: client@company.com

AI Writing Assistant

Active

95%

Engagement

Tone Match

Impact

{/* Floating AI elements */}

{/* Background decorative elements */}

{/* Bottom stats section */}

10M+

Emails Generated

Trusted by professionals worldwide

98%

Accuracy Rate

AI-powered precision

Faster Writing

Save hours every week

4.9/5 Rating

Loved by our users

{/* Pricing Section */}

Simple, Transparent Pricing

Choose the perfect plan for your email needs. All plans include AI writing assistance with no hidden fees.

{/* Starter Plan */}

Starter

Perfect for individuals and small email needs

$9 /month

100 AI-generated emails/month
Basic email templates
Tone adjustment
Email support

{/* Professional Plan */}

Professional

Ideal for professionals and growing teams

$29 /month

Unlimited AI emails
Premium templates library
Advanced tone controls
Response prediction
Priority support

{/* Enterprise Plan */}

Enterprise

For large organizations with custom needs

$99 /month

Everything in Professional
Custom AI training
Team collaboration
API access
24/7 phone support

{/* Call to Action Section */}

Ready to Transform Your Emails?

Join thousands of professionals who have already discovered the power of AI-assisted email writing. Start crafting perfect emails today.

) }

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This