Koino Landing Page

A production-ready landing page with sophisticated animations and interactions, inspired by the Koino website. Built with Next.js 14, Framer Motion, and Tailwind CSS.

🎨 Features

• 🎭 Smooth Animations: 60fps scroll-triggered animations with Framer Motion
• 📱 Fully Responsive: Mobile-first design with tablet (810px) and desktop (1200px) breakpoints
• ♿ Accessible: WCAG AA compliant with reduced motion support
• ⚡ Performance: Optimized images, fonts, and animations
• 🎨 Typography System: Multi-font setup with Inter and Montserrat
• 🌙 Dark Mode Ready: CSS variable-based color system
• 🔥 Distinctive Design: Avoids generic AI aesthetics with bold, intentional choices

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Navigate to the project directory:

cd koino-landing-page

2. Install dependencies (if not already done):

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm run start

📁 Project Structure

koino-landing-page/
├── app/
│   ├── layout.tsx          # Root layout with font configuration
│   ├── page.tsx            # Home page with all sections
│   └── globals.css         # Global styles & CSS variables
├── components/
│   ├── sections/           # Page sections (Hero, Features, etc.)
│   │   ├── Hero.tsx
│   │   ├── Features.tsx
│   │   └── HowItWorks.tsx
│   ├── providers/          # Context providers (MotionProvider)
│   │   └── MotionProvider.tsx
│   ├── Navigation.tsx      # Header with full-screen menu
│   ├── Marquee.tsx         # Infinite scroll marquee
│   ├── FeatureCard.tsx     # Animated feature card
│   ├── PhoneMockup.tsx     # Device mockup component
│   ├── AnimatedSection.tsx # Reusable scroll animation wrapper
│   └── Footer.tsx          # Footer with link animations
├── hooks/
│   └── useScrollAnimation.ts  # Custom animation hooks
├── lib/
│   └── animations.ts       # Framer Motion variants library
├── public/
│   └── mockups/            # Phone mockup screenshots
├── tailwind.config.ts      # Tailwind configuration
└── next.config.js          # Next.js configuration

🎬 Animation System

All animations use Framer Motion variants defined in /lib/animations.ts:

• fadeInUp - Fade in from bottom (sections)
• fadeInLeft/Right - Horizontal slide-ins
• scaleIn - Scale + fade (cards)
• staggerContainer - Sequential child animations
• headlineReveal - Hero text animation
• menuOverlay - Full-screen menu slide
• menuItem - Menu item stagger

Usage Example

import { fadeInUp } from '@/lib/animations'

<motion.div
  variants={fadeInUp}
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true, amount: 0.3 }}
>
  Your content
</motion.div>

🎨 Design System

Colors

The project uses a token-based color system defined in CSS variables:

• Purple: Brand accent colors (koino-purple-50 to koino-purple-900)
• Blue: Secondary accents (koino-blue-50, koino-blue-500, koino-blue-600)
• Neutral: Grayscale palette (koino-neutral-0 to koino-neutral-900)

Edit colors in /app/globals.css:

:root {
  --koino-purple-500: 139 92 246;
  --koino-blue-500: 59 130 246;
  /* Add more colors */
}

Typography

• Sans: Inter (primary body text)
• Display: Montserrat (headings, bold text)

Display font sizes:

• display-xl: 7rem (hero headlines)
• display-lg: 5rem (section headlines)
• display-md: 3.5rem (subsection headlines)
• display-sm: 2.5rem (card headlines)

Breakpoints

• Mobile: < 810px
• Tablet: 810px - 1199px
• Desktop: 1200px+

⚡ Performance

• All animations use transform and opacity only (GPU-accelerated)
• Images optimized with Next.js Image component (AVIF/WebP)
• Fonts loaded with next/font (automatic optimization)
• Viewport triggers set to once: true (animate once)
• Bundle optimized with SWC minification

♿ Accessibility

• Respects prefers-reduced-motion
• ARIA labels on all interactive elements
• Keyboard navigation support (Tab, Escape)
• Focus indicators on all focusable elements
• Color contrast meets WCAG AA standards (4.5:1 minimum)

🎯 Key Components

Navigation

Fixed header with hamburger menu that opens full-screen overlay. Menu items animate with stagger effect.

Hero

Hero section with dramatic headline reveal, gradient background, and animated CTAs.

Marquee

Infinite horizontal scrolling text with seamless looping.

Features

Grid of feature cards with hover lift effects and icon animations.

How It Works

Three-step process with alternating layout and phone mockups.

Footer

Footer with animated link underlines and social icons.

🛠️ Customization

Adding New Sections

1. Create component in components/sections/
2. Import in app/page.tsx
3. Add between existing sections

Modifying Animations

Edit timing/easing in /lib/animations.ts:

export const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 60 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
  }
}

Changing Colors

Update CSS variables in /app/globals.css and Tailwind config in /tailwind.config.ts.

📱 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile Safari (iOS 14+)
• Chrome Mobile (Android 10+)

🚢 Deployment

Vercel (Recommended)

npm i -g vercel
vercel login
vercel --prod

Other Platforms

Build the static site:

npm run build

Output will be in .next/ directory. Deploy to any static hosting provider.

📝 License

MIT

---

Built with:

• Next.js 14
• Framer Motion
• Tailwind CSS
• Lucide Icons

Development Notes:

• The server is currently running at http://localhost:3000
• Phone mockups use placeholder gradients (add actual screenshots to /public/mockups/)
• All animations are optimized for 60fps performance
• Reduced motion is fully supported for accessibility

Kionkowebsitetochefai