diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..4534b9e
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+### Added
+- Added `.no-scrollbar` utility class in `src/index.css` to enable smooth horizontal scrolling without visible scrollbars for mobile tab navigation.
+- Added `Fredoka` font (a modern groovy font) to replace the previous display font on Theme card titles.
+- Added a "Team Members" toggle button with a spring-animated chevron that smoothly reveals the "Operating Partners" grid underneath the "Sub Heads" section.
+
+### Changed
+- **Themes Section**:
+  - Overhauled interaction: Replaced "click-to-view" modal system with an inline smooth dropdown (hover on desktop, tap on mobile/tablet).
+  - Cleaned up titles: Removed legacy "2026", "Theme XX" numbering labels.
+  - Renamed "IOT & Smart Cities" theme to **"IOT & Sustainability"** and updated tags (added GreenTech).
+  - Renamed "Web3 / Sustain" theme to **"Blockchain & Fintech"** with an updated description, updated emoji to `🔗`, and tags to `Smart Contracts`, `DeFi`, `Fintech`, `Crypto`.
+  - Updated card titles font-weight to `normal` (400) mapping to the `Fredoka` groovy font design.
+- **Team Section Header**: Replaced the slide-in (`x: ±300`) animation with a bulletproof fade-up (`y: 30 → 0`) animation to prevent the "Meet The Team" heading from clipping completely off-screen on constrained mobile displays due to `overflow-hidden`.
+- **Team Section Layout**: Integrated proper CSS grid configuration (`grid-cols-2` mobile, `grid-cols-3` tablet, `grid-cols-4` desktop) over the previous fixed-width wrapping implementation.
+- **Team Section Responsiveness**:
+  - Adjusted container to `w-[92%]` on tablet and correctly incremented padding (`px-5`, `px-6`) so the retro shadow offsets (`10px_10px`, `16px_16px`) no longer clip via the responsive bounds.
+  - Sub-headings now safely `clamp` sizing alongside smaller card text metrics to avoid horizontal scrollbar lock.
+  - Active Tab Button CSS explicitly utilizes inline style coloring (`#f3ecd2`) overriding systemic tailwind specificity cascading rendering the default black rectangle bug.
+
+### Removed
+- Removed the standalone "Operating Partners" tab grouping, integrating it as a sub-collapse element under "Sub Heads".
+- Removed hardcoded margins and large scale fonts causing overflow clipping from mobile versions (e.g., swapped `text-6xl` to `clamp(2rem, 7vw, 6rem)`).
diff --git a/optimize.cjs b/optimize.cjs
new file mode 100644
index 0000000..48a3f63
--- /dev/null
+++ b/optimize.cjs
@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+const sharp = require('sharp');
+
+const dir = path.join(__dirname, 'public/assets');
+const files = fs.readdirSync(dir).filter(f => f.startsWith('hero') && f.endsWith('.jpg'));
+
+(async () => {
+  console.log(`Found ${files.length} images to optimize.`);
+  let totalSaved = 0;
+
+  for (const file of files) {
+    const input = path.join(dir, file);
+    const output = path.join(dir, file.replace('.jpg', '.webp'));
+    
+    const inputStats = fs.statSync(input);
+    
+    await sharp(input)
+      .resize({ width: 800, withoutEnlargement: true }) // Downscale large images
+      .webp({ quality: 75 }) // High quality WebP
+      .toFile(output);
+      
+    const outputStats = fs.statSync(output);
+    const saved = inputStats.size - outputStats.size;
+    totalSaved += saved;
+    
+    console.log(`Converted ${file} to WebP. Saved ${(saved / 1024 / 1024).toFixed(2)} MB`);
+  }
+  
+  console.log(`\nAll done! Total space saved: ${(totalSaved / 1024 / 1024).toFixed(2)} MB`);
+})();
diff --git a/package-lock.json b/package-lock.json
index 4f36767..62543c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-icons": "^5.6.0",
+        "react-photo-album": "^3.6.0",
         "react-router-dom": "^6.22.0",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.2",
@@ -37,6 +38,7 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.4.0",
+        "sharp": "^0.34.5",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.57.0",
         "vite": "^8.0.1"
@@ -72,6 +74,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -295,27 +298,6 @@
       "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
       "license": "Apache-2.0"
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
-      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
-      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -535,6 +517,496 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -705,6 +1177,7 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.5.0.tgz",
       "integrity": "sha512-FiUzfYW4wB1+PpmsE47UM+mCads7j2+giRBltfwH7SNhah95rqJs3ltEs9V3pP8rYdS0QlNne+9Aj8dS/SiaIA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/webxr": "*",
@@ -967,6 +1440,27 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
       "version": "1.0.0-rc.15",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.15.tgz",
@@ -1466,6 +1960,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1530,6 +2025,7 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.183.1.tgz",
       "integrity": "sha512-f2Pu5Hrepfgavttdye3PsH5RWyY/AvdZQwIVhrc4uNtvF7nOWJacQKcoVJn0S4f0yYbmAE6AR+ve7xDcuYtMGw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -1600,6 +2096,7 @@
       "integrity": "sha512-rLoGZIf9afaRBYsPUMtvkDWykwXwUPL60HebR4JgTI8mxfFe2cQTu3AGitANp4b9B2QlVru6WzjgB2IzJKiCSA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.58.0",
         "@typescript-eslint/types": "8.58.0",
@@ -1919,6 +2416,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2150,6 +2648,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2742,6 +3241,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4780,6 +5280,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4938,6 +5439,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4947,6 +5449,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4963,6 +5466,27 @@
         "react": "*"
       }
     },
+    "node_modules/react-photo-album": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.6.0.tgz",
+      "integrity": "sha512-W9NgI+0XxOYF/FLQJ/ZiKsizNQtGtgDdiFgojmTmpBKDGeGiWKfSzmbw3v9WAqzimPeiFJ2sEb9DO0nHRHP/OA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/igordanchenko"
+      },
+      "peerDependencies": {
+        "@types/react": "^18 || ^19",
+        "react": "^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.30.3",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
@@ -5263,6 +5787,64 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5629,7 +6211,8 @@
       "version": "0.183.2",
       "resolved": "https://registry.npmjs.org/three/-/three-0.183.2.tgz",
       "integrity": "sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
@@ -5827,6 +6410,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5978,6 +6562,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz",
       "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -6201,6 +6786,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 0735241..664cfc2 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",
+    "react-photo-album": "^3.6.0",
     "react-router-dom": "^6.22.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
@@ -39,6 +40,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "sharp": "^0.34.5",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^8.0.1"
diff --git a/public/assets/hero1.jpg b/public/assets/hero1.jpg
deleted file mode 100644
index 75b5ba4..0000000
Binary files a/public/assets/hero1.jpg and /dev/null differ
diff --git a/public/assets/hero1.webp b/public/assets/hero1.webp
new file mode 100644
index 0000000..5e7b22c
Binary files /dev/null and b/public/assets/hero1.webp differ
diff --git a/public/assets/hero10.webp b/public/assets/hero10.webp
new file mode 100644
index 0000000..85a84a6
Binary files /dev/null and b/public/assets/hero10.webp differ
diff --git a/public/assets/hero11.webp b/public/assets/hero11.webp
new file mode 100644
index 0000000..b34e549
Binary files /dev/null and b/public/assets/hero11.webp differ
diff --git a/public/assets/hero12.webp b/public/assets/hero12.webp
new file mode 100644
index 0000000..ac171a9
Binary files /dev/null and b/public/assets/hero12.webp differ
diff --git a/public/assets/hero13.webp b/public/assets/hero13.webp
new file mode 100644
index 0000000..aee4196
Binary files /dev/null and b/public/assets/hero13.webp differ
diff --git a/public/assets/hero14.webp b/public/assets/hero14.webp
new file mode 100644
index 0000000..e6b3506
Binary files /dev/null and b/public/assets/hero14.webp differ
diff --git a/public/assets/hero15.webp b/public/assets/hero15.webp
new file mode 100644
index 0000000..4d2d4bf
Binary files /dev/null and b/public/assets/hero15.webp differ
diff --git a/public/assets/hero16.webp b/public/assets/hero16.webp
new file mode 100644
index 0000000..9d11a35
Binary files /dev/null and b/public/assets/hero16.webp differ
diff --git a/public/assets/hero17.webp b/public/assets/hero17.webp
new file mode 100644
index 0000000..98d8ea9
Binary files /dev/null and b/public/assets/hero17.webp differ
diff --git a/public/assets/hero18.webp b/public/assets/hero18.webp
new file mode 100644
index 0000000..1fa1832
Binary files /dev/null and b/public/assets/hero18.webp differ
diff --git a/public/assets/hero19.webp b/public/assets/hero19.webp
new file mode 100644
index 0000000..7974ba6
Binary files /dev/null and b/public/assets/hero19.webp differ
diff --git a/public/assets/hero2.jpg b/public/assets/hero2.jpg
deleted file mode 100644
index 95df845..0000000
Binary files a/public/assets/hero2.jpg and /dev/null differ
diff --git a/public/assets/hero2.webp b/public/assets/hero2.webp
new file mode 100644
index 0000000..52a3d0e
Binary files /dev/null and b/public/assets/hero2.webp differ
diff --git a/public/assets/hero20.webp b/public/assets/hero20.webp
new file mode 100644
index 0000000..760d3e2
Binary files /dev/null and b/public/assets/hero20.webp differ
diff --git a/public/assets/hero21.webp b/public/assets/hero21.webp
new file mode 100644
index 0000000..e780a13
Binary files /dev/null and b/public/assets/hero21.webp differ
diff --git a/public/assets/hero22.webp b/public/assets/hero22.webp
new file mode 100644
index 0000000..71d0f43
Binary files /dev/null and b/public/assets/hero22.webp differ
diff --git a/public/assets/hero23.webp b/public/assets/hero23.webp
new file mode 100644
index 0000000..5d8f8cf
Binary files /dev/null and b/public/assets/hero23.webp differ
diff --git a/public/assets/hero3.jpg b/public/assets/hero3.jpg
deleted file mode 100644
index 90b3e10..0000000
Binary files a/public/assets/hero3.jpg and /dev/null differ
diff --git a/public/assets/hero3.webp b/public/assets/hero3.webp
new file mode 100644
index 0000000..b88f243
Binary files /dev/null and b/public/assets/hero3.webp differ
diff --git a/public/assets/hero4.jpg b/public/assets/hero4.jpg
deleted file mode 100644
index a943644..0000000
Binary files a/public/assets/hero4.jpg and /dev/null differ
diff --git a/public/assets/hero4.webp b/public/assets/hero4.webp
new file mode 100644
index 0000000..7628c00
Binary files /dev/null and b/public/assets/hero4.webp differ
diff --git a/public/assets/hero5.jpg b/public/assets/hero5.jpg
deleted file mode 100644
index feb1bfd..0000000
Binary files a/public/assets/hero5.jpg and /dev/null differ
diff --git a/public/assets/hero5.webp b/public/assets/hero5.webp
new file mode 100644
index 0000000..703b352
Binary files /dev/null and b/public/assets/hero5.webp differ
diff --git a/public/assets/hero6.jpg b/public/assets/hero6.jpg
deleted file mode 100644
index d92f129..0000000
Binary files a/public/assets/hero6.jpg and /dev/null differ
diff --git a/public/assets/hero6.webp b/public/assets/hero6.webp
new file mode 100644
index 0000000..c117c15
Binary files /dev/null and b/public/assets/hero6.webp differ
diff --git a/public/assets/hero7.webp b/public/assets/hero7.webp
new file mode 100644
index 0000000..21c74ea
Binary files /dev/null and b/public/assets/hero7.webp differ
diff --git a/public/assets/hero8.webp b/public/assets/hero8.webp
new file mode 100644
index 0000000..3f89528
Binary files /dev/null and b/public/assets/hero8.webp differ
diff --git a/public/assets/hero9.webp b/public/assets/hero9.webp
new file mode 100644
index 0000000..e4891eb
Binary files /dev/null and b/public/assets/hero9.webp differ
diff --git a/src/App.tsx b/src/App.tsx
index f8c4e9b..9e2180a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,10 +5,11 @@ import Hero from './sections/Hero'
 import Themes from './components/Themes'
 import Timeline from './sections/Timeline'
 import FAQ from './sections/FAQ'
-// import Team from './sections/Team'
+import Team from './sections/Team'
 import Prizes from './sections/Prizes'
 import Sponsors from './sections/Sponsors'
 import Footer from './sections/Footer'
+import TargetCursor from './components/TargetCursor'
 
 import { motion, AnimatePresence } from 'framer-motion'
 
@@ -89,7 +90,7 @@ function Navbar({ onNavClick }: { onNavClick: (e: React.MouseEvent<HTMLAnchorEle
 
         {/* Mobile Menu Toggle */}
         <div className={`w-full flex ${isMini ? 'justify-center' : 'justify-between'} items-center relative transition-all duration-300 ${isMini ? 'py-3' : 'px-4 md:px-8 py-2 md:py-3.5'}`}>
-          <a href="#hero" onClick={handleLinkClick} className="flex items-center">
+          <a href="#hero" onClick={handleLinkClick} className="cursor-target flex items-center">
             <img src="/logos/logoo 5.png" alt="DEVHACK" className="h-8 md:h-10 w-auto object-contain" />
           </a>
 
@@ -100,12 +101,13 @@ function Navbar({ onNavClick }: { onNavClick: (e: React.MouseEvent<HTMLAnchorEle
               animate={{ opacity: 1 }}
               className="hidden md:flex gap-8 lg:gap-10 font-bold text-lg lg:text-xl uppercase tracking-widest text-[#1a1a1a]"
             >
-              <a href="#hero" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Main</a>
-              <a href="#timeline" onClick={handleLinkClick} className="hover:text-[#f97028] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Timeline</a>
-              <a href="#themes" onClick={handleLinkClick} className="hover:text-[#f3a20f] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Themes</a>
-              <a href="#prizes" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Prizes</a>
-              <a href="#sponsors" onClick={handleLinkClick} className="hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Sponsors</a>
-              <a href="#faq" onClick={handleLinkClick} className="hover:text-[#ff5ea8] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">FAQ</a>
+               <a href="#hero" onClick={handleLinkClick} className="cursor-target hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Main</a>
+              <a href="#themes" onClick={handleLinkClick} className="cursor-target hover:text-[#f3a20f] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Themes</a>
+              <a href="#prizes" onClick={handleLinkClick} className="cursor-target hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Prizes</a>
+              <a href="#sponsors" onClick={handleLinkClick} className="cursor-target hover:text-[#f489a3] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Sponsors</a>
+              <a href="#timeline" onClick={handleLinkClick} className="cursor-target hover:text-[#f97028] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Timeline</a>
+              <a href="#team" onClick={handleLinkClick} className="cursor-target hover:text-[#f3a20f] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">Team</a>
+              <a href="#faq" onClick={handleLinkClick} className="cursor-target hover:text-[#ff5ea8] hover:underline decoration-[3px] underline-offset-6 transition-colors drop-shadow-[1px_1px_0px_#1a1a1a]">FAQ</a>
             </motion.div>
           )}
 
@@ -116,7 +118,7 @@ function Navbar({ onNavClick }: { onNavClick: (e: React.MouseEvent<HTMLAnchorEle
                 e.stopPropagation(); // Don't trigger container click
                 setIsOpen(!isOpen);
               }}
-              className="md:hidden p-2 text-[#1a1a1a]"
+              className="cursor-target md:hidden p-2 text-[#1a1a1a]"
               aria-label="Toggle Menu"
             >
               {isOpen ? (
@@ -138,12 +140,13 @@ function Navbar({ onNavClick }: { onNavClick: (e: React.MouseEvent<HTMLAnchorEle
               className="md:hidden w-full px-6 pb-8 flex flex-col gap-6 text-center font-bold text-2xl uppercase tracking-widest text-[#1a1a1a]"
             >
               <div className="h-[2px] w-full bg-[#1a1a1a]/10 mb-2" />
-              <a href="#hero" onClick={handleLinkClick} className="hover:text-[#f489a3] active:text-[#f489a3]">Main</a>
-              <a href="#timeline" onClick={handleLinkClick} className="hover:text-[#f97028] active:text-[#f97028]">Timeline</a>
-              <a href="#themes" onClick={handleLinkClick} className="hover:text-[#f3a20f] active:text-[#f3a20f]">Themes</a>
-              <a href="#prizes" onClick={handleLinkClick} className="hover:text-[#f489a3] active:text-[#f489a3]">Prizes</a>
-              <a href="#sponsors" onClick={handleLinkClick} className="hover:text-[#f489a3] active:text-[#f489a3]">Sponsors</a>
-              <a href="#faq" onClick={handleLinkClick} className="hover:text-[#ff5ea8] active:text-[#ff5ea8]">FAQ</a>
+              <a href="#hero" onClick={handleLinkClick} className="cursor-target hover:text-[#f489a3] active:text-[#f489a3]">Main</a>
+              <a href="#themes" onClick={handleLinkClick} className="cursor-target hover:text-[#f3a20f] active:text-[#f3a20f]">Themes</a>
+              <a href="#prizes" onClick={handleLinkClick} className="cursor-target hover:text-[#f489a3] active:text-[#f489a3]">Prizes</a>
+              <a href="#sponsors" onClick={handleLinkClick} className="cursor-target hover:text-[#f489a3] active:text-[#f489a3]">Sponsors</a>
+              <a href="#timeline" onClick={handleLinkClick} className="cursor-target hover:text-[#f97028] active:text-[#f97028]">Timeline</a>
+              <a href="#team" onClick={handleLinkClick} className="cursor-target hover:text-[#f3a20f] active:text-[#f3a20f]">Team</a>
+              <a href="#faq" onClick={handleLinkClick} className="cursor-target hover:text-[#ff5ea8] active:text-[#ff5ea8]">FAQ</a>
             </motion.div>
           )}
         </AnimatePresence>
@@ -244,6 +247,7 @@ export default function App() {
       </AnimatePresence>
 
       <div className="min-h-screen bg-[#f3ecd2] relative font-sans text-cream">
+        <TargetCursor spinDuration={2} hideDefaultCursor={true} parallaxOn={true} />
         <Navbar onNavClick={handleNavClick} />
         <main>
           <Hero />
@@ -251,7 +255,7 @@ export default function App() {
           <Prizes />
           <Sponsors />
           <Timeline />
-          {/* <Team /> */}
+          <Team />
           <FAQ />
         </main>
         <Footer />
diff --git a/src/components/BlurText.tsx b/src/components/BlurText.tsx
new file mode 100644
index 0000000..655db9b
--- /dev/null
+++ b/src/components/BlurText.tsx
@@ -0,0 +1,129 @@
+import { motion } from 'framer-motion';
+import { useEffect, useRef, useState, useMemo } from 'react';
+
+const buildKeyframes = (from: any, steps: any[]) => {
+  const keys = new Set([...Object.keys(from), ...steps.flatMap(s => Object.keys(s))]);
+
+  const keyframes: any = {};
+  keys.forEach(k => {
+    keyframes[k] = [from[k], ...steps.map(s => s[k])];
+  });
+  return keyframes;
+};
+
+interface BlurTextProps {
+  text?: string;
+  delay?: number;
+  className?: string;
+  animateBy?: 'words' | 'letters';
+  direction?: 'top' | 'bottom';
+  threshold?: number;
+  rootMargin?: string;
+  animationFrom?: any;
+  animationTo?: any[];
+  easing?: any;
+  onAnimationComplete?: () => void;
+  stepDuration?: number;
+  animateTrigger?: boolean; // Custom prop to trigger animation externally
+}
+
+const BlurText = ({
+  text = '',
+  delay = 200,
+  className = '',
+  animateBy = 'words',
+  direction = 'top',
+  threshold = 0.1,
+  rootMargin = '0px',
+  animationFrom,
+  animationTo,
+  easing = (t: any) => t,
+  onAnimationComplete,
+  stepDuration = 0.35,
+  animateTrigger
+}: BlurTextProps) => {
+  const elements = animateBy === 'words' ? text.split(' ') : text.split('');
+  const [inView, setInView] = useState(false);
+  const ref = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (animateTrigger !== undefined) {
+      // If controlled externally, don't use IntersectionObserver
+      if (animateTrigger) {
+        setInView(true);
+      } else {
+         setInView(false); // Reset if needed, though usually one-way
+      }
+      return;
+    }
+
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          observer.unobserve(ref.current!);
+        }
+      },
+      { threshold, rootMargin }
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, animateTrigger]);
+
+  const defaultFrom = useMemo(
+    () =>
+      direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 },
+    [direction]
+  );
+
+  const defaultTo = useMemo(
+    () => [
+      {
+        filter: 'blur(5px)',
+        opacity: 0.5,
+        y: direction === 'top' ? 5 : -5
+      },
+      { filter: 'blur(0px)', opacity: 1, y: 0 }
+    ],
+    [direction]
+  );
+
+  const fromSnapshot = animationFrom ?? defaultFrom;
+  const toSnapshots = animationTo ?? defaultTo;
+
+  const stepCount = toSnapshots.length + 1;
+  const totalDuration = stepDuration * (stepCount - 1);
+  const times = Array.from({ length: stepCount }, (_, i) => (stepCount === 1 ? 0 : i / (stepCount - 1)));
+
+  return (
+    <p ref={ref} className={className} style={{ display: 'flex', flexWrap: 'wrap' }}>
+      {elements.map((segment, index) => {
+        const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);
+
+        const spanTransition: any = {
+          duration: totalDuration,
+          times,
+          delay: (index * delay) / 1000
+        };
+        spanTransition.ease = easing;
+
+        return (
+          <motion.span
+            className="inline-block will-change-[transform,filter,opacity]"
+            key={index}
+            initial={fromSnapshot}
+            animate={inView ? animateKeyframes : fromSnapshot}
+            transition={spanTransition}
+            onAnimationComplete={index === elements.length - 1 ? onAnimationComplete : undefined}
+          >
+            {segment === ' ' ? '\u00A0' : segment}
+            {animateBy === 'words' && index < elements.length - 1 && '\u00A0'}
+          </motion.span>
+        );
+      })}
+    </p>
+  );
+};
+
+export default BlurText;
diff --git a/src/components/TargetCursor.css b/src/components/TargetCursor.css
new file mode 100644
index 0000000..b5cd06a
--- /dev/null
+++ b/src/components/TargetCursor.css
@@ -0,0 +1,57 @@
+.target-cursor-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 9999;
+  mix-blend-mode: difference;
+  transform: translate(-50%, -50%);
+}
+
+.target-cursor-dot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 4px;
+  height: 4px;
+  background: #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  will-change: transform;
+}
+
+.target-cursor-corner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border: 3px solid #fff;
+  will-change: transform;
+}
+
+.corner-tl {
+  transform: translate(-150%, -150%);
+  border-right: none;
+  border-bottom: none;
+}
+
+.corner-tr {
+  transform: translate(50%, -150%);
+  border-left: none;
+  border-bottom: none;
+}
+
+.corner-br {
+  transform: translate(50%, 50%);
+  border-left: none;
+  border-top: none;
+}
+
+.corner-bl {
+  transform: translate(-150%, 50%);
+  border-right: none;
+  border-top: none;
+}
diff --git a/src/components/TargetCursor.tsx b/src/components/TargetCursor.tsx
new file mode 100644
index 0000000..b99f433
--- /dev/null
+++ b/src/components/TargetCursor.tsx
@@ -0,0 +1,338 @@
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { gsap } from 'gsap';
+import './TargetCursor.css';
+
+interface TargetCursorProps {
+  targetSelector?: string;
+  spinDuration?: number;
+  hideDefaultCursor?: boolean;
+  hoverDuration?: number;
+  parallaxOn?: boolean;
+}
+
+const TargetCursor = ({
+  targetSelector = '.cursor-target',
+  spinDuration = 2,
+  hideDefaultCursor = true,
+  hoverDuration = 0.2,
+  parallaxOn = true
+}: TargetCursorProps) => {
+  const cursorRef = useRef<HTMLDivElement | null>(null);
+  const cornersRef = useRef<NodeListOf<Element> | null>(null);
+  const spinTl = useRef<gsap.core.Timeline | null>(null);
+  const dotRef = useRef<HTMLDivElement | null>(null);
+
+  const isActiveRef = useRef(false);
+  const targetCornerPositionsRef = useRef<{ x: number; y: number }[] | null>(null);
+  const tickerFnRef = useRef<gsap.TickerCallback | null>(null);
+  const activeStrengthRef = useRef({ current: 0 });
+
+  const isMobile = useMemo(() => {
+    if (typeof window === 'undefined') return false;
+    const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    const isSmallScreen = window.innerWidth <= 768;
+    const userAgent = navigator.userAgent || navigator.vendor || (window as unknown as { opera?: string }).opera || '';
+    const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
+    const isMobileUserAgent = mobileRegex.test(userAgent.toLowerCase());
+    return (hasTouchScreen && isSmallScreen) || isMobileUserAgent;
+  }, []);
+
+  const constants = useMemo(
+    () => ({
+      borderWidth: 3,
+      cornerSize: 12
+    }),
+    []
+  );
+
+  const moveCursor = useCallback((x: number, y: number) => {
+    if (!cursorRef.current) return;
+    gsap.to(cursorRef.current, {
+      x,
+      y,
+      duration: 0.1,
+      ease: 'power3.out'
+    });
+  }, []);
+
+  useEffect(() => {
+    if (isMobile || !cursorRef.current) return;
+
+    const originalCursor = document.body.style.cursor;
+    if (hideDefaultCursor) {
+      document.body.style.cursor = 'none';
+    }
+
+    const cursor = cursorRef.current;
+    cornersRef.current = cursor.querySelectorAll('.target-cursor-corner');
+
+    let activeTarget: Element | null = null;
+    let currentLeaveHandler: (() => void) | null = null;
+    let resumeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const cleanupTarget = (target: Element) => {
+      if (currentLeaveHandler) {
+        target.removeEventListener('mouseleave', currentLeaveHandler);
+      }
+      currentLeaveHandler = null;
+    };
+
+    gsap.set(cursor, {
+      xPercent: -50,
+      yPercent: -50,
+      x: window.innerWidth / 2,
+      y: window.innerHeight / 2
+    });
+
+    const createSpinTimeline = () => {
+      if (spinTl.current) {
+        spinTl.current.kill();
+      }
+      spinTl.current = gsap
+        .timeline({ repeat: -1 })
+        .to(cursor, { rotation: '+=360', duration: spinDuration, ease: 'none' });
+    };
+
+    createSpinTimeline();
+
+    const tickerFn = () => {
+      if (!targetCornerPositionsRef.current || !cursorRef.current || !cornersRef.current) {
+        return;
+      }
+
+      const strength = activeStrengthRef.current.current;
+      if (strength === 0) return;
+
+      const cursorX = gsap.getProperty(cursorRef.current, 'x') as number;
+      const cursorY = gsap.getProperty(cursorRef.current, 'y') as number;
+
+      const corners = Array.from(cornersRef.current);
+      corners.forEach((corner, i) => {
+        const currentX = gsap.getProperty(corner, 'x') as number;
+        const currentY = gsap.getProperty(corner, 'y') as number;
+
+        const targetX = targetCornerPositionsRef.current![i].x - cursorX;
+        const targetY = targetCornerPositionsRef.current![i].y - cursorY;
+
+        const finalX = currentX + (targetX - currentX) * strength;
+        const finalY = currentY + (targetY - currentY) * strength;
+
+        const duration = strength >= 0.99 ? (parallaxOn ? 0.2 : 0) : 0.05;
+
+        gsap.to(corner, {
+          x: finalX,
+          y: finalY,
+          duration: duration,
+          ease: duration === 0 ? 'none' : 'power1.out',
+          overwrite: 'auto'
+        });
+      });
+    };
+
+    tickerFnRef.current = tickerFn;
+
+    const moveHandler = (e: MouseEvent) => moveCursor(e.clientX, e.clientY);
+    window.addEventListener('mousemove', moveHandler);
+
+    const scrollHandler = () => {
+      if (!activeTarget || !cursorRef.current) return;
+      const mouseX = gsap.getProperty(cursorRef.current, 'x') as number;
+      const mouseY = gsap.getProperty(cursorRef.current, 'y') as number;
+      const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+      const isStillOverTarget =
+        elementUnderMouse &&
+        (elementUnderMouse === activeTarget || elementUnderMouse.closest(targetSelector) === activeTarget);
+      if (!isStillOverTarget) {
+        if (currentLeaveHandler) {
+          currentLeaveHandler();
+        }
+      }
+    };
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+
+    const mouseDownHandler = () => {
+      if (!dotRef.current) return;
+      gsap.to(dotRef.current, { scale: 0.7, duration: 0.3 });
+      gsap.to(cursorRef.current, { scale: 0.9, duration: 0.2 });
+    };
+
+    const mouseUpHandler = () => {
+      if (!dotRef.current) return;
+      gsap.to(dotRef.current, { scale: 1, duration: 0.3 });
+      gsap.to(cursorRef.current, { scale: 1, duration: 0.2 });
+    };
+
+    window.addEventListener('mousedown', mouseDownHandler);
+    window.addEventListener('mouseup', mouseUpHandler);
+
+    const enterHandler = (e: Event) => {
+      const directTarget = e.target as HTMLElement;
+      const allTargets: HTMLElement[] = [];
+      let current: HTMLElement | null = directTarget;
+      while (current && current !== document.body) {
+        if (current.matches(targetSelector)) {
+          allTargets.push(current);
+        }
+        current = current.parentElement;
+      }
+      const target = allTargets[0] || null;
+      if (!target || !cursorRef.current || !cornersRef.current) return;
+      if (activeTarget === target) return;
+      if (activeTarget) {
+        cleanupTarget(activeTarget);
+      }
+      if (resumeTimeout) {
+        clearTimeout(resumeTimeout);
+        resumeTimeout = null;
+      }
+
+      activeTarget = target;
+      const corners = Array.from(cornersRef.current);
+      corners.forEach(corner => gsap.killTweensOf(corner));
+
+      gsap.killTweensOf(cursorRef.current, 'rotation');
+      spinTl.current?.pause();
+      gsap.set(cursorRef.current, { rotation: 0 });
+
+      const rect = target.getBoundingClientRect();
+      const { borderWidth, cornerSize } = constants;
+      const cursorX = gsap.getProperty(cursorRef.current, 'x') as number;
+      const cursorY = gsap.getProperty(cursorRef.current, 'y') as number;
+
+      targetCornerPositionsRef.current = [
+        { x: rect.left - borderWidth, y: rect.top - borderWidth },
+        { x: rect.right + borderWidth - cornerSize, y: rect.top - borderWidth },
+        { x: rect.right + borderWidth - cornerSize, y: rect.bottom + borderWidth - cornerSize },
+        { x: rect.left - borderWidth, y: rect.bottom + borderWidth - cornerSize }
+      ];
+
+      isActiveRef.current = true;
+      gsap.ticker.add(tickerFnRef.current!);
+
+      gsap.to(activeStrengthRef.current, {
+        current: 1,
+        duration: hoverDuration,
+        ease: 'power2.out'
+      });
+
+      corners.forEach((corner, i) => {
+        gsap.to(corner, {
+          x: targetCornerPositionsRef.current![i].x - cursorX,
+          y: targetCornerPositionsRef.current![i].y - cursorY,
+          duration: 0.2,
+          ease: 'power2.out'
+        });
+      });
+
+      const leaveHandler = () => {
+        gsap.ticker.remove(tickerFnRef.current!);
+
+        isActiveRef.current = false;
+        targetCornerPositionsRef.current = null;
+        gsap.set(activeStrengthRef.current, { current: 0, overwrite: true });
+        activeTarget = null;
+
+        if (cornersRef.current) {
+          const corners = Array.from(cornersRef.current);
+          gsap.killTweensOf(corners);
+          const { cornerSize } = constants;
+          const positions = [
+            { x: -cornerSize * 1.5, y: -cornerSize * 1.5 },
+            { x: cornerSize * 0.5, y: -cornerSize * 1.5 },
+            { x: cornerSize * 0.5, y: cornerSize * 0.5 },
+            { x: -cornerSize * 1.5, y: cornerSize * 0.5 }
+          ];
+          const tl = gsap.timeline();
+          corners.forEach((corner, index) => {
+            tl.to(
+              corner,
+              {
+                x: positions[index].x,
+                y: positions[index].y,
+                duration: 0.3,
+                ease: 'power3.out'
+              },
+              0
+            );
+          });
+        }
+
+        resumeTimeout = setTimeout(() => {
+          if (!activeTarget && cursorRef.current && spinTl.current) {
+            const currentRotation = gsap.getProperty(cursorRef.current, 'rotation') as number;
+            const normalizedRotation = currentRotation % 360;
+            spinTl.current.kill();
+            spinTl.current = gsap
+              .timeline({ repeat: -1 })
+              .to(cursorRef.current, { rotation: '+=360', duration: spinDuration, ease: 'none' });
+            gsap.to(cursorRef.current, {
+              rotation: normalizedRotation + 360,
+              duration: spinDuration * (1 - normalizedRotation / 360),
+              ease: 'none',
+              onComplete: () => {
+                spinTl.current?.restart();
+              }
+            });
+          }
+          resumeTimeout = null;
+        }, 50);
+
+        cleanupTarget(target);
+      };
+
+      currentLeaveHandler = leaveHandler;
+      target.addEventListener('mouseleave', leaveHandler);
+    };
+
+    window.addEventListener('mouseover', enterHandler, { passive: true });
+
+    return () => {
+      if (tickerFnRef.current) {
+        gsap.ticker.remove(tickerFnRef.current);
+      }
+
+      window.removeEventListener('mousemove', moveHandler);
+      window.removeEventListener('mouseover', enterHandler);
+      window.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('mousedown', mouseDownHandler);
+      window.removeEventListener('mouseup', mouseUpHandler);
+
+      if (activeTarget) {
+        cleanupTarget(activeTarget);
+      }
+
+      spinTl.current?.kill();
+      document.body.style.cursor = originalCursor;
+
+      isActiveRef.current = false;
+      targetCornerPositionsRef.current = null;
+      activeStrengthRef.current.current = 0;
+    };
+  }, [targetSelector, spinDuration, moveCursor, constants, hideDefaultCursor, isMobile, hoverDuration, parallaxOn]);
+
+  useEffect(() => {
+    if (isMobile || !cursorRef.current || !spinTl.current) return;
+    if (spinTl.current.isActive()) {
+      spinTl.current.kill();
+      spinTl.current = gsap
+        .timeline({ repeat: -1 })
+        .to(cursorRef.current, { rotation: '+=360', duration: spinDuration, ease: 'none' });
+    }
+  }, [spinDuration, isMobile]);
+
+  if (isMobile) {
+    return null;
+  }
+
+  return (
+    <div ref={cursorRef} className="target-cursor-wrapper">
+      <div ref={dotRef} className="target-cursor-dot" />
+      <div className="target-cursor-corner corner-tl" />
+      <div className="target-cursor-corner corner-tr" />
+      <div className="target-cursor-corner corner-br" />
+      <div className="target-cursor-corner corner-bl" />
+    </div>
+  );
+};
+
+export default TargetCursor;
diff --git a/src/components/TeamCarousel.tsx b/src/components/TeamCarousel.tsx
deleted file mode 100644
index edd450e..0000000
--- a/src/components/TeamCarousel.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-"use client";
-
-import React, { useState, useCallback, useEffect } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { motion, AnimatePresence, type TargetAndTransition} from 'framer-motion';
-import { cn } from '../lib/utils'; // Assuming this utility correctly merges class names
-
-export interface TeamMember {
-  id: string;
-  name: string;
-  role: string;
-  image: string;
-  bio?: string;
-  linkedin?: string;
-}
-
-export interface TeamCarouselProps {
-  /** Array of team members */
-  members: TeamMember[];
-  /** Title displayed above the carousel */
-  title?: string;
-  /** Title font size */
-  titleSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Title color */
-  titleColor?: string;
-  /** Background color or gradient. Overrides the default 'bg-background' class. */
-  background?: string;
-  /** Card width in pixels */
-  cardWidth?: number;
-  /** Card height in pixels */
-  cardHeight?: number;
-  /** Card border radius */
-  cardRadius?: number;
-  /** Enable/disable navigation arrows */
-  showArrows?: boolean;
-  /** Enable/disable dots indicator */
-  showDots?: boolean;
-  /** Enable/disable keyboard navigation */
-  keyboardNavigation?: boolean;
-  /** Enable/disable touch/swipe navigation */
-  touchNavigation?: boolean;
-  /** Animation duration in milliseconds */
-  animationDuration?: number;
-  /** Auto-play interval in milliseconds (0 to disable) */
-  autoPlay?: number;
-  /** Pause auto-play on hover */
-  pauseOnHover?: boolean;
-  /** Number of visible cards on each side */
-  visibleCards?: number;
-  /** Scale factor for side cards */
-  sideCardScale?: number;
-  /** Opacity for side cards */
-  sideCardOpacity?: number;
-  /** Apply grayscale filter to side cards */
-  grayscaleEffect?: boolean;
-  /** Custom className for container */
-  className?: string;
-  /** Custom className for cards */
-  cardClassName?: string;
-  /** Custom className for title */
-  titleClassName?: string;
-  /** Member info position */
-  infoPosition?: 'bottom' | 'overlay' | 'none';
-  /** Info text color */
-  infoTextColor?: string;
-  /** Info background */
-  infoBackground?: string;
-  /** Callback when active member changes */
-  onMemberChange?: (member: TeamMember, index: number) => void;
-  /** Callback when card is clicked */
-  onCardClick?: (member: TeamMember, index: number) => void;
-  /** Initial active index */
-  initialIndex?: number;
-}
-
-export const TeamCarousel: React.FC<TeamCarouselProps> = ({
-  members,
-  title = "OUR TEAM",
-  titleSize = "2xl",
-  titleColor = "rgba(0, 76, 255, 1)",
-  background,
-  cardWidth = 280,
-  cardHeight = 380,
-  cardRadius = 20,
-  showArrows = true,
-  showDots = true,
-  keyboardNavigation = true,
-  touchNavigation = true,
-  animationDuration = 800,
-  autoPlay = 0,
-  pauseOnHover = true,
-  visibleCards = 2,
-  sideCardScale = 0.9,
-  sideCardOpacity = 0.8,
-  grayscaleEffect = true,
-  className,
-  cardClassName,
-  titleClassName,
-  infoPosition = "bottom",
-  infoTextColor = "rgb(8, 42, 123)",
-  infoBackground = "transparent",
-  onMemberChange,
-  onCardClick,
-  initialIndex = 0,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [direction, setDirection] = useState(0); // 0: no movement, 1: next, -1: prev
-  const [touchStart, setTouchStart] = useState(0);
-  const [touchEnd, setTouchEnd] = useState(0);
-
-  const totalMembers = members.length;
-
-  const paginate = useCallback(
-    (newDirection: number) => {
-      if (totalMembers === 0) return;
-      setDirection(newDirection);
-      const nextIndex = (currentIndex + newDirection + totalMembers) % totalMembers;
-      setCurrentIndex(nextIndex);
-      onMemberChange?.(members[nextIndex], nextIndex);
-    },
-    [currentIndex, totalMembers, members, onMemberChange]
-  );
-
-  const wrapIndex = (index: number) => {
-    return (index + totalMembers) % totalMembers;
-  };
-
-  const calculatePosition = (index: number) => {
-    const activeIndex = currentIndex;
-    const diff = wrapIndex(index - activeIndex);
-
-    if (diff === 0) return 'center';
-
-    const half = Math.floor(totalMembers / 2);
-    
-    if (diff <= half) {
-      if (diff <= visibleCards) return `right-${diff}`;
-      return 'hidden';
-    } else {
-      const leftDiff = totalMembers - diff;
-      if (leftDiff <= visibleCards) return `left-${leftDiff}`;
-      return 'hidden';
-    }
-  };
-
-  // Explicitly type the return of getVariantStyles to match framer-motion's expectations
-  const getVariantStyles = (position: string): TargetAndTransition => {
-    // FIX: Changed ease from number[] to an array of string presets or a valid CubicBezier type
-    // Using string presets for simplicity and type compatibility.
-    // If you need the exact cubic-bezier values, ensure they are compatible with framer-motion's Easing type.
-    // For custom cubic-bezier, you might need to use a type assertion like `as [number, number, number, number]`
-    // or import CubicBezier from 'framer-motion/types/value/types'.
-    const transition = {
-      duration: animationDuration / 1000,
-      // You can use a string preset like 'easeInOut' or a valid cubic-bezier array if framer-motion's types support it directly
-      // For the given numbers, 'easeInOut' is a close approximation or 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' if framer-motion accepted it directly as string
-      // To strictly match [0.25, 0.46, 0.45, 0.94], framer-motion expects it as a CubicBezier tuple:
-      ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number],
-    };
-
-    switch (position) {
-      case 'center':
-        return {
-          zIndex: 10,
-          opacity: 1,
-          scale: 1.1,
-          x: 0,
-          filter: 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'right-1':
-        return {
-          zIndex: 5,
-          opacity: sideCardOpacity,
-          scale: sideCardScale,
-          x: cardWidth * 0.7,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'right-2':
-        return {
-          zIndex: 1,
-          opacity: sideCardOpacity * 0.7,
-          scale: sideCardScale * 0.9,
-          x: cardWidth * 1.4,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'left-1':
-        return {
-          zIndex: 5,
-          opacity: sideCardOpacity,
-          scale: sideCardScale,
-          x: -cardWidth * 0.7,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      case 'left-2':
-        return {
-          zIndex: 1,
-          opacity: sideCardOpacity * 0.7,
-          scale: sideCardScale * 0.9,
-          x: -cardWidth * 1.4,
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          pointerEvents: 'auto',
-          transition,
-        };
-      default:
-        return {
-          zIndex: 0,
-          opacity: 0,
-          scale: 0.8,
-          x: direction > 0 ? cardWidth * (visibleCards + 1) : -cardWidth * (visibleCards + 1),
-          pointerEvents: 'none',
-          filter: grayscaleEffect ? 'grayscale(100%)' : 'grayscale(0%)',
-          transition,
-        };
-    }
-  };
-
-  // Auto-play functionality
-  useEffect(() => {
-    let interval: ReturnType<typeof setInterval>;
-    if (autoPlay > 0) {
-      interval = setInterval(() => {
-        paginate(1);
-      }, autoPlay);
-    }
-
-    const carouselContainer = document.getElementById('team-carousel-container');
-
-    const handleMouseEnter = () => {
-      if (pauseOnHover && autoPlay > 0) clearInterval(interval);
-    };
-
-    const handleMouseLeave = () => {
-      if (pauseOnHover && autoPlay > 0) {
-        interval = setInterval(() => {
-          paginate(1);
-        }, autoPlay);
-      }
-    };
-
-    if (carouselContainer && pauseOnHover && autoPlay > 0) {
-      carouselContainer.addEventListener('mouseenter', handleMouseEnter);
-      carouselContainer.addEventListener('mouseleave', handleMouseLeave);
-    }
-
-    return () => {
-      clearInterval(interval);
-      if (carouselContainer && pauseOnHover && autoPlay > 0) {
-        carouselContainer.removeEventListener('mouseenter', handleMouseEnter);
-        carouselContainer.removeEventListener('mouseleave', handleMouseLeave);
-      }
-    };
-  }, [autoPlay, paginate, pauseOnHover]);
-
-  // Keyboard navigation
-  useEffect(() => {
-    if (!keyboardNavigation) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        paginate(-1);
-      } else if (e.key === 'ArrowRight') {
-        paginate(1);
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [keyboardNavigation, paginate]);
-
-  // Touch navigation
-  const handleTouchStart = (e: React.TouchEvent) => {
-    if (!touchNavigation) return;
-    setTouchStart(e.targetTouches[0].clientX);
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (!touchNavigation) return;
-    setTouchEnd(e.targetTouches[0].clientX);
-  };
-
-  const handleTouchEnd = () => {
-    if (!touchNavigation) return;
-
-    const swipeThreshold = 50;
-    const diff = touchStart - touchEnd;
-
-    if (Math.abs(diff) > swipeThreshold) {
-      if (diff > 0) {
-        paginate(1);
-      } else {
-        paginate(-1);
-      }
-    }
-  };
-
-  const titleSizeClasses = {
-    sm: 'text-4xl',
-    md: 'text-5xl',
-    lg: 'text-6xl',
-    xl: 'text-7xl',
-    '2xl': 'text-8xl',
-  };
-
-  return (
-    <div
-      id="team-carousel-container"
-      className={cn(`w-full py-24 flex flex-col items-center justify-start overflow-hidden relative transparent`, className)}
-      style={{ background: background, minHeight: '80vh' }}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      {/* Title */}
-      {title && (
-        <h2
-          className={cn(
-            "font-black uppercase tracking-tight text-center pointer-events-none whitespace-nowrap mb-12",
-            titleSizeClasses[titleSize],
-            titleClassName
-          )}
-          style={{
-            color: 'transparent',
-            background: `linear-gradient(to bottom, ${titleColor} 20%, ${titleColor}80 80%)`,
-            WebkitBackgroundClip: 'text',
-            backgroundClip: 'text',
-          }}
-        >
-          {title}
-        </h2>
-      )}
-
-      {/* Carousel Container */}
-      <div
-        className="w-full max-w-6xl relative"
-        style={{
-          height: cardHeight + 100,
-          perspective: '1000px',
-        }}
-      >
-        {/* Navigation Arrows */}
-        {showArrows && (
-          <>
-            <motion.button
-              onClick={() => paginate(-1)}
-              className="absolute left-5 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white w-10 h-10 rounded-full flex items-center justify-center z-20 transition-all duration-300 hover:scale-110"
-              whileTap={{ scale: 0.9 }}
-            >
-              <ChevronLeft className="w-6 h-6" />
-            </motion.button>
-            <motion.button
-              onClick={() => paginate(1)}
-              className="absolute right-5 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white w-10 h-10 rounded-full flex items-center justify-center z-20 transition-all duration-300 hover:scale-110"
-              whileTap={{ scale: 0.9 }}
-            >
-              <ChevronRight className="w-6 h-6" />
-            </motion.button>
-          </>
-        )}
-
-        {/* Cards Track */}
-        <div
-          className="w-full h-full flex justify-center items-center relative"
-          style={{ transformStyle: 'preserve-3d' }}
-        >
-          <AnimatePresence initial={false} custom={direction}>
-            {members.map((member, index) => {
-              const position = calculatePosition(index);
-              const isCurrent = index === currentIndex;
-
-              if (position === 'hidden' && !isCurrent) return null;
-
-              return (
-                <motion.div
-                  key={member.id}
-                  className={cn(
-                    "absolute bg-white overflow-hidden shadow-2xl cursor-pointer",
-                    cardClassName
-                  )}
-                  style={{
-                    width: cardWidth,
-                    height: cardHeight,
-                    borderRadius: cardRadius,
-                    top: '50%',
-                    left: '50%',
-                    marginLeft: -cardWidth / 2,
-                    marginTop: -cardHeight / 2,
-                  }}
-                  initial={getVariantStyles('hidden')}
-                  animate={getVariantStyles(position)}
-                  exit={getVariantStyles('hidden')}
-                  onClick={() => {
-                    if (!isCurrent) {
-                      const newDirection = index > currentIndex ? 1 : -1;
-                      setDirection(newDirection);
-                      setCurrentIndex(index);
-                      onMemberChange?.(members[index], index);
-                    }
-                    onCardClick?.(member, index);
-                  }}
-                >
-                  <img
-                    src={member.image}
-                    alt={member.name}
-                    className="w-full h-full object-cover"
-                  />
-
-                  {/* Overlay Info */}
-                  {infoPosition === 'overlay' && (
-                    <div
-                      className="absolute bottom-0 left-0 right-0 p-4 text-center"
-                      style={{
-                        background: infoBackground || "linear-gradient(transparent, rgba(0,0,0,0.8))",
-                        color: infoTextColor,
-                      }}
-                    >
-                      <h3 className="text-lg font-bold">{member.name}</h3>
-                      <p className="text-sm opacity-90">{member.role}</p>
-                    </div>
-                  )}
-                </motion.div>
-              );
-            })}
-          </AnimatePresence>
-        </div>
-      </div>
-
-      {/* Member Info (Bottom) */}
-      {infoPosition === 'bottom' && members[currentIndex] && (
-        <motion.div
-          key={members[currentIndex].id + "-info"}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          transition={{ duration: 0.3 }}
-          className="text-center mt-10"
-        >
-          <h2
-            className="text-4xl font-bold mb-3 relative inline-block"
-            style={{ color: infoTextColor }}
-          >
-            {members[currentIndex].name}
-            <span
-              className="absolute top-full left-0 w-full h-0.5 mt-2"
-              style={{ background: infoTextColor }}
-            />
-          </h2>
-          <p
-            className="text-xl font-medium opacity-80 uppercase tracking-wider"
-            style={{ color: infoTextColor }}
-          >
-            {members[currentIndex].role}
-          </p>
-          {members[currentIndex].bio && (
-            <p className="text-base mt-4 max-w-lg mx-auto opacity-70">
-              {members[currentIndex].bio}
-            </p>
-          )}
-          
-          {members[currentIndex].linkedin && (
-            <div className="mt-6 flex justify-center">
-              <a 
-                href={members[currentIndex].linkedin} 
-                target="_blank" 
-                rel="noopener noreferrer" 
-                className="opacity-70 hover:opacity-100 transition-opacity flex items-center justify-center gap-2 border-2 rounded-full px-5 py-2 hover:bg-black/5"
-                style={{ borderColor: infoTextColor, color: infoTextColor }}
-              >
-                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                </svg>
-                <span className="font-semibold tracking-wider text-sm uppercase">LinkedIn Profile</span>
-              </a>
-            </div>
-          )}
-        </motion.div>
-      )}
-
-      {/* Dots Indicator */}
-      {showDots && (
-        <div className="flex justify-center gap-3 mt-15 ">
-          {members.map((_, index) => (
-            <motion.button
-              key={index}
-              onClick={() => {
-                if (index !== currentIndex) {
-                  const newDirection = index > currentIndex ? 1 : -1;
-                  setDirection(newDirection);
-                  setCurrentIndex(index);
-                  onMemberChange?.(members[index], index);
-                }
-              }}
-              className={cn(
-                "w-3 h-3 rounded-full transition-all duration-300",
-                index === currentIndex
-                  ? "scale-125"
-                  : "hover:scale-110"
-              )}
-              style={{
-                background: index === currentIndex
-                  ? infoTextColor
-                  : `${infoTextColor}40`,
-              }}
-              whileTap={{ scale: 0.9 }}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TeamCarousel;
diff --git a/src/components/Themes.tsx b/src/components/Themes.tsx
index 8c0f293..20bc842 100644
--- a/src/components/Themes.tsx
+++ b/src/components/Themes.tsx
@@ -17,76 +17,62 @@ export type Theme = {
   title: string;
   desc: string;
   tags: string[];
-  rotate: string;
-  year: string;
 };
 
 const themes: Theme[] = [
   {
     id: 1,
     emoji: '🤖',
-    color: '#f97028', // Orange
-    bg: '#fffdf9', // Very light cream
-    title: 'AI ML',
+    color: '#f97028',
+    bg: '#fffdf9',
+    title: 'AI / ML',
     desc: 'Build intelligent systems, chatbots, predictive models, and generative AI tools that think, learn, and adapt.',
     tags: ['LLMs', 'Computer Vision', 'NLP', 'Deep Learning'],
-    rotate: '-3deg',
-    year: '2026',
   },
   {
     id: 2,
     emoji: '🧠',
-    color: '#f489a3', // Pink
+    color: '#f489a3',
     bg: '#fffdf9',
     title: 'Agentic AI',
     desc: 'Develop autonomous agents that can plan, reason, and execute complex workflows without human intervention.',
     tags: ['Autonomous Agents', 'Reasoning', 'Workflows', 'Multi-Agent'],
-    rotate: '2deg',
-    year: '2026',
   },
   {
     id: 3,
     emoji: '📡',
-    color: '#f3a20f', // Yellow/Gold
+    color: '#f3a20f',
     bg: '#fffdf9',
-    title: 'IOT & Smart Cities',
-    desc: 'Bridge physical and digital worlds with embedded systems, sensor networks, edge intelligence, and urban tech.',
-    tags: ['Embedded', 'Edge AI', 'Sensors', 'Urban Tech'],
-    rotate: '-2deg',
-    year: '2026',
+    title: 'IOT & Sustainability',
+    desc: 'Bridge physical and digital worlds with embedded systems, sensor networks, edge intelligence, and sustainable tech solutions.',
+    tags: ['Embedded', 'Edge AI', 'Sensors', 'GreenTech'],
   },
   {
     id: 4,
     emoji: '⚕️',
-    color: '#4ade80', // Green
+    color: '#4ade80',
     bg: '#fffdf9',
     title: 'Healthcare',
     desc: 'Revolutionise patient care and medical research with modern health-tech, accessibility tools, and data analysis.',
     tags: ['HealthAI', 'Telemed', 'Accessibility', 'Bioinformatics'],
-    rotate: '3deg',
-    year: '2026',
   },
   {
     id: 5,
-    emoji: '🌐',
-    color: '#22d3ee', // Cyan
+    emoji: '🔗',
+    color: '#22d3ee',
     bg: '#fffdf9',
-    title: 'Web3 / Sustain',
-    desc: 'Decentralise the future and protect the planet — DeFi protocols, DAOs, green-tech, and sustainable innovation.',
-    tags: ['Smart Contracts', 'DeFi', 'GreenTech', 'NFTs'],
-    rotate: '-1deg',
-    year: '2026',
+    title: 'Blockchain & Fintech',
+    desc: 'Build the future of finance and trust — decentralised protocols, smart contracts, digital payments, and financial innovation.',
+    tags: ['Smart Contracts', 'DeFi', 'Fintech', 'Crypto'],
   },
   {
     id: 6,
     emoji: '💡',
-    color: '#a855f7', // Purple
+    color: '#a855f7',
     bg: '#fffdf9',
     title: 'Open Innovation',
-    desc: 'No boundaries. Build whatever crazy, groundbreaking idea you have that doesn’t fit into a box.',
+    desc: 'No boundaries. Build whatever crazy, groundbreaking idea you have that doesn\'t fit into a box.',
     tags: ['Moonshots', 'Creative', 'Anything Goes', 'Wildcard'],
-    rotate: '2deg',
-    year: '2026',
   },
 ];
 
@@ -94,202 +80,192 @@ const containerVariants: Variants = {
   hidden: {},
   visible: {
     transition: {
-      staggerChildren: 0.1,
+      staggerChildren: 0.12,
     },
   },
 };
 
 const cardVariants: Variants = {
-  hidden: { opacity: 0, y: 40, scale: 0.95 },
+  hidden: { opacity: 0, y: 50, scale: 0.92 },
   visible: {
     opacity: 1,
     y: 0,
     scale: 1,
     transition: {
       type: 'spring',
-      stiffness: 90,
-      damping: 15,
+      stiffness: 80,
+      damping: 16,
     },
   },
 };
 
-function ThemeCard({ theme, onClick }: { theme: Theme; onClick: () => void }) {
+/** Returns true when viewport is below the given px width */
+function useIsMobile(breakpoint = 1024) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const update = () => setIsMobile(mql.matches);
+    update();
+    mql.addEventListener('change', update);
+    return () => mql.removeEventListener('change', update);
+  }, [breakpoint]);
+  return isMobile;
+}
+
+function ThemeCard({ theme, isMobile }: { theme: Theme; isMobile: boolean }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // On desktop: hover controls reveal; on mobile: tap toggles
+  const showContent = isMobile ? isOpen : isOpen;
+
   return (
     <motion.div
       variants={cardVariants}
-      whileHover={{
-        y: -10,
-        scale: 1.06,
-        transition: { type: 'spring', stiffness: 400, damping: 25 },
-      }}
-      className="relative group cursor-pointer w-full"
-      onClick={onClick}
+      onHoverStart={() => { if (!isMobile) setIsOpen(true); }}
+      onHoverEnd={() => { if (!isMobile) setIsOpen(false); }}
+      onClick={() => { if (isMobile) setIsOpen((v) => !v); }}
+      className="relative w-full cursor-pointer"
     >
-      {/* Outer wrapper provides the thick colorful border */}
-      <div
-        className="relative overflow-hidden rounded-[2.5rem] shadow-[8px_8px_0_#1a1a1a] group-hover:shadow-[14px_14px_0_#1a1a1a] transition-all duration-300 w-full"
+      <motion.div
+        animate={{
+          y: showContent ? -6 : 0,
+          boxShadow: showContent
+            ? '10px 10px 0px #1a1a1a'
+            : '6px 6px 0px #1a1a1a',
+        }}
+        transition={{ type: 'spring', stiffness: 400, damping: 25 }}
+        className="relative overflow-hidden rounded-2xl w-full"
         style={{
           backgroundColor: theme.bg,
-          border: `6px solid ${theme.color}`,
-          aspectRatio: '1 / 1.1',
+          border: `3px solid #1a1a1a`,
         }}
       >
-        {/* Top-left subtle branding / corner decoration if desired */}
-        <div className="absolute top-6 left-6 flex items-center gap-2 opacity-50 z-10 transition-opacity group-hover:opacity-100">
-          <span className="w-3 h-3 rounded-full" style={{ backgroundColor: theme.color }} />
-          <span className="text-xs font-bold font-sans tracking-widest text-[#1a1a1a] uppercase">Theme {theme.id < 10 ? `0${theme.id}` : theme.id}</span>
-        </div>
-
-        {/* Central Graphic (Emoji) */}
-        <div className="absolute inset-0 flex items-center justify-center p-6 transition-transform duration-500 group-hover:scale-105">
-          <span
-            className="text-[4rem] sm:text-[6rem] md:text-[7rem] drop-shadow-2xl"
-            style={{
-              filter: `drop-shadow(0 15px 25px ${theme.color}30) drop-shadow(0 0 30px ${theme.color}15)`
-            }}
-          >
-            {theme.emoji}
-          </span>
-        </div>
-
-        {/* The bottom-right Cutout/Tab mimicking Lando Norris helmet view */}
+        {/* Accent stripe at top */}
         <div
-          className="absolute bottom-0 right-0 flex items-center pr-4 md:pr-6 pl-6 md:pl-8 py-2 md:py-3 rounded-tl-[1.5rem] md:rounded-tl-[2rem]"
-          style={{
-            backgroundColor: theme.bg,
-            borderTop: `6px solid ${theme.color}`,
-            borderLeft: `6px solid ${theme.color}`,
-            // We use margin to pull it into the corner perfectly against the parent's border overflow
-            marginRight: '-2px',
-            marginBottom: '-2px',
-          }}
-        >
-          <span className="font-display text-[#1a1a1a] text-base md:text-xl tracking-wide whitespace-nowrap">
-            {theme.title} <span style={{ color: theme.color }} className="ml-2 font-sans font-black text-sm md:text-base">{theme.year}</span>
-          </span>
-        </div>
+          className="w-full h-[6px]"
+          style={{ backgroundColor: theme.color }}
+        />
 
-        {/* Hover overlay hint */}
-        <div className="absolute inset-x-0 top-1/2 -mt-4 opacity-0 group-hover:opacity-100 flex justify-center transition-opacity duration-300 z-20 pointer-events-none">
-          <span className="bg-[#1a1a1a] text-[#f3ecd2] px-4 py-2 rounded-full font-bold text-sm tracking-widest uppercase shadow-xl transform translate-y-4 group-hover:translate-y-0 transition-all">
-            Click to View
-          </span>
-        </div>
-      </div>
-    </motion.div>
-  );
-}
-
-// ── Shared Modal component ──
-function ThemeModal({ theme, onClose }: { theme: Theme; onClose: () => void }) {
-  // Prevent scrolling when modal is open
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
-  }, []);
-
-  return (
-    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-6 md:p-12 pointer-events-auto">
-      {/* Backdrop */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 0.3 }}
-        className="absolute inset-0 bg-black/40 backdrop-blur-md cursor-pointer"
-        onClick={onClose}
-      />
-
-      {/* Modal Content Wrapper */}
-      <motion.div
-        initial={{ opacity: 0, scale: 0.9, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.9, y: 20, transition: { duration: 0.2 } }}
-        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-        className="relative w-full max-w-4xl max-h-[85vh] md:max-h-none bg-[#f3ecd2] rounded-[2rem] border-[4px] md:border-[6px] border-[#1a1a1a] shadow-[8px_8px_0_#1a1a1a] md:shadow-[16px_16px_0_rgba(26,26,26,0.5)] overflow-hidden flex flex-col md:flex-row z-10"
-      >
-        {/* Sticky Header for Close Button on Mobile */}
-        <div className="absolute top-0 right-0 p-4 z-50 md:sticky">
-          <button
-            onClick={onClose}
-            className="w-10 h-10 md:w-12 md:h-12 bg-[#1a1a1a] hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-colors duration-200 shadow-lg border-2 border-transparent"
-          >
-            <svg className="w-5 h-5 md:w-6 md:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Scrollable Content Container */}
-        <div className="flex-1 flex flex-col md:flex-row w-full overflow-y-auto md:overflow-visible min-h-0">
-          {/* Left Side (Visuals) */}
-          <div
-            className="w-full md:w-2/5 p-8 flex flex-col items-center justify-center relative min-h-[220px] md:min-h-[400px] shrink-0"
-            style={{ backgroundColor: `${theme.color}20` }}
-          >
+        <div className="p-5 sm:p-6 md:p-8">
+          {/* Emoji + Title row — always visible */}
+          <div className="flex items-center gap-3 sm:gap-4">
             <motion.div
-              initial={{ scale: 0.5, rotate: -10 }}
-              animate={{ scale: 1, rotate: 0 }}
-              transition={{ type: 'spring', delay: 0.1, damping: 15 }}
-              className="text-[6rem] sm:text-[8rem] md:text-[12rem] drop-shadow-2xl z-10"
+              animate={{
+                scale: showContent ? 1.1 : 1,
+                rotate: showContent ? -4 : 0,
+              }}
+              transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+              className="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 rounded-xl flex items-center justify-center shrink-0"
               style={{
-                filter: `drop-shadow(0 20px 40px ${theme.color}60)`
+                backgroundColor: `${theme.color}18`,
+                border: `2px solid ${theme.color}40`,
               }}
             >
-              {theme.emoji}
+              <span className="text-2xl sm:text-3xl md:text-4xl">{theme.emoji}</span>
             </motion.div>
 
-            <div
-              className="absolute bottom-4 left-4 md:bottom-6 md:left-6 font-sans font-black text-5xl md:text-9xl opacity-10 pointer-events-none"
-              style={{ color: theme.color }}
-            >
-              0{theme.id}
+            <div className="flex-1 min-w-0">
+              <h3
+                className="text-[#1a1a1a] leading-tight uppercase"
+                style={{
+                  fontFamily: 'var(--font-groovy)',
+                  fontSize: 'clamp(1.2rem, 2.5vw, 2rem)',
+                  lineHeight: 1.15,
+                  fontWeight: 400,
+                }}
+              >
+                {theme.title}
+              </h3>
             </div>
-          </div>
 
-          {/* Right Side (Details) */}
-          <div className="w-full md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
-            <div className="inline-flex items-center gap-2 mb-4">
-              <span className="w-3 h-3 rounded-full" style={{ backgroundColor: theme.color }} />
-              <span className="text-xs md:text-sm font-bold uppercase tracking-widest text-[#1a1a1a]/60">Domain</span>
-            </div>
+            {/* Tap indicator on mobile/tablet */}
+            {isMobile && (
+              <motion.div
+                animate={{ rotate: showContent ? 180 : 0 }}
+                transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+                className="w-8 h-8 rounded-full flex items-center justify-center shrink-0"
+                style={{
+                  backgroundColor: `${theme.color}20`,
+                  border: `2px solid ${theme.color}40`,
+                }}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="#1a1a1a"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </motion.div>
+            )}
+          </div>
 
-            <h2 className="font-display text-3xl sm:text-4xl md:text-6xl text-[#1a1a1a] leading-tight mb-4 md:mb-6">
-              {theme.title}
-            </h2>
+          {/* Dropdown content — smooth reveal */}
+          <AnimatePresence initial={false}>
+            {showContent && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{
+                  height: { type: 'spring', stiffness: 300, damping: 30 },
+                  opacity: { duration: 0.2, delay: 0.05 },
+                }}
+                className="overflow-hidden"
+              >
+                {/* Divider */}
+                <div
+                  className="w-full h-[2px] mt-4 mb-3 sm:mb-4 opacity-30"
+                  style={{ backgroundColor: theme.color }}
+                />
 
-            <p className="text-base md:text-xl text-[#3a3a3a] leading-relaxed mb-6 md:mb-8 font-medium">
-              {theme.desc}
-            </p>
+                {/* Description */}
+                <p className="text-[13px] sm:text-sm md:text-base text-[#3a3a3a] leading-relaxed mb-4 sm:mb-5 font-medium font-sans">
+                  {theme.desc}
+                </p>
 
-            <div className="mt-auto">
-              <h4 className="text-xs md:text-sm font-bold uppercase tracking-widest text-[#1a1a1a]/50 mb-3">Key Focus Areas</h4>
-              <div className="flex flex-wrap gap-2 md:gap-3">
-                {theme.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="text-xs md:text-base font-bold uppercase tracking-wider px-3 md:px-4 py-1.5 md:py-2 rounded-full border-[2px] md:border-[3px] border-[#1a1a1a]"
-                    style={{ backgroundColor: theme.color, color: '#1a1a1a' }}
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            </div>
-          </div>
+                {/* Tags */}
+                <div className="flex flex-wrap gap-1.5 sm:gap-2">
+                  {theme.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full font-sans"
+                      style={{
+                        backgroundColor: `${theme.color}15`,
+                        color: '#1a1a1a',
+                        border: `1.5px solid ${theme.color}50`,
+                      }}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
+
+        {/* Bottom accent bar */}
+        <motion.div
+          animate={{ opacity: showContent ? 1 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="w-full h-1"
+          style={{ backgroundColor: theme.color }}
+        />
       </motion.div>
-    </div>
+    </motion.div>
   );
 }
 
 export default function Themes() {
   const sectionRef = useRef<HTMLDivElement>(null);
   const headingRef = useRef<HTMLDivElement>(null);
-
-  const [selectedTheme, setSelectedTheme] = useState<Theme | null>(null);
+  const isMobile = useIsMobile(1024);
 
   const isInView = useInView(sectionRef, { once: true, margin: '-10% 0px' });
 
@@ -304,90 +280,90 @@ export default function Themes() {
   const blobY2 = useTransform(smoothY, [0, 1], [0, 80]);
 
   return (
-    <>
-      <section
-        ref={sectionRef}
-        id="themes"
-        className="relative bg-[#f3ecd2] py-12 md:py-20 overflow-hidden"
+    <section
+      ref={sectionRef}
+      id="themes"
+      className="relative bg-[#f3ecd2] py-16 md:py-24 overflow-hidden"
+    >
+      {/* Decorative background blobs */}
+      <motion.div
+        style={{ y: blobY1 }}
+        className="absolute -top-32 -right-32 w-[420px] h-[420px] rounded-full opacity-20 pointer-events-none"
+        aria-hidden
       >
-        {/* Decorative background blobs */}
-        <motion.div
-          style={{ y: blobY1 }}
-          className="absolute -top-32 -right-32 w-[420px] h-[420px] rounded-full opacity-20 pointer-events-none"
-          aria-hidden
-        >
-          <div className="w-full h-full sunburst-bg rounded-full blur-2xl scale-75" />
-        </motion.div>
+        <div className="w-full h-full sunburst-bg rounded-full blur-2xl scale-75" />
+      </motion.div>
+
+      <motion.div
+        style={{ y: blobY2 }}
+        className="absolute -bottom-24 -left-24 w-[320px] h-[320px] rounded-full opacity-10 pointer-events-none shadow-[20px_20px_100px_rgba(244,137,163,0.5)]"
+        aria-hidden
+      >
+        <div className="w-full h-full bg-[#f489a3] rounded-full blur-3xl" />
+      </motion.div>
 
+      <div className="relative z-10 max-w-7xl mx-auto px-4 md:px-8">
+        {/* Section heading — more prominent */}
         <motion.div
-          style={{ y: blobY2 }}
-          className="absolute -bottom-24 -left-24 w-[320px] h-[320px] rounded-full opacity-10 pointer-events-none shadow-[20px_20px_100px_rgba(244,137,163,0.5)]"
-          aria-hidden
+          ref={headingRef}
+          className="text-center mb-14 md:mb-20"
         >
-          <div className="w-full h-full bg-[#f489a3] rounded-full blur-3xl" />
-        </motion.div>
-
-        <div className="relative z-10 max-w-6xl mx-auto px-4 md:px-8">
-          {/* Section heading */}
+          {/* Decorative top line */}
           <motion.div
-            ref={headingRef}
-            className="text-center mb-12 md:mb-16"
-          >
-            <motion.div
-              initial={{ opacity: 0, scale: 0.5 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              transition={{ type: "spring", stiffness: 200, delay: 0.1 }}
-              className="inline-block mb-4"
-            >
-              <div className="h-[2px] w-20 bg-[#f489a3] mx-auto" />
-            </motion.div>
-
-            <motion.h2
-              initial={{ opacity: 0, y: 40, letterSpacing: "0.4em" }}
-              whileInView={{ opacity: 1, y: 0, letterSpacing: "0em" }}
-              transition={{ duration: 1, ease: "easeOut" }}
-              className="font-display text-[#1a1a1a] tracking-tight uppercase"
-              style={{ fontSize: 'clamp(2.5rem, 6vw, 5.5rem)', lineHeight: 1 }}
-            >
-              <span
-                className="rainbow-text"
-                style={{ WebkitTextStroke: '0px' }}
-              >
-                Themes
-              </span>
-            </motion.h2>
-          </motion.div>
+            initial={{ opacity: 0, scaleX: 0 }}
+            whileInView={{ opacity: 1, scaleX: 1 }}
+            transition={{ type: "spring", stiffness: 200, delay: 0.1 }}
+            className="mx-auto mb-5 h-[3px] w-24 md:w-32 bg-[#1a1a1a]"
+          />
 
-          {/* Theme cards grid */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-x-12 md:gap-y-16 px-6 sm:px-4 md:px-0"
+          <motion.h2
+            initial={{ opacity: 0, y: 40, letterSpacing: "0.4em" }}
+            whileInView={{ opacity: 1, y: 0, letterSpacing: "0.05em" }}
+            transition={{ duration: 1, ease: "easeOut" }}
+            className="font-display text-[#1a1a1a] uppercase mb-3"
+            style={{
+              fontSize: 'clamp(3rem, 8vw, 6.5rem)',
+              lineHeight: 1,
+              textShadow: '4px 4px 0px rgba(249, 112, 40, 0.25)',
+            }}
           >
-            {themes.map((theme) => (
-              <ThemeCard
-                key={theme.id}
-                theme={theme}
-                onClick={() => setSelectedTheme(theme)}
-              />
-            ))}
-          </motion.div>
+            Themes
+          </motion.h2>
 
-          {/* Bottom CTA */}
-
-        </div>
-      </section>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="text-[#3a3a3a] font-sans text-base md:text-lg font-medium tracking-wide max-w-xl mx-auto"
+          >
+            Choose your domain. Build your vision.
+          </motion.p>
 
-      {/* Modal Overlay */}
-      <AnimatePresence>
-        {selectedTheme && (
-          <ThemeModal
-            theme={selectedTheme}
-            onClose={() => setSelectedTheme(null)}
+          {/* Decorative bottom line */}
+          <motion.div
+            initial={{ opacity: 0, scaleX: 0 }}
+            whileInView={{ opacity: 1, scaleX: 1 }}
+            transition={{ type: "spring", stiffness: 200, delay: 0.4 }}
+            className="mx-auto mt-5 h-[3px] w-24 md:w-32 bg-[#1a1a1a]"
           />
-        )}
-      </AnimatePresence>
-    </>
+        </motion.div>
+
+        {/* Theme cards grid */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 px-2 sm:px-0"
+        >
+          {themes.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              isMobile={isMobile}
+            />
+          ))}
+        </motion.div>
+      </div>
+    </section>
   );
 }
diff --git a/src/index.css b/src/index.css
index 8e5b979..8f5ff4f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Outfit:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Outfit:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');
 
 @font-face {
   font-family: 'Wonderful Snowflake';
@@ -28,6 +28,7 @@
 
   --font-display: "Wonderful Snowflake", "Shrikhand", serif;
   --font-sans: "Outfit", sans-serif;
+  --font-groovy: "Fredoka", "Outfit", sans-serif;
 }
 
 @layer base {
@@ -126,6 +127,14 @@
   .glow-effect {
     filter: drop-shadow(0 0 10px rgba(243, 162, 15, 0.6));
   }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 @keyframes marquee {
@@ -215,8 +224,27 @@
 
 .hero-images-overlay {
   background:
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15) 32%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.45)),
-    radial-gradient(circle at center, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45));
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.3));
+}
+
+@keyframes scroll-y {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-50%); }
+}
+
+@keyframes scroll-y-reverse {
+  0% { transform: translateY(-50%); }
+  100% { transform: translateY(0); }
+}
+
+.animate-scroll-y {
+  animation: scroll-y 40s linear infinite;
+  will-change: transform;
+}
+
+.animate-scroll-y-reverse {
+  animation: scroll-y-reverse 40s linear infinite;
+  will-change: transform;
 }
 
 .hero-title-layer {
@@ -252,7 +280,7 @@
     0 0 0 2px rgba(243, 236, 210, 0.3),
     0 4px 0 #1a1a1a,
     0 0 15px rgba(249, 112, 40, 0.2);
-  transform: rotate(-1deg);
+  transform: rotate(0deg);
   animation: datePulse 2.5s ease-in-out infinite;
 }
 
@@ -339,12 +367,12 @@
 
   0%,
   100% {
-    transform: rotate(-1deg) scale(1);
+    transform: rotate(0deg) scale(1);
     opacity: 1;
   }
 
   50% {
-    transform: rotate(-1deg) scale(1.05);
+    transform: rotate(0deg) scale(1.05);
     opacity: 0.9;
   }
 }
@@ -428,4 +456,28 @@
   100% {
     background-size: 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%, 1ch 100%
   }
+}
+
+@keyframes spinY {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+.animate-spin-y {
+  animation: spinY 3s linear infinite;
+}
+
+.coin {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid #1a1a1a;
+  background: linear-gradient(135deg, #f3a20f, #f97028);
+  box-shadow: inset -2px -2px 0px rgba(0,0,0,0.2), 2px 2px 0px #1a1a1a;
+  display: inline-block;
+  margin: 0 8px;
 }
\ No newline at end of file
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
index 7de0348..b734057 100644
--- a/src/sections/Hero.tsx
+++ b/src/sections/Hero.tsx
@@ -1,70 +1,54 @@
-import { useEffect, useRef } from "react";
-
+import { useEffect, useRef, useState } from "react";
 
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 
-const images: string[] = [
-  "/assets/hero1.jpg",
-  "/assets/hero2.jpg",
-  "/assets/hero3.jpg",
-  "/assets/hero4.jpg",
-  "/assets/hero5.jpg",
-  "/assets/hero6.jpg",
-];
-
-type RowProps = {
-  reverse?: boolean;
-  speed?: string;
-  imageClassName?: string;
-};
+import photos from "./photos";
+import BlurText from "../components/BlurText";
 
-const speedClassMap: Record<string, string> = {
-  "18s": "hero-scroll-speed-18",
-  "20s": "hero-scroll-speed-20",
-  "24s": "hero-scroll-speed-24",
-  "25s": "hero-scroll-speed-25",
-};
+const offsetCount = Math.floor(photos.length / 4);
+const col1Photos = photos;
+const col2Photos = [...photos.slice(offsetCount), ...photos.slice(0, offsetCount)];
+const col3Photos = [...photos.slice(offsetCount * 2), ...photos.slice(0, offsetCount * 2)];
+const col4Photos = [...photos.slice(offsetCount * 3), ...photos.slice(0, offsetCount * 3)];
 
-const Row = ({ reverse = false, speed = "25s" }: RowProps) => {
-  const speedClass = speedClassMap[speed] ?? "hero-scroll-speed-25";
+const Column = ({ reverse = false, speed = 40, offset = false, className = "", photoSubset }: { reverse?: boolean; speed?: number; offset?: boolean; className?: string; photoSubset: typeof photos }) => {
+  const colPhotos = [...photoSubset, ...photoSubset];
 
   return (
-    <div className="overflow-hidden w-full">
+    <div className={`h-full overflow-hidden w-full relative ${className}`}>
       <div
-        className={`flex gap-1 sm:gap-3 md:gap-4 w-max ${reverse ? "hero-scroll-row-reverse" : "hero-scroll-row"
-          } ${speedClass}`}
+        className={`flex flex-col gap-5 w-full ${reverse ? 'animate-scroll-y-reverse' : 'animate-scroll-y'}`}
+        style={{ animationDuration: `${speed}s`, paddingTop: offset ? '120px' : '0' }}
       >
-        {[...images, ...images].map((src, i) => {
-          const sizeVariants = [
-            "h-[120px] sm:h-[110px] md:h-[140px] lg:h-[170px]",
-            "h-[140px] sm:h-[130px] md:h-[160px] lg:h-[200px]",
-            "h-[130px] sm:h-[120px] md:h-[150px] lg:h-[180px]",
-          ];
-
-          const randomSize = sizeVariants[i % sizeVariants.length];
-
-          return (
-            <img
-              key={i}
-              src={src}
-              alt=""
-              className={`${randomSize} w-auto object-cover rounded-md sm:rounded-lg shrink-0`}
-            />
-          );
-        })}
+        {[1, 2].map(key => (
+          <div key={key} className="flex flex-col gap-5 w-full px-[10px]">
+            {colPhotos.map((p, i) => (
+              <img
+                key={i}
+                src={p.src}
+                loading="lazy"
+                className="w-full h-auto object-cover rounded-xl transition-opacity duration-300"
+                alt=""
+              />
+            ))}
+          </div>
+        ))}
       </div>
     </div>
   );
 };
+
 export default function DevHackHeroCompact() {
+  const [triggerBlur, setTriggerBlur] = useState(false);
+
   const sectionRef = useRef<HTMLElement | null>(null);
   const baseLayerRef = useRef<HTMLDivElement | null>(null);
   const imagesFrameRef = useRef<HTMLDivElement | null>(null);
   const revealRef = useRef<HTMLDivElement | null>(null);
-  const card1Ref = useRef<HTMLDivElement | null>(null);
-  const card2Ref = useRef<HTMLDivElement | null>(null);
   const videoFrameRef = useRef<HTMLDivElement | null>(null);
+  const dateStickerRef = useRef<HTMLDivElement | null>(null);
+  const memoryTitleRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     gsap.registerPlugin(ScrollTrigger);
@@ -73,15 +57,13 @@ export default function DevHackHeroCompact() {
     const baseLayer = baseLayerRef.current;
     const imagesFrame = imagesFrameRef.current;
     const reveal = revealRef.current;
-    const card1 = card1Ref.current;
-    const card2 = card2Ref.current;
     const videoFrame = videoFrameRef.current;
+    const memoryTitle = memoryTitleRef.current;
 
-    if (!section || !baseLayer || !imagesFrame || !reveal || !card1 || !card2 || !videoFrame) {
+    if (!section || !baseLayer || !imagesFrame || !reveal || !videoFrame || !dateStickerRef.current || !memoryTitle) {
       return;
     }
-
-
+    const sticker = dateStickerRef.current;
 
     const initialize = async () => {
       const context = gsap.context(() => {
@@ -96,19 +78,33 @@ export default function DevHackHeroCompact() {
         gsap.set(videoFrame, {
           opacity: 1,
           scale: 1,
-          top: isMobile ? "12vh" : "0",
-          height: isMobile ? "50vh" : "100vh",
-          width: isMobile ? "90vw" : "100vw",
-          left: isMobile ? "50%" : "0",
-          xPercent: isMobile ? -50 : 0,
+          top: isMobile ? "75px" : "9px",
+          height: isMobile ? "auto" : "100vh",
+          width: "100vw",
+          left: 0,
+          xPercent: 0,
+          borderRadius: 0,
         });
 
         gsap.set(baseLayer, { opacity: 1 });
-        gsap.set(reveal, { 
-          opacity: isMobile ? 1 : 0,
-          top: isMobile ? "100vh" : "0" 
+        gsap.set(reveal, {
+          opacity: 1,
+          top: isMobile ? "calc(75px + 56vw + 60px)" : "100vh"
+        });
+        gsap.set(imagesFrame, {
+          opacity: 0,
+        });
+        gsap.set(memoryTitle, {
+          opacity: 0,
+          y: 40,
+          scale: 0.95,
+        });
+        gsap.set(sticker, {
+          opacity: 1,
+          y: 0,
+          top: isMobile ? "calc(75px + 56vw)" : "auto",
+          bottom: isMobile ? "auto" : "2rem",
         });
-        gsap.set([card1, card2], { opacity: 0, y: 50 });
 
         const timeline = gsap.timeline({
           defaults: { ease: "none" },
@@ -120,13 +116,11 @@ export default function DevHackHeroCompact() {
           },
         });
 
-
-
         timeline
           .to(
             videoFrame,
             {
-              scale: isMobile ? 1.2 : 1.8,
+              scale: isMobile ? 1 : 1.8,
               opacity: isMobile ? 1 : 0,
               duration: 2.0,
             },
@@ -135,10 +129,9 @@ export default function DevHackHeroCompact() {
           .to(
             reveal,
             {
-              top: isMobile ? "65vh" : "0",
-              opacity: 1,
-              duration: isMobile ? 3.0 : 1.5,
-              ease: "power2.out",
+              top: isMobile ? "75px" : "0",
+              duration: isMobile ? 4.0 : 1.5,
+              ease: "power2.inOut",
             },
             0.5
           )
@@ -151,22 +144,30 @@ export default function DevHackHeroCompact() {
             isMobile ? 0.8 : 3.0
           )
           .to(
-            card1,
+            memoryTitle,
             {
               opacity: 1,
               y: 0,
+              scale: 1,
               duration: 1.5,
+              ease: "power2.out",
+              onStart: () => setTriggerBlur(true),
+              onReverseComplete: () => setTriggerBlur(false),
             },
-            isMobile ? 1.2 : 3.2
+            isMobile ? 1.0 : 3.2
           )
           .to(
-            card2,
+            {},
+            { duration: 1 }
+          )
+          .to(
+            sticker,
             {
-              opacity: 1,
-              y: 0,
-              duration: 1.5,
+              opacity: 0,
+              y: 20,
+              duration: 0.5,
             },
-            isMobile ? 1.5 : 3.4
+            0
           );
       }, section);
 
@@ -189,52 +190,57 @@ export default function DevHackHeroCompact() {
   }, []);
 
   return (
-    <section id="hero" ref={sectionRef} className="relative h-[400vh] bg-cream text-white">
+    <section id="hero" ref={sectionRef} className="relative h-[200vh] md:h-[700vh] bg-cream text-white">
       <div className="sticky top-0 h-screen overflow-hidden">
         <div ref={baseLayerRef} className="absolute inset-0 bg-cream" />
 
-        <div ref={videoFrameRef} className="absolute inset-0 z-0 overflow-hidden">
+        <div ref={videoFrameRef} className="absolute inset-x-0 z-0 overflow-hidden">
           <video
             autoPlay
             loop
             muted
             playsInline
-            className="w-full h-full object-cover"
+            className="w-full h-auto md:h-full md:object-cover"
           >
             <source src="/assets/devhack3.mp4" type="video/mp4" />
           </video>
         </div>
 
-        <div ref={imagesFrameRef} className="hero-images-frame absolute inset-0 pointer-events-none opacity-0 z-5">
-          <div className="h-full grid grid-rows-3 md:grid-rows-3 gap-1 sm:gap-3 md:gap-4 p-1 sm:p-3 md:p-4 opacity-100">
-            <Row speed="18s" />
-            <Row reverse speed="24s" />
-            <Row speed="20s" />
-            <div className="block sm:hidden">
-              <Row reverse speed="22s" />
+        <div ref={revealRef} className="absolute inset-x-0 min-h-screen z-10 pointer-events-none">
+
+          {/* Vertical Scrolling Gallery Background */}
+          <div ref={imagesFrameRef} className="absolute inset-0 pointer-events-none opacity-0 z-0 overflow-hidden bg-[#0a0a0a]">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full h-full bg-[#0a0a0a]">
+              <Column speed={120} photoSubset={col1Photos} />
+              <Column reverse speed={140} offset photoSubset={col2Photos} />
+              <Column speed={130} className="hidden md:block" photoSubset={col3Photos} />
+              <Column reverse speed={150} offset className="hidden lg:block" photoSubset={col4Photos} />
             </div>
+            <div className="hero-images-overlay absolute inset-0" />
           </div>
-          <div className="hero-images-overlay absolute inset-0" />
-        </div>
-
 
-        <div ref={revealRef} className="absolute inset-x-0 h-screen z-10 flex flex-col md:flex-row items-center justify-center gap-14 md:gap-6 px-6 pointer-events-none">
-          <div ref={card1Ref} className="w-full max-w-90 bg-white/70 backdrop-blur-xl p-6 sm:p-8 rounded-[28px] border border-orange/10 shadow-2xl relative">
-            <div className="text-orange font-bold text-4xl mb-4 opacity-30">01</div>
-            <h2 className="text-[#2a1f14] font-display text-2xl mb-4">What is DevHack?</h2>
-            <p className="text-[#5a4a3a] text-sm leading-relaxed">
-              DSU DEVHACK 2026 is a national-level hackathon pushing the boundaries of innovation in AI, ML, IoT, Blockchain, Cybersecurity, and Cloud
-            </p>
-          </div>
-          <div ref={card2Ref} className="w-full max-w-90 bg-white/70 backdrop-blur-xl p-6 sm:p-8 rounded-[28px] border border-pink/10 shadow-2xl relative">
-            <div className="text-pink font-bold text-4xl mb-4 opacity-30">02</div>
-            <h2 className="text-[#2a1f14] font-display text-2xl mb-4">Why Participate?</h2>
-            <p className="text-[#5a4a3a] text-sm leading-relaxed">
-              Connect with creative minds, build cutting-edge solutions, win exciting prizes, and showcase your skills while transforming ideas into impactful innovations.
-            </p>
+          {/* Memories Title Overlay — positioned near top */}
+          <div ref={memoryTitleRef} className="relative z-10 text-center pointer-events-none px-4 pt-40 md:pt-36">
+            <BlurText
+              text="Memories"
+              delay={150}
+              animateBy="letters"
+              direction="top"
+              className="text-white font-display text-6xl md:text-7xl leading-tight drop-shadow-[0_4px_20px_rgba(0,0,0,0.6)] justify-center"
+              animateTrigger={triggerBlur}
+            />
           </div>
         </div>
 
+        {/* Date Sticker */}
+        <div
+          ref={dateStickerRef}
+          className="absolute inset-x-0 bottom-10 flex justify-center z-20 pointer-events-none"
+        >
+          <div className="hero-date-badge text-center whitespace-nowrap">
+            SEPTEMBER 18TH &amp; 19TH, 2026
+          </div>
+        </div>
 
       </div>
     </section>
diff --git a/src/sections/Team.tsx b/src/sections/Team.tsx
index a18c19b..00fe83b 100644
--- a/src/sections/Team.tsx
+++ b/src/sections/Team.tsx
@@ -1,348 +1,450 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import TeamCarousel from '../components/TeamCarousel';
 
+// --- Types ---
 interface TeamMember {
   id: string;
   name: string;
   role: string;
   bio?: string;
   image: string;
+  twitter?: string;
   linkedin?: string;
 }
 
-// ── Main tabs ──
-const mainTabs = ['Organizing Team', 'Patrons', 'Faculty', 'Judges'] as const;
-type MainTab = (typeof mainTabs)[number];
-
-// ── Sub-tabs (under "Meet the Entire Team") ──
-const subTabs = ['Web Team', 'Design Team', 'Marketing Team', 'Sponsorship Team'] as const;
-type SubTab = (typeof subTabs)[number];
-
-// ── Data ──
-const organizingTeam: TeamMember[] = [
-  {
-    id: 'org-1',
-    name: 'Dr. Bipin Kumar Rai',
-    role: 'Faculty Coordinator',
-    bio: 'Professor, CSE',
-    image:
-      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'org-2',
-    name: 'Utkarsh Priye Jha',
-    role: 'Student Coordinator',
-    image:
-      'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'org-3',
-    name: 'Ritvik Vasundh',
-    role: 'Student Coordinator',
-    image:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80',
-  },
+// --- Data ---
+
+const chiefPatrons: TeamMember[] = [
+  { id: 'cp1', name: 'Dr. D. Hemachandra Sagar', role: 'Chancellor, DSU', image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=400&q=80' },
+  { id: 'cp2', name: 'Dr. D. Premachandra Sagar', role: 'Pro Chancellor, DSU', image: 'https://images.unsplash.com/photo-1557862921-37829c790f19?auto=format&fit=crop&w=400&q=80' },
 ];
 
 const patrons: TeamMember[] = [
-  {
-    id: 'pat-1',
-    name: 'Prof. Ramesh Gupta',
-    role: 'Patron',
-    bio: 'Director',
-    image:
-      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'pat-2',
-    name: 'Dr. Meena Sharma',
-    role: 'Co-Patron',
-    bio: 'Dean, Engineering',
-    image:
-      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80',
-  },
+  { id: 'p1', name: 'Dr. B. S. Satyanarayana', role: 'Vice Chancellor, DSU', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' },
+  { id: 'p2', name: 'Prof. R Janardhan', role: 'Pro Vice Chancellor, DSU', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'p3', name: 'Dr. Prakash S', role: 'Pro Vice Chancellor, DSU', image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'p4', name: 'Dr. C.Puttamadapappa', role: 'Registrar, DSU', image: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fac1', name: 'Dr.Udaya Kumar Reddy K.R', role: 'Professor & Dean-SoE', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fac2', name: 'Dr. Girisha G S', role: 'Chairperson, CSE', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' }
 ];
 
-const faculty: TeamMember[] = [
-  {
-    id: 'fac-1',
-    name: 'Dr. Anjali Verma',
-    role: 'Faculty Advisor',
-    bio: 'HoD, CSE',
-    image:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'fac-2',
-    name: 'Dr. Vikram Patel',
-    role: 'Faculty Advisor',
-    bio: 'Associate Professor',
-    image:
-      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
-  },
+const judges: TeamMember[] = [
+  { id: 'j1', name: 'Arjun Mehta', role: 'CTO, TechCorp', image: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80' },
+  { id: 'j2', name: 'Sneha Iyer', role: 'VP Engineering, InnoSoft', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
 ];
 
-const judges: TeamMember[] = [
-  {
-    id: 'jud-1',
-    name: 'Arjun Mehta',
-    role: 'Industry Expert',
-    bio: 'CTO, TechCorp',
-    image:
-      'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-  },
-  {
-    id: 'jud-2',
-    name: 'Sneha Iyer',
-    role: 'Industry Expert',
-    bio: 'VP Engineering, InnoSoft',
-    image:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-  },
+const coreTeam: TeamMember[] = [
+  { id: '0', name: 'Dr. Bipin Kumar Rai', role: 'Faculty Coordinator', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' },
+  { id: '1', name: 'Trisha', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' },
+  { id: '2', name: 'S Shreenidhi', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' },
 ];
 
-const subTeams: Record<SubTab, TeamMember[]> = {
-  'Web Team': [
-    {
-      id: 'web-1',
-      name: 'Sachin Baluragi',
-      role: 'Web Team Co-Head',
-      image:
-        'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'web-2',
-      name: 'S Shreenidhi',
-      role: 'Web Dev',
-      image:
-        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'web-3',
-      name: 'G Nithesh',
-      role: 'Web Dev',
-      image:
-        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'web-4',
-      name: 'Manavi P',
-      role: 'Web Dev',
-      image:
-        'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-  'Design Team': [
-    {
-      id: 'des-1',
-      name: 'Priya Nair',
-      role: 'Design Lead',
-      image:
-        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'des-2',
-      name: 'Raj Kulkarni',
-      role: 'UI Designer',
-      image:
-        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-  'Marketing Team': [
-    {
-      id: 'mkt-1',
-      name: 'Ananya Das',
-      role: 'Marketing Lead',
-      image:
-        'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'mkt-2',
-      name: 'Karthik Rao',
-      role: 'Content Writer',
-      image:
-        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-  'Sponsorship Team': [
-    {
-      id: 'spo-1',
-      name: 'Divya Hegde',
-      role: 'Sponsorship Lead',
-      image:
-        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
-    },
-    {
-      id: 'spo-2',
-      name: 'Nihal Khan',
-      role: 'Sponsorship Associate',
-      image:
-        'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80',
-    },
-  ],
-};
-
-// ── Helpers ──
-function getMembersForMainTab(tab: MainTab): TeamMember[] {
-  switch (tab) {
-    case 'Organizing Team':
-      return organizingTeam;
-    case 'Patrons':
-      return patrons;
-    case 'Faculty':
-      return faculty;
-    case 'Judges':
-      return judges;
-  }
+const subHeads: TeamMember[] = [
+  { id: '3', name: 'Manavi P', role: 'Web Team Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Manavi' },
+  { id: '4', name: 'Raksha', role: 'Design Team Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Raksha' },
+  { id: '5', name: 'Aastha', role: 'Sponsorship Team Co Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Aastha' },
+  { id: '6', name: 'Nishchal Gowda R', role: 'Marketing and Media Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Nishchal' },
+  { id: '7', name: 'G Nithesh', role: 'Web Co Lead & Ops Lead', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Nithesh' },
+];
+
+const theOperators: TeamMember[] = [
+  { id: 'w1', name: 'Omkar G K', role: 'Web Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Omkar' },
+  { id: 'w2', name: 'Supraj U Sivajji', role: 'Web Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Supraj' },
+  { id: 'd1', name: 'Moulika', role: 'Design Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Moulika' },
+  { id: 'd2', name: 'Moulya', role: 'Design Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Moulya' },
+  { id: 'd3', name: 'Hridya', role: 'Design Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Hridya' },
+  { id: 's1', name: 'Naman Sharaff', role: 'Sponsorship Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Naman' },
+  { id: 's2', name: 'Thathagath', role: 'Sponsorship Team', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Thathagath' },
+];
+
+const facultyCoordinator: TeamMember[] = [
+  { id: 'fc1', name: 'Dr. Bipin Kumar Rai', role: 'Faculty Coordinator - Professor, CSE', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' }
+];
+
+const facultyOrganizers: TeamMember[] = [
+  { id: 'fo1', name: 'Dr. Meenakshi Malhotra', role: 'Associate Professor', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo2', name: 'Dr. Sivananda Reddy', role: 'Associate Professor', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo3', name: 'Prof. Bharath M B', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo4', name: 'Prof. Dharmendra D P', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo5', name: 'Dr. Kumar Dilip', role: 'Associate Professor', image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo6', name: 'Prof. Yashaswini H C', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo7', name: 'Dr. Shreekant Salotagi', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo8', name: 'Prof. Smriti Bharti', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo9', name: 'Prof. Shivani', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo10', name: 'Dr Naitik ST', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80' },
+  { id: 'fo11', name: 'Dr. Pannangi Naresh', role: 'Assistant Professor', image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80' },
+];
+
+// --- Sub-components ---
+
+function CoinDivider() {
+  return (
+    <div className="w-full py-8 sm:py-12 md:py-16 flex items-center justify-center opacity-80 overflow-hidden relative">
+      <div className="absolute w-full h-[2px] bg-[#1a1a1a]" />
+      <div className="flex z-10 bg-[#f3ecd2] px-4 sm:px-6">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="coin animate-spin-y mx-1.5 sm:mx-2" style={{ animationDelay: `${i * 0.15}s` }} />
+        ))}
+      </div>
+    </div>
+  );
 }
 
-function getMainTabTitle(tab: MainTab): string {
-  switch (tab) {
-    case 'Organizing Team':
-      return 'Organising Team';
-    case 'Patrons':
-      return 'Patrons';
-    case 'Faculty':
-      return 'Faculty';
-    case 'Judges':
-      return 'Judges';
-  }
+/** Reusable section sub-heading */
+function SectionSubHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <h3 className="text-2xl sm:text-3xl lg:text-5xl font-black uppercase tracking-widest mb-6 sm:mb-8 md:mb-12 text-center w-full">
+      {children}
+    </h3>
+  );
 }
 
-// ── Pill Tab Bar ──
-function TabBar<T extends string>({
-  tabs,
-  active,
-  onChange,
-  accentColor,
-}: {
-  tabs: readonly T[];
-  active: T;
-  onChange: (tab: T) => void;
-  accentColor?: string;
-}) {
-  const accent = accentColor ?? '#f97028';
+function TeamCard({ member, onClickBio }: { member: TeamMember, onClickBio: (m: TeamMember) => void }) {
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
-    <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
-      {tabs.map((tab) => {
-        const isActive = tab === active;
-        return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-50px' }}
+      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+      whileHover={{ y: -8, scale: 1.02 }}
+      className="group relative bg-[#fff9f4] border-[3px] border-[#1a1a1a] shadow-[4px_4px_0px_#1a1a1a] sm:shadow-[6px_6px_0px_#1a1a1a] hover:shadow-[8px_8px_0px_#f97028] transition-all cursor-pointer flex flex-col h-full overflow-hidden w-full shrink-0"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onClickBio(member)}
+    >
+      {/* Corner Rivets */}
+      {[
+        { top: 4, left: 4 } as React.CSSProperties,
+        { top: 4, right: 4 } as React.CSSProperties,
+        { bottom: 4, left: 4 } as React.CSSProperties,
+        { bottom: 4, right: 4 } as React.CSSProperties,
+      ].map((pos, ri) => (
+        <div
+          key={ri}
+          style={{
+            position: 'absolute',
+            width: '4px',
+            height: '4px',
+            backgroundColor: '#1a1a1a',
+            borderRadius: '50%',
+            ...pos,
+          }}
+        />
+      ))}
+
+      {/* Image Box */}
+      <div className="relative w-full aspect-square border-b-2 border-[#1a1a1a] overflow-hidden bg-[#1a1a1a] p-1.5 sm:p-2">
+        {/* Scanline overlay */}
+        <div
+          className="absolute inset-0 pointer-events-none z-10 opacity-10"
+          style={{ backgroundImage: 'linear-gradient(transparent 50%, rgba(0,0,0,0.25) 50%)', backgroundSize: '100% 4px' }}
+        />
+        <img
+          src={member.image}
+          alt={member.name}
+          className="w-full h-full object-cover filter grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-105"
+        />
+      </div>
+
+      {/* Details Box */}
+      <div className="p-3 sm:p-4 md:p-5 flex flex-col flex-1 z-10 bg-[#fff9f4]">
+        <h3
+          className="text-base sm:text-lg md:text-xl font-black tracking-tight uppercase leading-tight transition-colors duration-300 font-sans"
+          style={{ color: isHovered ? '#f97028' : '#1a1a1a' }}
+        >
+          {member.name}
+        </h3>
+        <p className="font-mono text-[11px] sm:text-xs md:text-sm uppercase mt-1.5 sm:mt-2 opacity-70 font-bold leading-snug">{member.role}</p>
+
+        <div className="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t-2 border-[#1a1a1a] border-dashed">
           <button
-            key={tab}
-            onClick={() => onChange(tab)}
-            className="relative px-5 py-2 rounded-full text-sm sm:text-base font-bold uppercase tracking-wider transition-all duration-300 border-2 cursor-pointer"
-            style={{
-              borderColor: isActive ? accent : '#1a1a1a',
-              backgroundColor: isActive ? accent : 'transparent',
-              color: isActive ? '#fff' : '#1a1a1a',
-              boxShadow: isActive ? `0 4px 16px ${accent}40` : 'none',
-            }}
+            onClick={() => onClickBio(member)}
+            className="text-[11px] sm:text-xs md:text-sm font-bold uppercase tracking-widest hover:text-[#f97028] transition-colors flex items-center gap-1.5 sm:gap-2"
           >
-            {tab}
+            <span className="text-[#f97028]">+</span> SHOW BIO
           </button>
-        );
-      })}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+/** Responsive grid wrapper for team cards */
+function TeamGrid({ members, onClickBio }: { members: TeamMember[]; onClickBio: (m: TeamMember) => void }) {
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
+      {members.map((member) => (
+        <TeamCard key={member.id} member={member} onClickBio={onClickBio} />
+      ))}
+    </div>
+  );
+}
+
+/** Small grid for 1-3 items — centers them */
+function TeamGridSmall({ members, onClickBio }: { members: TeamMember[]; onClickBio: (m: TeamMember) => void }) {
+  return (
+    <div className="flex flex-wrap justify-center gap-4 sm:gap-5 md:gap-6 lg:gap-8">
+      {members.map((member) => (
+        <div key={member.id} className="w-[calc(50%-0.5rem)] sm:w-[calc(50%-0.75rem)] md:w-[240px] lg:w-[280px]">
+          <TeamCard member={member} onClickBio={onClickBio} />
+        </div>
+      ))}
     </div>
   );
 }
 
-// ── Main Section ──
 export default function Team() {
-  const [activeMainTab, setActiveMainTab] = useState<MainTab>('Organizing Team');
-  const [activeSubTab, setActiveSubTab] = useState<SubTab>('Web Team');
+  const [selectedBio, setSelectedBio] = useState<TeamMember | null>(null);
+  const [activeTab, setActiveTab] = useState('Organising Team');
+  const [showOperators, setShowOperators] = useState(false);
 
-  const mainMembers = getMembersForMainTab(activeMainTab);
-  const sectionTitle = getMainTabTitle(activeMainTab);
+  const TABS = ['Organising Team', 'The Board', 'Faculty', 'Jury & Experts'];
+
+  if (selectedBio) {
+    if (typeof window !== 'undefined') document.body.style.overflow = 'hidden';
+  } else {
+    if (typeof window !== 'undefined') document.body.style.overflow = 'auto';
+  }
 
   return (
-    <section id="team" className="relative w-full overflow-hidden bg-[#f3ecd2] py-20 md:py-28">
-      {/* ── Main Tab Bar ── */}
-      <div className="relative z-10 mb-10">
-        <TabBar
-          tabs={mainTabs}
-          active={activeMainTab}
-          onChange={(t) => {
-            setActiveMainTab(t);
-            // Reset sub-tab when switching
-            setActiveSubTab('Web Team');
-          }}
-          accentColor="#f97028"
-        />
-      </div>
+    <section id="team" className="relative w-full bg-[#f3ecd2] py-12 sm:py-16 md:py-24 px-5 sm:px-6 md:px-10 text-[#1a1a1a] font-sans selection:bg-[#f97028] selection:text-[#f3ecd2]">
+      <div className="w-full sm:w-[92%] max-w-[1400px] mx-auto border-[3px] sm:border-4 border-[#1a1a1a] bg-[#f3ecd2] p-4 sm:p-6 md:p-10 lg:p-16 shadow-[6px_6px_0px_#1a1a1a] sm:shadow-[10px_10px_0px_#1a1a1a] md:shadow-[16px_16px_0px_#1a1a1a] relative">
 
-      {/* ── Section Title ── */}
-      <h2
-        className="text-center font-display text-4xl sm:text-5xl md:text-6xl mb-12"
-        style={{ color: '#1a1a1a' }}
-      >
-        {sectionTitle}
-      </h2>
-
-      {/* ── Main Tab Carousel ── */}
-      <AnimatePresence mode="wait">
-        <motion.div
-          key={activeMainTab}
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          transition={{ duration: 0.4 }}
-          className="flex justify-center -mt-20 -mb-10"
-        >
-          <TeamCarousel 
-            members={mainMembers} 
-            infoTextColor="#1a1a1a"
-            background="transparent"
-            className="w-full max-w-6xl mx-auto"
-          />
-        </motion.div>
-      </AnimatePresence>
+        {/* Header block conditionally rendered */}
+        <AnimatePresence>
+          {activeTab === 'Organising Team' && (
+            <motion.div
+              initial={{ opacity: 0, height: 0, marginBottom: 0, paddingBottom: 0 }}
+              animate={{ opacity: 1, height: 'auto', marginBottom: 40, paddingBottom: 24 }}
+              exit={{ opacity: 0, height: 0, marginBottom: 0, paddingBottom: 0 }}
+              className="flex flex-col justify-center items-center gap-4 sm:gap-6 md:gap-8 border-b-4 border-[#1a1a1a] relative text-center"
+            >
+              <div className="w-full">
+                <motion.h2
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ type: 'spring', damping: 25, stiffness: 120, delay: 0.15 }}
+                  className="font-display uppercase tracking-wider sm:tracking-widest text-[#1a1a1a] leading-none mb-3 sm:mb-6 flex flex-col sm:flex-row justify-center items-center w-full"
+                  style={{ fontSize: 'clamp(2rem, 7vw, 6rem)' }}
+                >
+                  <span className="sm:mr-4 lg:mr-6">Meet The</span>
+                  <span className="text-[#f97028]">Team</span>
+                </motion.h2>
+                <motion.p
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 0.3 }}
+                  className="text-base sm:text-lg md:text-2xl lg:text-3xl font-medium tracking-tight mt-2 sm:mt-4 md:mt-6 leading-relaxed max-w-3xl mx-auto px-2"
+                >
+                  We back the dreamers, the builders, and the rebels. The architectural minds behind DevHack 3.0.
+                </motion.p>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
 
-      {/* ── "Meet the Entire Team" — only under Organizing Team ── */}
-      {activeMainTab === 'Organizing Team' && (
-        <motion.div
-          className="mt-20"
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
-        >
-          <h2
-            className="text-center font-display text-3xl sm:text-4xl md:text-5xl mb-10"
-            style={{ color: '#1a1a1a' }}
-          >
-            Meet the Entire Team
-          </h2>
-
-          {/* Sub-tab bar */}
-          <div className="relative z-10 mb-10">
-            <TabBar
-              tabs={subTabs}
-              active={activeSubTab}
-              onChange={setActiveSubTab}
-              accentColor="#5b2d8e"
-            />
+        {/* Tab Navigation — scrollable on mobile */}
+        <div className="mb-6 sm:mb-8 md:mb-12 border-b-[3px] sm:border-b-4 border-[#1a1a1a] pb-4 sm:pb-6 md:pb-8">
+          <div className="flex overflow-x-auto gap-2 sm:gap-3 md:gap-4 justify-start sm:justify-center no-scrollbar -mx-1 px-1">
+            {TABS.map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                className={`px-4 sm:px-6 md:px-8 py-2.5 sm:py-3 md:py-4 font-bold font-mono uppercase tracking-wider sm:tracking-widest border-[2px] sm:border-[3px] border-[#1a1a1a] transition-all text-xs sm:text-sm md:text-base whitespace-nowrap shrink-0 ${activeTab === tab
+                  ? 'bg-[#1a1a1a] shadow-[4px_4px_0px_#f97028] sm:shadow-[8px_8px_0px_#f97028] translate-x-[-2px] translate-y-[-2px]'
+                  : 'bg-[#fff9f4] text-[#1a1a1a] shadow-[3px_3px_0px_#1a1a1a] sm:shadow-[4px_4px_0px_#1a1a1a] hover:bg-[#f97028] hover:text-[#1a1a1a]'
+                  }`}
+                style={activeTab === tab ? { color: '#f3ecd2' } : undefined}
+              >
+                {tab}
+              </button>
+            ))}
           </div>
+        </div>
+
+        {/* Tab Content */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeTab}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.3 }}
+            className="min-h-[30vh] sm:min-h-[40vh]"
+          >
+            {activeTab === 'Organising Team' && (
+              <div className="flex flex-col">
+                <div className="mb-4">
+                  <SectionSubHeading>Core Team</SectionSubHeading>
+                  <TeamGridSmall members={coreTeam} onClickBio={setSelectedBio} />
+                </div>
+
+                <CoinDivider />
+
+                <div className="mb-4">
+                  <SectionSubHeading>Sub Heads</SectionSubHeading>
+                  <TeamGrid members={subHeads} onClickBio={setSelectedBio} />
 
-          {/* Sub-tab Carousel */}
-          <AnimatePresence mode="wait">
+                  {/* Dropdown toggle for Operating Partners */}
+                  <div className="mt-8 sm:mt-10">
+                    <button
+                      onClick={() => setShowOperators((v) => !v)}
+                      className="mx-auto flex items-center gap-2 sm:gap-3 px-6 sm:px-8 py-3 sm:py-4 border-[2px] sm:border-[3px] border-[#1a1a1a] bg-[#fff9f4] font-bold font-mono uppercase tracking-wider sm:tracking-widest text-xs sm:text-sm md:text-base shadow-[4px_4px_0px_#1a1a1a] hover:bg-[#f97028] hover:text-[#1a1a1a] transition-all active:translate-y-[2px] active:shadow-[2px_2px_0px_#1a1a1a]"
+                    >
+                      <span>Team Members</span>
+                      <motion.svg
+                        animate={{ rotate: showOperators ? 180 : 0 }}
+                        transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <polyline points="6 9 12 15 18 9" />
+                      </motion.svg>
+                    </button>
+
+                    <AnimatePresence initial={false}>
+                      {showOperators && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: 'auto', opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{
+                            height: { type: 'spring', stiffness: 250, damping: 30 },
+                            opacity: { duration: 0.25, delay: 0.05 },
+                          }}
+                          className="overflow-hidden"
+                        >
+                          <div className="pt-8 sm:pt-10">
+                            <h4 className="text-xl sm:text-2xl lg:text-3xl font-black uppercase tracking-widest mb-6 sm:mb-8 text-center w-full opacity-70">
+                              Operating Partners
+                            </h4>
+                            <TeamGrid members={theOperators} onClickBio={setSelectedBio} />
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'The Board' && (
+              <div className="flex flex-col">
+                <div className="mb-4">
+                  <SectionSubHeading>Chief Patrons</SectionSubHeading>
+                  <TeamGridSmall members={chiefPatrons} onClickBio={setSelectedBio} />
+                </div>
+
+                <CoinDivider />
+
+                <div className="mb-4">
+                  <SectionSubHeading>Patrons</SectionSubHeading>
+                  <TeamGrid members={patrons} onClickBio={setSelectedBio} />
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'Faculty' && (
+              <div className="flex flex-col">
+                <div className="mb-4">
+                  <SectionSubHeading>Faculty Coordinator</SectionSubHeading>
+                  <TeamGridSmall members={facultyCoordinator} onClickBio={setSelectedBio} />
+                </div>
+
+                <CoinDivider />
+
+                <div className="mb-4">
+                  <SectionSubHeading>Organising Team Members</SectionSubHeading>
+                  <TeamGrid members={facultyOrganizers} onClickBio={setSelectedBio} />
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'Jury & Experts' && (
+              <div className="mb-4">
+                <SectionSubHeading>Jury & Experts</SectionSubHeading>
+                <TeamGridSmall members={judges} onClickBio={setSelectedBio} />
+              </div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Decorative Divider */}
+        <div className="mt-8 sm:mt-12 md:mt-16">
+          <CoinDivider />
+        </div>
+
+      </div>
+
+      {/* Bio Modal Pop-in */}
+      <AnimatePresence>
+        {selectedBio && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(26,26,26,0.8)] backdrop-blur-sm p-3 sm:p-4"
+            onClick={() => setSelectedBio(null)}
+          >
             <motion.div
-              key={activeSubTab}
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-              transition={{ duration: 0.4 }}
-              className="flex justify-center -mt-20"
+              layoutId={`modal-${selectedBio.id}`}
+              initial={{ scale: 0.9, y: 20 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 20 }}
+              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+              className="bg-[#f3ecd2] border-[3px] border-[#1a1a1a] shadow-[8px_8px_0px_#1a1a1a] sm:shadow-[16px_16px_0px_#1a1a1a] w-full max-w-lg p-5 sm:p-6 md:p-8 relative overflow-hidden"
+              onClick={(e) => e.stopPropagation()}
             >
-              <TeamCarousel 
-                members={subTeams[activeSubTab]} 
-                infoTextColor="#1a1a1a"
-                background="transparent"
-                className="w-full max-w-6xl mx-auto"
-              />
+              <button
+                className="absolute top-3 right-3 sm:top-4 sm:right-4 w-8 h-8 sm:w-10 sm:h-10 border-2 border-[#1a1a1a] flex items-center justify-center font-bold font-mono hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors text-sm sm:text-base"
+                onClick={() => setSelectedBio(null)}
+              >
+                X
+              </button>
+
+              <h2 className="text-2xl sm:text-3xl md:text-4xl font-display uppercase tracking-wider sm:tracking-widest text-[#f97028] mt-2 sm:mt-4 mb-1.5 sm:mb-2 pr-10 sm:pr-12 leading-tight">
+                {selectedBio.name}
+              </h2>
+              <p className="font-mono text-sm sm:text-base md:text-lg font-bold mb-4 sm:mb-6 opacity-70 uppercase">
+                {selectedBio.role}
+              </p>
+
+              <div className="w-full h-[2px] bg-[#1a1a1a] mb-4 sm:mb-6 opacity-20" />
+
+              <p className="text-sm sm:text-base md:text-lg leading-relaxed mb-6 sm:mb-8 md:mb-10 font-medium">
+                {selectedBio.bio || "No bio available right now. Currently busy building the future."}
+              </p>
+
+              <div className="flex gap-3 sm:gap-4">
+                <a
+                  href={selectedBio.twitter || '#'}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 py-2.5 sm:py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-wider sm:tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors text-xs sm:text-sm md:text-base"
+                >
+                  Twitter/X
+                </a>
+                <a
+                  href={selectedBio.linkedin || '#'}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex-1 py-2.5 sm:py-3 border-2 border-[#1a1a1a] text-center font-bold uppercase tracking-wider sm:tracking-widest hover:bg-[#1a1a1a] hover:text-[#f3ecd2] transition-colors text-xs sm:text-sm md:text-base"
+                >
+                  LinkedIn
+                </a>
+              </div>
             </motion.div>
-          </AnimatePresence>
-        </motion.div>
-      )}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </section>
   );
 }
diff --git a/src/sections/Timeline.tsx b/src/sections/Timeline.tsx
index 3ce9bf9..eba3db1 100644
--- a/src/sections/Timeline.tsx
+++ b/src/sections/Timeline.tsx
@@ -101,6 +101,42 @@ function TrainSVG({ color }: { color: string }) {
   );
 }
 
+/* ─────────────────────────────────────
+   SVG SUBMARINE ICON (FOR MOBILE)
+   ───────────────────────────────────── */
+function SubmarineSVG({ color }: { color: string }) {
+  return (
+    <svg
+      width="64"
+      height="38"
+      viewBox="0 0 64 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* Submarine Body (Oval/Capsule) */}
+      <rect x="8" y="10" width="48" height="22" rx="11" fill="#1a1a1a" />
+      
+      {/* Conning Tower */}
+      <rect x="26" y="5" width="12" height="7" rx="2" fill="#1a1a1a" />
+      {/* Periscope */}
+      <path d="M30 5 L30 2 L33 2" stroke="#1a1a1a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+
+      {/* Portholes */}
+      <circle cx="24" cy="21" r="3" fill="#f3ecd2" />
+      <circle cx="32" cy="21" r="3" fill="#f3ecd2" />
+      <circle cx="40" cy="21" r="3" fill="#f3ecd2" />
+
+      {/* Accent Stripe */}
+      <rect x="15" y="26" width="34" height="3" rx="1.5" fill={color} />
+
+      {/* Rear Propeller Handle/Base */}
+      <rect x="2" y="18" width="6" height="6" rx="1" fill="#1a1a1a" />
+      {/* Propeller Blades */}
+      <rect x="4" y="14" width="2" height="14" rx="1" fill="#1a1a1a" />
+    </svg>
+  );
+}
+
 /* ─────────────────────────────────────
    TRACK COMPONENT
    ───────────────────────────────────── */
@@ -772,46 +808,48 @@ export default function Timeline() {
                 zIndex: 40,
               }}
             >
-              {/* Smoke puff animation */}
+              {/* Puffs or Bubbles animation */}
               <motion.div
                 className="absolute"
-                style={{ left: 12, top: -22, zIndex: 50 }}
-                animate={{ opacity: [0.7, 0, 0.7], y: [-2, -12, -2], scale: [0.7, 1.3, 0.7] }}
+                style={{ left: isMobile ? 4 : 12, top: isMobile ? 12 : -22, zIndex: 50 }}
+                animate={{ opacity: [0.7, 0, 0.7], y: isMobile ? [0, 0, 0] : [-2, -12, -2], x: isMobile ? [-2, -15, -2] : [0, 0, 0], scale: [0.7, 1.3, 0.7] }}
                 transition={{ duration: 1.4, repeat: Infinity, ease: 'easeInOut' }}
               >
                 <div
                   style={{
-                    width: 14,
-                    height: 14,
+                    width: isMobile ? 8 : 14,
+                    height: isMobile ? 8 : 14,
                     borderRadius: '50%',
-                    background: 'rgba(26,26,26,0.18)',
-                    filter: 'blur(3px)',
+                    background: isMobile ? 'rgba(255,255,255,0.45)' : 'rgba(26,26,26,0.18)',
+                    border: isMobile ? '1px solid rgba(255,255,255,0.2)' : 'none',
+                    filter: isMobile ? 'none' : 'blur(3px)',
                   }}
                 />
               </motion.div>
               <motion.div
                 className="absolute"
-                style={{ left: 6, top: -34, zIndex: 50 }}
-                animate={{ opacity: [0.5, 0, 0.5], y: [-2, -16, -2], scale: [0.5, 1.1, 0.5] }}
+                style={{ left: isMobile ? 0 : 6, top: isMobile ? 18 : -34, zIndex: 50 }}
+                animate={{ opacity: [0.5, 0, 0.5], y: isMobile ? [0, 0, 0] : [-2, -16, -2], x: isMobile ? [-2, -20, -2] : [0, 0, 0], scale: [0.5, 1.1, 0.5] }}
                 transition={{ duration: 1.4, repeat: Infinity, ease: 'easeInOut', delay: 0.3 }}
               >
                 <div
                   style={{
-                    width: 10,
-                    height: 10,
+                    width: isMobile ? 12 : 10,
+                    height: isMobile ? 12 : 10,
                     borderRadius: '50%',
-                    background: 'rgba(26,26,26,0.12)',
-                    filter: 'blur(4px)',
+                    background: isMobile ? 'rgba(255,255,255,0.35)' : 'rgba(26,26,26,0.12)',
+                    border: isMobile ? '1px solid rgba(255,255,255,0.15)' : 'none',
+                    filter: isMobile ? 'none' : 'blur(4px)',
                   }}
                 />
               </motion.div>
 
-              {/* Train body with bounce */}
+              {/* Vehicle body with bounce */}
               <motion.div
                 animate={{ y: [0, -4, 0] }}
                 transition={{ duration: 0.9, repeat: Infinity, ease: 'easeInOut' }}
               >
-                <TrainSVG color={COLORS[activeIdx]} />
+                {isMobile ? <SubmarineSVG color={COLORS[activeIdx]} /> : <TrainSVG color={COLORS[activeIdx]} />}
               </motion.div>
 
               {/* Active station name label on train */}
diff --git a/src/sections/photos.ts b/src/sections/photos.ts
new file mode 100644
index 0000000..b5b60ea
--- /dev/null
+++ b/src/sections/photos.ts
@@ -0,0 +1,27 @@
+export const photos = [
+  { src: "/assets/hero1.webp", width: 800, height: 600 },
+  { src: "/assets/hero2.webp", width: 600, height: 800 },
+  { src: "/assets/hero3.webp", width: 800, height: 600 },
+  { src: "/assets/hero4.webp", width: 600, height: 800 },
+  { src: "/assets/hero5.webp", width: 800, height: 600 },
+  { src: "/assets/hero6.webp", width: 800, height: 600 },
+  { src: "/assets/hero7.webp", width: 800, height: 600 },
+  { src: "/assets/hero8.webp", width: 800, height: 600 },
+  { src: "/assets/hero9.webp", width: 800, height: 600 },
+  { src: "/assets/hero10.webp", width: 800, height: 600 },
+  { src: "/assets/hero11.webp", width: 800, height: 600 },
+  { src: "/assets/hero12.webp", width: 800, height: 600 },
+  { src: "/assets/hero13.webp", width: 800, height: 600 },
+  { src: "/assets/hero14.webp", width: 800, height: 600 },
+  { src: "/assets/hero15.webp", width: 800, height: 600 },
+  { src: "/assets/hero16.webp", width: 800, height: 600 },
+  { src: "/assets/hero17.webp", width: 800, height: 600 },
+  { src: "/assets/hero18.webp", width: 800, height: 600 },
+  { src: "/assets/hero19.webp", width: 800, height: 600 },
+  { src: "/assets/hero20.webp", width: 800, height: 600 },
+  { src: "/assets/hero21.webp", width: 800, height: 600 },
+  { src: "/assets/hero22.webp", width: 800, height: 600 },
+  { src: "/assets/hero23.webp", width: 800, height: 600 },
+];
+
+export default photos;