Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Career-9 | AI-Driven Career Guidance Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Lora', serif; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .hero-section { | |
| background: linear-gradient(rgba(46, 139, 87, 0.8), rgba(46, 139, 87, 0.8)), url('https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .transition-smooth { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card { | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| .testimonial-card.active { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-emerald-700 text-white p-2 rounded-lg mr-2"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <span class="font-bold text-emerald-700 text-xl">Career-9</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-emerald-700 font-semibold hover:text-emerald-900 transition-smooth">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700 transition-smooth">How It Works</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700 transition-smooth">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700 transition-smooth">Testimonials</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700 transition-smooth">About Us</a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <button class="bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-lg font-semibold transition-smooth"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-emerald-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white px-6 py-4 shadow-lg"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#" class="text-emerald-700 font-semibold">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700">How It Works</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700">Testimonials</a> | |
| <a href="#" class="text-gray-600 hover:text-emerald-700">About Us</a> | |
| <button class="bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-lg font-semibold w-full"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-section text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Empower Your Child's Future with Career-9</h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">AI-powered career guidance to help students discover their strengths and unlock their full potential.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition-smooth shadow-lg"> | |
| Start Free Assessment | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-emerald-700 px-8 py-4 rounded-lg font-bold text-lg transition-smooth shadow-lg"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-emerald-700 text-4xl font-bold mb-2">10K+</div> | |
| <div class="text-gray-600">Students Guided</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-emerald-700 text-4xl font-bold mb-2">95%</div> | |
| <div class="text-gray-600">Satisfaction Rate</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-emerald-700 text-4xl font-bold mb-2">50+</div> | |
| <div class="text-gray-600">Career Paths</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-emerald-700 text-4xl font-bold mb-2">24/7</div> | |
| <div class="text-gray-600">Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Discover Your Strengths Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-emerald-700 mb-4">Discover Your Strengths</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our AI-powered assessment identifies your child's unique talents, interests, and personality traits to recommend the most suitable career paths.</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center gap-10"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg card-hover transition-smooth"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-emerald-100 text-emerald-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Comprehensive Assessment</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Our scientifically validated questionnaire evaluates multiple dimensions including cognitive abilities, personality traits, and vocational interests.</p> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-amber-100 text-amber-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Personalized Insights</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Get detailed reports highlighting your child's strengths, areas for improvement, and recommended career paths tailored to their unique profile.</p> | |
| <button class="bg-emerald-700 hover:bg-emerald-800 text-white px-6 py-3 rounded-lg font-semibold w-full transition-smooth"> | |
| Take Assessment Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Students learning" class="rounded-xl shadow-lg w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Personalized Career Paths Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-emerald-700 mb-4">Personalized Career Paths</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We don't believe in one-size-fits-all solutions. Our AI analyzes multiple data points to recommend careers that align with your child's unique profile.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Career Path Card 1 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-smooth"> | |
| <div class="bg-emerald-100 text-emerald-700 p-4 rounded-lg mb-4 inline-block"> | |
| <i class="fas fa-laptop-code text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Technology</h3> | |
| <p class="text-gray-600 mb-4">For students with strong analytical skills and interest in innovation.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Software Engineer</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Data Scientist</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Cybersecurity Expert</span> | |
| </li> | |
| </ul> | |
| <button class="text-emerald-700 font-semibold hover:text-emerald-900 transition-smooth flex items-center"> | |
| Explore More <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Career Path Card 2 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-smooth"> | |
| <div class="bg-amber-100 text-amber-700 p-4 rounded-lg mb-4 inline-block"> | |
| <i class="fas fa-heartbeat text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Healthcare</h3> | |
| <p class="text-gray-600 mb-4">For compassionate individuals with strong scientific aptitude.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Doctor</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Medical Researcher</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Public Health Specialist</span> | |
| </li> | |
| </ul> | |
| <button class="text-emerald-700 font-semibold hover:text-emerald-900 transition-smooth flex items-center"> | |
| Explore More <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Career Path Card 3 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-smooth"> | |
| <div class="bg-blue-100 text-blue-700 p-4 rounded-lg mb-4 inline-block"> | |
| <i class="fas fa-paint-brush text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Creative Arts</h3> | |
| <p class="text-gray-600 mb-4">For imaginative minds with strong visual or performing arts skills.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Graphic Designer</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Film Director</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-emerald-700 mr-2"></i> | |
| <span>Architect</span> | |
| </li> | |
| </ul> | |
| <button class="text-emerald-700 font-semibold hover:text-emerald-900 transition-smooth flex items-center"> | |
| Explore More <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sample Report Section --> | |
| <section class="py-16 bg-emerald-700 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">See What You'll Get</h2> | |
| <p class="max-w-2xl mx-auto">Our detailed reports provide actionable insights to guide your child's career journey.</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-8 text-gray-800"> | |
| <h3 class="text-2xl font-bold mb-6">Sample Career Report</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-bold text-emerald-700 mb-2">Top Career Matches</h4> | |
| <p>Based on your assessment results, these careers align best with your skills and interests.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-emerald-700 mb-2">Personality Insights</h4> | |
| <p>Understand how your personality traits influence your career preferences and workplace behavior.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-emerald-700 mb-2">Skill Development Plan</h4> | |
| <p>Personalized recommendations to strengthen the skills needed for your top career matches.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-emerald-700 mb-2">Educational Pathways</h4> | |
| <p>Detailed guidance on courses, degrees, and institutions that will help you achieve your career goals.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 bg-gray-100 p-8 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sample report" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skill Mastery Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-emerald-700 mb-4">Skill Mastery</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We don't just recommend careers - we help students develop the skills they need to succeed.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Skill 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition-smooth text-center"> | |
| <div class="bg-emerald-100 text-emerald-700 p-4 rounded-full inline-block mb-4"> | |
| <i class="fas fa-comments text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Communication</h3> | |
| <p class="text-gray-600">Interactive modules to enhance verbal and written communication skills.</p> | |
| </div> | |
| <!-- Skill 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition-smooth text-center"> | |
| <div class="bg-amber-100 text-amber-700 p-4 rounded-full inline-block mb-4"> | |
| <i class="fas fa-brain text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Critical Thinking</h3> | |
| <p class="text-gray-600">Exercises to develop analytical and problem-solving abilities.</p> | |
| </div> | |
| <!-- Skill 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition-smooth text-center"> | |
| <div class="bg-blue-100 text-blue-700 p-4 rounded-full inline-block mb-4"> | |
| <i class="fas fa-users text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Teamwork</h3> | |
| <p class="text-gray-600">Collaborative projects to build leadership and cooperation skills.</p> | |
| </div> | |
| <!-- Skill 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition-smooth text-center"> | |
| <div class="bg-purple-100 text-purple-700 p-4 rounded-full inline-block mb-4"> | |
| <i class="fas fa-lightbulb text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Creativity</h3> | |
| <p class="text-gray-600">Activities to foster innovation and out-of-the-box thinking.</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-emerald-700 hover:bg-emerald-800 text-white px-8 py-3 rounded-lg font-semibold transition-smooth shadow-lg inline-flex items-center"> | |
| Explore All Skill Modules <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-emerald-700 mb-4">Trusted by Families</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from parents and students who have transformed their career journeys with Career-9.</p> | |
| </div> | |
| <div class="relative max-w-4xl mx-auto"> | |
| <!-- Testimonial Cards --> | |
| <div class="testimonial-card active"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya Sharma" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Priya Sharma</h4> | |
| <p class="text-gray-600">Parent, Mumbai</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Career-9 helped my daughter discover her passion for environmental science. The detailed report gave us clear guidance on courses and colleges. She's now pursuing her dream degree at a top university!"</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card hidden"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Rahul Patel" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Rahul Patel</h4> | |
| <p class="text-gray-600">Student, Bangalore</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"I was confused between engineering and design. Career-9's assessment showed my strong creative abilities and recommended product design. The skill modules helped me build my portfolio, and I got into my dream design school!"</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card hidden"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ananya Gupta" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Ananya Gupta</h4> | |
| <p class="text-gray-600">Educator, Delhi</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"As a school counselor, I've recommended Career-9 to dozens of students. The AI-powered insights complement my guidance, and the reports provide students with clarity I couldn't achieve alone. It's revolutionized our career counseling program."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| <i class="fas fa-star text-amber-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation Arrows --> | |
| <button id="prev-testimonial" class="absolute left-0 top-1/2 transform -translate-y-1/2 -ml-4 bg-white p-2 rounded-full shadow-md text-emerald-700 hover:text-emerald-900"> | |
| <i class="fas fa-chevron-left text-xl"></i> | |
| </button> | |
| <button id="next-testimonial" class="absolute right-0 top-1/2 transform -translate-y-1/2 -mr-4 bg-white p-2 rounded-full shadow-md text-emerald-700 hover:text-emerald-900"> | |
| <i class="fas fa-chevron-right text-xl"></i> | |
| </button> | |
| <!-- Dots Indicator --> | |
| <div class="flex justify-center mt-6 space-x-2"> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-emerald-700 active" data-index="0"></button> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-gray-300" data-index="1"></button> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-gray-300" data-index="2"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gradient-to-r from-emerald-700 to-emerald-900 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Unlock Your Child's Potential?</h2> | |
| <p class="text-xl mb-10 max-w-2xl mx-auto">Join thousands of families who have discovered the perfect career path with Career-9.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition-smooth shadow-lg"> | |
| Start Free Assessment | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-emerald-700 px-8 py-4 rounded-lg font-bold text-lg transition-smooth shadow-lg"> | |
| Speak to an Expert | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-emerald-700 text-white p-2 rounded-lg mr-2"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <span class="font-bold text-xl">Career-9</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Empowering students to discover and pursue their ideal careers through AI-driven guidance.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-smooth"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-smooth"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-smooth"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-smooth"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">How It Works</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Testimonials</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Career Guides</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">FAQs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-smooth">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Contact Us</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-emerald-700 mt-1 mr-3"></i> | |
| <span class="text-gray-400">123 Career Street, Bangalore, India 560001</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-emerald-700 mr-3"></i> | |
| <span class="text-gray-400">+91 98765 43210</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-emerald-700 mr-3"></i> | |
| <span class="text-gray-400">[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Career-9. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Testimonial carousel | |
| const testimonials = document.querySelectorAll('.testimonial-card'); | |
| const dots = document.querySelectorAll('.testimonial-dot'); | |
| let currentIndex = 0; | |
| function showTestimonial(index) { | |
| testimonials.forEach(testimonial => testimonial.classList.remove('active')); | |
| dots.forEach(dot => dot.classList.remove('bg-emerald-700', 'active')); | |
| dots.forEach(dot => dot.classList.add('bg-gray-300')); | |
| testimonials[index].classList.add('active'); | |
| dots[index].classList.add('bg-emerald-700', 'active'); | |
| dots[index].classList.remove('bg-gray-300'); | |
| currentIndex = index; | |
| } | |
| document.getElementById('next-testimonial').addEventListener('click', () => { | |
| let nextIndex = (currentIndex + 1) % testimonials.length; | |
| showTestimonial(nextIndex); | |
| }); | |
| document.getElementById('prev-testimonial').addEventListener('click', () => { | |
| let prevIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; | |
| showTestimonial(prevIndex); | |
| }); | |
| dots.forEach(dot => { | |
| dot.addEventListener('click', () => { | |
| const index = parseInt(dot.getAttribute('data-index')); | |
| showTestimonial(index); | |
| }); | |
| }); | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| let nextIndex = (currentIndex + 1) % testimonials.length; | |
| showTestimonial(nextIndex); | |
| }, 5000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=aashishjha/websites" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |