| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Campus.io - The Ultimate Campus Management Platform</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); |
| | } |
| | |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | |
| | .nav-link { |
| | position: relative; |
| | } |
| | |
| | .nav-link::after { |
| | content: ''; |
| | position: absolute; |
| | width: 0; |
| | height: 2px; |
| | bottom: 0; |
| | left: 0; |
| | background-color: #4F46E5; |
| | transition: width 0.3s ease; |
| | } |
| | |
| | .nav-link:hover::after { |
| | width: 100%; |
| | } |
| | |
| | .hero-image { |
| | animation: float 6s ease-in-out infinite; |
| | } |
| | |
| | @keyframes float { |
| | 0% { transform: translateY(0px); } |
| | 50% { transform: translateY(-20px); } |
| | 100% { transform: translateY(0px); } |
| | } |
| | |
| | .testimonial-card { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .testimonial-card:hover { |
| | transform: scale(1.05); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | |
| | <nav class="bg-white shadow-sm fixed w-full z-10"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between h-16"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 flex items-center"> |
| | <i class="fas fa-graduation-cap text-indigo-600 text-2xl mr-2"></i> |
| | <span class="text-xl font-bold text-gray-900">Campus.io</span> |
| | </div> |
| | </div> |
| | <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| | <a href="#features" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Features</a> |
| | <a href="#solutions" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Solutions</a> |
| | <a href="#pricing" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Pricing</a> |
| | <a href="#testimonials" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Testimonials</a> |
| | </div> |
| | <div class="hidden md:ml-6 md:flex md:items-center"> |
| | <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Log In</a> |
| | <a href="#" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover:bg-indigo-700 shadow-sm">Get Started</a> |
| | </div> |
| | <div class="-mr-2 flex items-center md:hidden"> |
| | <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> |
| | <span class="sr-only">Open main menu</span> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200"> |
| | <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| | <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Features</a> |
| | <a href="#solutions" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Solutions</a> |
| | <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Pricing</a> |
| | <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Testimonials</a> |
| | <div class="pt-4 pb-3 border-t border-gray-200"> |
| | <div class="flex items-center px-5"> |
| | <a href="#" class="ml-3 text-base font-medium text-gray-900">Log In</a> |
| | </div> |
| | <div class="mt-3 px-2"> |
| | <a href="#" class="block w-full px-4 py-2 text-base font-medium text-center text-white gradient-bg rounded-md hover:bg-indigo-700">Get Started</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="pt-24 pb-12 md:pt-32 md:pb-20"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:grid lg:grid-cols-12 lg:gap-8"> |
| | <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> |
| | <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> |
| | <span class="block">Transform Your</span> |
| | <span class="block text-indigo-600">Campus Experience</span> |
| | </h1> |
| | <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
| | Campus.io provides the ultimate platform for universities to manage students, courses, events, and campus life all in one place. |
| | </p> |
| | <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> |
| | <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white gradient-bg hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 shadow-lg"> |
| | Get Started |
| | </a> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"> |
| | Live Demo |
| | </a> |
| | </div> |
| | <p class="mt-3 text-sm text-gray-500"> |
| | Join 500+ universities already using Campus.io |
| | </p> |
| | </div> |
| | </div> |
| | <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> |
| | <div class="relative mx-auto w-full hero-image"> |
| | <img class="w-full" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Students on campus"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-12 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide"> |
| | Trusted by the world's leading universities |
| | </p> |
| | <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5"> |
| | <div class="col-span-1 flex justify-center items-center"> |
| | <img class="h-12" src="https://upload.wikimedia.org/wikipedia/en/thumb/2/29/Harvard_shield_wreath.svg/1200px-Harvard_shield_wreath.svg.png" alt="Harvard"> |
| | </div> |
| | <div class="col-span-1 flex justify-center items-center"> |
| | <img class="h-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Stanford_University_wordmark_2005.svg/2560px-Stanford_University_wordmark_2005.svg.png" alt="Stanford"> |
| | </div> |
| | <div class="col-span-1 flex justify-center items-center"> |
| | <img class="h-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/University_of_California%2C_Berkeley_logo.svg/2560px-University_of_California%2C_Berkeley_logo.svg.png" alt="Berkeley"> |
| | </div> |
| | <div class="col-span-1 flex justify-center items-center"> |
| | <img class="h-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/MIT_Seal.svg/2048px-MIT_Seal.svg.png" alt="MIT"> |
| | </div> |
| | <div class="col-span-1 flex justify-center items-center"> |
| | <img class="h-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Yale_University_logo.svg/2560px-Yale_University_logo.svg.png" alt="Yale"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="features" class="py-12 bg-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| | Everything you need to manage your campus |
| | </p> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| | Campus.io provides a comprehensive suite of tools designed specifically for higher education institutions. |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
| | <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300"> |
| | <div class="flex items-center"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| | <i class="fas fa-users text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Student Management</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Comprehensive student profiles, enrollment tracking, and academic progress monitoring all in one place. |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300"> |
| | <div class="flex items-center"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| | <i class="fas fa-book-open text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Course Management</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Easily create, schedule, and manage courses with our intuitive course management system. |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300"> |
| | <div class="flex items-center"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| | <i class="fas fa-calendar-alt text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Event Coordination</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Plan and promote campus events with our integrated event management tools. |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition-all duration-300"> |
| | <div class="flex items-center"> |
| | <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| | <i class="fas fa-chart-line text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Analytics Dashboard</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Powerful analytics to track student performance, engagement, and campus trends. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="solutions" class="py-12 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Solutions</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| | Tailored solutions for every campus need |
| | </p> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| | We understand that every institution is unique. That's why we offer specialized solutions. |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
| | <i class="fas fa-university text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Administration</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Streamline administrative tasks with our comprehensive tools for faculty management, reporting, and compliance. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
| | <i class="fas fa-user-graduate text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Student Success</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Empower students with tools for academic planning, career services, and personal development. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
| | <i class="fas fa-wifi text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Campus Life</h3> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | Enhance campus engagement with tools for student organizations, housing, and community building. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="pricing" class="py-12 bg-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Pricing</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| | Simple, transparent pricing |
| | </p> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| | Choose the plan that works best for your institution. |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200"> |
| | <div class="p-6"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Starter</h3> |
| | <div class="mt-4"> |
| | <p class="text-4xl font-extrabold text-gray-900">$99 |
| | <span class="text-base font-medium text-gray-500">/month</span> |
| | </p> |
| | <p class="mt-2 text-base text-gray-500"> |
| | Perfect for small colleges and community programs |
| | </p> |
| | </div> |
| | <div class="mt-6"> |
| | <ul class="space-y-4"> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Up to 1,000 students</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Basic student management</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Email support</p> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="mt-8"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"> |
| | Get started |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-indigo-500 transform scale-105"> |
| | <div class="bg-indigo-500 px-6 py-3"> |
| | <p class="text-sm font-semibold text-white uppercase">Most Popular</p> |
| | </div> |
| | <div class="p-6"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Professional</h3> |
| | <div class="mt-4"> |
| | <p class="text-4xl font-extrabold text-gray-900">$499 |
| | <span class="text-base font-medium text-gray-500">/month</span> |
| | </p> |
| | <p class="mt-2 text-base text-gray-500"> |
| | Ideal for mid-sized universities and colleges |
| | </p> |
| | </div> |
| | <div class="mt-6"> |
| | <ul class="space-y-4"> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Up to 10,000 students</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Advanced analytics</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Priority support</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">API access</p> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="mt-8"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white gradient-bg hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 shadow-sm"> |
| | Get started |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200"> |
| | <div class="p-6"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h3> |
| | <div class="mt-4"> |
| | <p class="text-4xl font-extrabold text-gray-900">Custom |
| | <span class="text-base font-medium text-gray-500">/month</span> |
| | </p> |
| | <p class="mt-2 text-base text-gray-500"> |
| | For large institutions with complex needs |
| | </p> |
| | </div> |
| | <div class="mt-6"> |
| | <ul class="space-y-4"> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Unlimited students</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Custom integrations</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">Dedicated account manager</p> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-check text-green-500"></i> |
| | </div> |
| | <p class="ml-3 text-base text-gray-500">24/7 support</p> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="mt-8"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"> |
| | Contact sales |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="testimonials" class="py-12 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| | What our customers say |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> |
| | <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0"> |
| | <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4> |
| | <p class="text-sm text-gray-500">Dean of Students, Stanford University</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | "Campus.io has transformed how we manage student life. The platform is intuitive and has significantly reduced our administrative workload." |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0"> |
| | <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4> |
| | <p class="text-sm text-gray-500">IT Director, MIT</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | "The integration capabilities of Campus.io are unmatched. We've connected it with all our existing systems seamlessly." |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0"> |
| | <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="text-sm font-medium text-gray-900">David Rodriguez</h4> |
| | <p class="text-sm text-gray-500">Provost, Harvard University</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-base text-gray-500"> |
| | "Since implementing Campus.io, our faculty and students have reported much higher satisfaction with campus services." |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="gradient-bg py-12"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> |
| | <div> |
| | <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
| | Ready to transform your campus? |
| | </h2> |
| | <p class="mt-3 max-w-3xl text-lg text-indigo-200"> |
| | Join hundreds of universities that are already using Campus.io to revolutionize their campus management. |
| | </p> |
| | </div> |
| | <div class="mt-8 lg:mt-0"> |
| | <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 shadow-lg"> |
| | Get Started |
| | </a> |
| | <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
| | Contact Sales |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-800"> |
| | <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| | <div class="grid grid-cols-2 md:grid-cols-5 gap-8"> |
| | <div class="col-span-2"> |
| | <h3 class="text-white text-lg font-semibold flex items-center"> |
| | <i class="fas fa-graduation-cap text-indigo-400 text-xl mr-2"></i> |
| | Campus.io |
| | </h3> |
| | <p class="mt-4 text-gray-300 text-sm"> |
| | The ultimate campus management platform for universities and colleges worldwide. |
| | </p> |
| | <div class="mt-4 flex space-x-6"> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i class="fab fa-linkedin-in"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | </div> |
| | </div> |
| | <div> |
| | <h3 class="text-white text-sm font-semibold tracking-wider uppercase"> |
| | Solutions |
| | </h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Administration |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Student Success |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Campus Life |
| | </a> |
| | </li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-white text-sm font-semibold tracking-wider uppercase"> |
| | Support |
| | </h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Documentation |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Guides |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | API Status |
| | </a> |
| | </li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-white text-sm font-semibold tracking-wider uppercase"> |
| | Company |
| | </h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | About |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Careers |
| | </a> |
| | </li> |
| | <li> |
| | <a href="#" class="text-gray-300 hover:text-white text-sm"> |
| | Contact |
| | </a> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> |
| | <div class="flex space-x-6 md:order-2"> |
| | <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy</a> |
| | <a href="#" class="text-gray-400 hover:text-white text-sm">Terms</a> |
| | <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> |
| | </div> |
| | <p class="mt-8 text-gray-400 text-sm md:mt-0 md:order-1"> |
| | © 2023 Campus.io. All rights reserved. |
| | </p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| | const menu = document.getElementById('mobile-menu'); |
| | if (menu.classList.contains('hidden')) { |
| | menu.classList.remove('hidden'); |
| | } else { |
| | menu.classList.add('hidden'); |
| | } |
| | }); |
| | |
| | |
| | document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| | anchor.addEventListener('click', function (e) { |
| | e.preventDefault(); |
| | |
| | const targetId = this.getAttribute('href'); |
| | if (targetId === '#') return; |
| | |
| | const targetElement = document.querySelector(targetId); |
| | if (targetElement) { |
| | |
| | const mobileMenu = document.getElementById('mobile-menu'); |
| | if (!mobileMenu.classList.contains('hidden')) { |
| | mobileMenu.classList.add('hidden'); |
| | } |
| | |
| | |
| | window.scrollTo({ |
| | top: targetElement.offsetTop - 80, |
| | behavior: 'smooth' |
| | }); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | window.addEventListener('scroll', function() { |
| | const nav = document.querySelector('nav'); |
| | if (window.scrollY > 10) { |
| | nav.classList.add('shadow-lg'); |
| | } else { |
| | nav.classList.remove('shadow-lg'); |
| | } |
| | }); |
| | </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=dns/campus-io" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| | </html> |
