Candivista Frontend - Modern AI Recruitment Platform

🎨 Beautiful, Modern Frontend

A stunning, responsive frontend built with Next.js 15, TypeScript, and Tailwind CSS that showcases the complete Candivista AI-powered recruitment platform.

✨ Key Features

🎯 Modern Design

  • Gradient animations and smooth transitions
  • Glass morphism effects with backdrop blur
  • Interactive hover animations and micro-interactions
  • Responsive design for all devices
  • Custom CSS animations for enhanced UX

🚀 Performance Optimized

  • Next.js 15 with App Router
  • TypeScript for type safety
  • Tailwind CSS for utility-first styling
  • Optimized images and lazy loading
  • Smooth scrolling and navigation

🎭 Interactive Components

  • AnimatedCounter - Smooth number animations
  • FeatureCard - Hover effects and gradients
  • PricingCard - Interactive pricing plans
  • TechStackCard - Technology showcase

🏗️ Project Structure

frontend/candidat-frontend/
├── src/
│   ├── app/
│   │   ├── page.tsx              # Main landing page
│   │   ├── globals.css           # Global styles & animations
│   │   ├── layout.tsx            # Root layout
│   │   └── favicon.ico
│   └── components/
│       ├── AnimatedCounter.tsx   # Animated number counter
│       ├── FeatureCard.tsx       # Feature showcase card
│       ├── PricingCard.tsx       # Pricing plan card
│       └── TechStackCard.tsx     # Technology stack card
├── public/                       # Static assets
├── package.json
├── next.config.js
├── tailwind.config.js
└── tsconfig.json

🎨 Design System

Color Palette

  • Primary: Blue (#3B82F6) to Indigo (#6366F1)
  • Secondary: Purple (#8B5CF6) to Pink (#EC4899)
  • Accent: Green (#10B981) for success states
  • Neutral: Gray scale for text and backgrounds

Typography

  • Headings: Bold, large sizes with gradient text
  • Body: Clean, readable font with proper line height
  • Responsive: Scales appropriately on all devices

Animations

  • Gradient animations for text and backgrounds
  • Hover effects with scale and shadow transitions
  • Smooth scrolling between sections
  • Loading animations with custom spinners

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Next.js 15

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Development

# Run with hot reload
npm run dev

# Type checking
npm run type-check

# Linting
npm run lint

🎯 Key Sections

1. Hero Section

  • Compelling headline with gradient text animation
  • Clear value proposition for AI recruitment
  • Call-to-action buttons with hover effects
  • Interactive illustration showing the workflow

2. Features Section

  • Multi-tenant architecture explanation
  • Flexible link system showcase
  • AI-powered intelligence highlights
  • Visual dashboard mockup with animations

3. Pricing Section

  • Token-based pricing with clear tiers
  • Interactive pricing cards with hover effects
  • Feature comparison for each plan
  • Popular plan highlighting

4. Technology Stack

  • Modern tech showcase with icons
  • Hover animations for each technology
  • Performance benefits explanation
  • Developer experience highlights

5. Stats Section

  • Animated counters showing platform success
  • Trust indicators for credibility
  • Social proof elements

6. Call-to-Action

  • Compelling final CTA with gradient background
  • Multiple action options for different users
  • Urgency and value messaging

🎨 Custom Animations

CSS Animations

/* Gradient text animation */
.animate-gradient-x {
  animation: gradient-x 3s ease infinite;
}

/* Floating animation */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Pulse glow effect */
.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

Component Animations

  • Staggered animations for feature cards
  • Hover transformations for interactive elements
  • Smooth transitions between states
  • Loading states with custom spinners

📱 Responsive Design

Breakpoints

  • Mobile: 320px - 768px
  • Tablet: 768px - 1024px
  • Desktop: 1024px+

Mobile Optimizations

  • Touch-friendly button sizes
  • Optimized typography for small screens
  • Swipe gestures for carousels
  • Fast loading on mobile networks

🎯 Performance Features

Optimization

  • Image optimization with Next.js Image component
  • Code splitting for faster loading
  • Lazy loading for below-the-fold content
  • Minimal bundle size with tree shaking

SEO Ready

  • Semantic HTML structure
  • Meta tags for social sharing
  • Structured data for search engines
  • Fast loading for better rankings

🔧 Customization

Theming

  • CSS variables for easy color changes
  • Tailwind config for design system
  • Component props for flexibility
  • Dark mode support ready

Content Management

  • Easy text updates in components
  • Image replacement in public folder
  • Configuration in separate files
  • Environment variables for API URLs

🚀 Deployment

Production Build

# Build optimized production bundle
npm run build

# Start production server
npm start

Docker Support

# Multi-stage build for optimization
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
EXPOSE 3000
CMD ["npm", "start"]

🎉 Result

A stunning, modern frontend that:

  • ✅ Showcases the complete Candivista platform
  • ✅ Engages users with beautiful animations
  • ✅ Converts visitors with clear value propositions
  • ✅ Performs excellently on all devices
  • ✅ Scales for future feature additions

The frontend perfectly represents the sophisticated AI recruitment platform with a professional, modern design that will impress users and drive conversions.

📞 Support

For questions or support regarding the frontend:

  • Documentation: Check component READMEs
  • Issues: Create GitHub issues
  • Contributions: Submit pull requests
  • Contact: Reach out to the development team

Built with ❤️ using Next.js 15, TypeScript, and Tailwind CSS