techcom / index.html
Sangeethvr's picture
Add 2 files
3517762 verified
Raw History Blame Contribute Delete
61.4 kB
<!DOCTYPE html>
<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>