WriteAI is a state-of-the-art, high-converting landing page built for the next generation of AI-powered writing tools. Designed with a "Premium-First" philosophy, it combines sophisticated aesthetics, smooth interactions, and a rock-solid technical foundation.
The project adopts a unique, elegant color palette designed to feel professional yet warm.
- Primary Colors:
Cream (#F4ECD6): Used as the primary background for light mode and highlight for dark mode.Dark Purple (#310A31): Used for core typography, borders, and dark mode background.
- Typography: Integrated "Outfit" from Google Fonts (via
@fontsource/outfit) for its modern, clean, and geometric sans-serif feel. - Visuals:
- Glassmorphism: Subtle backdrop blurs on the Navbar and Mobile Sheet.
- Dynamic Blobs: Animated CSS-only morphing blobs in the Hero section for visual depth.
- Particle System: Interactive background nodes powered by
tsparticlesthat are theme-aware (switching from white to dark purple on theme toggle). - Animated Headline: Entry animations using
@vueuse/motionwith spring physics. - Floating Badge: Pulse-animated "New Feature" indicator.
- A high-performance, infinite scrolling testimonial grid.
- Three Columns: Synchronized movement where the outer columns scroll up and the center column scrolls down for a dynamic, "alive" feel.
- Hover States: Cards pause/lift on hover using CSS transforms.
- Adaptive Navbar: Sticky blur effect with intersection awareness.
- Smart Mobile Menu: A full-screen Sheet (Shadcn) that automatically closes when a link is clicked, providing a seamless single-page application experience.
- Theme Engine: Robust light/dark switching powered by
@vueuse/corewith persisted state.
- Animated Sections: Grid layout with cross-fade entry animations.
- Floating Actions: A "Scroll to Top" button that dynamically appears after scrolling, featuring smooth transitions.
- Core: Vue 3 (Composition API /
<script setup>) - Build Tool: Vite
- Styling: Tailwind CSS v4 (Beta)
- Animation Engine: @vueuse/motion
- Particle Engine: @tsparticles/vue3
- Icons: Lucide Vue Next
- UI Components: Shadcn Vue (Custom Refactored to JavaScript & Multi-word naming)
src/
├── components/ # Reusable UI Blocks
│ ├── ui/ # Primary Atomic Components (Buttons, Inputs, etc.)
│ ├── AppNavbar.vue # Specialized Responsive Navbar
│ ├── HeroSection.vue # Animated Landing Entry
│ ├── ContactSection.vue# Form and Branding
│ └── ... # Features, Pricing, Testimonials
├── composables/ # Global Logic (Theming, State)
├── styles/
│ └── global.css # Tailwind v4 Theme & Theme Variables
└── views/
└── HomeView.vue # Central Orchestration Page- Clone & Install:
npm install- Run Dev Server:
npm run dev- Production Build:
npm run build- Component Naming: Strictly follows the Vue Style Guide (Multi-word naming:
UiButton,AppNavbar). - Performance: Heavy use of CSS animations over JavaScript where possible for maximum frame rates.
- Maintenance: All Shadcn components have been converted to JavaScript to ensure zero-friction development without TypeScript overhead.
Developed with ❤️ for high-performance SaaS experiences.