A conceptual SaaS product multi-page microsite for an AI-powered language learning platform. Built as a frontend portfolio project to demonstrate real-world React skills, modern UI/UX patterns, and production-level component architecture.
Verbalify is a fictional language learning product SaaS microsite designed to mirror the quality and structure of real-world product marketing sites. The project showcases a complete multi-page experience with seamless navigation, scroll-triggered animations, and responsive design across all device sizes.
Brand Identity:
- Tagline: "Language learning, beautifully simplified"
- Mission: Breaking language barriers, one conversation at a time
| Technology | Version | Purpose |
|---|---|---|
| React | 19 | Component-based UI |
| Vite | 6 | Build tool & dev server |
| Tailwind CSS | 4 | Utility-first styling |
| Framer Motion | 12 | Scroll & entrance animations |
| React Router DOM | 6 | Multi-page routing |
| React Helmet Async | 2 | Manage page titles & meta tags (SEO) |
| React Hook Form | 7 | Form state & validation |
| Swiper.js | 11 | Testimonials carousel |
| Random User API | — | Testimonial and teams profile pictures |
| React International Phone | 3 | Phone input with dial codes |
| React Icons | 5 | Icon library |
- Multi-Page Architecture — 6 full pages with React Router DOM navigation (including 404)
- Dynamic Page Metadata — SEO-friendly titles & meta descriptions using React Helmet Async
- Scroll-Triggered Animations — Entrance animations on scroll using Framer Motion's
useInView - Fully Responsive — Mobile-first design across all screen sizes
- Active Navigation State — Navbar highlights current page using React Router's
useLocation - Testimonials Carousel — Auto-playing carousel with custom navigation & pagination using Swiper.js
- Live API Integration — Fetches real profile pictures from Random User API for team members
- Stagger Animations — Card entrance animations with controlled delays
- Consistent Brand System — Green-based color palette with cohesive typography
- Mobile Hamburger Menu — Animated hamburger with full-screen overlay
- Smooth Page Transitions — Seamless navigation between pages
- Scroll to Top — Auto-scroll to top on route changes
| Concept | Where Used |
|---|---|
useState |
All components |
useEffect |
API fetch for team profiles, Swiper initialization |
useRef + useInView |
Scroll-triggered animations |
| React Router DOM | Multi-page navigation |
| React Helmet Async | Dynamic document title & meta tag management |
useLocation |
Active nav state detection |
useNavigate |
Programmatic navigation (404 redirect) |
| Container/Item Variants | Stagger animations pattern |
| Third-Party Integration | Swiper.js, Random User API |
| Component Reusability | Custom carousel controls, mapped content arrays |
| Responsive Design | Mobile-first Tailwind classes |
| Custom Font Integration | DM Sans, Sora fonts |
| Route-based Scroll Reset | ScrollToTop component pattern |
src/
├── assets/
│ └── components/
│ ├── Navbar.jsx # Fixed navbar with active page detection
│ ├── Footer.jsx # Links and social icons
│ ├── CarouselNavButtons.jsx # Custom Swiper navigation buttons
│ ├── CarouselPaginationDots.jsx # Custom Swiper pagination dots
│ └── ScrollToTop.jsx # Scroll to top on page navigation
├── pages/
│ ├── Home.jsx # Landing page with hero section
│ ├── About.jsx # Mission, values, team section
│ ├── Features.jsx # Product features showcase
│ ├── Plans.jsx # Plans plans
│ ├── Contact.jsx # Contact form
│ └── NotFound.jsx # 404 error page
├── App.jsx # Route configuration
├── main.jsx # App entry point
└── index.css # Global styles & Tailwind imports
public/
└── screenshots/ # Project preview images
node_modules/
package.json # Dependencies and scripts
index.html # SEO meta tags
vite.config.js # Vite configuration
vercel.json # Vercel deployment config
- Node.js v18+
- npm
# Clone the repository
git clone https://github.com/jega1312/verbalify.git
# Navigate into the project
cd verbalify
# Install dependencies
npm install
# Start development server
npm run devnpm run buildnpm install tailwindcss @tailwindcss/vite
npm install react-router-dom
npm install react-helmet-async
npm install react-hook-form
npm install swiper
npm install react-international-phone
npm install react-icons
npm install motionNote: React, ReactDOM, and Vite are scaffolded automatically via
npm create vite@latestand do not require separate installation.
- Primary: Green-based gradient (
green-200,green-500accents) - Backgrounds: White,
slate-50,slate-950for depth - Text:
slate-950(headings),slate-600(body), white on dark sections
- DM Sans — Bold, semibold weights for headings
- Sora — Regular, medium, bold weights for body text and UI elements
- Stagger Animations — Cards appear sequentially with 0.4s delay between items
- Scroll Triggers — Animations fire once when element enters viewport (
once: true) - Consistent Timing — 1.0s duration with
easeOuteasing across all animations
- Grid-Based Sections — Responsive grids (1 col mobile → 2-4 cols desktop)
- Fixed Navbar — Persistent navigation with active state indication
- Section Spacing — Consistent
py-20vertical padding for all sections
- Hero section with brand messaging
- Key statistics and features
- CTA buttons for navigation
- Mission Statement — Core values and principles
- Statistics Section — Practice hours, fluency rates, AI support
- Our Mission Cards — 4 value propositions with hover effects
- Team Section — 4 team members with Random User API profiles
- CTA Section — Call-to-action linking to Contact page
- Comprehensive feature showcase
- Interactive feature cards
- Use case demonstrations
- Plans tiers and plans
- Feature comparison
- Plan selection flow
- Contact form
- Support information
- Social links
- 404 error page
- Navigation back to home
| Breakpoint | Width | Usage |
|---|---|---|
| Mobile | < 768px | 1-column layouts |
| Tablet | 768px - 1024px | 2-column layouts |
| Desktop | > 1024px | 3-4 column layouts |
Jegathiswaran Thiaghu
This project is open source and available under the MIT License ⚖.