diff --git a/backend/app/classification/cache_helpers.py b/backend/app/classification/cache_helpers.py
new file mode 100644
index 00000000..48f6a27f
--- /dev/null
+++ b/backend/app/classification/cache_helpers.py
@@ -0,0 +1,222 @@
+import re
+import time
+import asyncio
+import logging
+from typing import Optional, Dict, Any
+from cachetools import TTLCache
+from collections import Counter
+from langchain_core.messages import HumanMessage
+import xxhash
+import hashlib
+import json
+
+logger = logging.getLogger(__name__)
+
+try:
+    _HAS_XXHASH = True
+except Exception:
+    xxhash = None
+    _HAS_XXHASH = False
+
+# Config
+CACHE_MAXSIZE = 4096
+CACHE_TTL_SECONDS = 60 * 60
+MAX_MESSAGE_LENGTH = 10000  # Max message length to process (prevents DoS via large payloads)
+
+# Patterns for fast-path classification (concise to reduce memory)
+# Merge related intents into fewer regexes and add common Discord patterns
+_PATTERNS = {
+    # common salutations
+    "greeting": re.compile(r"^\s*(?:hi|hello|hey|good\s+morning|good\s+afternoon|good\s+evening)\b", re.I),
+    # explicit help / action requests
+    "action_request": re.compile(r".*\b(?:help|please\s+help|plz\s+help|need\s+help|support|assist|request)\b", re.I),
+    # bug / error reports
+    "bug_report": re.compile(r".*\b(?:bug|error|exception|stack\s*trace|crash|failed|traceback|segfault)\b", re.I),
+    # thanks and short acknowledgements (shared fast-path)
+    "thanks_ack": re.compile(r"^\s*(?:thanks|thank\s+you|thx|ty|ok|okay|got\s+it|roger|ack)\b", re.I),
+    # modern short responses / slang that are non-actionable
+    "slang": re.compile(r"^\s*(?:brb|lol|lmao|rofl|omg|wtf|smh|idk|np|yw|pls|plz|bump|ping|fyi|imo|idc)\b", re.I),
+    # general intent bucket for optimization/performance/docs/feature keywords
+    "intent_general": re.compile(
+        r".*\b(?:optimi[sz]e|improve|speed\s*up|performance|memory|resource|efficient|documentation|docs|guide|tutorial|example|feature|suggest|idea)\b",
+        re.I,
+    ),
+    # Discord-specific: user mentions (@user)
+    "discord_mention": re.compile(r"(?:<@!?\d+>|@\w+)\b"),
+    # Channel mentions (#channel or <#123456>)
+    "channel_mention": re.compile(r"(?:<#\d+>|#\w+)\b"),
+    # Bot/CLI-like commands commonly used on Discord (prefix-based)
+    "command": re.compile(r"^\s*(?:/|!|\?|\.|\$)[A-Za-z0-9_\-]+"),
+    # Code snippets or blocks (inline or triple backticks)
+    "code_block": re.compile(r"```[\s\S]*?```|`[^`]+`", re.S),
+    # URLs (simple detection)
+    "url": re.compile(r"https?://\S+|www\.\S+"),
+    # GitHub/issue/PR references (#123, owner/repo#123, PR #123)
+    "pr_issue_ref": re.compile(r"(?:\b#\d+\b|\b[A-Za-z0-9_.-]+/[A-Za-z0-9_.-]+#\d+\b|\bPR\s*#\d+\b)", re.I),
+    # Emoji shortname like :emoji:
+    "emoji_short": re.compile(r":[a-zA-Z0-9_+\-]+:"),
+}
+
+# Simple deterministic classifications for the patterns
+# Keep mapping concise and reflect combined pattern keys
+_PATTERN_CLASSIFICATION = {
+    "greeting": {"needs_devrel": False, "priority": "low", "reasoning": "greeting"},
+    "thanks_ack": {"needs_devrel": False, "priority": "low", "reasoning": "thanks/acknowledgement"},
+    "slang": {"needs_devrel": False, "priority": "low", "reasoning": "short/slang response"},
+    "action_request": {"needs_devrel": True, "priority": "high", "reasoning": "explicit help/request keywords"},
+    "bug_report": {"needs_devrel": True, "priority": "high", "reasoning": "error or bug report"},
+    "integration": {"needs_devrel": True, "priority": "high", "reasoning": "Discord/GitHub/integration requests (OAuth, commands, threads, repo ops)"},
+    "architecture": {"needs_devrel": True, "priority": "medium", "reasoning": "architecture/infra mentions (queues, DBs, LLMs)"},
+    "intent_general": {"needs_devrel": True, "priority": "medium", "reasoning": "optimization/docs/feature requests"},
+    
+    # Discord/GitHub specific quick classifications
+    "discord_mention": {"needs_devrel": False, "priority": "low", "reasoning": "user mention"},
+    "channel_mention": {"needs_devrel": False, "priority": "low", "reasoning": "channel mention"},
+    "command": {"needs_devrel": False, "priority": "medium", "reasoning": "bot/CLI command invocation"},
+    "code_block": {"needs_devrel": False, "priority": "low", "reasoning": "code snippet or block"},
+    "url": {"needs_devrel": False, "priority": "low", "reasoning": "contains URL"},
+    "pr_issue_ref": {"needs_devrel": True, "priority": "medium", "reasoning": "reference to issue or PR"},
+    "emoji_short": {"needs_devrel": False, "priority": "low", "reasoning": "emoji shortname"},
+}
+
+_cache = TTLCache(maxsize=CACHE_MAXSIZE, ttl=CACHE_TTL_SECONDS)
+# In-flight calls to dedupe concurrent identical requests (bounded with TTL to prevent leaks)
+_inflight: TTLCache = TTLCache(maxsize=1000, ttl=120)  # Max 1000 concurrent, 2min timeout
+
+# Simple metrics
+metrics = Counter({"total": 0, "cache_hits": 0, "cache_misses": 0, "skipped_llm": 0})
+
+
+# Simple cache key generation
+def make_key(model: str, prompt: str, params: Dict[str, Any]) -> str:
+    """
+    Create a stable cache key using XXHash128 for speed.
+    - normalize prompt to reduce trivial differences
+    - serialize params with sorted keys and compact separators
+    - use blake2b as a fallback if xxhash unavailable
+    """
+    norm_prompt = normalize_message(prompt)
+
+    # Serialize params once; for very large params consider hashing only relevant fields
+    try:
+        params_blob = json.dumps(params or {}, sort_keys=True, separators=(",", ":"), default=str).encode("utf-8")
+    except Exception:
+        params_blob = str(params).encode("utf-8")
+
+    payload = b"|".join([model.encode("utf-8"), norm_prompt.encode("utf-8"), params_blob])
+
+    # Use XXHash128 for better collision resistance (if available), otherwise fallback
+    if _HAS_XXHASH:
+        return xxhash.xxh3_128_hexdigest(payload)
+    else:
+        return hashlib.blake2b(payload, digest_size=16).hexdigest()
+
+
+def _compose_prompt_with_context(normalized: str, context_id: Optional[str]) -> str:
+    if context_id:
+        return f"{normalized}|ctx:{context_id}"
+    return normalized
+
+
+def key_for_normalized(normalized: str, context_id: Optional[str], model: str, params: Dict[str, Any]) -> str:
+    """
+    Compute cache key from a normalized message and optional context id.
+    """
+    prompt = _compose_prompt_with_context(normalized, context_id)
+    return make_key(model, prompt, params)
+
+
+def get_cached_by_normalized(normalized: str, context_id: Optional[str], model: str, params: Dict[str, Any]) -> Optional[Dict[str, Any]]:
+    """Retrieve cached payload for a normalized message + context."""
+    key = key_for_normalized(normalized, context_id, model, params)
+    return cache_get(key)
+
+
+def set_cached_by_normalized(normalized: str, context_id: Optional[str], model: str, params: Dict[str, Any], payload: Dict[str, Any]) -> None:
+    """Store payload for normalized message + context."""
+    key = key_for_normalized(normalized, context_id, model, params)
+    cache_set(key, payload)
+
+
+# Cache wrapper for LLM calls (async - uses llm.ainvoke)
+async def cached_llm_call(prompt: str, model: str, params: Dict[str, Any], llm):
+    """
+    Cached wrapper for async LLM calls with:
+    - fast-path simple pattern classification to avoid LLM cost
+    - cache hit/miss metrics
+    - in-flight deduplication so concurrent identical requests share one LLM call
+    """
+    # Fast-path: simple deterministic classification (avoid LLM)
+    normalized = normalize_message(prompt)
+    simple = is_simple_message(normalized)
+    if simple is not None:
+        metrics["skipped_llm"] += 1
+        return simple
+
+    metrics["total"] += 1
+    key = make_key(model, prompt, params)
+
+    # Quick cache check
+    cached = cache_get(key)
+    if cached is not None:
+        metrics["cache_hits"] += 1
+        return cached
+
+    metrics["cache_misses"] += 1
+
+    # Deduplicate in-flight identical calls so only one LLM request is made
+    loop = asyncio.get_running_loop()
+    # Attempt to install a future atomically to dedupe concurrent callers
+    future = loop.create_future()
+    prev = _inflight.setdefault(key, future)
+    if prev is not future:
+        # another caller is in-flight; await its result/failure
+        return await prev
+
+    # we are the owner; perform the fetch and set the future result/exception
+    async def _owner_fetch():
+        try:
+            start = time.time()
+            response = await llm.ainvoke([HumanMessage(content=prompt)])
+            elapsed = time.time() - start
+            # store response content or small payload rather than full object
+            result = response.content if hasattr(response, "content") else response
+            _cache[key] = result
+            future.set_result(result)
+            return result
+        except asyncio.CancelledError:
+            future.cancel()
+            raise
+        except Exception as e:
+            future.set_exception(e)
+            raise
+        finally:
+            # ensure inflight entry removed
+            _inflight.pop(key, None)
+
+    # schedule owner fetch and await its result
+    loop.create_task(_owner_fetch())
+    return await future
+    
+def normalize_message(msg: str) -> str:
+    """Normalize message for caching. Truncates to MAX_MESSAGE_LENGTH to prevent DoS."""
+    s = (msg or "")[:MAX_MESSAGE_LENGTH].strip().lower()
+    s = re.sub(r"\s+", " ", s)
+    return s
+
+def is_simple_message(normalized: str) -> Optional[Dict[str, Any]]:
+    for name, pattern in _PATTERNS.items():
+        if pattern.match(normalized):
+            return dict(_PATTERN_CLASSIFICATION[name], original_message=normalized)
+    return None
+
+def cache_get(key: str) -> Optional[Dict[str, Any]]:
+    try:
+        return _cache[key]
+    except KeyError:
+        return None
+
+
+def cache_set(key: str, value: Dict[str, Any]) -> None:
+    """Store value in cache."""
+    _cache[key] = value
\ No newline at end of file
diff --git a/backend/app/classification/classification_router.py b/backend/app/classification/classification_router.py
index 1708dced..97032ca3 100644
--- a/backend/app/classification/classification_router.py
+++ b/backend/app/classification/classification_router.py
@@ -1,12 +1,26 @@
+import asyncio
 import logging
+import json
 from typing import Dict, Any
 from langchain_google_genai import ChatGoogleGenerativeAI
 from langchain_core.messages import HumanMessage
 from app.core.config import settings
 from .prompt import DEVREL_TRIAGE_PROMPT
+from app.classification.cache_helpers import (
+    normalize_message,
+    is_simple_message,
+    get_cached_by_normalized,
+    set_cached_by_normalized,
+    metrics,
+    MAX_MESSAGE_LENGTH,
+)
 
 logger = logging.getLogger(__name__)
 
+# Limit concurrent LLM calls to prevent rate limiting and cost explosions
+_LLM_SEMAPHORE = asyncio.Semaphore(10)
+
+
 class ClassificationRouter:
     """Simple DevRel triage - determines if message needs DevRel assistance"""
 
@@ -20,28 +34,59 @@ def __init__(self, llm_client=None):
     async def should_process_message(self, message: str, context: Dict[str, Any] = None) -> Dict[str, Any]:
         """Simple triage: Does this message need DevRel assistance?"""
         try:
+            # Early return for oversized messages to prevent DoS
+            if len(message) > MAX_MESSAGE_LENGTH:
+                logger.warning(f"Message exceeds max length ({len(message)} > {MAX_MESSAGE_LENGTH}), using fallback")
+                return self._fallback_triage(message[:MAX_MESSAGE_LENGTH])
+
+            metrics["total"] += 1
+            normalized = normalize_message(message)
+
+            # fast-path: simple pattern match (no LLM)
+            simple = is_simple_message(normalized)
+
+            if simple is not None:
+                metrics["skipped_llm"] += 1
+                return simple
+
+            # cache lookup (include a light context fingerprint if present)
+            ctx_id = None
+            if context:
+                ctx_id = context.get("channel_id") or context.get("thread_id") or ""
+                if not ctx_id:
+                    ctx_id = None
+
+            cached = get_cached_by_normalized(normalized, ctx_id, settings.classification_agent_model, {"temperature": 0.1})
+            if cached is not None:
+                metrics["cache_hits"] += 1
+                return cached
+
+            metrics["cache_misses"] += 1
+
             triage_prompt = DEVREL_TRIAGE_PROMPT.format(
                 message=message,
                 context=context or 'No additional context'
             )
 
-            response = await self.llm.ainvoke([HumanMessage(content=triage_prompt)])
-
+            # Use semaphore to limit concurrent LLM calls
+            async with _LLM_SEMAPHORE:
+                response = await self.llm.ainvoke([HumanMessage(content=triage_prompt)])
             response_text = response.content.strip()
+
             if '{' in response_text:
                 json_start = response_text.find('{')
                 json_end = response_text.rfind('}') + 1
                 json_str = response_text[json_start:json_end]
-
-                import json
                 result = json.loads(json_str)
 
-                return {
+                payload = {
                     "needs_devrel": result.get("needs_devrel", True),
                     "priority": result.get("priority", "medium"),
                     "reasoning": result.get("reasoning", "LLM classification"),
                     "original_message": message
                 }
+                set_cached_by_normalized(normalized, ctx_id, settings.classification_agent_model, {"temperature": 0.1}, payload)
+                return payload
 
             return self._fallback_triage(message)
 
diff --git a/frontend/src/components/pages/index.ts b/frontend/src/components/pages/index.ts
deleted file mode 100644
index 43a11610..00000000
--- a/frontend/src/components/pages/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// export { default as Dashboard } from '../components/dashboard/Dashboard';
-// export { default as BotIntegrationPage } from '../components/integration/BotIntegrationPage';
-// export { default as ContributorsPage } from '../components/contributors/ContributorsPage';
-// export { default as PullRequestsPage } from './PullRequestsPage';
\ No newline at end of file
diff --git a/landing/package-lock.json b/landing/package-lock.json
index 7c4191de..8ed81366 100644
--- a/landing/package-lock.json
+++ b/landing/package-lock.json
@@ -8,6 +8,10 @@
             "name": "devrai-landing",
             "version": "0.1.0",
             "dependencies": {
+                "@emotion/react": "^11.14.0",
+                "@emotion/styled": "^11.14.1",
+                "@mui/icons-material": "^7.3.7",
+                "@mui/material": "^7.3.7",
                 "@studio-freight/lenis": "^1.0.42",
                 "framer-motion": "^10.16.4",
                 "lucide-react": "^0.344.0",
@@ -63,7 +67,6 @@
             "version": "7.26.2",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
             "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.25.9",
@@ -119,7 +122,6 @@
             "version": "7.27.0",
             "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
             "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.27.0",
@@ -153,7 +155,6 @@
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
             "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/traverse": "^7.25.9",
@@ -195,7 +196,6 @@
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
             "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -205,7 +205,6 @@
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
             "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -239,7 +238,6 @@
             "version": "7.27.0",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
             "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/types": "^7.27.0"
@@ -283,11 +281,19 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/runtime": {
+            "version": "7.28.4",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+            "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/template": {
             "version": "7.27.0",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
             "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.26.2",
@@ -302,7 +308,6 @@
             "version": "7.27.0",
             "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
             "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.26.2",
@@ -321,7 +326,6 @@
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
             "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=4"
@@ -331,7 +335,6 @@
             "version": "7.27.0",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
             "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.25.9",
@@ -341,6 +344,62 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@emotion/babel-plugin": {
+            "version": "11.13.5",
+            "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+            "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.16.7",
+                "@babel/runtime": "^7.18.3",
+                "@emotion/hash": "^0.9.2",
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/serialize": "^1.3.3",
+                "babel-plugin-macros": "^3.1.0",
+                "convert-source-map": "^1.5.0",
+                "escape-string-regexp": "^4.0.0",
+                "find-root": "^1.1.0",
+                "source-map": "^0.5.7",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+            "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+            "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/cache": {
+            "version": "11.14.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+            "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/sheet": "^1.4.0",
+                "@emotion/utils": "^1.4.2",
+                "@emotion/weak-memoize": "^0.4.0",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/cache/node_modules/@emotion/memoize": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+            "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/hash": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+            "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+            "license": "MIT"
+        },
         "node_modules/@emotion/is-prop-valid": {
             "version": "0.8.8",
             "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -358,6 +417,120 @@
             "license": "MIT",
             "optional": true
         },
+        "node_modules/@emotion/react": {
+            "version": "11.14.0",
+            "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+            "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.13.5",
+                "@emotion/cache": "^11.14.0",
+                "@emotion/serialize": "^1.3.3",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+                "@emotion/utils": "^1.4.2",
+                "@emotion/weak-memoize": "^0.4.0",
+                "hoist-non-react-statics": "^3.3.1"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emotion/serialize": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+            "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/hash": "^0.9.2",
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/unitless": "^0.10.0",
+                "@emotion/utils": "^1.4.2",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@emotion/serialize/node_modules/@emotion/memoize": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+            "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/sheet": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+            "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/styled": {
+            "version": "11.14.1",
+            "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+            "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.13.5",
+                "@emotion/is-prop-valid": "^1.3.0",
+                "@emotion/serialize": "^1.3.3",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+                "@emotion/utils": "^1.4.2"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.0.0-rc.0",
+                "react": ">=16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+            "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/memoize": "^0.9.0"
+            }
+        },
+        "node_modules/@emotion/styled/node_modules/@emotion/memoize": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+            "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/unitless": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+            "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+            "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
+        "node_modules/@emotion/utils": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+            "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/weak-memoize": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+            "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+            "license": "MIT"
+        },
         "node_modules/@esbuild/android-arm": {
             "version": "0.18.20",
             "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -897,7 +1070,6 @@
             "version": "0.3.8",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
             "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/set-array": "^1.2.1",
@@ -912,7 +1084,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
             "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.0.0"
@@ -922,7 +1093,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
             "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.0.0"
@@ -932,20 +1102,251 @@
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
             "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/@jridgewell/trace-mapping": {
             "version": "0.3.25",
             "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
             "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/resolve-uri": "^3.1.0",
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@mui/core-downloads-tracker": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.7.tgz",
+            "integrity": "sha512-8jWwS6FweMkpyRkrJooamUGe1CQfO1yJ+lM43IyUJbrhHW/ObES+6ry4vfGi8EKaldHL3t3BG1bcLcERuJPcjg==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            }
+        },
+        "node_modules/@mui/icons-material": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.7.tgz",
+            "integrity": "sha512-3Q+ulAqG+A1+R4ebgoIs7AccaJhIGy+Xi/9OnvX376jQ6wcy+rz4geDGrxQxCGzdjOQr4Z3NgyFSZCz4T999lA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@mui/material": "^7.3.7",
+                "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/material": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.7.tgz",
+            "integrity": "sha512-6bdIxqzeOtBAj2wAsfhWCYyMKPLkRO9u/2o5yexcL0C3APqyy91iGSWgT3H7hg+zR2XgE61+WAu12wXPON8b6A==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4",
+                "@mui/core-downloads-tracker": "^7.3.7",
+                "@mui/system": "^7.3.7",
+                "@mui/types": "^7.4.10",
+                "@mui/utils": "^7.3.7",
+                "@popperjs/core": "^2.11.8",
+                "@types/react-transition-group": "^4.4.12",
+                "clsx": "^2.1.1",
+                "csstype": "^3.2.3",
+                "prop-types": "^15.8.1",
+                "react-is": "^19.2.3",
+                "react-transition-group": "^4.4.5"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@mui/material-pigment-css": "^7.3.7",
+                "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@mui/material-pigment-css": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/private-theming": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.7.tgz",
+            "integrity": "sha512-w7r1+CYhG0syCAQUWAuV5zSaU2/67WA9JXUderdb7DzCIJdp/5RmJv6L85wRjgKCMsxFF0Kfn0kPgPbPgw/jdw==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4",
+                "@mui/utils": "^7.3.7",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/styled-engine": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.7.tgz",
+            "integrity": "sha512-y/QkNXv6cF6dZ5APztd/dFWfQ6LHKPx3skyYO38YhQD4+Cxd6sFAL3Z38WMSSC8LQz145Mpp3CcLrSCLKPwYAg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4",
+                "@emotion/cache": "^11.14.0",
+                "@emotion/serialize": "^1.3.3",
+                "@emotion/sheet": "^1.4.0",
+                "csstype": "^3.2.3",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.4.1",
+                "@emotion/styled": "^11.3.0",
+                "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/system": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.7.tgz",
+            "integrity": "sha512-DovL3k+FBRKnhmatzUMyO5bKkhMLlQ9L7Qw5qHrre3m8zCZmE+31NDVBFfqrbrA7sq681qaEIHdkWD5nmiAjyQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4",
+                "@mui/private-theming": "^7.3.7",
+                "@mui/styled-engine": "^7.3.7",
+                "@mui/types": "^7.4.10",
+                "@mui/utils": "^7.3.7",
+                "clsx": "^2.1.1",
+                "csstype": "^3.2.3",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/types": {
+            "version": "7.4.10",
+            "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.10.tgz",
+            "integrity": "sha512-0+4mSjknSu218GW3isRqoxKRTOrTLd/vHi/7UC4+wZcUrOAqD9kRk7UQRL1mcrzqRoe7s3UT6rsRpbLkW5mHpQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/utils": {
+            "version": "7.3.7",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.7.tgz",
+            "integrity": "sha512-+YjnjMRnyeTkWnspzoxRdiSOgkrcpTikhNPoxOZW0APXx+urHtUoXJ9lbtCZRCA5a4dg5gSbd19alL1DvRs5fg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.28.4",
+                "@mui/types": "^7.4.10",
+                "@types/prop-types": "^15.7.15",
+                "clsx": "^2.1.1",
+                "prop-types": "^15.8.1",
+                "react-is": "^19.2.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -995,6 +1396,16 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@studio-freight/lenis": {
             "version": "1.0.42",
             "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz",
@@ -1060,18 +1471,22 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/parse-json": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+            "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+            "license": "MIT"
+        },
         "node_modules/@types/prop-types": {
-            "version": "15.7.14",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-            "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-            "dev": true,
+            "version": "15.7.15",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+            "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
             "license": "MIT"
         },
         "node_modules/@types/react": {
             "version": "18.3.20",
             "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
             "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@types/prop-types": "*",
@@ -1088,6 +1503,15 @@
                 "@types/react": "^18.0.0"
             }
         },
+        "node_modules/@types/react-transition-group": {
+            "version": "4.4.12",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+            "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*"
+            }
+        },
         "node_modules/@types/semver": {
             "version": "7.7.0",
             "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
@@ -1848,6 +2272,21 @@
                 "postcss": "^8.1.0"
             }
         },
+        "node_modules/babel-plugin-macros": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+            "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "cosmiconfig": "^7.0.0",
+                "resolve": "^1.19.0"
+            },
+            "engines": {
+                "node": ">=10",
+                "npm": ">=6"
+            }
+        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1929,7 +2368,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6"
@@ -2021,6 +2459,15 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/clsx": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2074,6 +2521,31 @@
                 "node": ">=18"
             }
         },
+        "node_modules/cosmiconfig": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+            "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/parse-json": "^4.0.0",
+                "import-fresh": "^3.2.1",
+                "parse-json": "^5.0.0",
+                "path-type": "^4.0.0",
+                "yaml": "^1.10.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/cosmiconfig/node_modules/yaml": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2103,16 +2575,15 @@
             }
         },
         "node_modules/csstype": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
             "license": "MIT"
         },
         "node_modules/debug": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
             "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.3"
@@ -2173,6 +2644,16 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2194,6 +2675,15 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/error-ex": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+            "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+            "license": "MIT",
+            "dependencies": {
+                "is-arrayish": "^0.2.1"
+            }
+        },
         "node_modules/esbuild": {
             "version": "0.18.20",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -2246,7 +2736,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
@@ -2529,6 +3018,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/find-root": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+            "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+            "license": "MIT"
+        },
         "node_modules/find-up": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2649,7 +3144,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "dev": true,
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -2767,7 +3261,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
             "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.2"
@@ -2776,6 +3269,21 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "react-is": "^16.7.0"
+            }
+        },
+        "node_modules/hoist-non-react-statics/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "license": "MIT"
+        },
         "node_modules/ignore": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2790,7 +3298,6 @@
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
             "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "parent-module": "^1.0.0",
@@ -2832,6 +3339,12 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/is-arrayish": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+            "license": "MIT"
+        },
         "node_modules/is-binary-path": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2849,7 +3362,6 @@
             "version": "2.16.1",
             "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
             "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "hasown": "^2.0.2"
@@ -2970,7 +3482,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
             "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-            "dev": true,
             "license": "MIT",
             "bin": {
                 "jsesc": "bin/jsesc"
@@ -2986,6 +3497,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+            "license": "MIT"
+        },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3054,7 +3571,6 @@
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/locate-path": {
@@ -3162,7 +3678,6 @@
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/mz": {
@@ -3234,7 +3749,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -3321,7 +3835,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "callsites": "^3.0.0"
@@ -3330,6 +3843,24 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parse-json": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.0.0",
+                "error-ex": "^1.3.1",
+                "json-parse-even-better-errors": "^2.3.0",
+                "lines-and-columns": "^1.1.6"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/path-exists": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3364,7 +3895,6 @@
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
             "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/path-scurry": {
@@ -3395,7 +3925,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
             "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -3405,7 +3934,6 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
             "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/picomatch": {
@@ -3601,6 +4129,23 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
+        "node_modules/prop-types/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "license": "MIT"
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3674,6 +4219,12 @@
                 "react-dom": ">=16"
             }
         },
+        "node_modules/react-is": {
+            "version": "19.2.3",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
+            "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
+            "license": "MIT"
+        },
         "node_modules/react-refresh": {
             "version": "0.14.2",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -3724,6 +4275,22 @@
                 "react-dom": ">=18"
             }
         },
+        "node_modules/react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.6.0",
+                "react-dom": ">=16.6.0"
+            }
+        },
         "node_modules/read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3751,7 +4318,6 @@
             "version": "1.22.10",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
             "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-core-module": "^2.16.0",
@@ -3772,7 +4338,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=4"
@@ -3918,6 +4483,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4038,6 +4612,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+            "license": "MIT"
+        },
         "node_modules/sucrase": {
             "version": "3.35.0",
             "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -4125,7 +4705,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
             "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
diff --git a/landing/package.json b/landing/package.json
index 239c29b0..331595e0 100644
--- a/landing/package.json
+++ b/landing/package.json
@@ -10,6 +10,10 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@mui/icons-material": "^7.3.7",
+        "@mui/material": "^7.3.7",
         "@studio-freight/lenis": "^1.0.42",
         "framer-motion": "^10.16.4",
         "lucide-react": "^0.344.0",
diff --git a/landing/src/components/layout/Footer.tsx b/landing/src/components/layout/Footer.tsx
index 4d54c4d1..2cfa5e21 100644
--- a/landing/src/components/layout/Footer.tsx
+++ b/landing/src/components/layout/Footer.tsx
@@ -1,76 +1,448 @@
 import React from 'react';
-import { Github, Twitter, Linkedin } from 'lucide-react';
-import { useLocation, Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { 
+    Box, 
+    Container, 
+    Typography, 
+    Link as MuiLink, 
+    IconButton, 
+    Divider,
+    Stack
+} from '@mui/material';
+import { 
+    GitHub as GitHubIcon, 
+    Twitter as TwitterIcon, 
+    LinkedIn as LinkedInIcon, 
+    KeyboardArrowUp as ArrowUpIcon 
+} from '@mui/icons-material';
+import { useLocation, Link, useNavigate } from 'react-router-dom';
 
 const Footer: React.FC = () => {
     const currentYear = new Date().getFullYear();
     const location = useLocation();
     const isHomePage = location.pathname === '/';
 
+    const navigate = useNavigate();
+
+    // QuickLink component to handle hash navigation/smooth scroll via router
+    const QuickLink: React.FC<{ link: { label: string; href: string }; isHomePage: boolean }> = ({ link, isHomePage }) => {
+        const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+            e.preventDefault();
+
+            // Construct target href (preserve hash). On non-home pages we prefix with '/'
+            const target = isHomePage ? link.href : `/${link.href}`;
+
+            // Navigate so location.hash updates; scrolling is handled by Navbar's useEffect
+            navigate(target);
+        };
+
+        return (
+            <MuiLink
+                href={link.href}
+                onClick={(e) => handleClick(e)}
+                className="text-gray-400 hover:text-green-400 text-sm transition-colors duration-300 inline-flex items-center gap-2 group"
+                sx={{
+                    color: 'rgba(161, 161, 170, 1)',
+                    fontSize: '0.875rem',
+                    textDecoration: 'none',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    position: 'relative',
+                    transition: 'color 0.3s ease',
+                    '&:hover': {
+                        color: 'rgba(34, 197, 94, 1)',
+                    },
+                    '&::before': {
+                        content: '""',
+                        width: 0,
+                        height: '2px',
+                        background: 'linear-gradient(to right, #4ade80, #22d3ee)',
+                        transition: 'width 0.3s ease',
+                        position: 'absolute',
+                        left: 0,
+                        bottom: '-2px',
+                    },
+                    '&:hover::before': {
+                        width: '16px',
+                    },
+                }}
+            >
+                {link.label}
+            </MuiLink>
+        );
+    };
+
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    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 },
+    };
+
+    const socialLinks = [
+        {
+            icon: <GitHubIcon />,
+            href: 'https://github.com/AOSSIE-Org/Devr.AI/',
+            label: 'GitHub',
+            color: 'hover:text-green-400'
+        },
+        {
+            icon: <TwitterIcon />,
+            href: 'https://x.com/aossie_org?lang=en',
+            label: 'Twitter',
+            color: 'hover:text-cyan-400'
+        },
+        {
+            icon: <LinkedInIcon />,
+            href: 'https://www.linkedin.com/company/aossie/?originalSubdomain=au',
+            label: 'LinkedIn',
+            color: 'hover:text-green-400'
+        },
+    ];
+
+    const quickLinks = [
+        { label: 'Features', href: '#features' },
+        { label: 'How It Works', href: '#how-it-works' },
+        { label: 'Integrations', href: '#integrations' },
+        { label: 'Join Waitlist', href: '#waitlist' },
+    ];
+
+    const legalLinks = [
+        { label: 'Privacy Policy', to: '/privacy-policy' },
+        { label: 'Terms of Service', to: '/terms-of-service' },
+    ];
+
     return (
-        <footer className="relative bg-gradient-to-br from-dark via-dark-lighter to-gray-900 py-12 overflow-hidden">
-            {/* Background gradient overlays */}
-            <div className="absolute inset-0 pointer-events-none">
-                <div className="absolute top-0 left-0 w-96 h-96 rounded-full bg-green-500/5 blur-2xl -translate-x-1/2 -translate-y-1/2"></div>
-                <div className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-blue-500/4 blur-3xl translate-x-1/2 translate-y-1/2"></div>
-                <div className="absolute inset-0 bg-gradient-to-t from-transparent via-green-500/5 to-transparent opacity-50"></div>
-            </div>
-
-            <div className="container mx-auto px-6 relative z-10">
-                <div className="flex flex-col md:flex-row justify-between items-start mb-8">
-                    <div className="mb-6 md:mb-0">
-                        <h3 className="text-2xl font-bold gradient-text mb-2">Devr.AI</h3>
-                        <p className="text-gray-300 text-sm max-w-xs leading-relaxed">
-                            Revolutionizing developer relations with AI-powered community management.
-                        </p>
-                    </div>
-                    <div className="flex flex-row gap-12">
-                        <div>
-                            <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Links</h4>
-                            <ul className="space-y-3">
-                                <li><a href={isHomePage ? "#features" : "/#features"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Features</a></li>
-                                <li><a href={isHomePage ? "#how-it-works" : "/#how-it-works"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">How It Works</a></li>
-                                <li><a href={isHomePage ? "#integrations" : "/#integrations"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Integrations</a></li>
-                                <li><a href={isHomePage ? "#waitlist" : "/#waitlist"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Join Waitlist</a></li>
-                            </ul>
-                        </div>
-                        <div>
-                            <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Legal</h4>
-                            <ul className="space-y-3">
-                                <li><Link to="/privacy-policy" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Privacy Policy</Link></li>
-                                <li><Link to="/terms-of-service" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Terms of Service</Link></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="border-t border-gradient-to-r from-green-500/20 via-blue-500/20 to-green-500/20 pt-8 flex flex-col md:flex-row justify-between items-center" style={{borderImage: 'linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)) 1'}}>
-                    <p className="text-gray-400 text-sm mb-4 md:mb-0">
-                        &copy; {currentYear} Devr.AI. All rights reserved.
-                    </p>
-                    <div className="flex space-x-6">
-                        <a href="https://github.com/AOSSIE-Org/Devr.AI/" 
-                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20" 
-                           target='_blank' 
-                           rel="noreferrer">
-                            <Github size={20} />
-                        </a>
-                        <a href="https://x.com/aossie_org?lang=en" 
-                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-blue-500/20" 
-                           target='_blank'
-                           rel="noreferrer">
-                            <Twitter size={20} />
-                        </a>
-                        <a href="https://www.linkedin.com/company/aossie/?originalSubdomain=au" 
-                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20" 
-                           target='_blank'
-                           rel="noreferrer">
-                            <Linkedin size={20} />
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </footer>
+        <Box
+            component="footer"
+            className="relative bg-gradient-to-br from-dark via-dark-lighter to-gray-900 py-16 overflow-hidden border-t border-gray-800"
+            sx={{
+                position: 'relative',
+            }}
+        >
+            {/* Enhanced Background Effects */}
+            <Box
+                className="absolute inset-0 pointer-events-none"
+                sx={{
+                    position: 'absolute',
+                    inset: 0,
+                    pointerEvents: 'none',
+                }}
+            >
+                <Box
+                    className="absolute top-0 left-0 w-96 h-96 rounded-full bg-green-500/5 blur-3xl -translate-x-1/2 -translate-y-1/2"
+                    sx={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '24rem',
+                        height: '24rem',
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(34, 197, 94, 0.05)',
+                        filter: 'blur(64px)',
+                        transform: 'translate(-50%, -50%)',
+                    }}
+                />
+                <Box
+                    className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-blue-500/6 blur-3xl translate-x-1/2 translate-y-1/2"
+                    sx={{
+                        position: 'absolute',
+                        bottom: 0,
+                        right: 0,
+                        width: '24rem',
+                        height: '24rem',
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(59, 130, 246, 0.06)',
+                        filter: 'blur(64px)',
+                        transform: 'translate(50%, 50%)',
+                    }}
+                />
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: '30%',
+                        right: '20%',
+                        width: '16rem',
+                        height: '16rem',
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(37, 99, 235, 0.05)',
+                        filter: 'blur(60px)',
+                    }}
+                />
+                <Box
+                    className="absolute inset-0 bg-grid-pattern opacity-20"
+                    sx={{
+                        position: 'absolute',
+                        inset: 0,
+                        backgroundImage: `
+                            linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+                            linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px)
+                        `,
+                        backgroundSize: '40px 40px',
+                        opacity: 0.2,
+                    }}
+                />
+            </Box>
+
+            <Container 
+                maxWidth="xl" 
+                className="relative z-10"
+                sx={{ position: 'relative', zIndex: 10 }}
+            >
+                <motion.div
+                    variants={containerVariants}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true }}
+                >
+                    <Box
+                        className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"
+                        sx={{ mb: 6 }}
+                    >
+                        {/* Brand Section */}
+                        <Box className="md:col-span-2">
+                            <motion.div variants={itemVariants}>
+                                <Typography
+                                    variant="h4"
+                                    className="gradient-text mb-4"
+                                    sx={{
+                                        fontWeight: 700,
+                                        mb: 2,
+                                        background: 'linear-gradient(to right, #4ade80, #3b82f6, #22d3ee, #2563eb, #10b981)',
+                                        WebkitBackgroundClip: 'text',
+                                        WebkitTextFillColor: 'transparent',
+                                        backgroundClip: 'text',
+                                    }}
+                                >
+                                    Devr.AI
+                                </Typography>
+                                <Typography
+                                    variant="body1"
+                                    className="text-gray-400 max-w-md leading-relaxed mb-6"
+                                    sx={{
+                                        color: 'rgba(161, 161, 170, 1)',
+                                        maxWidth: '28rem',
+                                        lineHeight: 1.75,
+                                        mb: 4,
+                                    }}
+                                >
+                                    Revolutionizing developer relations with AI-powered community management.
+                                    Automate engagement, streamline onboarding, and deliver real-time updates.
+                                </Typography>
+                                <Stack direction="row" spacing={2}>
+                                    {socialLinks.map((social) => (
+                                        <motion.div
+                                            key={social.label}
+                                            whileHover={{ scale: 1.1, y: -2 }}
+                                            whileTap={{ scale: 0.95 }}
+                                        >
+                                            <IconButton
+                                                component="a"
+                                                href={social.href}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                aria-label={social.label}
+                                                className={`text-gray-400 ${social.color} transition-all duration-300 bg-gray-800/50 hover:bg-gray-800 border border-gray-700 hover:border-gray-600`}
+                                                sx={{
+                                                    color: 'rgba(161, 161, 170, 1)',
+                                                    backgroundColor: 'rgba(39, 39, 42, 0.5)',
+                                                    border: '1px solid rgba(63, 63, 70, 1)',
+                                                    borderRadius: '12px',
+                                                    padding: '12px',
+                                                    '&:hover': {
+                                                        backgroundColor: 'rgba(39, 39, 42, 1)',
+                                                        borderColor: 'rgba(82, 82, 91, 1)',
+                                                        color: social.label === 'Twitter' 
+                                                            ? 'rgba(6, 182, 212, 1)' 
+                                                            : 'rgba(34, 197, 94, 1)',
+                                                    },
+                                                    transition: 'all 0.3s ease',
+                                                }}
+                                            >
+                                                {social.icon}
+                                            </IconButton>
+                                        </motion.div>
+                                    ))}
+                                </Stack>
+                            </motion.div>
+                        </Box>
+
+                        {/* Quick Links Section */}
+                        <Box>
+                            <motion.div variants={itemVariants}>
+                                <Typography
+                                    variant="h6"
+                                    className="font-bold mb-4 text-white"
+                                    sx={{
+                                        fontWeight: 700,
+                                        mb: 2,
+                                        color: 'white',
+                                    }}
+                                >
+                                    Quick Links
+                                </Typography>
+                                <Stack spacing={1.5}>
+                                    {quickLinks.map((link) => (
+                                        <QuickLink
+                                            key={link.label}
+                                            link={link}
+                                            isHomePage={isHomePage}
+                                        />
+                                    ))}
+                                </Stack>
+                            </motion.div>
+                        </Box>
+
+                        {/* Legal Section */}
+                        <Box>
+                            <motion.div variants={itemVariants}>
+                                <Typography
+                                    variant="h6"
+                                    className="font-bold mb-4 text-white"
+                                    sx={{
+                                        fontWeight: 700,
+                                        mb: 2,
+                                        color: 'white',
+                                    }}
+                                >
+                                    Legal
+                                </Typography>
+                                <Stack spacing={1.5}>
+                                    {legalLinks.map((link) => (
+                                        <MuiLink
+                                            key={link.label}
+                                            component={Link}
+                                            to={link.to}
+                                            className="text-gray-400 hover:text-cyan-400 text-sm transition-colors duration-300 inline-flex items-center gap-2 group"
+                                            sx={{
+                                                color: 'rgba(161, 161, 170, 1)',
+                                                fontSize: '0.875rem',
+                                                textDecoration: 'none',
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: '8px',
+                                                position: 'relative',
+                                                transition: 'color 0.3s ease',
+                                                '&:hover': {
+                                                    color: 'rgba(6, 182, 212, 1)',
+                                                },
+                                                '&::before': {
+                                                    content: '""',
+                                                    width: 0,
+                                                    height: '2px',
+                                                    background: 'linear-gradient(to right, #22d3ee, #4ade80)',
+                                                    transition: 'width 0.3s ease',
+                                                    position: 'absolute',
+                                                    left: 0,
+                                                    bottom: '-2px',
+                                                },
+                                                '&:hover::before': {
+                                                    width: '16px',
+                                                },
+                                            }}
+                                        >
+                                            {link.label}
+                                        </MuiLink>
+                                    ))}
+                                </Stack>
+                            </motion.div>
+                        </Box>
+                    </Box>
+
+                    {/* Bottom Bar */}
+                    <motion.div
+                        variants={itemVariants}
+                        initial="hidden"
+                        whileInView="visible"
+                        viewport={{ once: true }}
+                    >
+                        <Divider 
+                            sx={{ 
+                                mb: 4, 
+                                borderColor: 'rgba(39, 39, 42, 1)',
+                            }} 
+                        />
+                        <Box
+                            className="flex flex-col md:flex-row justify-between items-center gap-4"
+                            sx={{
+                                display: 'flex',
+                                flexDirection: { xs: 'column', md: 'row' },
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                gap: 2,
+                            }}
+                        >
+                            <Typography
+                                variant="body2"
+                                className="text-gray-500"
+                                sx={{
+                                    color: 'rgba(113, 113, 122, 1)',
+                                    fontSize: '0.875rem',
+                                }}
+                            >
+                                © {currentYear} Devr.AI. All rights reserved.
+                            </Typography>
+
+                            {/* Scroll to Top Button */}
+                            <motion.div
+                                whileHover={{ y: -2 }}
+                                whileTap={{ scale: 0.95 }}
+                            >
+                                <MuiLink
+                                    component="button"
+                                    onClick={scrollToTop}
+                                    className="flex items-center gap-2 text-gray-400 hover:text-green-400 text-sm transition-colors duration-300 group"
+                                    sx={{
+                                        color: 'rgba(161, 161, 170, 1)',
+                                        fontSize: '0.875rem',
+                                        textDecoration: 'none',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px',
+                                        background: 'none',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        padding: 0,
+                                        fontFamily: 'inherit',
+                                        transition: 'color 0.3s ease',
+                                        '&:hover': {
+                                            color: 'rgba(34, 197, 94, 1)',
+                                        },
+                                    }}
+                                >
+                                    <Typography
+                                        component="span"
+                                        variant="body2"
+                                        sx={{ fontSize: '0.875rem' }}
+                                    >
+                                        Back to top
+                                    </Typography>
+                                    <ArrowUpIcon 
+                                        sx={{ 
+                                            fontSize: '16px',
+                                        }} 
+                                    />
+                                </MuiLink>
+                            </motion.div>
+                        </Box>
+                    </motion.div>
+                </motion.div>
+            </Container>
+        </Box>
     );
 };
 
diff --git a/landing/src/components/layout/Navbar.tsx b/landing/src/components/layout/Navbar.tsx
index 42a0a744..cd32b695 100644
--- a/landing/src/components/layout/Navbar.tsx
+++ b/landing/src/components/layout/Navbar.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { Menu, X, Github } from 'lucide-react';
+import { Menu, X} from 'lucide-react';
 import { motion } from 'framer-motion';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 const Navbar: React.FC = () => {
     const [isOpen, setIsOpen] = useState(false);
     const [scrolled, setScrolled] = useState(false);
     const location = useLocation();
+    const navigate = useNavigate();
     const isHomePage = location.pathname === '/';
 
     useEffect(() => {
@@ -20,6 +21,44 @@ const Navbar: React.FC = () => {
         };
     }, []);
 
+    // Handle smooth scroll on page load with hash (consolidated and cleaned up)
+    useEffect(() => {
+        let timer: ReturnType<typeof setTimeout> | null = null;
+
+        if (isHomePage && location.hash) {
+            const hash = location.hash.substring(1); // Remove the # symbol
+            timer = setTimeout(() => {
+                const element = document.getElementById(hash);
+                if (element) {
+                    const offset = 80; // Account for fixed navbar height
+                    const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
+                    const offsetPosition = elementPosition - offset;
+
+                    window.scrollTo({
+                        top: offsetPosition,
+                        behavior: 'smooth'
+                    });
+                }
+            }, 100);
+        }
+
+        return () => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }, [location.hash, isHomePage]);
+
+    // Smooth scroll handler - let routing update the hash and useEffect handle scrolling
+    const handleSmoothScroll = (e:React.MouseEvent<HTMLAnchorElement>, href: string) => {
+        e.preventDefault();
+        // Do not prevent default navigation; close mobile menu then navigate so location.hash updates
+        setIsOpen(false);
+
+        // Navigate to the link (includes hash when present). The useEffect above will handle scrolling.
+        navigate(href);
+    };
+
     const navLinks = [
         { name: 'Features', href: isHomePage ? '#features' : '/#features' },
         { name: 'How It Works', href: isHomePage ? '#how-it-works' : '/#how-it-works' },
@@ -39,7 +78,17 @@ const Navbar: React.FC = () => {
                         className="flex items-center"
                     >
                         <Link to="/" className="flex items-center">
-                            <span className="text-2xl font-bold gradient-text">Devr.AI</span>
+                            <span 
+                                className="text-2xl font-bold gradient-text"
+                                style={{
+                                    background: 'linear-gradient(to right, #4ade80, #3b82f6, #22d3ee, #2563eb, #10b981)',
+                                    WebkitBackgroundClip: 'text',
+                                    WebkitTextFillColor: 'transparent',
+                                    backgroundClip: 'text',
+                                }}
+                            >
+                                Devr.AI
+                            </span>
                         </Link>
                     </motion.div>
 
@@ -52,6 +101,7 @@ const Navbar: React.FC = () => {
                             <a
                                 key={link.name}
                                 href={link.href}
+                                onClick={(e) => handleSmoothScroll(e, link.href)}
                                 className="text-sm font-medium text-gray-300 transition-colors hover:text-white"
                             >
                                 {link.name}
@@ -59,6 +109,7 @@ const Navbar: React.FC = () => {
                         ))}
                         <a
                             href={isHomePage ? "#waitlist" : "/#waitlist"}
+                            onClick={(e) => handleSmoothScroll(e, isHomePage ? "#waitlist" : "/#waitlist")}
                             className="text-sm font-medium px-4 py-2 rounded-lg bg-primary hover:bg-primary-hover text-white transition-colors"
                         >
                             Join Waitlist
@@ -87,7 +138,7 @@ const Navbar: React.FC = () => {
                         <a
                             key={link.name}
                             href={link.href}
-                            onClick={() => setIsOpen(false)}
+                            onClick={(e) => handleSmoothScroll(e, link.href)}
                             className="block py-3 text-gray-300 hover:text-white"
                         >
                             {link.name}
@@ -95,7 +146,7 @@ const Navbar: React.FC = () => {
                     ))}
                     <a
                         href={isHomePage ? "#waitlist" : "/#waitlist"}
-                        onClick={() => setIsOpen(false)}
+                        onClick={(e) => handleSmoothScroll(e, isHomePage ? "#waitlist" : "/#waitlist")}
                         className="block py-3 text-primary hover:text-primary-hover font-medium"
                     >
                         Join Waitlist
diff --git a/landing/src/components/sections/Hero.tsx b/landing/src/components/sections/Hero.tsx
index 42a120c7..ba3c1672 100644
--- a/landing/src/components/sections/Hero.tsx
+++ b/landing/src/components/sections/Hero.tsx
@@ -1,6 +1,17 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Users } from 'lucide-react';
+import {
+    Box,
+    Container,
+    Typography,
+    Button,
+    Chip,
+    Stack
+} from '@mui/material';
+import {
+    People as UsersIcon,
+    Explore as ExploreIcon
+} from '@mui/icons-material';
 
 const Hero: React.FC = () => {
     const container = {
@@ -19,81 +30,359 @@ const Hero: React.FC = () => {
     };
 
     return (
-        <section className="relative min-h-screen flex items-center justify-center pt-24 pb-0 overflow-hidden">
-            {/* Background elements */}
-            <div className="absolute inset-0 pointer-events-none hidden md:block">
-                <div className="absolute inset-0 bg-gradient-to-br from-dark via-dark to-gray-900 opacity-90"></div>
+        <Box
+            component="section"
+            className="relative min-h-screen flex items-center justify-center pt-32 pb-20 overflow-hidden"
+            sx={{
+                position: 'relative',
+                minHeight: '100vh',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: { xs: 8, md: 16 },
+                paddingBottom: { xs: 5, md: 10 },
+                overflow: 'hidden',
+            }}
+        >
+            {/* Simplified Background - Modern & Clean */}
+            <Box
+                className="absolute inset-0 pointer-events-none"
+                sx={{
+                    position: 'absolute',
+                    inset: 0,
+                    pointerEvents: 'none',
+                }}
+            >
+                {/* Base gradient */}
+                <Box
+                    className="absolute inset-0 bg-gradient-to-br from-dark via-dark to-gray-900"
+                    sx={{
+                        position: 'absolute',
+                        inset: 0,
+                        background: 'linear-gradient(to bottom right, #09090b, #09090b, #111827)',
+                    }}
+                />
 
-                <div className="absolute top-0 left-0 w-[1500px] h-[1500px] rounded-full bg-green-600/5 blur-[100px] -translate-x-1/3 -translate-y-1/3"></div>
-                <div className="absolute bottom-0 right-0 w-[1200px] h-[1200px] rounded-full bg-blue-600/5 blur-[100px] translate-x-1/4 translate-y-1/4"></div>
-                <div className="absolute top-1/2 right-1/4 w-[1000px] h-[1000px] rounded-full bg-purple-600/5 blur-[80px] -translate-y-1/2"></div>
+                {/* Subtle accent gradients with blue */}
+                <Box
+                    className="absolute top-0 left-0 w-[800px] h-[800px] rounded-full bg-green-600/10 blur-[120px] -translate-x-1/2 -translate-y-1/2"
+                    sx={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '800px',
+                        height: '800px',
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(22, 163, 74, 0.1)',
+                        filter: 'blur(120px)',
+                        transform: 'translate(-50%, -50%)',
+                    }}
+                />
+                <Box
+                    className="absolute bottom-0 right-0 w-[600px] h-[600px] rounded-full bg-blue-500/8 blur-[100px] translate-x-1/3 translate-y-1/3"
+                    sx={{
+                        position: 'absolute',
+                        bottom: 0,
+                        right: 0,
+                        width: '600px',
+                        height: '600px',
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(59, 130, 246, 0.08)',
+                        filter: 'blur(100px)',
+                        transform: 'translate(33%, 33%)',
+                    }}
+                />
+                {/* Additional blue accent */}
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: '30%',
+                        right: '10%',
+                        width: '400px',
+                        height: '400px',
+                        borderRadius: '50%',
+                        backgroundColor: 'rgba(37, 99, 235, 0.06)',
+                        filter: 'blur(80px)',
+                    }}
+                />
 
-                <div className="absolute inset-0 bg-[url('/grid-pattern.svg')] bg-center opacity-[0.15]"></div>
+                {/* Grid pattern for texture */}
+                <Box
+                    className="absolute inset-0 bg-grid-pattern opacity-40"
+                    sx={{
+                        position: 'absolute',
+                        inset: 0,
+                        backgroundImage: `
+                            linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+                            linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px)
+                        `,
+                        backgroundSize: '40px 40px',
+                        opacity: 0.4,
+                    }}
+                />
 
-                <div className="absolute top-0 inset-x-0 h-40 bg-gradient-to-b from-green-500/10 to-transparent"></div>
+                {/* Top gradient fade with blue */}
+                <Box
+                    className="absolute top-0 inset-x-0 h-32 bg-gradient-to-b from-green-500/5 to-transparent"
+                    sx={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        height: '8rem',
+                        background: 'linear-gradient(to bottom, rgba(34, 197, 94, 0.05), rgba(59, 130, 246, 0.03), transparent)',
+                    }}
+                />
+            </Box>
 
-                <div className="absolute inset-0 bg-radial-gradient"></div>
-            </div>
+            {/* Bottom fade for smooth transition */}
+            <Box
+                className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-b from-transparent to-dark pointer-events-none"
+                sx={{
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    height: '10rem',
+                    background: 'linear-gradient(to bottom, transparent, #09090b)',
+                    pointerEvents: 'none',
+                }}
+            />
 
-            <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-b from-transparent to-dark pointer-events-none"></div>
-
-            <div className="container mx-auto px-6 z-10">
-                <motion.div
+            <Container maxWidth="lg" className="z-10" sx={{ position: 'relative', zIndex: 10 }}>
+                <Box
+                    component={motion.div}
                     variants={container}
                     initial="hidden"
                     animate="show"
-                    className="max-w-5xl mx-auto text-center"
+                    className="max-w-6xl mx-auto text-center"
+                    sx={{
+                        maxWidth: '72rem',
+                        margin: '0 auto',
+                        textAlign: 'center',
+                    }}
                 >
-                    <motion.div variants={item} className="mb-6">
-                        <span className="px-5 py-2.5 rounded-full bg-green-500/10 text-green-500 text-base font-medium">
-                            Developer Experience Reimagined
-                        </span>
-                    </motion.div>
-                    <motion.h1
+                    {/* Badge */}
+                    <Box
+                        component={motion.div}
                         variants={item}
-                        className="text-5xl md:text-7xl font-bold mb-8"
+                        sx={{ mb: 4 }}
                     >
-                        AI-Powered <span className="gradient-text">Developer Relations</span> Assistant
-                    </motion.h1>
+                        <Chip
+                            label="Developer Experience Reimagined"
+                            sx={{
+                                background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.08))',
+                                color: '#4ade80',
+                                fontSize: '1rem',
+                                fontWeight: 600,
+                                padding: '12px 24px',
+                                height: 'auto',
+                                border: '1px solid rgba(59, 130, 246, 0.3)',
+                                borderRadius: '9999px',
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.1)',
+                                '& .MuiChip-label': {
+                                    padding: 0,
+                                },
+                            }}
+                        />
+                    </Box>
 
-                    <motion.p
+                    {/* Hero Heading - Larger, Bolder */}
+                    <Typography
+                        component={motion.h1}
                         variants={item}
-                        className="text-xl md:text-2xl text-gray-400 mb-6 max-w-4xl mx-auto"
+                        variant="h1"
+                        className="font-extrabold mb-8 tracking-tight"
+                        sx={{
+                            fontSize: { xs: '3rem', md: '4.5rem', lg: '6rem' },
+                            fontWeight: 800,
+                            mb: 4,
+                            letterSpacing: '-0.03em',
+                            lineHeight: 1.1,
+                        }}
+                    >
+                        AI-Powered{' '}
+                        <Box
+                            component="span"
+                            className="gradient-text"
+                            sx={{
+                                background: 'linear-gradient(to right, #4ade80, #3b82f6, #22d3ee, #2563eb, #10b981)',
+                                WebkitBackgroundClip: 'text',
+                                WebkitTextFillColor: 'transparent',
+                                backgroundClip: 'text',
+                            }}
+                        >
+                            Developer Relations
+                        </Box>{' '}
+                        Assistant
+                    </Typography>
+
+                    {/* Description - Better spacing and readability */}
+                    <Typography
+                        component={motion.p}
+                        variants={item}
+                        variant="h6"
+                        className="text-gray-300 mb-10 max-w-4xl mx-auto leading-relaxed"
+                        sx={{
+                            fontSize: { xs: '1.125rem', md: '1.25rem', lg: '1.5rem' },
+                            color: 'rgba(209, 213, 219, 1)',
+                            mb: 5,
+                            maxWidth: '56rem',
+                            marginX: 'auto',
+                            lineHeight: 1.75,
+                        }}
                     >
                         Devr.AI revolutionizes open-source community management by automating engagement,
                         streamlining onboarding, and delivering real-time project updates across Discord,
-                        Slack, GitHub, CLI, Web Widget, and more. <br />
-                        <span className="text-primary font-semibold">Personalized, multi-platform, and analytics-driven.</span>
-                    </motion.p>
-                    <motion.div
+                        Slack, GitHub, CLI, Web Widget, and more.
+                        <br />
+                        <Box
+                            component="span"
+                            className="text-primary font-semibold mt-2 inline-block"
+                            sx={{
+                                color: '#22c55e',
+                                fontWeight: 600,
+                                marginTop: '0.5rem',
+                                display: 'inline-block',
+                            }}
+                        >
+                            Personalized, multi-platform, and analytics-driven.
+                        </Box>
+                    </Typography>
+
+                    {/* CTAs - Enhanced styling */}
+                    <Stack
+                        component={motion.div}
                         variants={item}
-                        className="flex flex-col sm:flex-row gap-5 justify-center mb-6"
+                        direction={{ xs: 'column', sm: 'row' }}
+                        spacing={3}
+                        justifyContent="center"
+                        sx={{ mb: 8 }}
                     >
-                        <a href="#waitlist" className="btn-primary flex items-center justify-center gap-2 text-lg py-4 px-8">
-                            <Users size={20} />
+                        <Button
+                            component="a"
+                            href="#waitlist"
+                            variant="contained"
+                            startIcon={<UsersIcon />}
+                            className="btn-primary"
+                            sx={{
+                                background: 'linear-gradient(135deg, #22c55e 0%, #3b82f6 50%, #16a34a 100%)',
+                                backgroundSize: '200% auto',
+                                color: 'white',
+                                fontWeight: 600,
+                                fontSize: '1.125rem',
+                                padding: '16px 32px',
+                                borderRadius: '12px',
+                                textTransform: 'none',
+                                boxShadow: '0 4px 14px 0 rgba(34, 197, 94, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                                border: '1px solid rgba(34, 197, 94, 0.4)',
+                                textDecoration: 'none',
+                                transition: 'all 0.3s ease',
+                                '&:hover': {
+                                    backgroundPosition: 'right center',
+                                    boxShadow: '0 12px 32px 0 rgba(59, 130, 246, 0.4), 0 6px 16px 0 rgba(34, 197, 94, 0.3)',
+                                    transform: 'translateY(-3px) scale(1.02)',
+                                    borderColor: 'rgba(59, 130, 246, 0.5)',
+                                },
+                            }}
+                        >
                             Join the Waitlist
-                        </a>
-                        <a href="#features" className="btn-secondary text-lg py-4 px-8">
+                        </Button>
+                        <Button
+                            component="a"
+                            href="#features"
+                            variant="outlined"
+                            startIcon={<ExploreIcon />}
+                            className="btn-secondary"
+                            sx={{
+                                background: 'linear-gradient(135deg, rgba(39, 39, 42, 1) 0%, rgba(24, 24, 27, 1) 100%)',
+                                color: 'white',
+                                fontWeight: 600,
+                                fontSize: '1.125rem',
+                                padding: '16px 32px',
+                                borderRadius: '12px',
+                                textTransform: 'none',
+                                border: '1px solid rgba(63, 63, 70, 1)',
+                                boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)',
+                                textDecoration: 'none',
+                                '&:hover': {
+                                    background: 'linear-gradient(135deg, rgba(63, 63, 70, 1) 0%, rgba(39, 39, 42, 1) 100%)',
+                                    borderColor: 'rgba(82, 82, 91, 1)',
+                                    boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.1)',
+                                    transform: 'translateY(-3px) scale(1.02)',
+                                },
+                            }}
+                        >
                             Explore Features
-                        </a>
-                    </motion.div>
+                        </Button>
+                    </Stack>
 
-                    <motion.div
+                    {/* Dashboard Preview - Enhanced presentation */}
+                    <Box
+                        component={motion.div}
                         variants={item}
                         className="max-w-6xl mx-auto"
+                        sx={{
+                            maxWidth: '72rem',
+                            marginX: 'auto',
+                        }}
                     >
-                        <div className="relative rounded-xl overflow-hidden border border-gray-800 shadow-2xl">
-                            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-dark z-10"></div>
-                            <img
+                        <Box
+                            className="relative rounded-2xl overflow-hidden border border-gray-700 shadow-2xl elevation-xl interactive-lift"
+                            sx={{
+                                position: 'relative',
+                                borderRadius: '16px',
+                                overflow: 'hidden',
+                                border: '1px solid rgba(63, 63, 70, 1)',
+                                boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                                '&:hover': {
+                                    transform: 'translateY(-4px)',
+                                    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+                                },
+                            }}
+                        >
+                            {/* Subtle glow effect with blue */}
+                            <Box
+                                className="absolute inset-0 bg-gradient-to-t from-green-500/5 via-transparent to-transparent pointer-events-none"
+                                sx={{
+                                    position: 'absolute',
+                                    inset: 0,
+                                    background: 'linear-gradient(to top, rgba(34, 197, 94, 0.05), rgba(59, 130, 246, 0.03), transparent)',
+                                    pointerEvents: 'none',
+                                }}
+                            />
+
+                            {/* Bottom fade */}
+                            <Box
+                                className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-dark via-dark/50 to-transparent z-10"
+                                sx={{
+                                    position: 'absolute',
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    height: '8rem',
+                                    background: 'linear-gradient(to top, #09090b, rgba(9, 9, 11, 0.5), transparent)',
+                                    zIndex: 10,
+                                }}
+                            />
+
+                            <Box
+                                component="img"
                                 src="/dashboard_preview.png"
-                                alt="Devr.AI Dashboard"
+                                alt="Devr.AI Dashboard Preview"
                                 className="w-full h-auto"
+                                sx={{
+                                    width: '100%',
+                                    height: 'auto',
+                                    display: 'block',
+                                }}
                             />
-                        </div>
-                    </motion.div>
-                </motion.div>
-            </div>
-        </section>
+                        </Box>
+                    </Box>
+                </Box>
+            </Container>
+        </Box>
     );
 };
 
diff --git a/landing/src/components/sections/Waitlist.tsx b/landing/src/components/sections/Waitlist.tsx
index 5bf3f2b7..9808e924 100644
--- a/landing/src/components/sections/Waitlist.tsx
+++ b/landing/src/components/sections/Waitlist.tsx
@@ -1,13 +1,33 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import { toast } from 'react-hot-toast';
-import { Send, AlertCircle, CheckCircle, Sparkles } from 'lucide-react';
+import {
+    Box,
+    Container,
+    Typography,
+    TextField,
+    Select,
+    SelectChangeEvent,
+    MenuItem,
+    FormControl,
+    InputLabel,
+    Button,
+    Alert,
+    CircularProgress,
+    Stack,
+    Paper
+} from '@mui/material';
+import {
+    Send as SendIcon,
+    CheckCircle as CheckCircleIcon,
+    AutoAwesome as SparklesIcon
+} from '@mui/icons-material';
 
 const Waitlist: React.FC = () => {
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
   const [organization, setOrganization] = useState('');
-  const [role, setRole] = useState('');
+  const [role, setRole] = useState<string>('');
   const [suggestions, setSuggestions] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -67,13 +87,13 @@ const Waitlist: React.FC = () => {
 
       setSubmitted(true);
       toast.success('You have been added to the waitlist!');
-      
+
       setEmail('');
       setName('');
       setOrganization('');
       setRole('');
       setSuggestions('');
-      
+
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
       setError(errorMessage);
@@ -84,222 +104,634 @@ const Waitlist: React.FC = () => {
   };
 
   return (
-    <section id="waitlist" className="section relative overflow-hidden">
-      {/* Background decoration */}
-      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-3xl" />
-      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl" />
-      
-      <div className="container mx-auto px-6 relative z-10">
-        <div className="max-w-4xl mx-auto">
+    <Box
+      component="section"
+      id="waitlist"
+      className="section relative overflow-hidden"
+      sx={{
+        position: 'relative',
+        overflow: 'hidden',
+        py: { xs: 8, md: 12 },
+      }}
+    >
+      {/* Background decoration with blue */}
+      <Box
+        className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-3xl"
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          background: 'linear-gradient(to bottom right, rgba(34, 197, 94, 0.05), rgba(59, 130, 246, 0.03), transparent, rgba(6, 182, 212, 0.05))',
+          filter: 'blur(64px)',
+        }}
+      />
+      <Box
+        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl"
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '24rem',
+          height: '24rem',
+          background: 'linear-gradient(to right, rgba(34, 197, 94, 0.1), rgba(59, 130, 246, 0.08), rgba(6, 182, 212, 0.1))',
+          borderRadius: '50%',
+          filter: 'blur(64px)',
+        }}
+      />
+      {/* Additional blue accent */}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '20%',
+          right: '15%',
+          width: '20rem',
+          height: '20rem',
+          borderRadius: '50%',
+          background: 'linear-gradient(to right, rgba(37, 99, 235, 0.06), rgba(59, 130, 246, 0.04))',
+          filter: 'blur(60px)',
+        }}
+      />
+
+      <Container maxWidth="md" className="relative z-10" sx={{ position: 'relative', zIndex: 10 }}>
+        <Box className="max-w-4xl mx-auto">
           {/* Gradient border container */}
-          <div className="relative p-[1px] bg-gradient-to-r from-primary via-secondary to-primary rounded-2xl">
-            <div className="bg-dark/95 backdrop-blur-xl rounded-2xl p-8 md:p-12">
+          <Box
+            className="relative p-[1px] bg-gradient-to-r from-primary via-secondary to-primary rounded-2xl"
+            sx={{
+              position: 'relative',
+              padding: '1px',
+              background: 'linear-gradient(to right, #22c55e, #3b82f6, #06b6d4, #2563eb, #22c55e)',
+              borderRadius: '16px',
+            }}
+          >
+            <Paper
+              className="bg-dark/95 backdrop-blur-xl rounded-2xl p-8 md:p-12"
+              sx={{
+                backgroundColor: 'rgba(9, 9, 11, 0.95)',
+                backdropFilter: 'blur(24px)',
+                borderRadius: '15px',
+                padding: { xs: 4, md: 6 },
+              }}
+            >
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-                className="text-center mb-8"
               >
-                <div className="flex items-center justify-center gap-2 mb-4">
-                  <Sparkles className="text-primary" size={24} />
-                  <h2 className="text-3xl md:text-4xl font-bold">
-                    Join the <span className="gradient-text">Waitlist</span>
-                  </h2>
-                  <Sparkles className="text-secondary" size={24} />
-                </div>
-                <p className="text-gray-400 text-lg">
+                <Stack
+                  direction="row"
+                  spacing={1}
+                  justifyContent="center"
+                  alignItems="center"
+                  sx={{ mb: 2 }}
+                >
+                  <SparklesIcon sx={{ color: '#06b6d4', fontSize: 24 }} />
+                  <Typography
+                    variant="h3"
+                    component="h2"
+                    className="font-bold"
+                    sx={{
+                      fontWeight: 700,
+                      fontSize: { xs: '2rem', md: '2.5rem' },
+                      textAlign: 'center',
+                      color: '#06b6d4',
+                    }}
+                  >
+                    Join the{' '}
+                    <Box
+                      component="span"
+                      className="gradient-text"
+                      sx={{
+                        background: 'linear-gradient(to right, #06b6d4, #3b82f6, #22d3ee, #2563eb, #4ade80)',
+                        WebkitBackgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent',
+                        backgroundClip: 'text',
+                      }}
+                    >
+                      Waitlist
+                    </Box>
+                  </Typography>
+                  <SparklesIcon sx={{ color: '#06b6d4', fontSize: 24 }} />
+                </Stack>
+                <Typography
+                  variant="body1"
+                  className="text-gray-400 text-lg text-center"
+                  sx={{
+                    color: 'rgba(161, 161, 170, 1)',
+                    fontSize: '1.125rem',
+                    textAlign: 'center',
+                    mb: 4,
+                  }}
+                >
                   Be among the first to experience Devr.AI and revolutionize your open-source community management.
-                </p>
+                </Typography>
               </motion.div>
 
               {submitted ? (
                 <motion.div
                   initial={{ opacity: 0, scale: 0.95 }}
                   animate={{ opacity: 1, scale: 1 }}
-                  className="relative"
                 >
-                  <div className="absolute inset-0 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-xl blur-xl" />
-                  <div className="relative bg-gradient-to-r from-green-900/40 to-emerald-900/40 border border-green-500/50 rounded-xl p-8 text-center backdrop-blur-sm">
-                    <div className="flex items-center justify-center mb-4">
-                      <CheckCircle className="text-green-400" size={48} />
-                    </div>
-                    <h3 className="text-2xl font-bold text-green-300 mb-3">Welcome to the future!</h3>
-                    <p className="text-gray-300 text-lg">
-                      You're now on our exclusive waitlist. We'll notify you the moment early access becomes available.
-                    </p>
-                    <div className="mt-6 p-4 bg-green-900/20 rounded-lg border border-green-500/30">
-                      <p className="text-green-400 font-medium">
-                        🎉 Keep an eye on your inbox for exciting updates!
-                      </p>
-                    </div>
-                  </div>
+                  <Paper
+                    sx={{
+                      background: 'linear-gradient(to right, rgba(5, 150, 105, 0.4), rgba(16, 185, 129, 0.4))',
+                      border: '1px solid rgba(34, 197, 94, 0.5)',
+                      borderRadius: '12px',
+                      padding: 4,
+                      textAlign: 'center',
+                      backdropFilter: 'blur(8px)',
+                    }}
+                  >
+                    <Stack spacing={2} alignItems="center">
+                      <CheckCircleIcon sx={{ color: '#4ade80', fontSize: 48 }} />
+                      <Typography
+                        variant="h5"
+                        sx={{
+                          fontWeight: 700,
+                          color: '#86efac',
+                        }}
+                      >
+                        Welcome to the future!
+                      </Typography>
+                      <Typography
+                        variant="body1"
+                        sx={{
+                          color: 'rgba(209, 213, 219, 1)',
+                          fontSize: '1.125rem',
+                        }}
+                      >
+                        You're now on our exclusive waitlist. We'll notify you the moment early access becomes available.
+                      </Typography>
+                      <Box
+                        sx={{
+                          mt: 3,
+                          p: 2,
+                          backgroundColor: 'rgba(5, 150, 105, 0.2)',
+                          borderRadius: '8px',
+                          border: '1px solid rgba(34, 197, 94, 0.3)',
+                        }}
+                      >
+                        <Typography
+                          sx={{
+                            color: '#4ade80',
+                            fontWeight: 500,
+                          }}
+                        >
+                          🎉 Keep an eye on your inbox for exciting updates!
+                        </Typography>
+                      </Box>
+                    </Stack>
+                  </Paper>
                 </motion.div>
               ) : (
-                <motion.form
+                <Box
+                  component={motion.form}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ delay: 0.2 }}
                   onSubmit={handleSubmit}
-                  className="space-y-6"
+                  sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}
                 >
                   {error && (
                     <motion.div
                       initial={{ opacity: 0, x: -20 }}
                       animate={{ opacity: 1, x: 0 }}
-                      className="relative"
                     >
-                      <div className="absolute inset-0 bg-gradient-to-r from-red-500/20 to-orange-500/20 rounded-lg blur-sm" />
-                      <div className="relative bg-red-900/40 border border-red-500/50 rounded-lg p-4 flex items-start gap-3 backdrop-blur-sm">
-                        <AlertCircle className="shrink-0 mt-0.5 text-red-400" size={20} />
-                        <p className="text-red-300 font-medium">{error}</p>
-                      </div>
+                      <Alert
+                        severity="error"
+                        sx={{
+                          backgroundColor: 'rgba(127, 29, 29, 0.4)',
+                          border: '1px solid rgba(239, 68, 68, 0.5)',
+                          borderRadius: '8px',
+                          backdropFilter: 'blur(8px)',
+                          '& .MuiAlert-icon': {
+                            color: '#f87171',
+                          },
+                          '& .MuiAlert-message': {
+                            color: '#fca5a5',
+                            fontWeight: 500,
+                          },
+                        }}
+                      >
+                        {error}
+                      </Alert>
                     </motion.div>
                   )}
 
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <div className="space-y-2">
-                      <label htmlFor="name" className="block text-sm font-semibold text-gray-300 mb-2">
-                        Full Name
-                      </label>
-                      <div className="relative group">
-                        <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                        <input
-                          id="name"
-                          name="name"
-                          type="text"
-                          value={name}
-                          onChange={(e) => setName(e.target.value)}
-                          required
-                          placeholder="Enter your full name"
-                          className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
-                        />
-                      </div>
-                    </div>
+                  <Box className="grid md:grid-cols-2 gap-6" sx={{ display: 'grid', gridTemplateColumns: { md: '1fr 1fr' }, gap: 3 }}>
+                    <TextField
+                      id="name"
+                      name="name"
+                      label="Full Name"
+                      type="text"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      required
+                      placeholder="Enter your full name"
+                      fullWidth
+                      className="relative group"
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          backgroundColor: 'rgba(39, 39, 42, 0.8)',
+                          backdropFilter: 'blur(8px)',
+                          color: 'white',
+                          borderRadius: '12px',
+                          border: '1px solid rgba(63, 63, 70, 1)',
+                          transition: 'all 0.3s ease',
+                          '&:hover': {
+                            borderColor: 'rgba(82, 82, 91, 1)',
+                          },
+                          '&.Mui-focused': {
+                            borderColor: 'rgba(34, 197, 94, 0.5)',
+                            boxShadow: '0 0 0 2px rgba(34, 197, 94, 0.1)',
+                          },
+                          '& fieldset': {
+                            border: 'none',
+                          },
+                        },
+                        '& .MuiInputLabel-root': {
+                          color: 'rgba(209, 213, 219, 1)',
+                          fontWeight: 600,
+                          fontSize: '0.875rem',
+                          '&.Mui-focused': {
+                            color: 'rgba(34, 197, 94, 1)',
+                          },
+                        },
+                        '& .MuiInputBase-input': {
+                          color: 'white',
+                          '&::placeholder': {
+                            color: 'rgba(113, 113, 122, 1)',
+                            opacity: 1,
+                          },
+                        },
+                      }}
+                    />
 
-                    <div className="space-y-2">
-                      <label htmlFor="email" className="block text-sm font-semibold text-gray-300 mb-2">
-                        Email Address
-                      </label>
-                      <div className="relative group">
-                        <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                        <input
-                          id="email"
-                          name="email"
-                          type="email"
-                          value={email}
-                          onChange={(e) => setEmail(e.target.value)}
-                          required
-                          placeholder="your@email.com"
-                          className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
-                        />
-                      </div>
-                    </div>
-                  </div>
+                    <TextField
+                      id="email"
+                      name="email"
+                      label="Email Address"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      placeholder="your@email.com"
+                      fullWidth
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          backgroundColor: 'rgba(39, 39, 42, 0.8)',
+                          backdropFilter: 'blur(8px)',
+                          color: 'white',
+                          borderRadius: '12px',
+                          border: '1px solid rgba(63, 63, 70, 1)',
+                          transition: 'all 0.3s ease',
+                          '&:hover': {
+                            borderColor: 'rgba(82, 82, 91, 1)',
+                          },
+                          '&.Mui-focused': {
+                            borderColor: 'rgba(34, 197, 94, 0.5)',
+                            boxShadow: '0 0 0 2px rgba(34, 197, 94, 0.1)',
+                          },
+                          '& fieldset': {
+                            border: 'none',
+                          },
+                        },
+                        '& .MuiInputLabel-root': {
+                          color: 'rgba(209, 213, 219, 1)',
+                          fontWeight: 600,
+                          fontSize: '0.875rem',
+                          '&.Mui-focused': {
+                            color: 'rgba(34, 197, 94, 1)',
+                          },
+                        },
+                        '& .MuiInputBase-input': {
+                          color: 'white',
+                          '&::placeholder': {
+                            color: 'rgba(113, 113, 122, 1)',
+                            opacity: 1,
+                          },
+                        },
+                      }}
+                    />
+                  </Box>
 
-                  <div className="space-y-2">
-                    <label htmlFor="organization" className="block text-sm font-semibold text-gray-300 mb-2">
-                      Organization
-                    </label>
-                    <div className="relative group">
-                      <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                      <input
-                        id="organization"
-                        name="organization"
-                        type="text"
-                        value={organization}
-                        onChange={(e) => setOrganization(e.target.value)}
-                        required
-                        placeholder="Your company, university, or organization"
-                        className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
-                      />
-                    </div>
-                  </div>
+                  <TextField
+                    id="organization"
+                    name="organization"
+                    label="Organization"
+                    type="text"
+                    value={organization}
+                    onChange={(e) => setOrganization(e.target.value)}
+                    required
+                    placeholder="Your company, university, or organization"
+                    fullWidth
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        backgroundColor: 'rgba(39, 39, 42, 0.8)',
+                        backdropFilter: 'blur(8px)',
+                        color: 'white',
+                        borderRadius: '12px',
+                        border: '1px solid rgba(63, 63, 70, 1)',
+                        transition: 'all 0.3s ease',
+                        '&:hover': {
+                          borderColor: 'rgba(82, 82, 91, 1)',
+                        },
+                        '&.Mui-focused': {
+                          borderColor: 'rgba(59, 130, 246, 0.5)',
+                          boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.15), 0 0 0 4px rgba(34, 197, 94, 0.1)',
+                        },
+                        '& fieldset': {
+                          border: 'none',
+                        },
+                      },
+                      '& .MuiInputLabel-root': {
+                        color: 'rgba(209, 213, 219, 1)',
+                        fontWeight: 600,
+                        fontSize: '0.875rem',
+                        '&.Mui-focused': {
+                          color: 'rgba(59, 130, 246, 1)',
+                        },
+                      },
+                      '& .MuiInputBase-input': {
+                        color: 'white',
+                        '&::placeholder': {
+                          color: 'rgba(113, 113, 122, 1)',
+                          opacity: 1,
+                        },
+                      },
+                    }}
+                  />
 
-                  <div className="space-y-2">
-                    <label htmlFor="role" className="block text-sm font-semibold text-gray-300 mb-2">
-                      Your Role
-                    </label>
-                    <div className="relative group">
-                      <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                      <select
-                        id="role"
-                        name="role"
-                        value={role}
-                        onChange={(e) => setRole(e.target.value)}
-                        required
-                        className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white backdrop-blur-sm transition-all duration-300 hover:border-gray-600"
-                      >
-                        <option value="" className="bg-dark-card">Select your role</option>
-                        {roleOptions.map((option) => (
-                          <option key={option} value={option} className="bg-dark-card">
-                            {option}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
+                  <FormControl
+                    fullWidth
+                    required
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        backgroundColor: 'rgba(39, 39, 42, 0.8)',
+                        backdropFilter: 'blur(8px)',
+                        color: 'white',
+                        borderRadius: '12px',
+                        border: '1px solid rgba(63, 63, 70, 1)',
+                        transition: 'all 0.3s ease',
+                        '&:hover': {
+                          borderColor: 'rgba(82, 82, 91, 1)',
+                        },
+                        '&.Mui-focused': {
+                          borderColor: 'rgba(59, 130, 246, 0.5)',
+                          boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.15), 0 0 0 4px rgba(34, 197, 94, 0.1)',
+                        },
+                        '& fieldset': {
+                          border: 'none',
+                        },
+                      },
+                      '& .MuiInputLabel-root': {
+                        color: 'rgba(209, 213, 219, 1)',
+                        fontWeight: 600,
+                        fontSize: '0.875rem',
+                        '&.Mui-focused': {
+                          color: 'rgba(59, 130, 246, 1)',
+                        },
+                      },
+                      '& .MuiSelect-select': {
+                        color: 'white',
+                        padding: '16px 14px',
+                      },
+                      '& .MuiSelect-icon': {
+                        color: 'rgba(161, 161, 170, 1)',
+                      },
+                    }}
+                  >
+                    <InputLabel id="role-label">Your Role</InputLabel>
+                    <Select
+                      id="role"
+                      name="role"
+                      labelId="role-label"
+                      value={role}
+                      onChange={(e: SelectChangeEvent<string>) => setRole(e.target.value)}
+                      required
+                      MenuProps={{
+                        PaperProps: {
+                          sx: {
+                            backgroundColor: 'rgba(39, 39, 42, 1)',
+                            border: '1px solid rgba(63, 63, 70, 1)',
+                            borderRadius: '12px',
+                            mt: 1,
+                            '& .MuiMenuItem-root': {
+                              color: 'white',
+                              '&:hover': {
+                                backgroundColor: 'rgba(63, 63, 70, 1)',
+                              },
+                              '&.Mui-selected': {
+                                backgroundColor: 'rgba(34, 197, 94, 0.2)',
+                                '&:hover': {
+                                  backgroundColor: 'rgba(34, 197, 94, 0.3)',
+                                },
+                              },
+                            },
+                          },
+                        },
+                      }}
+                    >
+                      <MenuItem value="">
+                        <em>Select your role</em>
+                      </MenuItem>
+                      {roleOptions.map((option) => (
+                        <MenuItem key={option} value={option}>
+                          {option}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+
+                  <TextField
+                    id="suggestions"
+                    name="suggestions"
+                    label={
+                      <>
+                        Suggestions & Comments{' '}
+                        <Box component="span" sx={{ color: 'rgba(113, 113, 122, 1)', fontWeight: 400 }}>
+                          (optional)
+                        </Box>
+                      </>
+                    }
+                    multiline
+                    rows={4}
+                    value={suggestions}
+                    onChange={(e) => setSuggestions(e.target.value)}
+                    placeholder="Share your thoughts, feature requests, or any feedback..."
+                    fullWidth
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        backgroundColor: 'rgba(39, 39, 42, 0.8)',
+                        backdropFilter: 'blur(8px)',
+                        color: 'white',
+                        borderRadius: '12px',
+                        border: '1px solid rgba(63, 63, 70, 1)',
+                        transition: 'all 0.3s ease',
+                        '&:hover': {
+                          borderColor: 'rgba(82, 82, 91, 1)',
+                        },
+                        '&.Mui-focused': {
+                          borderColor: 'rgba(59, 130, 246, 0.5)',
+                          boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.15), 0 0 0 4px rgba(34, 197, 94, 0.1)',
+                        },
+                        '& fieldset': {
+                          border: 'none',
+                        },
+                      },
+                      '& .MuiInputLabel-root': {
+                        color: 'rgba(209, 213, 219, 1)',
+                        fontWeight: 600,
+                        fontSize: '0.875rem',
+                        '&.Mui-focused': {
+                          color: 'rgba(59, 130, 246, 1)',
+                        },
+                      },
+                      '& .MuiInputBase-input': {
+                        color: 'white',
+                        '&::placeholder': {
+                          color: 'rgba(113, 113, 122, 1)',
+                          opacity: 1,
+                        },
+                      },
+                    }}
+                  />
+
+                  <Stack
+                    direction="column"
+                    spacing={2}
+                    alignItems="center"
+                    sx={{ pt: 2 }}
+                  >
+                    {/* Enhanced Button with Premium Design */}
+                    <motion.div
+                      className="relative group w-full md:w-auto"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      {/* Animated gradient border */}
+                      <Box
+                        className="absolute -inset-0.5 bg-gradient-to-r from-primary via-secondary to-primary rounded-xl blur opacity-75 group-hover:opacity-100 transition duration-300 group-hover:duration-200 animate-gradient-xy"
+                        sx={{
+                          position: 'absolute',
+                          inset: '-2px',
+                          background: 'linear-gradient(to right, #22c55e, #3b82f6, #06b6d4, #2563eb, #22c55e)',
+                          borderRadius: '12px',
+                          filter: 'blur(4px)',
+                          opacity: 0.75,
+                          transition: 'opacity 0.3s ease',
+                          '&:hover': {
+                            opacity: 1,
+                          },
+                        }}
+                      />
 
-                  <div className="space-y-2">
-                    <label htmlFor="suggestions" className="block text-sm font-semibold text-gray-300 mb-2">
-                      Suggestions & Comments <span className="text-gray-500 font-normal">(optional)</span>
-                    </label>
-                    <div className="relative group">
-                      <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                      <textarea
-                        id="suggestions"
-                        name="suggestions"
-                        value={suggestions}
-                        onChange={(e) => setSuggestions(e.target.value)}
-                        placeholder="Share your thoughts, feature requests, or any feedback..."
-                        className="relative w-full px-4 py-4 bg-dark-card/80 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-white placeholder-gray-500 backdrop-blur-sm transition-all duration-300 hover:border-gray-600 resize-none"
-                        rows={4}
+                      {/* Glow effect on hover */}
+                      <Box
+                        className="absolute -inset-1 bg-gradient-to-r from-primary/50 to-secondary/50 rounded-xl blur-xl opacity-0 group-hover:opacity-70 transition-opacity duration-500"
+                        sx={{
+                          position: 'absolute',
+                          inset: '-4px',
+                          background: 'linear-gradient(to right, rgba(34, 197, 94, 0.5), rgba(59, 130, 246, 0.4), rgba(6, 182, 212, 0.5))',
+                          borderRadius: '12px',
+                          filter: 'blur(24px)',
+                          opacity: 0,
+                          transition: 'opacity 0.5s ease',
+                          '&:hover': {
+                            opacity: 0.7,
+                          },
+                        }}
                       />
-                    </div>
-                  </div>
 
-                  <div className="flex flex-col items-center space-y-4 pt-4">
-                    <div className="relative group">
-                      <div className="absolute inset-0 bg-gradient-to-r from-primary to-secondary rounded-xl blur-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300" />
-                      <button
-                        type="submit"
-                        disabled={submitting}
-                        className="relative w-full md:w-auto bg-gradient-to-r from-black via-green-500 to-black hover:from-black hover:via-green-400 hover:to-black text-white font-bold py-4 px-8 rounded-xl flex items-center justify-center gap-3 min-w-[250px] transition-all duration-500 ease-in-out transform hover:scale-105 hover:shadow-2xl hover:shadow-green-500/25 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none shadow-lg active:scale-95"
+                      {/* Button container with glassmorphism */}
+                      <Box sx={{ position: 'relative' }}>
+                        <Button
+                          type="submit"
+                          disabled={submitting}
+                          variant="contained"
+                          startIcon={
+                            submitting ? (
+                              <CircularProgress size={20} sx={{ color: 'white' }} />
+                            ) : (
+                              <SendIcon />
+                            )
+                          }
+                          endIcon={!submitting && <SparklesIcon sx={{ fontSize: 16, opacity: 0.8 }} />}
+                          className="relative w-full md:w-auto bg-gradient-to-r from-primary via-secondary to-primary text-white font-bold py-4 px-10 rounded-xl min-w-[280px] shadow-2xl shadow-primary/25 disabled:opacity-50 disabled:cursor-not-allowed disabled:grayscale overflow-hidden group/btn"
+                          sx={{
+                            background: 'linear-gradient(to right, #22c55e, #3b82f6, #06b6d4, #2563eb, #22c55e)',
+                            backgroundSize: '200% auto',
+                            color: 'white',
+                            fontWeight: 700,
+                            padding: '16px 40px',
+                            borderRadius: '12px',
+                            minWidth: '280px',
+                            boxShadow: '0 25px 50px -12px rgba(34, 197, 94, 0.25), 0 0 30px rgba(59, 130, 246, 0.15)',
+                            textTransform: 'none',
+                            fontSize: '1rem',
+                            letterSpacing: '0.025em',
+                            position: 'relative',
+                            overflow: 'hidden',
+                            '&:hover': {
+                              backgroundPosition: 'right center',
+                              boxShadow: '0 25px 50px -12px rgba(59, 130, 246, 0.4), 0 0 40px rgba(34, 197, 94, 0.3)',
+                            },
+                            '&:disabled': {
+                              opacity: 0.5,
+                              cursor: 'not-allowed',
+                              filter: 'grayscale(100%)',
+                            },
+                            '&::before': {
+                              content: '""',
+                              position: 'absolute',
+                              inset: 0,
+                              background: 'linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent)',
+                              transform: 'translateX(-100%)',
+                              transition: 'transform 1s ease',
+                            },
+                            '&:hover::before': {
+                              transform: 'translateX(100%)',
+                            },
+                          }}
+                        >
+                          {submitting ? 'Joining Waitlist...' : 'Join Waitlist'}
+                        </Button>
+                      </Box>
+                    </motion.div>
+
+                    <Stack spacing={1} alignItems="center" sx={{ textAlign: 'center' }}>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          color: 'rgba(161, 161, 170, 1)',
+                          fontSize: '0.875rem',
+                        }}
                       >
-                        {submitting ? (
-                          <>
-                            <motion.div
-                              animate={{ rotate: 360 }}
-                              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-                              className="w-5 h-5 border-2 border-white border-t-transparent rounded-full"
-                            />
-                            <span>Joining Waitlist...</span>
-                          </>
-                        ) : (
-                          <>
-                            <Send size={20} />
-                            <span>Join Waitlist</span>
-                          </>
-                        )}
-                      </button>
-                    </div>
-                    
-                    <div className="text-center space-y-2">
-                      <p className="text-sm text-gray-400">
                         🚀 We'll notify you when early access becomes available
-                      </p>
-                      <p className="text-xs text-gray-500">
-                        Join <span className="text-primary font-semibold">1000+</span> developers already on the list
-                      </p>
-                    </div>
-                  </div>
-                </motion.form>
+                      </Typography>
+                      <Typography
+                        variant="caption"
+                        sx={{
+                          color: 'rgba(113, 113, 122, 1)',
+                          fontSize: '0.75rem',
+                        }}
+                      >
+                        Join{' '}
+                        <Box component="span" sx={{ color: '#22c55e', fontWeight: 600 }}>
+                          1000+
+                        </Box>{' '}
+                        developers already on the list
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                </Box>
               )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
+            </Paper>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
   );
 };
 
diff --git a/landing/src/components/ui/Button.tsx b/landing/src/components/ui/Button.tsx
new file mode 100644
index 00000000..50d4f840
--- /dev/null
+++ b/landing/src/components/ui/Button.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface ButtonProps {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary';
+    href?: string;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    className?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+    children,
+    variant = 'primary',
+    href,
+    onClick,
+    type = 'button',
+    disabled = false,
+    className = '',
+    startIcon,
+    endIcon,
+    fullWidth = false,
+}) => {
+    const baseStyles = `
+    relative overflow-hidden
+    px-8 py-4 rounded-xl
+    font-semibold text-lg
+    inline-flex items-center justify-center gap-3
+    transition-all duration-500 ease-out
+    ${fullWidth ? 'w-full' : ''}
+    ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+    ${className}
+  `;
+
+    const variantStyles = {
+        primary: `
+      bg-gradient-to-br from-green-500 to-green-600
+      text-white
+      border border-green-500/40
+      shadow-[0_4px_14px_0_rgba(34,197,94,0.3),0_1px_3px_0_rgba(0,0,0,0.1)]
+      hover:shadow-[0_12px_32px_0_rgba(34,197,94,0.45),0_6px_16px_0_rgba(34,197,94,0.3)]
+      hover:border-green-500/60
+      active:shadow-[0_4px_12px_0_rgba(34,197,94,0.3)]
+    `,
+        secondary: `
+      bg-gradient-to-br from-gray-800 to-gray-900
+      text-white
+      border border-gray-700
+      shadow-[0_2px_8px_0_rgba(0,0,0,0.15),inset_0_1px_0_0_rgba(255,255,255,0.05)]
+      hover:shadow-[0_6px_20px_0_rgba(0,0,0,0.25),inset_0_1px_0_0_rgba(255,255,255,0.1)]
+      hover:border-gray-600
+      active:shadow-[0_2px_8px_0_rgba(0,0,0,0.15)]
+    `,
+    };
+
+    const content = (
+        <>
+            {/* Background gradient overlay */}
+            <span
+                className={`
+          absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500
+          ${variant === 'primary'
+                        ? 'bg-gradient-to-br from-green-400 to-green-500'
+                        : 'bg-gradient-to-br from-gray-700 to-gray-800'
+                    }
+        `}
+            />
+
+            {/* Shimmer effect */}
+            <span
+                className={`
+          absolute inset-0 -translate-x-full group-hover:translate-x-full
+          bg-gradient-to-r from-transparent via-white/20 to-transparent
+          transition-transform duration-700 pointer-events-none
+        `}
+            />
+
+            {/* Content */}
+            <span className="relative z-10 flex items-center gap-3">
+                {startIcon && <span>{startIcon}</span>}
+                <span>{children}</span>
+                {endIcon && <span>{endIcon}</span>}
+            </span>
+        </>
+    );
+
+    const combinedStyles = `${baseStyles} ${variantStyles[variant]}`;
+
+    const handleAnchorClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.();
+    };
+
+    if (href) {
+        return (
+            <motion.a
+                href={href}
+                onClick={handleAnchorClick}
+                className={`${combinedStyles} group`}
+                tabIndex={disabled ? -1 : undefined}
+                aria-disabled={disabled}
+                whileHover={!disabled ? { y: -3, scale: 1.02 } : {}}
+                whileTap={!disabled ? { y: -1, scale: 1 } : {}}
+            >
+                {content}
+            </motion.a>
+        );
+    }
+
+    return (
+        <motion.button
+            type={type}
+            onClick={onClick}
+            disabled={disabled}
+            className={`${combinedStyles} group`}
+            whileHover={!disabled ? { y: -3, scale: 1.02 } : {}}
+            whileTap={!disabled ? { y: -1, scale: 1 } : {}}
+        >
+            {content}
+        </motion.button>
+    );
+};
+
+export default Button;
diff --git a/landing/src/index.css b/landing/src/index.css
index 31f5e082..290c51ca 100644
--- a/landing/src/index.css
+++ b/landing/src/index.css
@@ -1,61 +1,379 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* 
+   CSS CUSTOM PROPERTIES (Design Tokens)
+*/
+:root {
+  /* Colors - Primary */
+  --color-primary-400: #4ade80;
+  --color-primary-500: #22c55e;
+  --color-primary-600: #16a34a;
+  --color-primary-700: #15803d;
+  
+  /* Colors - Neutrals */
+  --color-gray-950: #09090b;
+  --color-gray-900: #18181b;
+  --color-gray-800: #27272a;
+  --color-gray-700: #3f3f46;
+  --color-gray-600: #52525b;
+  --color-gray-500: #71717a;
+  --color-gray-400: #a1a1aa;
+  --color-gray-300: #d4d4d8;
+  
+  /* Spacing */
+  --spacing-section-y: 5rem;
+  --spacing-section-x: 1.5rem;
+  
+  /* Shadows - Elevation */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-glow: 0 0 20px rgba(34, 197, 94, 0.25);
+  --shadow-glow-strong: 0 0 30px rgba(34, 197, 94, 0.4);
+  
+  /* Border Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 768px) {
+  :root {
+    --spacing-section-y: 8rem;
+    --spacing-section-x: 2rem;
+  }
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   @apply bg-dark text-white antialiased;
+  font-feature-settings: 'cv11', 'ss01';
+  font-variation-settings: 'opsz' 32;
+}
+
+/* ============================================
+   TYPOGRAPHY SCALE
+   ============================================ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
 }
 
+h1 {
+  @apply text-5xl md:text-6xl lg:text-7xl xl:text-8xl;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+h2 {
+  @apply text-3xl md:text-4xl lg:text-5xl;
+  font-weight: 700;
+}
+
+h3 {
+  @apply text-2xl md:text-3xl;
+  font-weight: 600;
+}
+
+h4 {
+  @apply text-xl md:text-2xl;
+  font-weight: 600;
+}
+
+h5 {
+  @apply text-lg md:text-xl;
+  font-weight: 600;
+}
+
+h6 {
+  @apply text-base md:text-lg;
+  font-weight: 600;
+}
+
+p {
+  @apply text-base md:text-lg leading-relaxed;
+}
+
+/* ============================================
+   UTILITY CLASSES
+   ============================================ */
+
+/* Gradient Text */
 .gradient-text {
-  @apply bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent;
+  @apply bg-gradient-to-r from-green-400 via-cyan-400 to-emerald-500 bg-clip-text text-transparent;
 }
 
+/* Cards */
 .card {
-  @apply bg-dark-card border border-gray-700 rounded-xl p-6 transition-all hover:border-green-500;
+  @apply bg-dark-card border border-gray-700 rounded-xl p-6 transition-all duration-300;
+  box-shadow: var(--shadow-sm);
 }
 
+.card:hover {
+  @apply border-green-500/50;
+  box-shadow: var(--shadow-md), var(--shadow-glow);
+  transform: translateY(-2px);
+}
+
+/* Buttons */
 .btn-primary {
-  @apply px-6 py-3 rounded-lg bg-primary hover:bg-primary-hover transition-all text-white font-medium;
+  @apply px-8 py-4 rounded-xl text-white font-semibold text-lg relative overflow-hidden;
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(34, 197, 94, 0.4);
+}
+
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-500) 100%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  z-index: -1;
+}
+
+/* Shimmer effect for primary button */
+.btn-primary::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.6s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.btn-primary:hover {
+  box-shadow: 0 12px 32px 0 rgba(34, 197, 94, 0.45), 0 6px 16px 0 rgba(34, 197, 94, 0.3);
+  transform: translateY(-3px) scale(1.02);
+  border-color: rgba(34, 197, 94, 0.6);
+}
+
+.btn-primary:hover::before {
+  opacity: 1;
+}
+
+.btn-primary:hover::after {
+  left: 100%;
+}
+
+.btn-primary:active {
+  transform: translateY(-1px) scale(1);
+  box-shadow: 0 4px 12px 0 rgba(34, 197, 94, 0.3);
+}
+
+/* Ensure button content stays on top */
+.btn-primary > *,
+.btn-primary svg,
+.btn-primary span {
+  position: relative;
+  z-index: 10;
 }
 
 .btn-secondary {
-  @apply px-6 py-3 rounded-lg bg-dark-lighter hover:bg-gray-800 transition-all text-white font-medium border border-gray-700;
+  @apply px-8 py-4 rounded-xl text-white font-semibold text-lg relative overflow-hidden;
+  background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
+  border: 1px solid var(--color-gray-700);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-secondary::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, var(--color-gray-700) 0%, var(--color-gray-800) 100%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  z-index: -1;
+}
+
+/* Shimmer effect for secondary button */
+.btn-secondary::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.6s ease;
+  pointer-events: none;
+  z-index: 0;
 }
 
+.btn-secondary:hover {
+  border-color: var(--color-gray-600);
+  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-3px) scale(1.02);
+}
+
+.btn-secondary:hover::before {
+  opacity: 1;
+}
+
+.btn-secondary:hover::after {
+  left: 100%;
+}
+
+.btn-secondary:active {
+  transform: translateY(-1px) scale(1);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+}
+
+/* Ensure button content stays on top */
+.btn-secondary > *,
+.btn-secondary svg,
+.btn-secondary span {
+  position: relative;
+  z-index: 10;
+}
+
+
+/* Sections */
 .section {
-  @apply py-12 md:py-20;
+  padding-top: var(--spacing-section-y);
+  padding-bottom: var(--spacing-section-y);
+}
+
+/* ============================================
+   ELEVATION UTILITIES
+   ============================================ */
+.elevation-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.elevation-md {
+  box-shadow: var(--shadow-md);
+}
+
+.elevation-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.elevation-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+/* ============================================
+   INTERACTION UTILITIES (CSS-only)
+   ============================================ */
+.interactive-lift {
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.interactive-lift:hover {
+  transform: translateY(-4px);
+}
+
+.interactive-glow {
+  transition: box-shadow var(--transition-slow);
+}
+
+.interactive-glow:hover {
+  box-shadow: var(--shadow-glow);
+}
+
+.interactive-scale {
+  transition: transform var(--transition-base);
+}
+
+.interactive-scale:hover {
+  transform: scale(1.05);
 }
 
-.hover-lift {
-  @apply transition-transform duration-300;
+.interactive-border {
+  transition: border-color var(--transition-base);
 }
 
-.hover-lift:hover {
-  transform: translateY(-5px);
+.interactive-border:hover {
+  @apply border-primary;
 }
 
-.radial-gradient-bg {
-  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.15), transparent 50%);
+/* ============================================
+   FOCUS STATES (Accessibility)
+   ============================================ */
+a:focus-visible,
+button:focus-visible {
+  @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-dark;
+  border-radius: var(--radius-md);
 }
-/* Webkit Scrollbar Styling */
+
+/* ============================================
+   SCROLLBAR STYLING
+   ============================================ */
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #000; /* Optional: light background */
+  background: var(--color-gray-950);
   border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(to bottom, #167a16, #171787); /* Green to blue */
+  background: linear-gradient(to bottom, var(--color-primary-600), var(--color-primary-700));
   border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(to bottom, #167a16, #171787);
+  background: linear-gradient(to bottom, var(--color-primary-500), var(--color-primary-600));
+}
+
+/* ============================================
+   BACKGROUND PATTERNS
+   ============================================ */
+.bg-radial-gradient {
+  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.1), transparent 70%);
+}
+
+.bg-grid-pattern {
+  background-image: 
+    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+@keyframes gradient-xy {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient-xy {
+  background-size: 200% auto;
+  animation: gradient-xy 3s ease infinite;
 }
\ No newline at end of file
diff --git a/landing/tailwind.config.js b/landing/tailwind.config.js
index a77198ce..5878ff52 100644
--- a/landing/tailwind.config.js
+++ b/landing/tailwind.config.js
@@ -7,18 +7,76 @@ export default {
                 primary: {
                     DEFAULT: '#22c55e', // green-500
                     hover: '#16a34a', // green-600
+                    light: '#4ade80', // green-400
+                    dark: '#15803d', // green-700
+                },
+                secondary: {
+                    DEFAULT: '#06b6d4', // cyan-500 (turquoise)
+                    hover: '#0891b2', // cyan-600
+                    light: '#22d3ee', // cyan-400
+                    dark: '#0e7490', // cyan-700
                 },
                 dark: {
                     DEFAULT: '#09090b', // gray-950
                     lighter: '#18181b', // gray-900
                     card: '#27272a', // gray-800
                 },
+                gray: {
+                    950: '#09090b',
+                    900: '#18181b',
+                    800: '#27272a',
+                    700: '#3f3f46',
+                    600: '#52525b',
+                    500: '#71717a',
+                    400: '#a1a1aa',
+                    300: '#d4d4d8',
+                },
             },
             fontFamily: {
-                sans: ['Inter', 'system-ui', 'sans-serif'],
+                sans: [
+                    'Inter',
+                    '-apple-system',
+                    'BlinkMacSystemFont',
+                    'Segoe UI',
+                    'sans-serif',
+                ],
+            },
+            fontSize: {
+                '8xl': ['6rem', { lineHeight: '1', letterSpacing: '-0.03em' }],
+                '9xl': ['8rem', { lineHeight: '1', letterSpacing: '-0.03em' }],
+            },
+            boxShadow: {
+                sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+                xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+                glow: '0 0 20px rgba(34, 197, 94, 0.25)',
+                'glow-strong': '0 0 30px rgba(34, 197, 94, 0.4)',
+                'glow-lg':
+                    '0 0 40px rgba(34, 197, 94, 0.3), 0 0 80px rgba(34, 197, 94, 0.15)',
+                'glow-cyan': '0 0 20px rgba(6, 182, 212, 0.25)',
+                'glow-cyan-strong': '0 0 30px rgba(6, 182, 212, 0.4)',
+            },
+            spacing: {
+                18: '4.5rem',
+                22: '5.5rem',
+                26: '6.5rem',
+                30: '7.5rem',
+            },
+            borderRadius: {
+                '4xl': '2rem',
             },
             animation: {
                 'spin-slow': 'spin 8s linear infinite',
+                'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+            },
+            transitionDuration: {
+                400: '400ms',
+                600: '600ms',
+            },
+            backdropBlur: {
+                xs: '2px',
             },
         },
     },
diff --git a/poetry.lock b/poetry.lock
index 7d46dd61..e92be884 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1396,6 +1396,8 @@ files = [
     {file = "greenlet-3.2.4-cp310-cp310-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:c2ca18a03a8cfb5b25bc1cbe20f3d9a4c80d8c3b13ba3df49ac3961af0b1018d"},
     {file = "greenlet-3.2.4-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:9fe0a28a7b952a21e2c062cd5756d34354117796c6d9215a87f55e38d15402c5"},
     {file = "greenlet-3.2.4-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:8854167e06950ca75b898b104b63cc646573aa5fef1353d4508ecdd1ee76254f"},
+    {file = "greenlet-3.2.4-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:f47617f698838ba98f4ff4189aef02e7343952df3a615f847bb575c3feb177a7"},
+    {file = "greenlet-3.2.4-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:af41be48a4f60429d5cad9d22175217805098a9ef7c40bfef44f7669fb9d74d8"},
     {file = "greenlet-3.2.4-cp310-cp310-win_amd64.whl", hash = "sha256:73f49b5368b5359d04e18d15828eecc1806033db5233397748f4ca813ff1056c"},
     {file = "greenlet-3.2.4-cp311-cp311-macosx_11_0_universal2.whl", hash = "sha256:96378df1de302bc38e99c3a9aa311967b7dc80ced1dcc6f171e99842987882a2"},
     {file = "greenlet-3.2.4-cp311-cp311-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:1ee8fae0519a337f2329cb78bd7a8e128ec0f881073d43f023c7b8d4831d5246"},
@@ -1405,6 +1407,8 @@ files = [
     {file = "greenlet-3.2.4-cp311-cp311-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:2523e5246274f54fdadbce8494458a2ebdcdbc7b802318466ac5606d3cded1f8"},
     {file = "greenlet-3.2.4-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:1987de92fec508535687fb807a5cea1560f6196285a4cde35c100b8cd632cc52"},
     {file = "greenlet-3.2.4-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:55e9c5affaa6775e2c6b67659f3a71684de4c549b3dd9afca3bc773533d284fa"},
+    {file = "greenlet-3.2.4-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:c9c6de1940a7d828635fbd254d69db79e54619f165ee7ce32fda763a9cb6a58c"},
+    {file = "greenlet-3.2.4-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:03c5136e7be905045160b1b9fdca93dd6727b180feeafda6818e6496434ed8c5"},
     {file = "greenlet-3.2.4-cp311-cp311-win_amd64.whl", hash = "sha256:9c40adce87eaa9ddb593ccb0fa6a07caf34015a29bf8d344811665b573138db9"},
     {file = "greenlet-3.2.4-cp312-cp312-macosx_11_0_universal2.whl", hash = "sha256:3b67ca49f54cede0186854a008109d6ee71f66bd57bb36abd6d0a0267b540cdd"},
     {file = "greenlet-3.2.4-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:ddf9164e7a5b08e9d22511526865780a576f19ddd00d62f8a665949327fde8bb"},
@@ -1414,6 +1418,8 @@ files = [
     {file = "greenlet-3.2.4-cp312-cp312-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:3b3812d8d0c9579967815af437d96623f45c0f2ae5f04e366de62a12d83a8fb0"},
     {file = "greenlet-3.2.4-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:abbf57b5a870d30c4675928c37278493044d7c14378350b3aa5d484fa65575f0"},
     {file = "greenlet-3.2.4-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:20fb936b4652b6e307b8f347665e2c615540d4b42b3b4c8a321d8286da7e520f"},
+    {file = "greenlet-3.2.4-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:ee7a6ec486883397d70eec05059353b8e83eca9168b9f3f9a361971e77e0bcd0"},
+    {file = "greenlet-3.2.4-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:326d234cbf337c9c3def0676412eb7040a35a768efc92504b947b3e9cfc7543d"},
     {file = "greenlet-3.2.4-cp312-cp312-win_amd64.whl", hash = "sha256:a7d4e128405eea3814a12cc2605e0e6aedb4035bf32697f72deca74de4105e02"},
     {file = "greenlet-3.2.4-cp313-cp313-macosx_11_0_universal2.whl", hash = "sha256:1a921e542453fe531144e91e1feedf12e07351b1cf6c9e8a3325ea600a715a31"},
     {file = "greenlet-3.2.4-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:cd3c8e693bff0fff6ba55f140bf390fa92c994083f838fece0f63be121334945"},
@@ -1423,6 +1429,8 @@ files = [
     {file = "greenlet-3.2.4-cp313-cp313-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:23768528f2911bcd7e475210822ffb5254ed10d71f4028387e5a99b4c6699671"},
     {file = "greenlet-3.2.4-cp313-cp313-musllinux_1_1_aarch64.whl", hash = "sha256:00fadb3fedccc447f517ee0d3fd8fe49eae949e1cd0f6a611818f4f6fb7dc83b"},
     {file = "greenlet-3.2.4-cp313-cp313-musllinux_1_1_x86_64.whl", hash = "sha256:d25c5091190f2dc0eaa3f950252122edbbadbb682aa7b1ef2f8af0f8c0afefae"},
+    {file = "greenlet-3.2.4-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:6e343822feb58ac4d0a1211bd9399de2b3a04963ddeec21530fc426cc121f19b"},
+    {file = "greenlet-3.2.4-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:ca7f6f1f2649b89ce02f6f229d7c19f680a6238af656f61e0115b24857917929"},
     {file = "greenlet-3.2.4-cp313-cp313-win_amd64.whl", hash = "sha256:554b03b6e73aaabec3745364d6239e9e012d64c68ccd0b8430c64ccc14939a8b"},
     {file = "greenlet-3.2.4-cp314-cp314-macosx_11_0_universal2.whl", hash = "sha256:49a30d5fda2507ae77be16479bdb62a660fa51b1eb4928b524975b3bde77b3c0"},
     {file = "greenlet-3.2.4-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:299fd615cd8fc86267b47597123e3f43ad79c9d8a22bebdce535e53550763e2f"},
@@ -1430,6 +1438,8 @@ files = [
     {file = "greenlet-3.2.4-cp314-cp314-manylinux2014_s390x.manylinux_2_17_s390x.whl", hash = "sha256:b4a1870c51720687af7fa3e7cda6d08d801dae660f75a76f3845b642b4da6ee1"},
     {file = "greenlet-3.2.4-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:061dc4cf2c34852b052a8620d40f36324554bc192be474b9e9770e8c042fd735"},
     {file = "greenlet-3.2.4-cp314-cp314-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:44358b9bf66c8576a9f57a590d5f5d6e72fa4228b763d0e43fee6d3b06d3a337"},
+    {file = "greenlet-3.2.4-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:2917bdf657f5859fbf3386b12d68ede4cf1f04c90c3a6bc1f013dd68a22e2269"},
+    {file = "greenlet-3.2.4-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:015d48959d4add5d6c9f6c5210ee3803a830dce46356e3bc326d6776bde54681"},
     {file = "greenlet-3.2.4-cp314-cp314-win_amd64.whl", hash = "sha256:e37ab26028f12dbb0ff65f29a8d3d44a765c61e729647bf2ddfbbed621726f01"},
     {file = "greenlet-3.2.4-cp39-cp39-macosx_11_0_universal2.whl", hash = "sha256:b6a7c19cf0d2742d0809a4c05975db036fdff50cd294a93632d6a310bf9ac02c"},
     {file = "greenlet-3.2.4-cp39-cp39-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:27890167f55d2387576d1f41d9487ef171849ea0359ce1510ca6e06c8bece11d"},
@@ -1439,6 +1449,8 @@ files = [
     {file = "greenlet-3.2.4-cp39-cp39-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:c9913f1a30e4526f432991f89ae263459b1c64d1608c0d22a5c79c287b3c70df"},
     {file = "greenlet-3.2.4-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:b90654e092f928f110e0007f572007c9727b5265f7632c2fa7415b4689351594"},
     {file = "greenlet-3.2.4-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:81701fd84f26330f0d5f4944d4e92e61afe6319dcd9775e39396e39d7c3e5f98"},
+    {file = "greenlet-3.2.4-cp39-cp39-musllinux_1_2_aarch64.whl", hash = "sha256:28a3c6b7cd72a96f61b0e4b2a36f681025b60ae4779cc73c1535eb5f29560b10"},
+    {file = "greenlet-3.2.4-cp39-cp39-musllinux_1_2_x86_64.whl", hash = "sha256:52206cd642670b0b320a1fd1cbfd95bca0e043179c1d8a045f2c6109dfe973be"},
     {file = "greenlet-3.2.4-cp39-cp39-win32.whl", hash = "sha256:65458b409c1ed459ea899e939f0e1cdb14f58dbc803f2f93c5eab5694d32671b"},
     {file = "greenlet-3.2.4-cp39-cp39-win_amd64.whl", hash = "sha256:d2e685ade4dafd447ede19c31277a224a239a0a1a4eca4e6390efedf20260cfb"},
     {file = "greenlet-3.2.4.tar.gz", hash = "sha256:0dca0d95ff849f9a364385f36ab49f50065d76964944638be9691e1832e9f86d"},