Spaces:
Running
Running
Download index.html from Sangeethvr/techcom: direct link, hf CLI and curl.
- Browser
- Download file 61.4 kB
-
https://huggingface.co/spaces/Sangeethvr/techcom/resolve/main/index.html
- Command line
-
hf download hf://spaces/Sangeethvr/techcom/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Sangeethvr/techcom/resolve/main/index.html
61.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kollywood Creators Hub - Platform for Tamil Film Professionals</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #dc2626 100%); | |
| } | |
| .card-hover: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); | |
| } | |
| .podcast-wave { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f8fafc' fill-opacity='1' d='M0,256L48,261.3C96,267,192,277,288,261.3C384,245,480,203,576,197.3C672,192,768,224,864,234.7C960,245,1056,235,1152,213.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: bottom; | |
| background-size: cover; | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .animated-underline { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .animated-underline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| transform: scaleX(0); | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: white; | |
| transform-origin: bottom right; | |
| transition: transform 0.25s ease-out; | |
| } | |
| .animated-underline:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: bottom left; | |
| } | |
| .film-strip { | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-28-56c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23b91c1c' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans film-strip"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-film text-3xl mr-2"></i> | |
| <span class="text-xl font-bold">Kollywood Creators Hub</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="animated-underline">Home</a> | |
| <a href="#workshops" class="animated-underline">Workshops</a> | |
| <a href="#screenwriting" class="animated-underline">Screenwriting</a> | |
| <a href="#cinematography" class="animated-underline">Cinematography</a> | |
| <a href="#community" class="animated-underline">Community</a> | |
| <a href="#resources" class="animated-underline">Resources</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="mobile-menu-button p-2 focus:outline-none"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="mobile-menu hidden md:hidden gradient-bg pb-4"> | |
| <a href="#home" class="block py-2 px-4 hover:bg-red-700">Home</a> | |
| <a href="#workshops" class="block py-2 px-4 hover:bg-red-700">Workshops</a> | |
| <a href="#screenwriting" class="block py-2 px-4 hover:bg-red-700">Screenwriting</a> | |
| <a href="#cinematography" class="block py-2 px-4 hover:bg-red-700">Cinematography</a> | |
| <a href="#community" class="block py-2 px-4 hover:bg-red-700">Community</a> | |
| <a href="#resources" class="block py-2 px-4 hover:bg-red-700">Resources</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Elevating Tamil Cinema Through Creative Collaboration</h1> | |
| <p class="text-xl mb-8">Your premier platform for filmmaking education, networking, and career advancement in Kollywood and beyond.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#workshops" class="bg-white text-red-800 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition duration-300">Explore Workshops</a> | |
| <a href="#community" class="border border-white text-white hover:bg-white hover:text-red-800 px-6 py-3 rounded-lg font-semibold transition duration-300">Join Community</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Film Production" class="rounded-lg shadow-2xl max-w-md w-full"> | |
| </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-4xl font-bold text-red-800 mb-2">150+</div> | |
| <div class="text-gray-600">Masterclasses</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-red-800 mb-2">500+</div> | |
| <div class="text-gray-600">Scripts Developed</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-red-800 mb-2">2000+</div> | |
| <div class="text-gray-600">Creative Members</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-red-800 mb-2">50+</div> | |
| <div class="text-gray-600">Film Projects</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Workshops Section --> | |
| <section id="workshops" class="py-20 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-gray-800 mb-4">Filmmaking Workshops & Masterclasses</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Learn from industry veterans and award-winning Tamil filmmakers.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Workshop 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-video text-6xl text-red-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm font-semibold text-red-600">Chennai • 2 Days</div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-800">Directing for Emotional Impact</h3> | |
| <p class="mt-2 text-gray-600">Masterclass with National Award-winning director Vetrimaaran on creating powerful emotional moments in cinema.</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Vetrimaaran"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Vetrimaaran</p> | |
| <p class="text-sm text-gray-500">Director (Asuran, Visaranai)</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| View Details & Register | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Workshop 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-pen-nib text-6xl text-yellow-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm font-semibold text-yellow-600">Online • 4 Weeks</div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-800">Screenwriting for Tamil Cinema</h3> | |
| <p class="mt-2 text-gray-600">Comprehensive course on crafting compelling screenplays with Jeyamohan, writer of films like Peranbu.</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Jeyamohan"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Jeyamohan</p> | |
| <p class="text-sm text-gray-500">Writer (Peranbu, Naan Kadavul)</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| View Details & Register | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Workshop 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-camera text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm font-semibold text-purple-600">Coimbatore • 3 Days</div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-800">Cinematography Masterclass</h3> | |
| <p class="mt-2 text-gray-600">Hands-on workshop with R. Rathnavelu, cinematographer of films like Enthiran and I.</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Rathnavelu"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">R. Rathnavelu</p> | |
| <p class="text-sm text-gray-500">Cinematographer (Enthiran, I)</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| View Details & Register | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-red-800 hover:bg-red-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| View All Workshops <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Screenwriting Section --> | |
| <section id="screenwriting" class="py-20 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-gray-800 mb-4">Screenwriting & Story Development</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Resources to help you craft compelling stories for Tamil cinema.</p> | |
| </div> | |
| <div class="flex flex-wrap justify-center mb-8"> | |
| <button class="px-4 py-2 m-1 bg-red-600 text-white rounded-full">All</button> | |
| <button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Feature Films</button> | |
| <button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Web Series</button> | |
| <button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Short Films</button> | |
| <button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Dialogue Writing</button> | |
| <button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Character Development</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Resource 1 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-red-800 bg-red-100 rounded-full">Template</span> | |
| <h3 class="mt-3 text-xl font-semibold text-gray-800">Tamil Screenplay Format</h3> | |
| <p class="mt-2 text-gray-600">Industry-standard screenplay template for Tamil films with examples from recent hits.</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold text-red-800">Free</div> | |
| <div class="text-sm text-gray-500">PDF Download</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-download text-gray-500 mr-2"></i> | |
| <span class="text-sm text-gray-600">1,200+ downloads</span> | |
| </div> | |
| <button class="text-red-600 hover:text-red-800 font-medium"> | |
| Download <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resource 2 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-100 rounded-full">Course</span> | |
| <h3 class="mt-3 text-xl font-semibold text-gray-800">Writing for OTT Platforms</h3> | |
| <p class="mt-2 text-gray-600">6-week online course on crafting binge-worthy Tamil web series.</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold text-yellow-800">₹3,999</div> | |
| <div class="text-sm text-gray-500">Starts Nov 15</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm text-gray-600">120 enrolled</span> | |
| </div> | |
| <button class="text-yellow-600 hover:text-yellow-800 font-medium"> | |
| Enroll Now <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resource 3 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-100 rounded-full">Workshop</span> | |
| <h3 class="mt-3 text-xl font-semibold text-gray-800">Character Development Lab</h3> | |
| <p class="mt-2 text-gray-600">2-day intensive workshop on creating memorable Tamil cinema characters.</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold text-purple-800">₹2,500</div> | |
| <div class="text-sm text-gray-500">Dec 2-3</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm text-gray-600">Chennai</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800 font-medium"> | |
| Register <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-red-800 hover:bg-red-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| View All Screenwriting Resources <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cinematography Section --> | |
| <section id="cinematography" class="py-20 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-gray-800 mb-4">Cinematography & Visual Storytelling</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Master the art of visual storytelling for Tamil cinema.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Featured Resource --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-red-800 bg-red-100 rounded-full">Featured</span> | |
| <span class="ml-3 text-sm text-gray-500">New Release</span> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Tamil Cinema Lighting Techniques</h3> | |
| <p class="text-gray-700 mb-4">Comprehensive guide to lighting techniques used in classic and contemporary Tamil films, with breakdowns of scenes from Parasite, Super Deluxe, and Kaithi.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Nirav Shah"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Nirav Shah</p> | |
| <p class="text-sm text-gray-500">Cinematographer (Vikram Vedha, Kaakha Kaakha)</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <span class="text-sm text-gray-600"><i class="fas fa-download mr-1"></i> 850 Downloads</span> | |
| <span class="text-sm text-gray-600"><i class="fas fa-star mr-1"></i> 4.9/5 Rating</span> | |
| </div> | |
| <a href="#" class="text-red-600 hover:text-red-800 font-medium"> | |
| Get eBook <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Equipment Hub --> | |
| <div class="bg-red-800 text-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-4">Cinematography Equipment Hub</h3> | |
| <p class="mb-6">Access to professional equipment rentals and discounts for community members.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-video text-red-300"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-semibold">Camera Rentals</h4> | |
| <p class="text-red-200 text-sm">ARRI, RED, and Sony Venice packages at member rates</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-lightbulb text-red-300"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-semibold">Lighting Packages</h4> | |
| <p class="text-red-200 text-sm">Complete lighting kits for all budget levels</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-cogs text-red-300"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-semibold">Grip & Support</h4> | |
| <p class="text-red-200 text-sm">Jibs, sliders, stabilizers and more</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-white hover:bg-gray-100 text-red-800 py-2 px-4 rounded-lg font-medium transition duration-300"> | |
| Explore Equipment Hub | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Technique 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="p-6"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">Technique</span> | |
| <h3 class="mt-2 text-lg font-semibold text-gray-800">Color Grading for Mood</h3> | |
| <p class="mt-2 text-sm text-gray-600">How color grading shapes emotional tone in Tamil cinema, with examples from recent films.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">P. C. Sreeram • 45 min video</span> | |
| <a href="#" class="text-red-600 hover:text-red-800 text-sm font-medium"> | |
| Watch <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technique 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="p-6"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">Tutorial</span> | |
| <h3 class="mt-2 text-lg font-semibold text-gray-800">Single Take Sequences</h3> | |
| <p class="mt-2 text-sm text-gray-600">Breaking down the planning and execution of long takes in Tamil films like Kaithi and Vikram.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Girish Gangadharan • 32 min</span> | |
| <a href="#" class="text-yellow-600 hover:text-yellow-800 text-sm font-medium"> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technique 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="p-6"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Case Study</span> | |
| <h3 class="mt-2 text-lg font-semibold text-gray-800">Low Budget Cinematography</h3> | |
| <p class="mt-2 text-sm text-gray-600">How to achieve high production value on limited budgets, inspired by Tamil indie films.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Santhosh Narayanan • PDF Guide</span> | |
| <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium"> | |
| Read <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-red-800 hover:bg-red-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| Browse All Cinematography Resources <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-20 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-gray-800 mb-4">Filmmaking Community</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Connect with fellow Tamil filmmakers, share projects, and find collaborators.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <!-- Discussion Forum --> | |
| <div> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Discussion Forums</h3> | |
| <div class="space-y-6"> | |
| <!-- Forum Topic 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">Directing</span> | |
| <h4 class="mt-2 font-medium text-gray-800">Working with Non-Professional Actors</h4> | |
| </div> | |
| <span class="text-xs text-gray-500">5h ago</span> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">Sharing techniques for directing non-actors in realistic Tamil cinema, inspired by recent indie films.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-alt text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">18 comments</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">245 views</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Director"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Forum Topic 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">Screenwriting</span> | |
| <h4 class="mt-2 font-medium text-gray-800">Adapting Tamil Literature for Screen</h4> | |
| </div> | |
| <span class="text-xs text-gray-500">1d ago</span> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">Discussion on challenges and techniques for adapting Tamil novels and short stories into screenplays.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-alt text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">24 comments</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">312 views</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Writer"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Forum Topic 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Technology</span> | |
| <h4 class="mt-2 font-medium text-gray-800">AI in Tamil Film Post-Production</h4> | |
| </div> | |
| <span class="text-xs text-gray-500">2d ago</span> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">Exploring how AI tools are being used for color grading, VFX, and editing in recent Tamil films.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment-alt text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">32 comments</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye text-gray-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">421 views</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/28.jpg" alt="Editor"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300"> | |
| Join Discussion Forum | |
| </button> | |
| </div> | |
| <!-- Collaboration Hub --> | |
| <div> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Collaboration Hub</h3> | |
| <div class="bg-red-50 p-6 rounded-lg mb-8"> | |
| <h4 class="text-lg font-semibold text-red-800 mb-3">Find Your Creative Team</h4> | |
| <p class="text-gray-700 mb-4">Connect with talented professionals across Tamil Nadu for your film projects.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-search text-red-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-gray-800">Talent Directory</h4> | |
| <p class="text-sm text-gray-600">Searchable database of cinematographers, editors, composers and more</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-project-diagram text-red-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-gray-800">Project Listings</h4> | |
| <p class="text-sm text-gray-600">Find crew members or join exciting new film projects</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-users text-red-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-gray-800">Local Meetups</h4> | |
| <p class="text-sm text-gray-600">Connect with filmmakers in your city</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Featured Projects</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Project 1 --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Director"> | |
| </div> | |
| <div class="ml-4"> | |
| <h5 class="font-medium text-gray-800">Looking for Cinematographer</h5> | |
| <p class="text-sm text-gray-600">Short film shooting in Madurai next month</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="inline-block px-2 py-0.5 text-xs font-medium text-red-800 bg-red-100 rounded-full">Paid</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/35.jpg" alt="Producer"> | |
| </div> | |
| <div class="ml-4"> | |
| <h5 class="font-medium text-gray-800">Need Tamil Dialogue Writer</h5> | |
| <p class="text-sm text-gray-600">Web series set in 1980s Chennai</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="inline-block px-2 py-0.5 text-xs font-medium text-yellow-800 bg-yellow-100 rounded-full">Collaboration</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Writer"> | |
| </div> | |
| <div class="ml-4"> | |
| <h5 class="font-medium text-gray-800">Seeking Editor for Docu</h5> | |
| <p class="text-sm text-gray-600">Tamil folk arts documentary</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="inline-block px-2 py-0.5 text-xs font-medium text-red-800 bg-red-100 rounded-full">Paid</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Director"> | |
| </div> | |
| <div class="ml-4"> | |
| <h5 class="font-medium text-gray-800">Composer Needed</h5> | |
| <p class="text-sm text-gray-600">Experimental short film with folk fusion</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="inline-block px-2 py-0.5 text-xs font-medium text-yellow-800 bg-yellow-100 rounded-full">Collaboration</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300"> | |
| Browse All Projects | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 gradient-bg 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">Success Stories</h2> | |
| <p class="text-xl max-w-3xl mx-auto">Hear from Tamil filmmakers who have advanced their careers through our community.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-14 w-14 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Deepa"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Deepa</h4> | |
| <p class="text-red-200">Director (Short Films)</p> | |
| </div> | |
| </div> | |
| <p class="italic mb-6">"The screenwriting workshop helped me structure my first feature film script, which got selected for NFDC Screenwriters Lab. The mentorship was invaluable."</p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-14 w-14 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Karthik"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Karthik</h4> | |
| <p class="text-red-200">Cinematographer</p> | |
| </div> | |
| </div> | |
| <p class="italic mb-6">"Through the equipment hub, I accessed professional gear I couldn't afford otherwise. My work on a short film led to my first feature film opportunity."</p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-14 w-14 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Priya</h4> | |
| <p class="text-red-200">Screenwriter</p> | |
| </div> | |
| </div> | |
| <p class="italic mb-6">"The feedback I received on my script in the forums helped me refine it significantly. It's now being produced by a major Tamil production house."</p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <i class="fas fa-star-half-alt text-yellow-300"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-white hover:bg-gray-100 text-red-800 px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| Read More Success Stories | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-20 bg-white podcast-wave"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Kollywood Creators Podcast</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Conversations with leading Tamil filmmakers about their craft and creative process.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Podcast 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511671782772-c97d3e27ca9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Podcast Cover" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-red-800 opacity-20"></div> | |
| <div class="absolute bottom-4 left-4 bg-red-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-play text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">Episode 23</span> | |
| <span class="text-xs text-gray-500">58 min</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">The Art of Tamil Film Dialogue</h3> | |
| <p class="text-gray-600 mb-4">Legendary dialogue writer Madhan Karky discusses crafting memorable lines for Tamil cinema.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Madhan Karky"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Madhan Karky</p> | |
| <p class="text-sm text-gray-500">Dialogue Writer (Baahubali, Enthiran)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Podcast 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Podcast Cover" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-yellow-800 opacity-20"></div> | |
| <div class="absolute bottom-4 left-4 bg-yellow-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-play text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">Episode 22</span> | |
| <span class="text-xs text-gray-500">45 min</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Music Direction in Modern Tamil Cinema</h3> | |
| <p class="text-gray-600 mb-4">Anirudh Ravichander shares his creative process and approach to scoring Tamil films.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Anirudh"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Anirudh Ravichander</p> | |
| <p class="text-sm text-gray-500">Music Director (Kaithi, Vikram)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Podcast 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Podcast Cover" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-purple-800 opacity-20"></div> | |
| <div class="absolute bottom-4 left-4 bg-purple-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-play text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Episode 21</span> | |
| <span class="text-xs text-gray-500">52 min</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">The Future of Tamil Animation</h3> | |
| <p class="text-gray-600 mb-4">Pioneers of Tamil animation discuss emerging technologies and storytelling approaches.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Animator"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Shanti Sivanesan</p> | |
| <p class="text-sm text-gray-500">Animation Director</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center bg-red-800 hover:bg-red-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300"> | |
| <i class="fas fa-headphones mr-2"></i> Browse All Episodes | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gray-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 Elevate Your Filmmaking Career?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join our growing community of Tamil filmmakers, writers, and creative professionals.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300"> | |
| Create Free Account | |
| </a> | |
| <a href="#" class="border border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Kollywood Creators Hub</h3> | |
| <p class="mb-4">Empowering Tamil filmmakers with education, resources, and networking opportunities.</p> | |
| <div class="flex space-x-4"> | |
| <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> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-red-300">Home</a></li> | |
| <li><a href="#" class="hover:text-red-300">Workshops</a></li> | |
| <li><a href="#" class="hover:text-red-300">Screenwriting</a></li> | |
| <li><a href="#" class="hover:text-red-300">Cinematography</a></li> | |
| <li><a href="#" class="hover:text-red-300">Community</a></li> | |
| <li><a href="#" class="hover:text-red-300">Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-red-300">Screenplay Templates</a></li> | |
| <li><a href="#" class="hover:text-red-300">Equipment Hub</a></li> | |
| <li><a href="#" class="hover:text-red-300">Film Grants</a></li> | |
| <li><a href="#" class="hover:text-red-300">Festival Guide</a></li> | |
| <li><a href="#" class="hover:text-red-300">Industry Directory</a></li> | |
| <li><a href="#" class="hover:text-red-300">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact Us</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-red-300"></i> | |
| <span>123 Film Nagar, Chennai, Tamil Nadu 600001</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-red-300"></i> | |
| <span>+91 98765 43210</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-red-300"></i> | |
| <span>contact@kollywoodhub.org</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Kollywood Creators Hub. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Sticky header on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('shadow-xl'); | |
| } else { | |
| nav.classList.remove('shadow-xl'); | |
| } | |
| }); | |
| </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=Sangeethvr/techcom" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |