Download index.html from azizayed/test: direct link, hf CLI and curl.
- Browser
- Download file 46 kB
-
https://huggingface.co/spaces/azizayed/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/azizayed/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/azizayed/test/resolve/main/index.html
46 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Studee - AI-Powered Personalized Learning 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> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 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); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .flowchart-step { | |
| position: relative; | |
| z-index: 1; | |
| transition: all 0.3s ease; | |
| } | |
| .flowchart-step:hover { | |
| transform: translateY(-5px); | |
| } | |
| .flowchart-step:not(:last-child):after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 2px; | |
| height: 30px; | |
| background: linear-gradient(to bottom, #818cf8, #a5b4fc); | |
| } | |
| .flowchart-arrow { | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: #818cf8; | |
| } | |
| @media (min-width: 768px) { | |
| .flowchart-step:not(:last-child):after { | |
| bottom: 50%; | |
| left: 100%; | |
| transform: translateY(50%); | |
| width: 30px; | |
| height: 2px; | |
| } | |
| .flowchart-arrow { | |
| bottom: 50%; | |
| left: calc(100% + 10px); | |
| transform: translateY(50%) rotate(90deg); | |
| } | |
| } | |
| .step-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| margin: 0 auto 15px; | |
| font-size: 24px; | |
| transition: all 0.3s ease; | |
| } | |
| .flowchart-step:hover .step-icon { | |
| transform: scale(1.1); | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .input-highlight { | |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); | |
| } | |
| .input-highlight:focus { | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.8); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .newsletter-form { | |
| background: linear-gradient(135deg, #f9f9ff 0%, #f0f4ff 100%); | |
| border-radius: 16px; | |
| } | |
| .checkmark-list li { | |
| position: relative; | |
| padding-left: 32px; | |
| margin-bottom: 12px; | |
| } | |
| .checkmark-list li:before { | |
| content: "✓"; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| color: #4f46e5; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-900"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <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">Studee</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#how-it-works" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">How it works</a> | |
| <a href="#testimonials" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Testimonials</a> | |
| <a href="#pricing" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Pricing</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="#" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">Get Started</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="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" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-gradient"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 text-center md:text-left"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight"> | |
| AI-Powered Personalized Learning | |
| </h1> | |
| <p class="mt-4 text-xl text-indigo-100 max-w-lg"> | |
| Transform any educational content into tailored study materials optimized for each student's learning style. | |
| </p> | |
| <div class="mt-8 flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 shadow-sm"> | |
| Try for free | |
| </a> | |
| <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 shadow-sm"> | |
| Watch demo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 md:mt-0 md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <div class="absolute top-0 left-20 w-24 h-24 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> | |
| <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden"> | |
| <div class="p-4 bg-gray-50 border-b border-gray-200"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Biology 101</h3> | |
| <p class="text-sm text-gray-500">Uploaded 2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-indigo-800 mb-2">Key Concepts Identified</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">Cell Structure</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">DNA Replication</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">Mitosis</span> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900 mb-2">Recommended Materials</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-alt text-indigo-500 mr-2"></i> | |
| <span class="text-sm">Condensed Notes (3 pages)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-project-diagram text-purple-500 mr-2"></i> | |
| <span class="text-sm">Mind Map: Cell Division</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-layer-group text-blue-500 mr-2"></i> | |
| <span class="text-sm">15 Flashcards</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trusted By Section --> | |
| <div class="bg-gray-50 py-12"> | |
| <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 educators at | |
| </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/commons/2/2f/Harvard_University_logo.svg" alt="Harvard"> | |
| </div> | |
| <div class="col-span-1 flex justify-center items-center"> | |
| <img class="h-8" src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Stanford_University_wordmark_2003.svg" alt="Stanford"> | |
| </div> | |
| <div class="col-span-1 flex justify-center items-center"> | |
| <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/7/7b/MIT_Logo.svg" alt="MIT"> | |
| </div> | |
| <div class="col-span-1 flex justify-center items-center"> | |
| <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/4/44/University_of_California%2C_Berkeley_logo.svg" alt="UC Berkeley"> | |
| </div> | |
| <div class="col-span-1 flex justify-center items-center"> | |
| <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/9/93/University_of_Toronto_Logo.svg" alt="University of Toronto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Designed for modern education | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Harness the power of AI to create personalized learning experiences at scale | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center text-indigo-600 mb-6"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">AI-Powered Analysis</h3> | |
| <p class="text-gray-600"> | |
| Our advanced algorithms identify key concepts, relationships, and knowledge gaps in any educational material. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mb-6"> | |
| <i class="fas fa-user-graduate text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">Personalized Learning</h3> | |
| <p class="text-gray-600"> | |
| Adapts to each student's learning style, pace, and prior knowledge for optimal knowledge retention. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">Progress Tracking</h3> | |
| <p class="text-gray-600"> | |
| Detailed analytics help students and educators monitor learning progress and identify areas needing attention. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mb-6"> | |
| <i class="fas fa-book-open text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">Multi-Format Output</h3> | |
| <p class="text-gray-600"> | |
| Generates summaries, flashcards, mind maps, quizzes, and more based on the same source material. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600 mb-6"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">Collaborative Learning</h3> | |
| <p class="text-gray-600"> | |
| Share materials and study together with classmates while maintaining personalized learning paths. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300 ease-in-out"> | |
| <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center text-red-600 mb-6"> | |
| <i class="fas fa-mobile-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3">Cross-Platform Access</h3> | |
| <p class="text-gray-600"> | |
| Available on web and mobile so you can learn anytime, anywhere. Offline mode included. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| How Studee works | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Transforming educational content into personalized learning has never been easier | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="flowchart-step text-center"> | |
| <div class="step-icon bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-upload"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">1. Upload Content</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Upload textbooks, lecture notes, PDFs, or paste any text | |
| </p> | |
| <i class="fas fa-arrow-down flowchart-arrow"></i> | |
| </div> | |
| <div class="flowchart-step text-center"> | |
| <div class="step-icon bg-purple-100 text-purple-600"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">2. AI Analysis</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Our AI identifies key concepts and relationships | |
| </p> | |
| <i class="fas fa-arrow-down flowchart-arrow"></i> | |
| </div> | |
| <div class="flowchart-step text-center"> | |
| <div class="step-icon bg-blue-100 text-blue-600"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">3. Personalize</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Select your preferred learning style and focus areas. Teachers can easily edit and refine the AI-generated content. | |
| </p> | |
| <i class="fas fa-arrow-down flowchart-arrow"></i> | |
| </div> | |
| <div class="flowchart-step text-center"> | |
| <div class="step-icon bg-green-100 text-green-600"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">4. Learn Efficiently</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Receive optimized study materials tailored just for you | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Demo Section --> | |
| <section class="py-16 bg-white"> | |
| <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="lg:col-span-5 mb-8 lg:mb-0"> | |
| <h2 class="text-2xl font-extrabold text-gray-900 sm:text-3xl"> | |
| See Studee in action | |
| </h2> | |
| <p class="mt-3 text-gray-600"> | |
| Watch our 90-second demo to see how Studee transforms dense textbook chapters into digestible, personalized learning materials. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm"> | |
| Start free trial | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-7"> | |
| <div class="video-container"> | |
| <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| What our users say | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Don't just take our word for it - hear from students and educators | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4> | |
| <p class="text-indigo-600">Medical Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Studee cut my study time in half while improving my retention. The AI-generated flashcards and summaries are exactly what I need to focus on." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="David L."> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">David L.</h4> | |
| <p class="text-indigo-600">University Professor</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "I've been able to create differentiated materials for my 200+ students with minimal effort. The time savings are incredible." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Maria K."> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Maria K.</h4> | |
| <p class="text-indigo-600">High School Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "As a visual learner, the mind maps and diagrams Studee creates help me understand complex topics so much better than textbooks alone." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Simple, transparent pricing | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Choose the plan that works best for you and your learning needs | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="pricing-card bg-white p-8 rounded-xl shadow-md border border-gray-200 transition duration-300 ease-in-out"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Student</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-extrabold text-gray-900">$9</span> | |
| <span class="text-lg font-medium text-gray-500">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Perfect for individual learners who want to optimize their study time | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Up to 5 documents/month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">All output formats</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Basic progress tracking</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Mobile access</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="w-full flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Get started | |
| </a> | |
| </div> | |
| <div class="pricing-card bg-white p-8 rounded-xl shadow-lg border-2 border-indigo-500 transform scale-105 transition duration-300 ease-in-out relative"> | |
| <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg"> | |
| POPULAR | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Pro Learner</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-extrabold text-gray-900">$19</span> | |
| <span class="text-lg font-medium text-gray-500">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| For serious students who want unlimited access to all features | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Unlimited documents</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">All output formats</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Advanced analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Priority support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Offline access</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="w-full flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Get started | |
| </a> | |
| </div> | |
| <div class="pricing-card bg-white p-8 rounded-xl shadow-md border border-gray-200 transition duration-300 ease-in-out"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Educator</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-extrabold text-gray-900">$49</span> | |
| <span class="text-lg font-medium text-gray-500">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| For teachers and professors creating materials for multiple students | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Unlimited documents</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Student management</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Class analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Bulk export</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Dedicated account manager</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="w-full flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Get started | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600"> | |
| Need a custom solution for your institution? <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Contact our sales team</a> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-20 bg-indigo-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="newsletter-form p-8 md:p-12 rounded-xl"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="lg:col-span-5 mb-8 lg:mb-0"> | |
| <h2 class="text-2xl font-extrabold text-gray-900 sm:text-3xl"> | |
| Join our learning community | |
| </h2> | |
| <p class="mt-4 text-lg text-gray-600"> | |
| Get the latest tips, research, and success stories delivered to your inbox. | |
| </p> | |
| <div class="mt-6 flex items-center space-x-4"> | |
| <i class="fas fa-envelope-open-text text-indigo-500 text-2xl"></i> | |
| <span class="text-sm text-gray-500">No spam, ever. Unsubscribe anytime.</span> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-7"> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="email" class="sr-only">Email address</label> | |
| <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md input-highlight" placeholder="Enter your email"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="agree-terms" name="agree-terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="agree-terms" class="ml-2 block text-sm text-gray-700"> | |
| I agree to receive emails about educational content and updates | |
| </label> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Frequently asked questions | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Everything you need to know about Studee | |
| </p> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">What types of documents can I upload?</h3> | |
| <p class="text-gray-600"> | |
| Studee supports PDFs, Word documents, PowerPoint presentations, plain text, and even images with text (OCR). We're constantly adding support for more file types based on user feedback. | |
| </p> | |
| </div> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">How does the personalization work?</h3> | |
| <p class="text-gray-600"> | |
| Our AI analyzes your interaction patterns (how you study, what you focus on, what you skip) and combines this with your self-reported learning preferences to continuously improve the materials it generates for you. | |
| </p> | |
| </div> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Is there a free trial?</h3> | |
| <p class="text-gray-600"> | |
| Yes! You can try Studee completely free for 14 days with access to all features. No credit card required. | |
| </p> | |
| </div> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Can I use Studee for group study sessions?</h3> | |
| <p class="text-gray-600"> | |
| Absolutely. With our Pro and Educator plans, you can create shared study groups where everyone gets personalized materials from the same source content. | |
| </p> | |
| </div> | |
| <div class="pb-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">How do I cancel my subscription?</h3> | |
| <p class="text-gray-600"> | |
| You can cancel anytime from your account settings. If you cancel, you'll still have access until the end of your billing period. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600"> | |
| Still have questions? <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Contact our support team</a> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-graduation-cap text-indigo-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Studee</span> | |
| </div> | |
| <p class="mt-4 text-gray-400"> | |
| AI-powered personalized learning platform helping students and educators worldwide. | |
| </p> | |
| <div class="mt-6 flex space-x-6"> | |
| <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-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></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-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Testimonials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Updates</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">GDPR</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 Studee, Inc. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-600 text-white w-12 h-12 rounded-full shadow-lg hidden items-center justify-center"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| backToTopButton.classList.add('flex'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| backToTopButton.classList.remove('flex'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Mobile menu toggle would go here | |
| // This is just a placeholder for the actual implementation | |
| </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=azizayed/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |