Add 1 files

index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TN Medical Connect | Professional Network for Tamil Nadu Doctors</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
     
     <!-- Include the dynamic content loading script -->
     <script src="app.js"></script>
@@ -55,7 +57,7 @@
         });
     </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --primary: #1a365d;
@@ -63,13 +65,16 @@
             --accent: #38b2ac;
             --gold: #d69e2e;
             --light: #f7fafc;
+            --gradient-start: #1a365d;
+            --gradient-end: #2c5282;
         }
         
         body {
-            font-family: 'Roboto', sans-serif;
+            font-family: 'Poppins', sans-serif;
             background-color: var(--light);
             color: var(--secondary);
             line-height: 1.6;
+            overflow-x: hidden;
         }
         
         .bg-primary {
@@ -99,10 +104,14 @@
         .btn-gold {
             background-color: var(--gold);
             color: white;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(214, 158, 46, 0.2);
         }
         
         .btn-gold:hover {
             background-color: #b7791f;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(214, 158, 46, 0.3);
         }
         
         .fade-in {
@@ -110,8 +119,8 @@
         }
         
         @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         
         .section-divider {
@@ -120,26 +129,29 @@
         }
         
         .feature-icon {
-            width: 48px;
-            height: 48px;
+            width: 60px;
+            height: 60px;
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 50%;
-            background-color: rgba(56, 178, 172, 0.1);
+            border-radius: 16px;
+            background: linear-gradient(135deg, rgba(56, 178, 172, 0.1) 0%, rgba(56, 178, 172, 0.2) 100%);
             color: var(--accent);
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
+            font-size: 1.5rem;
+            box-shadow: 0 4px 6px rgba(56, 178, 172, 0.1);
         }
         
         .verified-badge {
             display: inline-flex;
             align-items: center;
-            background-color: rgba(56, 178, 172, 0.1);
+            background: linear-gradient(135deg, rgba(56, 178, 172, 0.1) 0%, rgba(56, 178, 172, 0.2) 100%);
             color: var(--accent);
-            padding: 0.25rem 0.5rem;
-            border-radius: 4px;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
             font-size: 0.75rem;
             font-weight: 500;
+            box-shadow: 0 2px 4px rgba(56, 178, 172, 0.1);
         }
         
         .verified-badge i {
@@ -167,10 +179,13 @@
         
         .sidebar-item {
             transition: all 0.2s;
+            border-radius: 8px;
+            margin: 0.25rem 0.5rem;
         }
         
         .sidebar-item:hover {
             background-color: rgba(56, 178, 172, 0.1);
+            transform: translateX(4px);
         }
         
         .sidebar-item.active {
@@ -242,9 +257,111 @@
             color: white;
             box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.3);
         }
-    </style>
-    <!-- Additional styles for dynamic content -->
-    <style>
+        
+        /* New visual enhancements */
+        .hero-gradient {
+            background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+        }
+        
+        .card-hover {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+        }
+        
+        .glow-effect {
+            position: relative;
+        }
+        
+        .glow-effect:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at center, rgba(56, 178, 172, 0.2) 0%, transparent 70%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        
+        .glow-effect:hover:after {
+            opacity: 1;
+        }
+        
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        
+        .wave-shape {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            line-height: 0;
+        }
+        
+        .wave-shape svg {
+            position: relative;
+            display: block;
+            width: calc(100% + 1.3px);
+            height: 150px;
+        }
+        
+        .wave-shape .shape-fill {
+            fill: #FFFFFF;
+        }
+        
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        
+        .gradient-text {
+            background: linear-gradient(90deg, var(--accent), var(--gold));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        
+        .blob {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            background: linear-gradient(135deg, rgba(56, 178, 172, 0.1) 0%, rgba(214, 158, 46, 0.1) 100%);
+            border-radius: 50%;
+            filter: blur(60px);
+            z-index: -1;
+        }
+        
+        .blob-1 {
+            top: -100px;
+            right: -100px;
+        }
+        
+        .blob-2 {
+            bottom: -100px;
+            left: -100px;
+        }
+        
+        /* Dynamic content styles */
         #dynamic-content.active {
             display: block;
         }
@@ -255,6 +372,37 @@
         
         .nav-link.active {
             font-weight: 600;
+            color: var(--accent);
+            position: relative;
+        }
+        
+        .nav-link.active:after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--accent);
+        }
+        
+        .nav-link {
+            position: relative;
+        }
+        
+        .nav-link:after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--accent);
+            transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover:after {
+            width: 100%;
         }
     </style>
 </head>
@@ -262,14 +410,14 @@
     <!-- Public Navigation -->
     <header class="bg-white shadow-sm sticky top-0 z-50" id="public-header">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16 items-center">
+            <div class="flex justify-between h-20 items-center">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
                         <i class="fas fa-heartbeat text-primary text-2xl mr-2"></i>
                         <a href="#" class="home-link text-xl font-bold text-primary">TN Medical Connect</a>
                     </div>
                 </div>
-                <div class="hidden md:flex items-center space-x-5">
+                <div class="hidden md:flex items-center space-x-6">
                     <a href="#about" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">About</a>
                     <a href="#features" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Features</a>
                     <a href="#contact" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Contact</a>
@@ -279,7 +427,7 @@
                     <a href="#" onclick="return loadPageWithToggle('MedPage')" data-page="MedPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Medical</a>
                     <a href="#" onclick="return loadPageWithToggle('PhDPage')" data-page="PhDPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">PhD</a>
                     <a href="#" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Login</a>
-                    <a href="#register" class="btn-gold px-4 py-2 rounded-md font-medium transition-colors">Register</a>
+                    <a href="#register" class="btn-gold px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105">Register</a>
                 </div>
                 <div class="md:hidden flex items-center">
                     <button id="menu-btn" class="text-gray-600 focus:outline-none">
@@ -399,7 +547,7 @@
             </div>
             
             <!-- Welcome Banner -->
-            <div class="bg-white rounded-lg shadow-sm p-6 mb-8 border border-gray-100">
+            <div class="bg-white rounded-xl shadow-sm p-6 mb-8 border border-gray-100 card-hover">
                 <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                     <div>
                         <h2 class="text-2xl font-bold text-primary mb-2">Welcome, Dr. Kumar</h2>
@@ -419,7 +567,7 @@
             
             <!-- Quick Stats -->
             <div class="grid md:grid-cols-3 gap-6 mb-8">
-                <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
                     <div class="flex items-center">
                         <div class="p-3 rounded-full bg-blue-50 text-blue-600 mr-4">
                             <i class="fas fa-envelope text-xl"></i>
@@ -430,7 +578,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
                     <div class="flex items-center">
                         <div class="p-3 rounded-full bg-green-50 text-green-600 mr-4">
                             <i class="fas fa-calendar-alt text-xl"></i>
@@ -441,7 +589,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
                     <div class="flex items-center">
                         <div class="p-3 rounded-full bg-purple-50 text-purple-600 mr-4">
                             <i class="fas fa-book-open text-xl"></i>
@@ -458,25 +606,25 @@
             <div class="mb-8">
                 <h3 class="text-lg font-semibold text-primary mb-4">Quick Actions</h3>
                 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                    <a href="#" class="bg-white rounded-lg shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center">
+                    <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
                         <div class="text-accent mb-2">
                             <i class="fas fa-file-alt text-2xl"></i>
                         </div>
                         <span class="text-sm font-medium">Apply for Grant</span>
                     </a>
-                    <a href="#" class="bg-white rounded-lg shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center">
+                    <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
                         <div class="text-accent mb-2">
                             <i class="fas fa-comments text-2xl"></i>
                         </div>
                         <span class="text-sm font-medium">Join Discussion</span>
                     </a>
-                    <a href="#" class="bg-white rounded-lg shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center">
+                    <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
                         <div class="text-accent mb-2">
                             <i class="fas fa-question-circle text-2xl"></i>
                         </div>
                         <span class="text-sm font-medium">Post Question</span>
                     </a>
-                    <a href="#" class="bg-white rounded-lg shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center">
+                    <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
                         <div class="text-accent mb-2">
                             <i class="fas fa-podcast text-2xl"></i>
                         </div>
@@ -486,7 +634,7 @@
             </div>
             
             <!-- Recent Activity -->
-            <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100">
+            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
                 <div class="flex items-center justify-between mb-6">
                     <h3 class="text-lg font-semibold text-primary">Recent Activity</h3>
                     <a href="#" class="text-sm text-accent hover:underline">View All</a>
@@ -550,9 +698,9 @@
             <div class="flex flex-col md:flex-row">
                 <!-- Email Folders -->
                 <div class="w-full md:w-64 flex-shrink-0 mb-6 md:mb-0 md:mr-6">
-                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                         <div class="p-4 border-b border-gray-100">
-                            <button class="w-full btn-gold py-2 rounded-md text-sm font-medium">
+                            <button class="w-full btn-gold py-2 rounded-lg text-sm font-medium">
                                 <i class="fas fa-plus mr-2"></i> Compose
                             </button>
                         </div>
@@ -592,7 +740,7 @@
                 </div>
                 
                 <!-- Email List -->
-                <div class="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
+                <div class="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                     <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                         <div class="flex items-center">
                             <input type="checkbox" class="h-4 w-4 text-accent rounded border-gray-300">
@@ -691,7 +839,7 @@
             <p class="text-gray-600">Complete these steps to verify your medical credentials and access all platform features.</p>
         </div>
         
-        <div class="bg-white rounded-lg shadow-sm p-8 border border-gray-100">
+        <div class="bg-white rounded-xl shadow-sm p-8 border border-gray-100">
             <div class="verification-steps space-y-8">
                 <!-- Step 1 -->
                 <div class="verification-step completed flex items-start">
@@ -725,17 +873,17 @@
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div>
                                     <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
-                                    <input type="text" id="first-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" value="Rajesh">
+                                    <input type="text" id="first-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" value="Rajesh">
                                 </div>
                                 <div>
                                     <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
-                                    <input type="text" id="last-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" value="Kumar">
+                                    <input type="text" id="last-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" value="Kumar">
                                 </div>
                             </div>
                             
                             <div>
                                 <label for="specialty" class="block text-sm font-medium text-gray-700 mb-1">Primary Specialty</label>
-                                <select id="specialty" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
+                                <select id="specialty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
                                     <option value="">Select your specialty</option>
                                     <option value="cardiology" selected>Cardiology</option>
                                     <option value="neurology">Neurology</option>
@@ -747,16 +895,16 @@
                             
                             <div>
                                 <label for="hospital" class="block text-sm font-medium text-gray-700 mb-1">Hospital Affiliation</label>
-                                <input type="text" id="hospital" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Enter hospital or clinic name">
+                                <input type="text" id="hospital" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Enter hospital or clinic name">
                             </div>
                             
                             <div>
                                 <label for="years" class="block text-sm font-medium text-gray-700 mb-1">Years of Practice</label>
-                                <input type="number" id="years" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Enter number of years">
+                                <input type="number" id="years" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Enter number of years">
                             </div>
                             
                             <div class="pt-4">
-                                <button type="submit" class="btn-gold px-6 py-3 rounded-md font-medium shadow-sm hover:shadow-md transition-all">Save & Continue</button>
+                                <button type="submit" class="btn-gold px-6 py-3 rounded-lg font-medium shadow-sm hover:shadow-md transition-all">Save & Continue</button>
                             </div>
                         </form>
                     </div>
@@ -775,7 +923,7 @@
 
     <!-- Registration Success (Hidden by default) -->
     <div id="registration-success" class="hidden max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
-        <div class="bg-white rounded-lg shadow-sm p-12 border border-gray-100">
+        <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-100">
             <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                 <i class="fas fa-check text-green-600 text-3xl"></i>
             </div>
@@ -785,7 +933,7 @@
                 Your official TN Medical Connect email address is:<br>
                 <span class="text-accent text-xl">[email protected]</span>
             </p>
-            <button id="go-to-dashboard" class="btn-gold px-8 py-3 rounded-md font-medium shadow-sm hover:shadow-md transition-all">
+            <button id="go-to-dashboard" class="btn-gold px-8 py-3 rounded-lg font-medium shadow-sm hover:shadow-md transition-all">
                 Go to Dashboard
             </button>
         </div>
@@ -797,27 +945,45 @@
         <div id="dynamic-content" class="hidden">
             <!-- Content will be loaded here dynamically -->
         </div>
+        
         <!-- Hero Section -->
-        <section class="bg-white fade-in">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
+        <section class="relative overflow-hidden">
+            <div class="blob blob-1"></div>
+            <div class="blob blob-2"></div>
+            
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
                 <div class="md:flex items-center">
                     <div class="md:w-1/2 mb-12 md:mb-0">
-                        <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">Connecting Tamil Nadu Doctors With Global Opportunities</h1>
+                        <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6 leading-tight">
+                            Connecting <span class="gradient-text">Tamil Nadu Doctors</span> With Global Opportunities
+                        </h1>
                         <p class="text-lg text-gray-600 mb-8 max-w-lg">A verified, secure space for medical professionals to collaborate, research, and grow their careers.</p>
                         <div class="flex space-x-4">
-                            <a href="#register" class="btn-gold px-6 py-3 rounded-md font-medium shadow-sm hover:shadow-md transition-all">Register Now</a>
-                            <a href="#features" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors font-medium">Learn More</a>
+                            <a href="#register" class="btn-gold px-6 py-3 rounded-lg font-medium shadow-lg hover:shadow-xl transition-all transform hover:scale-105 pulse-animation">
+                                Register Now <i class="fas fa-arrow-right ml-2"></i>
+                            </a>
+                            <a href="#features" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium hover:shadow-md">
+                                Learn More <i class="fas fa-book-open ml-2"></i>
+                            </a>
                         </div>
                     </div>
                     <div class="md:w-1/2 flex justify-center">
-                        <div class="w-full max-w-md">
+                        <div class="relative w-full max-w-md">
+                            <div class="absolute -top-6 -left-6 w-32 h-32 bg-accent rounded-full opacity-10"></div>
+                            <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gold rounded-full opacity-10"></div>
                             <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                                  alt="Medical professionals collaborating" 
-                                 class="rounded-lg shadow-md w-full h-auto object-cover">
+                                 class="rounded-xl shadow-xl w-full h-auto object-cover relative z-10 floating">
                         </div>
                     </div>
                 </div>
             </div>
+            
+            <div class="wave-shape">
+                <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                    <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+                </svg>
+            </div>
         </section>
 
         <div class="section-divider"></div>
@@ -832,36 +998,36 @@
                 
                 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                     <!-- Feature 1 -->
-                    <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition-shadow">
+                    <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
                         <div class="feature-icon">
-                            <i class="fas fa-envelope text-xl"></i>
+                            <i class="fas fa-envelope"></i>
                         </div>
                         <h3 class="text-xl font-semibold text-primary mb-3">Verified Doctor's Email</h3>
                         <p class="text-gray-600">Professional email address with TNMC verification to establish credibility with colleagues and institutions.</p>
                     </div>
                     
                     <!-- Feature 2 -->
-                    <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition-shadow">
+                    <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
                         <div class="feature-icon">
-                            <i class="fas fa-users text-xl"></i>
+                            <i class="fas fa-users"></i>
                         </div>
                         <h3 class="text-xl font-semibold text-primary mb-3">Professional Network</h3>
                         <p class="text-gray-600">Connect with specialists across Tamil Nadu through secure discussion forums and direct messaging.</p>
                     </div>
                     
                     <!-- Feature 3 -->
-                    <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition-shadow">
+                    <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
                         <div class="feature-icon">
-                            <i class="fas fa-book-open text-xl"></i>
+                            <i class="fas fa-book-open"></i>
                         </div>
                         <h3 class="text-xl font-semibold text-primary mb-3">Research Resources</h3>
                         <p class="text-gray-600">Access to international journals, research papers, and grant opportunities curated for your specialty.</p>
                     </div>
                     
                     <!-- Feature 4 -->
-                    <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition-shadow">
+                    <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
                         <div class="feature-icon">
-                            <i class="fas fa-chart-line text-xl"></i>
+                            <i class="fas fa-chart-line"></i>
                         </div>
                         <h3 class="text-xl font-semibold text-primary mb-3">Career Advancement</h3>
                         <p class="text-gray-600">Exclusive job listings, webinar invitations, and collaboration projects to grow your professional impact.</p>
@@ -873,8 +1039,8 @@
         <div class="section-divider"></div>
 
         <!-- About Section -->
-        <section id="about" class="bg-gray-50 py-16 fade-in">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <section id="about" class="bg-gray-50 py-16 fade-in relative overflow-hidden">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                 <div class="md:flex items-center">
                     <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                         <h2 class="text-3xl font-bold text-primary mb-6">About TN Medical Connect</h2>
@@ -888,9 +1054,13 @@
                         </div>
                     </div>
                     <div class="md:w-1/2">
-                        <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
-                             alt="Medical team discussion" 
-                             class="rounded-lg shadow-md w-full h-auto object-cover">
+                        <div class="relative">
+                            <div class="absolute -top-4 -left-4 w-32 h-32 bg-accent rounded-full opacity-10"></div>
+                            <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gold rounded-full opacity-10"></div>
+                            <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
+                                 alt="Medical team discussion" 
+                                 class="rounded-xl shadow-lg w-full h-auto object-cover relative z-10">
+                        </div>
                     </div>
                 </div>
             </div>
@@ -901,60 +1071,70 @@
         <!-- Registration Section -->
         <section id="register" class="bg-white py-16 fade-in">
             <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="bg-primary rounded-lg shadow-lg overflow-hidden">
+                <div class="bg-gradient-to-r from-primary to-secondary rounded-xl shadow-xl overflow-hidden">
                     <div class="md:flex">
-                        <div class="md:w-1/2 p-8 md:p-12 bg-primary text-white">
-                            <h2 class="text-2xl font-bold mb-4">Get Your Verified Doctor ID</h2>
-                            <p class="text-gray-300 mb-6">Join thousands of Tamil Nadu medical professionals who trust our platform for their professional growth.</p>
-                            <ul class="space-y-3 mb-8">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
-                                    <span>TNMC-verified professional identity</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
-                                    <span>Secure collaboration environment</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
-                                    <span>Access to exclusive resources</span>
-                                </li>
-                            </ul>
-                            <div class="flex items-center">
-                                <span class="verified-badge bg-white/10">
-                                    <i class="fas fa-lock"></i>
-                                    <span>256-bit encrypted</span>
-                                </span>
+                        <div class="md:w-1/2 p-8 md:p-12 text-white relative overflow-hidden">
+                            <div class="absolute -top-20 -right-20 w-40 h-40 bg-white rounded-full opacity-10"></div>
+                            <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-accent rounded-full opacity-10"></div>
+                            <div class="relative z-10">
+                                <h2 class="text-2xl font-bold mb-4">Get Your Verified Doctor ID</h2>
+                                <p class="text-gray-300 mb-6">Join thousands of Tamil Nadu medical professionals who trust our platform for their professional growth.</p>
+                                <ul class="space-y-3 mb-8">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
+                                        <span>TNMC-verified professional identity</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
+                                        <span>Secure collaboration environment</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
+                                        <span>Access to exclusive resources</span>
+                                    </li>
+                                </ul>
+                                <div class="flex items-center">
+                                    <span class="verified-badge bg-white/10">
+                                        <i class="fas fa-lock"></i>
+                                        <span>256-bit encrypted</span>
+                                    </span>
+                                </div>
                             </div>
                         </div>
-                        <div class="md:w-1/2 p-8 md:p-12 bg-white">
-                            <h3 class="text-xl font-semibold text-primary mb-6">Create Your Account</h3>
-                            <form id="registration-form">
-                                <div class="mb-4">
-                                    <label for="full-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
-                                    <input type="text" id="full-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Dr. Firstname Lastname">
-                                </div>
-                                <div class="mb-4">
-                                    <label for="tnmc-id" class="block text-sm font-medium text-gray-700 mb-1">TNMC Registration Number</label>
-                                    <input type="text" id="tnmc-id" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="TNMC123456">
-                                </div>
-                                <div class="mb-4">
-                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
-                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="[email protected]">
-                                </div>
-                                <div class="mb-6">
-                                    <label for="specialty" class="block text-sm font-medium text-gray-700 mb-1">Primary Specialty</label>
-                                    <select id="specialty" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
-                                        <option value="">Select your specialty</option>
-                                        <option value="cardiology">Cardiology</option>
-                                        <option value="neurology">Neurology</option>
-                                        <option value="pediatrics">Pediatrics</option>
-                                        <option value="surgery">General Surgery</option>
-                                        <option value="orthopedics">Orthopedics</option>
-                                    </select>
-                                </div>
-                                <button type="submit" class="w-full btn-gold py-3 rounded-md font-medium shadow-sm hover:shadow-md transition-all">Complete Registration</button>
-                            </form>
+                        <div class="md:w-1/2 p-8 md:p-12 bg-white relative">
+                            <div class="absolute -top-6 -left-6 w-16 h-16 bg-accent rounded-full opacity-10"></div>
+                            <div class="absolute -bottom-6 -right-6 w-16 h-16 bg-gold rounded-full opacity-10"></div>
+                            <div class="relative z-10">
+                                <h3 class="text-xl font-semibold text-primary mb-6">Create Your Account</h3>
+                                <form id="registration-form">
+                                    <div class="mb-4">
+                                        <label for="full-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                                        <input type="text" id="full-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Dr. Firstname Lastname">
+                                    </div>
+                                    <div class="mb-4">
+                                        <label for="tnmc-id" class="block text-sm font-medium text-gray-700 mb-1">TNMC Registration Number</label>
+                                        <input type="text" id="tnmc-id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="TNMC123456">
+                                    </div>
+                                    <div class="mb-4">
+                                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
+                                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="[email protected]">
+                                    </div>
+                                    <div class="mb-6">
+                                        <label for="specialty" class="block text-sm font-medium text-gray-700 mb-1">Primary Specialty</label>
+                                        <select id="specialty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
+                                            <option value="">Select your specialty</option>
+                                            <option value="cardiology">Cardiology</option>
+                                            <option value="neurology">Neurology</option>
+                                            <option value="pediatrics">Pediatrics</option>
+                                            <option value="surgery">General Surgery</option>
+                                            <option value="orthopedics">Orthopedics</option>
+                                        </select>
+                                    </div>
+                                    <button type="submit" class="w-full btn-gold py-3 rounded-lg font-medium shadow-lg hover:shadow-xl transition-all transform hover:scale-105">
+                                        Complete Registration
+                                    </button>
+                                </form>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -972,7 +1152,7 @@
                 </div>
                 
                 <div class="grid md:grid-cols-3 gap-8">
-                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-lg transition-all card-hover">
                         <div class="text-accent mb-4">
                             <i class="fas fa-envelope text-2xl"></i>
                         </div>
@@ -981,7 +1161,7 @@
                         <a href="mailto:[email protected]" class="text-accent hover:underline">[email protected]</a>
                     </div>
                     
-                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-lg transition-all card-hover">
                         <div class="text-accent mb-4">
                             <i class="fas fa-phone-alt text-2xl"></i>
                         </div>
@@ -990,7 +1170,7 @@
                         <a href="tel:+914412345678" class="text-accent hover:underline">+91 44 1234 5678</a>
                     </div>
                     
-                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                    <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-lg transition-all card-hover">
                         <div class="text-accent mb-4">
                             <i class="fas fa-question-circle text-2xl"></i>
                         </div>
@@ -1004,8 +1184,11 @@
     </div>
 
     <!-- Footer -->
-    <footer class="bg-primary text-white py-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <footer class="bg-gradient-to-r from-primary to-secondary text-white py-12 relative overflow-hidden">
+        <div class="absolute -top-20 -left-20 w-64 h-64 bg-white rounded-full opacity-10"></div>
+        <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-accent rounded-full opacity-10"></div>
+        
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
             <div class="grid md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
                     <div class="flex items-center mb-4">
@@ -1148,14 +1331,63 @@
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     entry.target.style.opacity = 1;
+                    entry.target.style.transform = 'translateY(0)';
                 }
             });
         }, { threshold: 0.1 });
 
         fadeElements.forEach(el => {
             el.style.opacity = 0;
+            el.style.transform = 'translateY(20px)';
             observer.observe(el);
         });
-    </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=rainbowhunt/tnmed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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=rainbowhunt/TN" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+
+        // GSAP animations
+        gsap.registerPlugin(ScrollTrigger);
+
+        // Animate hero section elements
+        gsap.from(".hero-gradient h1", {
+            scrollTrigger: {
+                trigger: ".hero-gradient",
+                start: "top bottom",
+                toggleActions: "play none none none"
+            },
+            y: 50,
+            opacity: 0,
+            duration: 1,
+            ease: "power3.out"
+        });
+
+        gsap.from(".hero-gradient p", {
+            scrollTrigger: {
+                trigger: ".hero-gradient",
+                start: "top bottom",
+                toggleActions: "play none none none"
+            },
+            y: 50,
+            opacity: 0,
+            duration: 1,
+            delay: 0.2,
+            ease: "power3.out"
+        });
+
+        gsap.from(".hero-gradient a", {
+            scrollTrigger: {
+                trigger: ".hero-gradient",
+                start: "top bottom",
+                toggleActions: "play none none none"
+            },
+            y: 50,
+            opacity: 0,
+            duration: 1,
+            delay: 0.4,
+            ease: "power3.out",
+            stagger: 0.1
+        });
+
+        // Animate feature cards
+        gsap.from(".card-hover", {
+            scrollTrigger: {
+                trigger: "#features",
+                start: "top
 </html>