492 lines
25 KiB
TypeScript
492 lines
25 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import Image from "next/image";
|
||
|
|
import AnimatedCounter from "@/components/AnimatedCounter";
|
||
|
|
import FeatureCard from "@/components/FeatureCard";
|
||
|
|
import PricingCard from "@/components/PricingCard";
|
||
|
|
import TechStackCard from "@/components/TechStackCard";
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [isLoading, setIsLoading] = useState(true);
|
||
|
|
const [activeFeature, setActiveFeature] = useState(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Check if user is already logged in
|
||
|
|
const token = localStorage.getItem("token");
|
||
|
|
if (token) {
|
||
|
|
router.push("/dashboard");
|
||
|
|
} else {
|
||
|
|
setIsLoading(false);
|
||
|
|
}
|
||
|
|
}, [router]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
setActiveFeature((prev) => (prev + 1) % 4);
|
||
|
|
}, 3000);
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-600 border-t-transparent mx-auto"></div>
|
||
|
|
<p className="mt-6 text-gray-600 text-lg">Loading Candivista...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
|
||
|
|
{/* Navigation */}
|
||
|
|
<nav className="bg-white/90 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="flex justify-between items-center h-16">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<div className="flex-shrink-0 flex items-center space-x-2">
|
||
|
|
<div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
|
||
|
|
<span className="text-white font-bold text-sm">C</span>
|
||
|
|
</div>
|
||
|
|
<h1 className="text-2xl font-bold text-gray-900">Candivista</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
<button
|
||
|
|
onClick={() => router.push("/login")}
|
||
|
|
className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:from-blue-700 hover:to-indigo-700 transition-all duration-300 transform hover:scale-105 shadow-lg"
|
||
|
|
>
|
||
|
|
Get Started
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Hero Section */}
|
||
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-8 animate-pulse">
|
||
|
|
🚀 AI-Powered Interview Platform
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 className="text-6xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
|
||
|
|
The Future of{" "}
|
||
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 animate-gradient-x">
|
||
|
|
AI Recruitment
|
||
|
|
</span>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed">
|
||
|
|
Transform your hiring process with our comprehensive AI-powered multi-tenant interview platform.
|
||
|
|
Create job listings, conduct intelligent interviews, and manage candidates with unprecedented flexibility.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
|
||
|
|
<button
|
||
|
|
onClick={() => router.push("/login")}
|
||
|
|
className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-10 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-indigo-700 transition-all duration-300 transform hover:scale-105 shadow-2xl hover:shadow-blue-500/25"
|
||
|
|
>
|
||
|
|
Start Free Trial
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
|
||
|
|
className="border-2 border-gray-300 text-gray-700 px-10 py-4 rounded-xl font-semibold text-lg hover:border-blue-600 hover:text-blue-600 transition-all duration-300"
|
||
|
|
>
|
||
|
|
Learn More
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Hero Illustration */}
|
||
|
|
<div className="relative max-w-4xl mx-auto mb-20">
|
||
|
|
<div className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-3xl p-8 backdrop-blur-sm border border-white/20">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-bounce">
|
||
|
|
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0V6a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2V6" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">Create Jobs</h3>
|
||
|
|
<p className="text-gray-600 text-sm">Design compelling job postings with AI assistance</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="w-20 h-20 bg-gradient-to-r from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-bounce" style={{ animationDelay: '0.5s' }}>
|
||
|
|
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">AI Interviews</h3>
|
||
|
|
<p className="text-gray-600 text-sm">Conduct intelligent interviews with automated scoring</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="w-20 h-20 bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-bounce" style={{ animationDelay: '1s' }}>
|
||
|
|
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">Analytics</h3>
|
||
|
|
<p className="text-gray-600 text-sm">Get insights and track candidate performance</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Features Section */}
|
||
|
|
<div id="features" className="mt-32">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||
|
|
Powerful Features for Modern Recruitment
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
|
|
Everything you need to streamline your hiring process and find the best talent
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
|
||
|
|
<div className="space-y-8">
|
||
|
|
<FeatureCard
|
||
|
|
icon={
|
||
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||
|
|
</svg>
|
||
|
|
}
|
||
|
|
title="Multi-Tenant Architecture"
|
||
|
|
description="Complete data isolation between companies with enterprise-grade security. Scale to thousands of tenants with confidence."
|
||
|
|
gradient="bg-gradient-to-r from-blue-500 to-blue-600"
|
||
|
|
delay={0}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FeatureCard
|
||
|
|
icon={
|
||
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||
|
|
</svg>
|
||
|
|
}
|
||
|
|
title="Flexible Link System"
|
||
|
|
description="Revolutionary token-based interview distribution. Create custom links with flexible application limits for maximum control."
|
||
|
|
gradient="bg-gradient-to-r from-purple-500 to-purple-600"
|
||
|
|
delay={200}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FeatureCard
|
||
|
|
icon={
|
||
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||
|
|
</svg>
|
||
|
|
}
|
||
|
|
title="AI-Powered Intelligence"
|
||
|
|
description="Local Ollama integration with gpt-oss:20b model for privacy-focused AI interviews. Automated question generation and real-time scoring."
|
||
|
|
gradient="bg-gradient-to-r from-green-500 to-green-600"
|
||
|
|
delay={400}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative">
|
||
|
|
<div className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-3xl p-8 backdrop-blur-sm border border-white/20">
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="bg-white rounded-2xl p-6 shadow-lg">
|
||
|
|
<div className="flex items-center space-x-3 mb-4">
|
||
|
|
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||
|
|
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||
|
|
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||
|
|
</div>
|
||
|
|
<h4 className="font-semibold text-gray-800 mb-2">Interview Dashboard</h4>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="h-2 bg-gray-200 rounded-full">
|
||
|
|
<div className="h-2 bg-blue-500 rounded-full w-3/4"></div>
|
||
|
|
</div>
|
||
|
|
<div className="h-2 bg-gray-200 rounded-full">
|
||
|
|
<div className="h-2 bg-green-500 rounded-full w-1/2"></div>
|
||
|
|
</div>
|
||
|
|
<div className="h-2 bg-gray-200 rounded-full">
|
||
|
|
<div className="h-2 bg-purple-500 rounded-full w-5/6"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white rounded-2xl p-6 shadow-lg">
|
||
|
|
<h4 className="font-semibold text-gray-800 mb-4">AI Analysis</h4>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="flex justify-between text-sm">
|
||
|
|
<span className="text-gray-600">Technical Skills</span>
|
||
|
|
<span className="font-semibold text-green-600">85%</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between text-sm">
|
||
|
|
<span className="text-gray-600">Communication</span>
|
||
|
|
<span className="font-semibold text-blue-600">92%</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between text-sm">
|
||
|
|
<span className="text-gray-600">Problem Solving</span>
|
||
|
|
<span className="font-semibold text-purple-600">78%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Pricing Section */}
|
||
|
|
<div className="mt-32 bg-gradient-to-r from-gray-900 to-gray-800 rounded-3xl p-12 text-white">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||
|
|
Simple, Transparent Pricing
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
|
||
|
|
Pay only for what you use with our flexible token-based system
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||
|
|
<PricingCard
|
||
|
|
name="Single Token"
|
||
|
|
tokens={1}
|
||
|
|
price="$5.00"
|
||
|
|
description="Perfect for testing"
|
||
|
|
features={["1 Interview Token", "Basic Support", "Standard Features"]}
|
||
|
|
gradient="bg-gradient-to-r from-gray-500 to-gray-600"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<PricingCard
|
||
|
|
name="Starter Pack"
|
||
|
|
tokens={5}
|
||
|
|
price="$22.50"
|
||
|
|
description="Small recruitment needs"
|
||
|
|
features={["5 Interview Tokens", "Email Support", "Basic Analytics", "10% Discount"]}
|
||
|
|
gradient="bg-gradient-to-r from-blue-500 to-blue-600"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<PricingCard
|
||
|
|
name="Professional"
|
||
|
|
tokens={20}
|
||
|
|
price="$80.00"
|
||
|
|
description="Regular recruiters"
|
||
|
|
popular={true}
|
||
|
|
features={["20 Interview Tokens", "Priority Support", "Advanced Analytics", "20% Discount", "Custom Branding"]}
|
||
|
|
gradient="bg-gradient-to-r from-purple-500 to-purple-600"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<PricingCard
|
||
|
|
name="Enterprise"
|
||
|
|
tokens={100}
|
||
|
|
price="$300.00"
|
||
|
|
description="Large teams"
|
||
|
|
features={["100 Interview Tokens", "Dedicated Support", "Full Analytics", "40% Discount", "White-label Solution", "API Access"]}
|
||
|
|
gradient="bg-gradient-to-r from-indigo-500 to-indigo-600"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Stats Section */}
|
||
|
|
<div className="mt-32 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-3xl p-12">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||
|
|
Trusted by Companies Worldwide
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
|
|
Join thousands of companies already using Candivista to streamline their recruitment process
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-5xl font-bold text-blue-600 mb-2">
|
||
|
|
<AnimatedCounter end={10000} suffix="+" />
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-600 text-lg">Interviews Conducted</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-5xl font-bold text-purple-600 mb-2">
|
||
|
|
<AnimatedCounter end={500} suffix="+" />
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-600 text-lg">Companies</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-5xl font-bold text-green-600 mb-2">
|
||
|
|
<AnimatedCounter end={50} suffix="+" />
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-600 text-lg">Countries</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-5xl font-bold text-indigo-600 mb-2">
|
||
|
|
<AnimatedCounter end={99} suffix="%" />
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-600 text-lg">Satisfaction Rate</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Technology Stack */}
|
||
|
|
<div className="mt-32">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||
|
|
Built with Modern Technology
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
|
|
Leveraging the latest technologies for optimal performance and developer experience
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
|
|
<TechStackCard
|
||
|
|
name="Next.js 15"
|
||
|
|
icon="⚡"
|
||
|
|
description="React Framework"
|
||
|
|
delay={0}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="TypeScript"
|
||
|
|
icon="🔷"
|
||
|
|
description="Type Safety"
|
||
|
|
delay={100}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="MySQL"
|
||
|
|
icon="🗄️"
|
||
|
|
description="Database"
|
||
|
|
delay={200}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="Docker"
|
||
|
|
icon="🐳"
|
||
|
|
description="Containerization"
|
||
|
|
delay={300}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="Ollama AI"
|
||
|
|
icon="🤖"
|
||
|
|
description="Local AI"
|
||
|
|
delay={400}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="Tailwind CSS"
|
||
|
|
icon="🎨"
|
||
|
|
description="Styling"
|
||
|
|
delay={500}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="Prisma ORM"
|
||
|
|
icon="🔧"
|
||
|
|
description="Database ORM"
|
||
|
|
delay={600}
|
||
|
|
/>
|
||
|
|
<TechStackCard
|
||
|
|
name="Cloudflare"
|
||
|
|
icon="☁️"
|
||
|
|
description="CDN & Security"
|
||
|
|
delay={700}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* CTA Section */}
|
||
|
|
<div className="mt-32 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 rounded-3xl p-12 text-center text-white relative overflow-hidden">
|
||
|
|
<div className="absolute inset-0 bg-black/10"></div>
|
||
|
|
<div className="relative z-10">
|
||
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||
|
|
Ready to Transform Your Hiring?
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl mb-8 opacity-90 max-w-3xl mx-auto">
|
||
|
|
Join thousands of companies already using Candivista to streamline their recruitment process
|
||
|
|
and find the best talent with AI-powered interviews.
|
||
|
|
</p>
|
||
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
||
|
|
<button
|
||
|
|
onClick={() => router.push("/login")}
|
||
|
|
className="bg-white text-blue-600 px-10 py-4 rounded-xl font-semibold text-lg hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-2xl"
|
||
|
|
>
|
||
|
|
Start Free Trial
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
|
||
|
|
className="border-2 border-white text-white px-10 py-4 rounded-xl font-semibold text-lg hover:bg-white hover:text-blue-600 transition-all duration-300"
|
||
|
|
>
|
||
|
|
Learn More
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<footer className="bg-gray-900 text-white py-16 mt-20">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||
|
|
<div className="col-span-1 md:col-span-2">
|
||
|
|
<div className="flex items-center space-x-2 mb-6">
|
||
|
|
<div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
|
||
|
|
<span className="text-white font-bold text-sm">C</span>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-bold">Candivista</h3>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400 mb-6 max-w-md">
|
||
|
|
The future of AI-powered recruitment. Transform your hiring process with intelligent interviews,
|
||
|
|
flexible link management, and comprehensive analytics.
|
||
|
|
</p>
|
||
|
|
<div className="flex space-x-4">
|
||
|
|
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
<a href="#" className="text-gray-400 hover:text-white transition-colors">
|
||
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="text-lg font-semibold mb-4">Product</h4>
|
||
|
|
<ul className="space-y-2">
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Features</a></li>
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Pricing</a></li>
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">API</a></li>
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="text-lg font-semibold mb-4">Company</h4>
|
||
|
|
<ul className="space-y-2">
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">About</a></li>
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Blog</a></li>
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Careers</a></li>
|
||
|
|
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-12 pt-8 border-t border-gray-800">
|
||
|
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||
|
|
<p className="text-gray-400 text-sm">
|
||
|
|
© 2024 Candivista. All rights reserved.
|
||
|
|
</p>
|
||
|
|
<div className="flex space-x-6 mt-4 md:mt-0">
|
||
|
|
<a href="#" className="text-gray-400 hover:text-white transition-colors text-sm">Privacy Policy</a>
|
||
|
|
<a href="#" className="text-gray-400 hover:text-white transition-colors text-sm">Terms of Service</a>
|
||
|
|
<a href="#" className="text-gray-400 hover:text-white transition-colors text-sm">Cookie Policy</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|