feat: Add responsive Navbar component with smooth scrolling and enhanced UX

- Implemented a new Navbar component with mobile and desktop views.
- Added smooth scrolling functionality for internal links.
- Enhanced scroll handling with throttling for performance.
- Integrated Framer Motion for animations and transitions.
- Updated global styles for improved theming and scrollbar customization.

refactor: Update _app.js to include Google Fonts and improve layout

- Changed font from Bricolage Grotesque to Inter for better performance.
- Added Head component for preconnecting to Google Fonts and including stylesheet.

feat: Revamp index.js with new layout and sections for features, converters, and social media

- Introduced sections for features, converters, and social media downloading.
- Utilized Framer Motion for animations and scroll effects.
- Added converter tabs and dynamic content rendering based on user selection.

style: Enhance global styles for light and dark themes

- Defined new CSS variables for light and dark themes.
- Improved body styles for better font rendering and line height.
- Added custom scrollbar styles and selection colors.
- Implemented glassmorphism effect for UI elements.

frontend/bun.lock

@@ -4,9 +4,12 @@
     "": {
       "name": "lumakit-frontend",
       "dependencies": {
+        "critters": "^0.0.25",
+        "framer-motion": "^12.12.2",
         "next": "15.1.8",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
       },
       "devDependencies": {
         "postcss": "^8",
@@ -101,7 +104,7 @@
 
     "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
 
-    "ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
 
@@ -113,6 +116,8 @@
 
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
+    "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
+
     "brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
@@ -123,6 +128,8 @@
 
     "caniuse-lite": ["caniuse-lite@1.0.30001718", "", {}, "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw=="],
 
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
     "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
     "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
@@ -137,8 +144,14 @@
 
     "commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
 
+    "critters": ["critters@0.0.25", "", { "dependencies": { "chalk": "^4.1.0", "css-select": "^5.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.2", "htmlparser2": "^8.0.2", "postcss": "^8.4.23", "postcss-media-query-parser": "^0.2.3" } }, "sha512-ROF/tjJyyRdM8/6W0VqoN5Ql05xAGnkf5b7f3sTEl1bI5jTQQf8O918RD/V9tEb9pRY/TKcvJekDbJtniHyPtQ=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "css-select": ["css-select@5.1.0", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg=="],
+
+    "css-what": ["css-what@6.1.0", "", {}, "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
     "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
@@ -147,10 +160,20 @@
 
     "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
 
+    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
+
+    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
+
+    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
+
+    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
+
     "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
 
     "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
 
+    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
 
     "fastq": ["fastq@1.19.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ=="],
@@ -159,6 +182,8 @@
 
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
+    "framer-motion": ["framer-motion@12.12.2", "", { "dependencies": { "motion-dom": "^12.12.1", "motion-utils": "^12.12.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-qCszZCiGWkilL40E3VuhIJJC/CS3SIBl2IHyGK8FU30nOUhTmhBNWPrNFyozAWH/bXxwzi19vJHIGVdALF0LCg=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
@@ -167,8 +192,12 @@
 
     "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
 
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "htmlparser2": ["htmlparser2@8.0.2", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1", "entities": "^4.4.0" } }, "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA=="],
+
     "is-arrayish": ["is-arrayish@0.3.2", "", {}, "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="],
 
     "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
@@ -203,6 +232,10 @@
 
     "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
 
+    "motion-dom": ["motion-dom@12.12.1", "", { "dependencies": { "motion-utils": "^12.12.1" } }, "sha512-GXq/uUbZBEiFFE+K1Z/sxdPdadMdfJ/jmBALDfIuHGi0NmtealLOfH9FqT+6aNPgVx8ilq0DtYmyQlo6Uj9LKQ=="],
+
+    "motion-utils": ["motion-utils@12.12.1", "", {}, "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w=="],
+
     "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
@@ -211,6 +244,8 @@
 
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
 
+    "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
+
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
     "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
@@ -239,6 +274,8 @@
 
     "postcss-load-config": ["postcss-load-config@4.0.2", "", { "dependencies": { "lilconfig": "^3.0.0", "yaml": "^2.3.4" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ=="],
 
+    "postcss-media-query-parser": ["postcss-media-query-parser@0.2.3", "", {}, "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig=="],
+
     "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
 
     "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
@@ -251,6 +288,8 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
+    "react-icons": ["react-icons@5.5.0", "", { "peerDependencies": { "react": "*" } }, "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="],
+
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
@@ -291,6 +330,8 @@
 
     "sucrase": ["sucrase@3.35.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "glob": "^10.3.10", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA=="],
 
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
     "tailwindcss": ["tailwindcss@3.4.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.6", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og=="],
@@ -327,7 +368,7 @@
 
     "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
 
     "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 

frontend/next.config.mjs

@@ -1,6 +1,67 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+
+  // Performance optimizations
+  swcMinify: true,
+  compress: true,
+
+  // Image optimization
+  images: {
+    formats: ['image/webp', 'image/avif'],
+    minimumCacheTTL: 60,
+    dangerouslyAllowSVG: true,
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
+
+  // Experimental features for better performance
+  experimental: {
+    optimizeCss: true,
+    scrollRestoration: true,
+  },
+
+  // Headers for better caching and security
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'origin-when-cross-origin',
+          },
+        ],
+      },
+      {
+        source: '/(.*)\\.(ico|png|jpg|jpeg|gif|webp|svg|mp4|webm)',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
+    ];
+  },
+
+  // Bundle analyzer (optional - uncomment to analyze bundle size)
+  // webpack: (config, { isServer }) => {
+  //   if (!isServer) {
+  //     config.resolve.fallback = {
+  //       ...config.resolve.fallback,
+  //       fs: false,
+  //     };
+  //   }
+  //   return config;
+  // },
 };
 
 export default nextConfig;

frontend/package.json

@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "critters": "^0.0.25",
+    "framer-motion": "^12.12.2",
+    "next": "15.1.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.8"
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "postcss": "^8",

frontend/src/components/Footer.js

@@ -0,0 +1,230 @@
+import { motion } from 'framer-motion';
+import { FiGithub, FiTwitter, FiMail, FiHeart } from 'react-icons/fi';
+import { HiSparkles } from 'react-icons/hi';
+import { useMemo, useCallback } from 'react';
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  // Memoized data for better performance
+  const socialLinks = useMemo(
+    () => [
+      { icon: FiGithub, href: 'https://github.com/YoruAkio', label: 'GitHub' },
+      {
+        icon: FiTwitter,
+        href: 'https://twitter.com/YoruAkio',
+        label: 'Twitter',
+      },
+      { icon: FiMail, href: 'mailto:hello@akio.lol', label: 'Email' },
+    ],
+    [],
+  );
+
+  const quickLinks = useMemo(
+    () => [
+      { label: 'Features', href: '#features' },
+      { label: 'File Converters', href: '#converters' },
+      { label: 'Social Media Downloader', href: '#social-media' },
+      {
+        label: 'Documentation',
+        // href: 'https://huggingface.co/spaces/YoruAkio/LumaKit',
+        href: '#hero',
+      },
+    ],
+    [],
+  );
+
+  // Enhanced smooth scroll with easing function
+  const easeInOutCubic = t => {
+    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+  };
+
+  const smoothScrollTo = useCallback((targetPosition, duration = 1200) => {
+    const startPosition = window.pageYOffset;
+    const distance = targetPosition - startPosition;
+    let startTime = null;
+
+    const animation = currentTime => {
+      if (startTime === null) startTime = currentTime;
+      const timeElapsed = currentTime - startTime;
+      const progress = Math.min(timeElapsed / duration, 1);
+      const ease = easeInOutCubic(progress);
+
+      window.scrollTo(0, startPosition + distance * ease);
+
+      if (timeElapsed < duration) {
+        requestAnimationFrame(animation);
+      }
+    };
+
+    requestAnimationFrame(animation);
+  }, []);
+
+  // Smooth scroll handler with improved offset calculation and animation
+  const handleSmoothScroll = useCallback(
+    href => {
+      if (href.startsWith('#')) {
+        const element = document.querySelector(href);
+        if (element) {
+          const offset = 80; // Account for fixed navbar height
+          const elementPosition = element.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+          smoothScrollTo(offsetPosition, 1200); // 1.2 second duration
+        }
+      }
+    },
+    [smoothScrollTo],
+  );
+
+  return (
+    <footer className="relative bg-[var(--background-secondary)] border-t border-[var(--border)]">
+      {/* Background decorative elements */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-20 -right-20 w-40 h-40 sm:w-60 sm:h-60 lg:w-80 lg:h-80 bg-[var(--accent)]/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-20 -left-20 w-40 h-40 sm:w-60 sm:h-60 lg:w-80 lg:h-80 bg-[var(--accent)]/5 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
+          {/* Brand Section */}
+          <div className="space-y-4">
+            <motion.div
+              className="flex items-center space-x-2"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="relative">
+                <HiSparkles className="text-xl sm:text-2xl text-[var(--accent)]" />
+                <div className="absolute inset-0 bg-[var(--accent)] blur-lg opacity-20"></div>
+              </div>
+              <span className="text-lg sm:text-xl font-bold gradient-text">
+                LumaKit
+              </span>
+            </motion.div>
+            <motion.p
+              className="text-[var(--foreground-secondary)] text-sm leading-relaxed max-w-sm"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+            >
+              A versatile suite of tools for social media downloading, file
+              conversion, and AI-powered code transformation. Streamline your
+              workflow with our modern, intuitive platform.
+            </motion.p>
+          </div>
+
+          {/* Quick Links */}
+          <div className="space-y-4">
+            <motion.h3
+              className="text-[var(--foreground)] font-semibold text-base sm:text-lg"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              Quick Links
+            </motion.h3>
+            <motion.div
+              className="space-y-2"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+            >
+              {quickLinks.map((link, index) => (
+                <motion.button
+                  key={index}
+                  onClick={() =>
+                    link.href.startsWith('#')
+                      ? handleSmoothScroll(link.href)
+                      : window.open(link.href, '_blank')
+                  }
+                  className="block text-[var(--foreground-muted)] hover:text-[var(--accent)] transition-colors duration-300 text-sm text-left"
+                  whileHover={{ x: 4 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {link.label}
+                </motion.button>
+              ))}
+            </motion.div>
+          </div>
+
+          {/* Contact & Social */}
+          <div className="space-y-4">
+            <motion.h3
+              className="text-[var(--foreground)] font-semibold text-base sm:text-lg"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+            >
+              Connect
+            </motion.h3>
+            <motion.div
+              className="flex space-x-4"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+            >
+              {socialLinks.map((social, index) => (
+                <motion.a
+                  key={index}
+                  href={social.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[var(--foreground-muted)] hover:text-[var(--accent)] transition-colors duration-300 p-2 rounded-lg hover:bg-[var(--background-tertiary)]"
+                  whileHover={{ scale: 1.1, y: -2 }}
+                  whileTap={{ scale: 0.95 }}
+                  aria-label={social.label}
+                >
+                  <social.icon size={18} />
+                </motion.a>
+              ))}
+            </motion.div>
+            {/* <motion.p
+              className="text-[var(--foreground-muted)] text-xs leading-relaxed"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-50px' }}
+              transition={{ duration: 0.6, delay: 0.6 }}
+            >
+              Visit our{' '}
+              <a
+                href="https://huggingface.co/spaces/YoruAkio/LumaKit"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[var(--accent)] hover:text-[var(--accent-hover)] transition-colors duration-300 underline decoration-1 underline-offset-2"
+              >
+                Hugging Face Space
+              </a>{' '}
+              to try LumaKit now.
+            </motion.p> */}
+          </div>
+        </div>
+
+        {/* Bottom Section */}
+        <motion.div
+          className="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-[var(--border)] flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-50px' }}
+          transition={{ duration: 0.6, delay: 0.7 }}
+        >
+          <p className="text-[var(--foreground-muted)] text-xs sm:text-sm flex items-center space-x-1">
+            <span>© {currentYear} LumaKit. Made with</span>
+            <FiHeart className="text-red-400 text-xs animate-pulse" />
+            <span>by the community</span>
+          </p>
+          <p className="text-[var(--foreground-muted)] text-xs sm:text-sm">
+            Powered by AI • Built for Creators
+          </p>
+        </motion.div>
+      </div>
+    </footer>
+  );
+}

frontend/src/components/Navbar.js

@@ -0,0 +1,228 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiMenu, FiX, FiExternalLink, FiArrowUpRight } from 'react-icons/fi';
+import { HiSparkles } from 'react-icons/hi';
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  // Memoized menu items for better performance
+  const menuItems = useMemo(
+    () => [
+      { label: 'Features', href: '#features' },
+      { label: 'Converters', href: '#converters' },
+      { label: 'Social Media', href: '#social-media' },
+      { label: 'About', href: '#about' },
+    ],
+    [],
+  );
+
+  // Optimized scroll handler with throttling
+  const handleScroll = useCallback(() => {
+    const scrollTop = window.scrollY;
+    setScrolled(scrollTop > 20);
+  }, []);
+
+  useEffect(() => {
+    let ticking = false;
+
+    const throttledScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          handleScroll();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', throttledScroll, { passive: true });
+    return () => window.removeEventListener('scroll', throttledScroll);
+  }, [handleScroll]);
+
+  // Close mobile menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (isOpen && !event.target.closest('nav')) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [isOpen]);
+
+  // Enhanced smooth scroll with easing function
+  const easeInOutCubic = (t) => {
+    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+  };
+
+  const smoothScrollTo = useCallback((targetPosition, duration = 1200) => {
+    const startPosition = window.pageYOffset;
+    const distance = targetPosition - startPosition;
+    let startTime = null;
+
+    const animation = (currentTime) => {
+      if (startTime === null) startTime = currentTime;
+      const timeElapsed = currentTime - startTime;
+      const progress = Math.min(timeElapsed / duration, 1);
+      const ease = easeInOutCubic(progress);
+      
+      window.scrollTo(0, startPosition + distance * ease);
+      
+      if (timeElapsed < duration) {
+        requestAnimationFrame(animation);
+      }
+    };
+
+    requestAnimationFrame(animation);
+  }, []);
+
+  // Smooth scroll handler with improved offset calculation and animation
+  const handleSmoothScroll = useCallback(
+    href => {
+      if (href.startsWith('#')) {
+        const element = document.querySelector(href);
+        if (element) {
+          const offset = 80; // Account for fixed navbar height
+          const elementPosition = element.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+          smoothScrollTo(offsetPosition, 1200); // 1.2 second duration
+          setIsOpen(false);
+        }
+      }
+    },
+    [smoothScrollTo, setIsOpen],
+  );
+
+  // Enhanced scroll to top with animation
+  const scrollToTop = useCallback(() => {
+    smoothScrollTo(0, 1000); // 1 second duration for scroll to top
+  }, [smoothScrollTo]);
+
+  return (
+    <motion.nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-out ${
+        scrolled
+          ? 'bg-[var(--background-secondary)]/95 backdrop-blur-xl border-b border-[var(--border)] shadow-lg'
+          : 'bg-transparent'
+      }`}
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-14 sm:h-16">
+          {/* Logo */}
+          <motion.div
+            className="flex items-center space-x-2 cursor-pointer group"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            transition={{ duration: 0.2 }}
+            onClick={scrollToTop}
+          >
+            <div className="relative">
+              <HiSparkles className="text-xl sm:text-2xl text-[var(--accent)] group-hover:text-[var(--accent-hover)] transition-colors duration-300" />
+              <div className="absolute inset-0 bg-[var(--accent)] blur-lg opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
+            </div>
+            <span className="text-lg sm:text-xl font-bold gradient-text">
+              LumaKit
+            </span>
+          </motion.div>
+
+          {/* Desktop Menu */}
+          <div className="hidden md:flex items-center space-x-6 lg:space-x-8">
+            {menuItems.map((item, index) => (
+              <motion.button
+                key={index}
+                onClick={() => handleSmoothScroll(item.href)}
+                className="text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors duration-300 text-sm font-medium relative group"
+                whileHover={{ y: -1 }}
+                transition={{ duration: 0.2 }}
+              >
+                {item.label}
+                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[var(--accent)] group-hover:w-full transition-all duration-300"></span>
+              </motion.button>
+            ))}
+            <motion.a
+              onClick={() => handleSmoothScroll("#features")}
+              rel="noopener noreferrer"
+              className="group relative flex items-center space-x-2 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-[var(--background)] px-4 py-2 rounded-xl transition-all duration-300 text-sm font-medium shadow-lg hover:shadow-xl overflow-hidden"
+              whileHover={{ scale: 1.02, y: -1 }}
+              whileTap={{ scale: 0.98 }}
+              transition={{ duration: 0.2 }}
+            >
+              <div className="absolute inset-0 bg-gradient-to-r from-[var(--accent)] to-[var(--accent-hover)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <FiExternalLink className="text-sm relative z-10" />
+              <span className="relative z-10">Try LumaKit</span>
+            </motion.a>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <motion.button
+            className="md:hidden text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors duration-300 p-2 rounded-lg hover:bg-[var(--background-secondary)]"
+            onClick={() => setIsOpen(!isOpen)}
+            whileTap={{ scale: 0.95 }}
+            aria-label="Toggle menu"
+          >
+            <motion.div
+              animate={isOpen ? 'open' : 'closed'}
+              variants={{
+                open: { rotate: 180 },
+                closed: { rotate: 0 },
+              }}
+              transition={{ duration: 0.3 }}
+            >
+              {isOpen ? <FiX size={20} /> : <FiMenu size={20} />}
+            </motion.div>
+          </motion.button>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence mode="wait">
+          {isOpen && (
+            <motion.div
+              className="md:hidden absolute top-full left-0 right-0 bg-[var(--background-secondary)]/98 backdrop-blur-xl border-b border-[var(--border)] shadow-2xl"
+              initial={{ opacity: 0, height: 0, y: -10 }}
+              animate={{ opacity: 1, height: 'auto', y: 0 }}
+              exit={{ opacity: 0, height: 0, y: -10 }}
+              transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+            >
+              <div className="px-4 py-6 space-y-4">
+                {menuItems.map((item, index) => (
+                  <motion.button
+                    key={index}
+                    onClick={() => handleSmoothScroll(item.href)}
+                    className="block w-full text-left text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors duration-300 text-base font-medium py-2 px-3 rounded-lg hover:bg-[var(--background-tertiary)]"
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: index * 0.1, duration: 0.3 }}
+                  >
+                    {item.label}
+                  </motion.button>
+                ))}
+                <motion.a
+                  href="https://huggingface.co/spaces/YoruAkio/LumaKit"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group relative flex items-center space-x-2 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-[var(--background)] px-4 py-3 rounded-xl transition-all duration-300 text-base font-medium w-fit shadow-lg overflow-hidden"
+                  onClick={() => setIsOpen(false)}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.4, duration: 0.3 }}
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-[var(--accent)] to-[var(--accent-hover)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <FiExternalLink className="text-sm relative z-10" />
+                  <span className="relative z-10">Try LumaKit</span>
+                  <FiArrowUpRight className="text-sm group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-200 relative z-10" />
+                </motion.a>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.nav>
+  );
+}

frontend/src/pages/_app.js

@@ -1,15 +1,23 @@
-import '@/styles/globals.css';
-import { Bricolage_Grotesque } from 'next/font/google';
+import { Inter } from 'next/font/google';
+import Head from 'next/head';
+import '../styles/globals.css';
 
-const bricolageGrotesque = Bricolage_Grotesque({
-  variable: '--font-bricolage-grotesque',
+const bricolageGrotesque = Inter({
   subsets: ['latin'],
+  variable: '--font-bricolage',
 });
 
 export default function App({ Component, pageProps }) {
   return (
-    <div className={`${bricolageGrotesque.variable}`}>
-      <Component {...pageProps} />
-    </div>
+    <>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+        <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
+      </Head>
+      <div className={bricolageGrotesque.variable} style={{ fontFamily: 'Bricolage Grotesque, sans-serif' }}>
+        <Component {...pageProps} />
+      </div>
+    </>
   );
-}
+}

frontend/src/pages/index.js

@@ -1,101 +1,639 @@
-import Image from 'next/image';
+import Head from 'next/head';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { useState, useRef, useMemo, useCallback } from 'react';
+import {
+  FiDownload,
+  FiRefreshCw,
+  FiZap,
+  FiStar,
+  FiArrowRight,
+  FiPlay,
+  FiGift,
+  FiExternalLink,
+  FiArrowUpRight,
+} from 'react-icons/fi';
+import {
+  HiSparkles,
+  HiLightningBolt,
+  HiPhotograph,
+  HiVideoCamera,
+  HiCode,
+  HiChip,
+} from 'react-icons/hi';
+import { SiYoutube, SiInstagram } from 'react-icons/si';
+import { FaSquareXTwitter } from 'react-icons/fa6';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
 
 export default function Home() {
+  const [activeConverter, setActiveConverter] = useState('image');
+  const heroRef = useRef(null);
+
+  const { scrollYProgress } = useScroll({
+    target: heroRef,
+    offset: ['start start', 'end start'],
+  });
+
+  const yBg = useTransform(scrollYProgress, [0, 1], ['0%', '30%']);
+  const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0]);
+
+  // Add smooth scroll handler
+  const handleSmoothScroll = useCallback(href => {
+    if (href.startsWith('#')) {
+      const element = document.querySelector(href);
+      if (element) {
+        const offset = 80; // Account for fixed navbar
+        const elementPosition = element.getBoundingClientRect().top;
+        const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth',
+        });
+      }
+    }
+  }, []);
+
+  // Memoized data for better performance
+  const features = useMemo(
+    () => [
+      {
+        icon: FiDownload,
+        title: 'Social Media Downloader',
+        description:
+          'Download content from YouTube, Twitter, and Instagram with ease',
+        iconColor: 'text-white',
+        status: 'Available',
+      },
+      {
+        icon: FiRefreshCw,
+        title: 'File Converter',
+        description: 'Convert images, videos, and files to any format you need',
+        iconColor: 'text-white',
+        status: 'Available',
+      },
+      {
+        icon: HiChip,
+        title: 'AI Code Transformer',
+        description:
+          'Transform code between programming languages using Gemini AI',
+        iconColor: 'text-white',
+        status: 'Coming Soon',
+      },
+    ],
+    [],
+  );
+
+  const converters = useMemo(
+    () => [
+      {
+        id: 'image',
+        icon: HiPhotograph,
+        title: 'Image Converter',
+        description: 'Convert to WebP, JPG, PNG, ICO and more',
+        formats: ['WebP', 'JPG', 'PNG', 'ICO', 'SVG', 'BMP'],
+      },
+      {
+        id: 'video',
+        icon: HiVideoCamera,
+        title: 'Video Converter',
+        description: 'Convert videos to GIF or extract MP3 audio',
+        formats: ['GIF', 'MP3', 'MP4', 'WebM', 'AVI'],
+      },
+      {
+        id: 'code',
+        icon: HiCode,
+        title: 'Code Transformer',
+        description: 'AI-powered language conversion with Gemini',
+        formats: ['Python', 'JavaScript', 'TypeScript', 'Go', 'Rust'],
+      },
+    ],
+    [],
+  );
+
+  const socialPlatforms = useMemo(
+    () => [
+      {
+        name: 'YouTube',
+        icon: SiYoutube,
+        color: 'text-[var(--accent)]',
+        status: 'Available',
+        description: 'Download videos and audio from YouTube',
+      },
+      {
+        name: 'Twitter',
+        icon: FaSquareXTwitter,
+        color: 'text-[var(--accent)]',
+        status: 'Coming Soon',
+        description: 'Save tweets, images, and videos',
+      },
+      {
+        name: 'Instagram',
+        icon: SiInstagram,
+        color: 'text-[var(--accent)]',
+        status: 'Coming Soon',
+        description: 'Download photos, stories, and reels',
+      },
+    ],
+    [],
+  );
+
+  const stats = useMemo(
+    () => [
+      { label: 'Downloads', value: '10K+' },
+      { label: 'Formats', value: '50+' },
+      { label: 'Users', value: '1K+' },
+    ],
+    [],
+  );
+
+  const aboutFeatures = useMemo(
+    () => [
+      'Social media content downloading',
+      'Multi-format file conversion',
+      'AI-powered code transformation',
+      'User-friendly interface',
+      'Fast and reliable processing',
+    ],
+    [],
+  );
+
+  // Animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
+    },
+  };
+
+  const handleConverterChange = useCallback(converterId => {
+    setActiveConverter(converterId);
+  }, []);
+
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-bricolage-grotesque)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
+      <Head>
+        <title>LumaKit - Powerful Media Tools & AI Transformations</title>
+        <meta
+          name="description"
+          content="LumaKit offers powerful tools for social media downloading, file conversion, and AI-powered transformations. Transform your digital workflow with our modern platform."
         />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-bricolage-grotesque)]">
-          <li className="mb-2">
-            Get started by editing{' '}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/pages/index.js
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#D4A574" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Navbar />
+
+      {/* Hero Section */}
+      <section
+        ref={heroRef}
+        id="hero"
+        className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16 sm:pt-0"
+      >
+        {/* Background Elements */}
+        <motion.div
+          className="absolute inset-0 opacity-20 pointer-events-none"
+          style={{ y: yBg, opacity }}
+        >
+          <div className="absolute top-1/4 left-1/4 w-32 h-32 sm:w-48 sm:h-48 lg:w-64 lg:h-64 bg-[var(--accent)]/20 rounded-full blur-3xl"></div>
+          <div className="absolute top-3/4 right-1/4 w-40 h-40 sm:w-60 sm:h-60 lg:w-80 lg:h-80 bg-[var(--accent)]/15 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-1/4 left-1/2 w-48 h-48 sm:w-72 sm:h-72 lg:w-96 lg:h-96 bg-[var(--accent)]/10 rounded-full blur-3xl"></div>
+        </motion.div>
+
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
+            className="space-y-6 sm:space-y-8"
+          >
+            {/* Main Title */}
+            <div className="space-y-4 sm:space-y-6">
+              <motion.div
+                className="flex items-center justify-center space-x-2 mb-4 sm:mb-6"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.8, delay: 0.2 }}
+              >
+                <div className="relative">
+                  <HiSparkles className="text-3xl sm:text-4xl text-[var(--accent)]" />
+                  <div className="absolute inset-0 bg-[var(--accent)] blur-lg opacity-30"></div>
+                </div>
+              </motion.div>
+
+              <motion.h1
+                className="text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.3 }}
+              >
+                <span className="gradient-text">LumaKit</span>
+              </motion.h1>
+
+              <motion.p
+                className="text-lg sm:text-xl lg:text-2xl text-[var(--foreground-secondary)] max-w-4xl mx-auto leading-relaxed px-4"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.4 }}
+              >
+                A versatile suite of tools for{' '}
+                <span className="text-[var(--accent)] font-semibold">
+                  social media downloading
+                </span>
+                ,{' '}
+                <span className="text-[var(--accent)] font-semibold">
+                  file conversion
+                </span>
+                , and{' '}
+                <span className="text-[var(--accent)] font-semibold">
+                  AI-powered transformations
+                </span>
+              </motion.p>
+            </div>
+
+            {/* CTA Button */}
+            <motion.div
+              className="flex items-center justify-center"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+            >
+              <motion.a
+                href="https://huggingface.co/spaces/YoruAkio/LumaKit"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group relative flex items-center space-x-2 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-[var(--background)] px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold text-base sm:text-lg transition-all duration-300 shadow-lg hover:shadow-2xl overflow-hidden"
+                whileHover={{ scale: 1.05, y: -2 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <div className="absolute inset-0 bg-gradient-to-r from-[var(--accent)] to-[var(--accent-hover)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <FiExternalLink className="text-lg sm:text-xl relative z-10" />
+                <span className="relative z-10">Try LumaKit Now</span>
+                <FiArrowUpRight className="text-base sm:text-lg group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-200 relative z-10" />
+              </motion.a>
+            </motion.div>
+
+            {/* Stats */}
+            <motion.div
+              className="grid grid-cols-3 gap-4 sm:gap-8 max-w-md sm:max-w-lg mx-auto mt-12 sm:mt-16"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.8 }}
+            >
+              {stats.map((stat, index) => (
+                <motion.div
+                  key={index}
+                  className="text-center"
+                  whileHover={{ scale: 1.05 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <div className="text-xl sm:text-2xl lg:text-3xl font-bold text-[var(--accent)]">
+                    {stat.value}
+                  </div>
+                  <div className="text-xs sm:text-sm text-[var(--foreground-muted)]">
+                    {stat.label}
+                  </div>
+                </motion.div>
+              ))}
+            </motion.div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section
+        id="features"
+        className="py-16 sm:py-20 lg:py-24 bg-[var(--background-secondary)]"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            className="text-center mb-12 sm:mb-16"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-100px' }}
+            transition={{ duration: 0.8 }}
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
+              <span className="gradient-text">Powerful Features</span>
+            </h2>
+            <p className="text-lg sm:text-xl text-[var(--foreground-secondary)] max-w-3xl mx-auto px-4">
+              Everything you need to download, convert, and transform your
+              digital content
+            </p>
+          </motion.div>
+
+          <motion.div
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-100px' }}
           >
-            Read our docs
-          </a>
+            {features.map((feature, index) => (
+              <motion.div
+                key={index}
+                className="group relative glass rounded-2xl p-6 sm:p-8 hover:bg-[var(--background-tertiary)]/50 transition-all duration-300 will-change-transform flex flex-col h-full min-h-[320px]"
+                variants={itemVariants}
+                whileHover={{ y: -5, scale: 1.02 }}
+                transition={{ duration: 0.3 }}
+              >
+                {/* Icon */}
+                <div className="inline-flex p-3 sm:p-4 rounded-xl bg-[var(--accent)] mb-4 sm:mb-6 shadow-lg w-fit">
+                  <feature.icon className="text-xl sm:text-2xl text-white" />
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 flex flex-col">
+                  <h3 className="text-lg sm:text-xl font-semibold text-[var(--foreground)] mb-3 sm:mb-4">
+                    {feature.title}
+                  </h3>
+                  <p className="text-[var(--foreground-secondary)] mb-6 text-sm sm:text-base leading-relaxed flex-1">
+                    {feature.description}
+                  </p>
+                </div>
+
+                {/* Status and Arrow - Fixed at bottom */}
+                <div className="flex items-center justify-between mt-auto pt-4">
+                  <span
+                    className={`px-3 py-1 rounded-full text-xs font-medium ${
+                      feature.status === 'Available'
+                        ? 'bg-green-500/20 text-green-400 font-semibold border border-green-500/30'
+                        : 'bg-[var(--accent)] text-[var(--accent)]/20 border border-[var(--accent)]'
+                    }`}
+                  >
+                    {feature.status}
+                  </span>
+                  <FiArrowRight className="text-[var(--accent)] group-hover:translate-x-1 transition-transform duration-200" />
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </section>
+
+      {/* Converters Section */}
+      <section id="converters" className="py-16 sm:py-20 lg:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            className="text-center mb-12 sm:mb-16"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-100px' }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
+              <span className="gradient-text">File Converters</span>
+            </h2>
+            <p className="text-lg sm:text-xl text-[var(--foreground-secondary)] max-w-3xl mx-auto px-4">
+              Transform your files between different formats with ease
+            </p>
+          </motion.div>
+
+          {/* Converter Tabs */}
+          <div className="flex justify-center mb-8 sm:mb-12">
+            <div className="flex flex-wrap glass rounded-xl p-1 sm:p-2 gap-1 sm:gap-0">
+              {converters.map(converter => (
+                <button
+                  key={converter.id}
+                  onClick={() => handleConverterChange(converter.id)}
+                  className={`flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-medium transition-all duration-200 text-sm sm:text-base ${
+                    activeConverter === converter.id
+                      ? 'bg-[var(--accent)] text-[var(--background)]'
+                      : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
+                  }`}
+                >
+                  <converter.icon className="text-base sm:text-lg" />
+                  <span className="hidden sm:inline">{converter.title}</span>
+                  <span className="sm:hidden">
+                    {converter.title.split(' ')[0]}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Active Converter Details */}
+          <motion.div
+            key={activeConverter}
+            className="glass rounded-2xl p-6 sm:p-8"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4 }}
+          >
+            {converters.map(converter => {
+              if (converter.id !== activeConverter) return null;
+              return (
+                <div key={converter.id} className="text-center">
+                  <converter.icon className="text-4xl sm:text-5xl text-[var(--accent)] mx-auto mb-4 sm:mb-6" />
+                  <h3 className="text-xl sm:text-2xl font-bold text-[var(--foreground)] mb-3 sm:mb-4">
+                    {converter.title}
+                  </h3>
+                  <p className="text-[var(--foreground-secondary)] mb-6 sm:mb-8 text-base sm:text-lg max-w-2xl mx-auto">
+                    {converter.description}
+                  </p>
+                  <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
+                    {converter.formats.map((format, index) => (
+                      <span
+                        key={index}
+                        className="px-3 sm:px-4 py-2 bg-[var(--background-tertiary)] border border-[var(--border)] rounded-lg text-[var(--foreground-secondary)] text-xs sm:text-sm font-medium"
+                      >
+                        {format}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Social Media Section */}
+      <section
+        id="social-media"
+        className="py-16 sm:py-20 lg:py-24 bg-[var(--background-secondary)]"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            className="text-center mb-12 sm:mb-16"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-100px' }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
+              <span className="gradient-text">Social Media Downloader</span>
+            </h2>
+            <p className="text-lg sm:text-xl text-[var(--foreground-secondary)] max-w-3xl mx-auto px-4">
+              Download content from your favorite social media platforms
+            </p>
+          </motion.div>
+
+          <motion.div
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-100px' }}
+          >
+            {socialPlatforms.map((platform, index) => (
+              <motion.div
+                key={index}
+                className="relative group glass rounded-2xl p-6 sm:p-8 hover:bg-[var(--background-tertiary)]/50 transition-all duration-300 flex flex-col h-full min-h-[280px]"
+                variants={itemVariants}
+                whileHover={{ y: -5, scale: 1.02 }}
+                transition={{ duration: 0.3 }}
+              >
+                {/* Icon */}
+                <platform.icon
+                  className={`text-4xl sm:text-5xl ${platform.color} mb-4 sm:mb-6`}
+                />
+
+                {/* Content */}
+                <div className="flex-1 flex flex-col">
+                  <h3 className="text-lg sm:text-xl font-semibold text-[var(--foreground)] mb-3">
+                    {platform.name}
+                  </h3>
+                  <p className="text-[var(--foreground-secondary)] text-sm sm:text-base leading-relaxed flex-1 mb-6">
+                    {platform.description}
+                  </p>
+                </div>
+
+                {/* Status Badge - Fixed at bottom */}
+                <div className="mt-auto pt-4">
+                  <span
+                    className={`px-3 py-1 rounded-full text-xs font-medium ${
+                      platform.status === 'Available'
+                        ? 'bg-green-500/20 text-green-400 font-semibold border border-green-500/30'
+                        : 'bg-[var(--accent)] text-[var(--accent)]/20 border border-[var(--accent)]'
+                    }`}
+                  >
+                    {platform.status}
+                  </span>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section id="about" className="py-16 sm:py-20 lg:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            className="text-center mb-12 sm:mb-16"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-100px' }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
+              <span className="gradient-text">About LumaKit</span>
+            </h2>
+          </motion.div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 sm:gap-16 items-center">
+            <motion.div
+              className="space-y-6"
+              initial={{ opacity: 0, x: -50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, margin: '-100px' }}
+              transition={{ duration: 0.8 }}
+            >
+              <p className="text-base sm:text-lg text-[var(--foreground-secondary)] leading-relaxed">
+                LumaKit is a comprehensive toolkit designed for creators,
+                developers, and digital enthusiasts. Our platform combines the
+                power of social media downloading, versatile file conversion,
+                and cutting-edge AI technology to streamline your workflow.
+              </p>
+              <p className="text-base sm:text-lg text-[var(--foreground-secondary)] leading-relaxed">
+                Built with modern web technologies and powered by Gemini AI,
+                LumaKit offers an intuitive and efficient solution for all your
+                digital transformation needs.
+              </p>
+              <div className="space-y-4">
+                {aboutFeatures.map((feature, index) => (
+                  <motion.div
+                    key={index}
+                    className="flex items-center space-x-3"
+                    initial={{ opacity: 0, x: -20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true, margin: '-50px' }}
+                    transition={{ duration: 0.6, delay: index * 0.1 }}
+                  >
+                    <FiStar className="text-[var(--accent)] flex-shrink-0" />
+                    <span className="text-[var(--foreground-secondary)] text-sm sm:text-base">
+                      {feature}
+                    </span>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+
+            <motion.div
+              className="relative"
+              initial={{ opacity: 0, x: 50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, margin: '-100px' }}
+              transition={{ duration: 0.8 }}
+            >
+              <div className="glass rounded-2xl p-6 sm:p-8">
+                <div className="space-y-6">
+                  <div className="flex items-center space-x-4">
+                    <HiLightningBolt className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
+                    <div>
+                      <h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
+                        Powered by AI
+                      </h4>
+                      <p className="text-[var(--foreground-secondary)] text-sm sm:text-base">
+                        Gemini AI integration for smart transformations
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <FiGift className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
+                    <div>
+                      <h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
+                        Free to Use
+                      </h4>
+                      <p className="text-[var(--foreground-secondary)] text-sm sm:text-base">
+                        No subscriptions, no hidden fees
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <FiZap className="text-2xl sm:text-3xl text-[var(--accent)] flex-shrink-0" />
+                    <div>
+                      <h4 className="text-base sm:text-lg font-semibold text-[var(--foreground)]">
+                        Lightning Fast
+                      </h4>
+                      <p className="text-[var(--foreground-secondary)] text-sm sm:text-base">
+                        Optimized for speed and performance
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
     </div>
   );
 }

frontend/src/styles/globals.css

@@ -2,20 +2,133 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* Light Pastel Brown Theme */
+  --light-bg-primary: #F7F3F0;
+  --light-bg-secondary: #F0E6D6;
+  --light-bg-tertiary: #E8DDD0;
+  --light-text-primary: #3C2E26;
+  --light-text-secondary: #5D4E42;
+  --light-text-muted: #8B7355;
+  --light-accent: #D4A574;
+  --light-accent-hover: #C69963;
+  --light-border: #DDD0BB;
+  --light-shadow: rgba(60, 46, 38, 0.1);
+
+  /* Dark Pastel Brown Theme */
+  --dark-bg-primary: #1F1B17;
+  --dark-bg-secondary: #2A241E;
+  --dark-bg-tertiary: #342D25;
+  --dark-text-primary: #F5F1EC;
+  --dark-text-secondary: #E0D5C7;
+  --dark-text-muted: #B8A690;
+  --dark-accent: #D4A574;
+  --dark-accent-hover: #E6B885;
+  --dark-border: #3F362B;
+  --dark-shadow: rgba(0, 0, 0, 0.3);
+
+  /* Default to dark theme */
+  --background: var(--dark-bg-primary);
+  --background-secondary: var(--dark-bg-secondary);
+  --background-tertiary: var(--dark-bg-tertiary);
+  --foreground: var(--dark-text-primary);
+  --foreground-secondary: var(--dark-text-secondary);
+  --foreground-muted: var(--dark-text-muted);
+  --accent: var(--dark-accent);
+  --accent-hover: var(--dark-accent-hover);
+  --border: var(--dark-border);
+  --shadow: var(--dark-shadow);
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: var(--light-bg-primary);
+    --background-secondary: var(--light-bg-secondary);
+    --background-tertiary: var(--light-bg-tertiary);
+    --foreground: var(--light-text-primary);
+    --foreground-secondary: var(--light-text-secondary);
+    --foreground-muted: var(--light-text-muted);
+    --accent: var(--light-accent);
+    --accent-hover: var(--light-accent-hover);
+    --border: var(--light-border);
+    --shadow: var(--light-shadow);
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: var(--font-bricolage-grotesque), sans-serif;
+  font-family: var(--font-bricolage-grotesque), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent);
+}
+
+/* Selection color */
+::selection {
+  background: var(--accent);
+  color: var(--background);
+}
+
+/* Focus styles */
+*:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Smooth transitions for theme changes */
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+/* Performance optimizations */
+.will-change-transform {
+  will-change: transform;
+}
+
+.will-change-opacity {
+  will-change: opacity;
+}
+
+/* Glass morphism effect */
+.glass {
+  background: rgba(212, 165, 116, 0.1);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(212, 165, 116, 0.2);
+}
+
+/* Gradient backgrounds */
+.gradient-bg {
+  background: linear-gradient(135deg, var(--background) 0%, var(--background-secondary) 100%);
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }