| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Creative Minds Academy Hub</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#a855f7', |
| dark: '#1e1b4b', |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/testimonial-card.js"></script> |
| <script src="components/team-card.js"></script> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <custom-navbar></custom-navbar> |
|
|
| |
| <section class="relative h-screen overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-primary to-secondary opacity-90"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center px-4 z-10 max-w-4xl mx-auto"> |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-in">Unlock Your <span class="text-yellow-300">Creative</span> Potential</h1> |
| <p class="text-xl md:text-2xl text-gray-100 mb-8 animate-fade-in delay-100">Join our academy to master the art of design, development and digital innovation.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in delay-200"> |
| <a href="#courses" class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105">Explore Courses</a> |
| <a href="#contact" class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105">Get Started</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-1/4 left-1/4 w-16 h-16 bg-white bg-opacity-20 rounded-full animate-float-1"></div> |
| <div class="absolute top-1/3 right-1/4 w-24 h-24 bg-white bg-opacity-15 rounded-full animate-float-2"></div> |
| <div class="absolute bottom-1/4 left-1/3 w-20 h-20 bg-white bg-opacity-10 rounded-full animate-float-3"></div> |
| <div class="absolute bottom-1/3 right-1/3 w-12 h-12 bg-white bg-opacity-20 rounded-full animate-float-4"></div> |
| </section> |
|
|
| |
| <section id="projects" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-dark mb-4">Featured Projects</h2> |
| <div class="w-24 h-1 bg-primary mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Explore our students' most innovative work that pushes creative boundaries.</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl"> |
| <div class="h-64 overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6 bg-white"> |
| <h3 class="text-xl font-bold text-dark mb-2">Interactive Learning Platform</h3> |
| <p class="text-gray-600 mb-4">A gamified educational experience for digital art students.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">UI/UX</span> |
| <span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">Web Development</span> |
| </div> |
| </div> |
| <a href="#" class="absolute inset-0 z-10"></a> |
| </div> |
|
|
| |
| <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl"> |
| <div class="h-64 overflow-hidden"> |
| <img src="http://static.photos/abstract/640x360/2" alt="Project 2" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6 bg-white"> |
| <h3 class="text-xl font-bold text-dark mb-2">Augmented Reality Gallery</h3> |
| <p class="text-gray-600 mb-4">Bringing digital art to life through immersive AR experiences.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">AR</span> |
| <span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">3D Design</span> |
| </div> |
| </div> |
| <a href="#" class="absolute inset-0 z-10"></a> |
| </div> |
|
|
| |
| <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl"> |
| <div class="h-64 overflow-hidden"> |
| <img src="http://static.photos/minimal/640x360/3" alt="Project 3" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6 bg-white"> |
| <h3 class="text-xl font-bold text-dark mb-2">Brand Identity System</h3> |
| <p class="text-gray-600 mb-4">Comprehensive visual identity for a sustainable fashion startup.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">Branding</span> |
| <span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">Illustration</span> |
| </div> |
| </div> |
| <a href="#" class="absolute inset-0 z-10"></a> |
| </div> |
| </div> |
|
|
| <div class="text-center mt-12"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-primary hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all"> |
| View All Projects |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-dark mb-4">Our Services</h2> |
| <div class="w-24 h-1 bg-primary mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Comprehensive creative education tailored to your needs.</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="monitor" class="w-8 h-8 text-primary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-dark mb-4">Digital Design</h3> |
| <p class="text-gray-600 mb-4">Master UI/UX, web design, and digital illustration with industry-standard tools.</p> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
| <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="code" class="w-8 h-8 text-secondary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-dark mb-4">Development</h3> |
| <p class="text-gray-600 mb-4">Learn front-end and full-stack development with modern frameworks and best practices.</p> |
| <a href="#" class="text-secondary font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="pen-tool" class="w-8 h-8 text-primary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-dark mb-4">Creative Strategy</h3> |
| <p class="text-gray-600 mb-4">Develop strategic thinking for branding, marketing, and creative direction.</p> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
| <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="camera" class="w-8 h-8 text-secondary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-dark mb-4">Photography</h3> |
| <p class="text-gray-600 mb-4">Professional photography techniques from composition to post-processing.</p> |
| <a href="#" class="text-secondary font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
| <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="film" class="w-8 h-8 text-primary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-dark mb-4">Motion Graphics</h3> |
| <p class="text-gray-600 mb-4">Create compelling animations and visual effects for various media platforms.</p> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
| <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="users" class="w-8 h-8 text-secondary"></i> |
| </div> |
| <h3 class="text-xl font-bold text-dark mb-4">Mentorship</h3> |
| <p class="text-gray-600 mb-4">Personalized guidance from industry professionals to accelerate your growth.</p> |
| <a href="#" class="text-secondary font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="team" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-dark mb-4">Meet Our Team</h2> |
| <div class="w-24 h-1 bg-primary mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Passionate educators and industry experts dedicated to your success.</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| <custom-team-card |
| name="Alex Rivera" |
| role="Creative Director" |
| image="http://static.photos/people/320x240/1" |
| social-twitter="#" |
| social-linkedin="#" |
| social-dribbble="#"> |
| Former Art Director at DesignStudio with 15+ years experience. |
| </custom-team-card> |
|
|
| <custom-team-card |
| name="Sarah Chen" |
| role="Lead Developer" |
| image="http://static.photos/people/320x240/2" |
| social-twitter="#" |
| social-github="#" |
| social-linkedin="#"> |
| Full-stack developer specializing in creative coding. |
| </custom-team-card> |
|
|
| <custom-team-card |
| name="Jamal Williams" |
| role="UX Instructor" |
| image="http://static.photos/people/320x240/3" |
| social-twitter="#" |
| social-behance="#" |
| social-linkedin="#"> |
| UX researcher and designer with a human-centered approach. |
| </custom-team-card> |
|
|
| <custom-team-card |
| name="Elena Petrova" |
| role="Motion Designer" |
| image="http://static.photos/people/320x240/4" |
| social-instagram="#" |
| social-dribbble="#" |
| social-linkedin="#"> |
| Award-winning motion graphics artist and animator. |
| </custom-team-card> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gradient-to-br from-primary to-secondary"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-white mb-4">What Our Students Say</h2> |
| <div class="w-24 h-1 bg-white bg-opacity-50 mx-auto"></div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <custom-testimonial-card |
| name="Maria Gonzalez" |
| role="UI/UX Designer at TechCorp" |
| image="http://static.photos/people/200x200/5" |
| stars="5"> |
| The academy transformed my design skills and helped me land my dream job within 3 months of completing the program. |
| </custom-testimonial-card> |
|
|
| <custom-testimonial-card |
| name="David Kim" |
| role="Frontend Developer at CreativeInc" |
| image="http://static.photos/people/200x200/6" |
| stars="5"> |
| The practical, project-based approach gave me the confidence and portfolio to transition careers successfully. |
| </custom-testimonial-card> |
|
|
| <custom-testimonial-card |
| name="Olivia Smith" |
| role="Creative Director at BrandHouse" |
| image="http://static.photos/people/200x200/7" |
| stars="4"> |
| The mentorship and networking opportunities were invaluable. I still collaborate with classmates on projects. |
| </custom-testimonial-card> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-dark mb-4">Our Achievements</h2> |
| <div class="w-24 h-1 bg-primary mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Recognized for excellence in creative education and innovation.</p> |
| </div> |
|
|
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div class="text-center"> |
| <div class="text-5xl font-bold text-primary mb-2">15+</div> |
| <div class="text-gray-600">Years Experience</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-5xl font-bold text-primary mb-2">2,500+</div> |
| <div class="text-gray-600">Students Trained</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-5xl font-bold text-primary mb-2">50+</div> |
| <div class="text-gray-600">Industry Awards</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-5xl font-bold text-primary mb-2">98%</div> |
| <div class="text-gray-600">Employment Rate</div> |
| </div> |
| </div> |
|
|
| <div class="flex flex-wrap justify-center gap-6 mt-12"> |
| <img src="http://static.photos/logos/200x200/1" alt="Award 1" class="h-16 grayscale hover:grayscale-0 transition-all"> |
| <img src="http://static.photos/logos/200x200/2" alt="Award 2" class="h-16 grayscale hover:grayscale-0 transition-all"> |
| <img src="http://static.photos/logos/200x200/3" alt="Award 3" class="h-16 grayscale hover:grayscale-0 transition-all"> |
| <img src="http://static.photos/logos/200x200/4" alt="Award 4" class="h-16 grayscale hover:grayscale-0 transition-all"> |
| <img src="http://static.photos/logos/200x200/5" alt="Award 5" class="h-16 grayscale hover:grayscale-0 transition-all"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 bg-gradient-to-br from-primary to-secondary p-12 text-white"> |
| <h2 class="text-3xl font-bold mb-4">Ready to Start Your Creative Journey?</h2> |
| <p class="mb-6 opacity-90">Get in touch with our admissions team to discuss program options, scheduling, and financing.</p> |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <i data-feather="mail" class="mr-4"></i> |
| <span>admissions@creativeminds.edu</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="phone" class="mr-4"></i> |
| <span>+1 (555) 123-4567</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="map-pin" class="mr-4"></i> |
| <span>123 Creative Ave, Design City</span> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 p-12"> |
| <h3 class="text-2xl font-bold text-dark mb-6">Get More Information</h3> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| <div> |
| <label for="program" class="block text-sm font-medium text-gray-700 mb-1">Program Interest</label> |
| <select id="program" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"> |
| <option>Select a program</option> |
| <option>Digital Design</option> |
| <option>Web Development</option> |
| <option>Motion Graphics</option> |
| <option>Photography</option> |
| <option>Creative Strategy</option> |
| </select> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
| <textarea id="message" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-primary hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> |
| Submit Request |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.scroll-animate'); |
| elements.forEach(el => { |
| const elementPosition = el.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.2; |
| |
| if(elementPosition < screenPosition) { |
| el.classList.add('animate-fade-in-up'); |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', animateOnScroll); |
| animateOnScroll(); |
| }); |
| </script> |
| <script src="script.js"></script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
