diff --git a/.env.example b/.env.example
index 4d9c8ae..75d97cf 100644
--- a/.env.example
+++ b/.env.example
@@ -6,3 +6,7 @@ VITE_PUBLIC_WEB_BASE=http://localhost:5175
 # Production (see .env.production — used automatically by `npm run build`)
 # VITE_API_BASE_URL=https://api.eventbuzz.live/api
 # VITE_PUBLIC_WEB_BASE=https://web.eventbuzz.live
+
+# Landing page demo checkout (public ticket catalog)
+VITE_DEMO_EVENT_ID=6a620657ef2449311c51fd6b
+VITE_DEMO_TICKET_ID=6a6b37ba9ce2326fe3e591f6
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..10df967
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,4 @@
+VITE_API_BASE_URL=https://api.eventbuzz.live/api
+VITE_PUBLIC_WEB_BASE=https://web.eventbuzz.live
+VITE_DEMO_EVENT_ID=6a620657ef2449311c51fd6b
+VITE_DEMO_TICKET_ID=6a6b37ba9ce2326fe3e591f6
diff --git a/deploy.sh b/deploy.sh
index 616bb6c..e7be5c5 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,181 +1,3 @@
 #!/usr/bin/env bash
-#
-# EventBuzz production deploy
-#
-# Usage:
-#   ./deploy.sh              # backend + dashboard + visitor website + public web
-#   ./deploy.sh backend
-#   ./deploy.sh frontend
-#   ./deploy.sh website
-#   ./deploy.sh web
-#   ./deploy.sh all
-#
-# Requirements: ssh, rsync, npm, aws CLI (profile stratawiztech)
-#
-set -euo pipefail
-
-ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-SSH_KEY="${SSH_KEY:-$HOME/Documents/Keys/ravimac}"
-SSH_HOST="${SSH_HOST:-root@168.144.70.247}"
-BACKEND_REMOTE="${BACKEND_REMOTE:-/var/www/backend}"
-AWS_PROFILE="${AWS_PROFILE:-stratawiztech}"
-
-FRONTEND_DIR="$ROOT/frontend"
-EVENTBUZZ_DIR="$ROOT/eventbuzz"
-WEB_DIR="$ROOT/web"
-BACKEND_DIR="$ROOT/backend"
-
-S3_CONSOLE="s3://eventbuzzlive/console/"
-S3_WEBSITE="s3://eventbuzzlive/website/"
-S3_WEB="s3://eventbuzzlive/web/"
-
-# CloudFront distributions (console dashboard + visitor website + public web)
-CF_CONSOLE="${CF_CONSOLE:-E1QQM75X0JF0IU}"
-CF_WEBSITE="${CF_WEBSITE:-E3ORUQT7269RIM}"
-CF_WEB="${CF_WEB:-ETZS6Z42DG7I6}"
-
-log() { printf '\n\033[1;36m==>\033[0m %s\n' "$*"; }
-die() { printf '\033[1;31merror:\033[0m %s\n' "$*" >&2; exit 1; }
-
-ssh_cmd() {
-  ssh -i "$SSH_KEY" -o StrictHostKeyChecking=accept-new "$SSH_HOST" "$@"
-}
-
-rsync_ssh() {
-  rsync -avz -e "ssh -i $SSH_KEY -o StrictHostKeyChecking=accept-new" "$@"
-}
-
-invalidate_cloudfront() {
-  local distribution_id="$1"
-  local label="$2"
-  log "CloudFront invalidation ($label) → $distribution_id /*"
-  aws cloudfront create-invalidation \
-    --distribution-id "$distribution_id" \
-    --paths "/*" \
-    --profile "$AWS_PROFILE" \
-    --output text \
-    --query 'Invalidation.Id'
-}
-
-# Ensure dashboard / visitor builds use production API URLs (not localhost).
-apply_production_env() {
-  log "Applying production env for dashboard (frontend/.env.production)"
-  if [[ ! -f "$FRONTEND_DIR/.env.production" ]]; then
-    die "Missing $FRONTEND_DIR/.env.production — create it with production VITE_* URLs."
-  fi
-  # If a local .env exists, show what we're overriding for clarity
-  if [[ -f "$FRONTEND_DIR/.env" ]]; then
-    grep -E '^VITE_API_URL=' "$FRONTEND_DIR/.env.production" || true
-  fi
-
-  log "Applying production env for visitor site (eventbuzz/.env.production)"
-  if [[ ! -f "$EVENTBUZZ_DIR/.env.production" ]]; then
-    die "Missing $EVENTBUZZ_DIR/.env.production — create it with production VITE_* URLs."
-  fi
-  grep -E '^VITE_API_BASE_URL=' "$EVENTBUZZ_DIR/.env.production" || true
-
-  log "Applying production env for public web (web/.env.production)"
-  if [[ ! -f "$WEB_DIR/.env.production" ]]; then
-    die "Missing $WEB_DIR/.env.production — create it with production VITE_* URLs."
-  fi
-  grep -E '^VITE_(API_BASE_URL|PUBLIC_WEB_BASE)=' "$WEB_DIR/.env.production" || true
-}
-
-deploy_backend() {
-  log "Deploying backend → $SSH_HOST:$BACKEND_REMOTE/"
-  [[ -d "$BACKEND_DIR/src" ]] || die "Backend src folder not found at $BACKEND_DIR/src"
-  [[ -f "$BACKEND_DIR/package.json" ]] || die "Backend package.json not found"
-  [[ -f "$SSH_KEY" ]] || die "SSH key not found: $SSH_KEY"
-
-  rsync_ssh --delete \
-    "$BACKEND_DIR/src/" \
-    "$SSH_HOST:$BACKEND_REMOTE/src/"
-
-  log "Syncing package.json + package-lock.json"
-  rsync_ssh \
-    "$BACKEND_DIR/package.json" \
-    "$BACKEND_DIR/package-lock.json" \
-    "$SSH_HOST:$BACKEND_REMOTE/"
-
-  log "Installing dependencies + reloading API on server (pm2)"
-  ssh_cmd "cd '$BACKEND_REMOTE' && npm ci --omit=dev && (pm2 reload all || pm2 restart all || echo 'pm2 reload skipped — run manually on server')"
-}
-
-deploy_frontend() {
-  log "Building dashboard (console) for production"
-  apply_production_env
-  cd "$FRONTEND_DIR"
-  npm run build
-
-  log "Uploading dashboard dist → $S3_CONSOLE"
-  aws s3 rm "$S3_CONSOLE" --recursive --profile "$AWS_PROFILE"
-  aws s3 sync "$FRONTEND_DIR/dist" "$S3_CONSOLE" --profile "$AWS_PROFILE"
-
-  invalidate_cloudfront "$CF_CONSOLE" "console"
-
-  log "Dashboard deploy complete"
-}
-
-deploy_website() {
-  log "Building visitor website for production"
-  apply_production_env
-  cd "$EVENTBUZZ_DIR"
-  npm run build
-
-  log "Uploading visitor site dist → $S3_WEBSITE"
-  aws s3 rm "$S3_WEBSITE" --recursive --profile "$AWS_PROFILE"
-  aws s3 sync "$EVENTBUZZ_DIR/dist" "$S3_WEBSITE" --profile "$AWS_PROFILE"
-
-  invalidate_cloudfront "$CF_WEBSITE" "website"
-
-  log "Visitor website deploy complete"
-}
-
-deploy_web() {
-  log "Building public web app for production"
-  apply_production_env
-  cd "$WEB_DIR"
-  npm run build
-
-  log "Uploading public web dist → $S3_WEB"
-  aws s3 rm "$S3_WEB" --recursive --profile "$AWS_PROFILE"
-  aws s3 sync "$WEB_DIR/dist" "$S3_WEB" --profile "$AWS_PROFILE"
-
-  invalidate_cloudfront "$CF_WEB" "web"
-
-  log "Public web deploy complete"
-}
-
-usage() {
-  cat <<EOF
-Usage: $(basename "$0") [backend|frontend|website|web|all]
-
-  backend   rsync backend/src + package files, npm ci on server, pm2 reload
-  frontend  production build + S3 sync to $S3_CONSOLE + CF invalidation
-  website   production build + S3 sync to $S3_WEBSITE + CF invalidation
-  web       production build + S3 sync to $S3_WEB + CF invalidation
-  all       run all four (default)
-
-Environment overrides:
-  SSH_KEY, SSH_HOST, BACKEND_REMOTE, AWS_PROFILE, CF_CONSOLE, CF_WEBSITE, CF_WEB
-EOF
-}
-
-TARGET="${1:-all}"
-
-case "$TARGET" in
-  backend) deploy_backend ;;
-  frontend) deploy_frontend ;;
-  website) deploy_website ;;
-  web) deploy_web ;;
-  all)
-    deploy_backend
-    deploy_frontend
-    deploy_website
-    deploy_web
-    ;;
-  -h|--help|help) usage ;;
-  *) die "Unknown target: $TARGET (use backend|frontend|website|web|all)" ;;
-esac
-
-log "Done."
+# Deprecated wrapper — use the repo-root deploy script instead.
+exec "$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)/deploy.sh" "$@"
diff --git a/index.html b/index.html
index 2dbca4f..da42990 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>EventBuzz</title>
+    <title>EventBuzz — Live events, ticketing & engagement</title>
+    <meta
+      name="description"
+      content="EventBuzz helps you run registration, ticketing, agendas, and live audience engagement in one place."
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index e6d4bea..3943f8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,19 @@
       "name": "eventbuzz-web",
       "version": "0.0.1",
       "dependencies": {
+        "bootstrap": "^5.3.8",
         "bootstrap-icons": "^1.13.1",
         "flatpickr": "^4.6.13",
+        "qrcode": "^1.5.4",
         "react": "^18.3.1",
+        "react-bootstrap": "^2.10.10",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.7.0",
+        "react-player": "^3.4.0",
         "react-router-dom": "^6.28.0"
       },
       "devDependencies": {
+        "@types/qrcode": "^1.5.6",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.4",
@@ -256,6 +262,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
@@ -746,6 +761,33 @@
         "node": ">=18"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.3.tgz",
+      "integrity": "sha512-fuLX+3ZKLsxI73y8b01EG/WjHb6gE6weCqlfawPO27kBWGMh9G1yH6Csv1uU7/cac9H2GHmOMt6CjmuQ1aia4Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+      "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.10.tgz",
+      "integrity": "sha512-PDx6//vHSpRnHfxqMqto11zQvhsaU74O3mKv2F/0eicGZcl9NLjQmGlbHz/LsJh5tLKp4A4L7ZVTzN1/MmMTvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -796,6 +838,111 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mux/mux-data-google-ima": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@mux/mux-data-google-ima/-/mux-data-google-ima-0.3.17.tgz",
+      "integrity": "sha512-4wpH6dYybyZhqLn9qGn/+67Z8MZnQRAdqTFEEZw2bx61M9q01uPYYHxd8qwOnYtUGEeafsdTwVHVxKHGD3oc1A==",
+      "license": "MIT",
+      "dependencies": {
+        "mux-embed": "5.18.1"
+      }
+    },
+    "node_modules/@mux/mux-player": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-3.13.2.tgz",
+      "integrity": "sha512-qYOYK4/vAr0VEs5SoC8KRieKm3VSgXJpyuERvOIDYvomIVGVpeqGzhjeDeZ7XKQBH3swg0RdAT3kZaTWXe5s9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-video": "0.31.2",
+        "@mux/playback-core": "0.35.2",
+        "media-chrome": "~4.19.0",
+        "player.style": "^0.3.0"
+      }
+    },
+    "node_modules/@mux/mux-player-react": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-3.13.2.tgz",
+      "integrity": "sha512-yjAmiqVPYTKi88LAuHxSwKiYrZUDy1ofUYjrDP91mvPfz8BfTvUanzpyE8+a6pRIZFp55rmiAnWyjWKuqSGASw==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-player": "3.13.2",
+        "@mux/playback-core": "0.35.2",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
+        "react": "^17.0.2 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
+        "react-dom": "^17.0.2 || ^17.0.2-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mux/mux-video": {
+      "version": "0.31.2",
+      "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.31.2.tgz",
+      "integrity": "sha512-waahxlrat1PpRzcY2pwMQJ5Gyhos+D6iRyKnYzF0wBf4SESfBtunSBj3EuKuljypm8bamh9gWnlA0LSzm5Pz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-data-google-ima": "^0.3.4",
+        "@mux/playback-core": "0.35.2",
+        "@types/google_interactive_media_ads_types": "^3.697.0",
+        "castable-video": "~1.1.13",
+        "custom-media-element": "~1.4.6",
+        "media-tracks": "~0.3.5"
+      }
+    },
+    "node_modules/@mux/playback-core": {
+      "version": "0.35.2",
+      "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.35.2.tgz",
+      "integrity": "sha512-AsMV0LMwJm9T1ig6BBYSddeMlkzz+2RGcd6dkOgYk+L5Hx477ovbTxJZJ/vTW+rZjNWHcG3BvgNbSLgiubyZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "hls.js": "~1.6.15",
+        "mux-embed": "^5.16.1"
+      }
+    },
+    "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/@react-aria/ssr": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.10.1.tgz",
+      "integrity": "sha512-jn038/ZYmu6DpfXJ6r2U9zFFppjbc9wnApPJSCxao2RZVEqep4YyoniHSy8qv6V21/xyS4IV7W9a+X2jOjSuag==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "react-aria": "^3.48.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.1.tgz",
+      "integrity": "sha512-AzsuD9OfxTOZMMvTRhlN3oHBwOmFN7tDh27LzqmHt4+uOgPhJT7ZM7/kVs/8/o0WxayMUIk3hBmCFRHv1FUoag==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
@@ -805,6 +952,60 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@popperjs/core": "^2.11.8",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.5.0",
+        "@types/warning": "^3.0.3",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.4",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1162,6 +1363,138 @@
         "win32"
       ]
     },
+    "node_modules/@svta/cml-608": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@svta/cml-608/-/cml-608-1.0.2.tgz",
+      "integrity": "sha512-ZEJ68330gcLKfvVv6Qifr1HR7+GldDUxzkjqSbqRK7jHtHSLSV1JAyDwlYe8+C7ABuY1bp8MpgJ4/Gg+jl+pLQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@svta/cml-cmcd": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cmcd/-/cml-cmcd-2.3.2.tgz",
+      "integrity": "sha512-SKBBjLmci0WK8HMjuv+36tVIMktonoOoxsXblOFZmB+ePPV2zjRMTD+2ZmE/1VEPJkKHENyhSjSHgJyeOlvZ1A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-structured-field-values": "1.1.3",
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@svta/cml-cmsd": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cmsd/-/cml-cmsd-1.0.6.tgz",
+      "integrity": "sha512-LUORV6bb0TbU4rSC2HoPqUCix1igLrXkRQXWiIyJo2OMzb14kAK/1jsW0mzY6up6w1GrjKQcjc6OwqJdo/zd/g==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-cta": "1.0.6",
+        "@svta/cml-structured-field-values": "1.1.3",
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@svta/cml-cta": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cta/-/cml-cta-1.0.6.tgz",
+      "integrity": "sha512-l13/4myTX1EbRd38nY8J1umVY5UdR/nZO6CeKqVLXnMMIayg7/fu0TueZckjTA9Loal55MGK1xbHnXVjz7OUUw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-structured-field-values": "1.1.3",
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@svta/cml-dash": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@svta/cml-dash/-/cml-dash-1.0.6.tgz",
+      "integrity": "sha512-4XtHYlPrzL/dRe/8XmRQoLnTo9S86tISgrl67eUqKl5MtNTpZBYTncuPrspslPZPZROBBWNrBuepYfYUtU9CKA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@svta/cml-id3": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@svta/cml-id3/-/cml-id3-1.0.6.tgz",
+      "integrity": "sha512-63j8gkAnPOmOBWlp0hIZPvsIioZttdbg6/TgwITqMYbSLYVJ+6QGa/UtIP0I84NsfstANw6QdCn7i8SS08kn1A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@svta/cml-request": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@svta/cml-request/-/cml-request-1.0.12.tgz",
+      "integrity": "sha512-4sJvnnoNpq58j2mCGP8k+MF6wVy/qa4gbt6kfT1dPIKmn3mPxw+JVfilhcWsUi+peK2yCZxOJJYyHj1cAcQE1w==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-cmcd": "2.3.2",
+        "@svta/cml-utils": "1.5.0",
+        "@svta/cml-xml": "1.1.4"
+      }
+    },
+    "node_modules/@svta/cml-structured-field-values": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@svta/cml-structured-field-values/-/cml-structured-field-values-1.1.3.tgz",
+      "integrity": "sha512-XqLzQOTznz6kh/nsSh8dy1kV7GQjL4csG+2U5EvLGhAqNuNUczbVg5EAsDobKDVg8xhdthdXx2UuwM+ZHQCxSg==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@svta/cml-utils": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@svta/cml-utils/-/cml-utils-1.5.0.tgz",
+      "integrity": "sha512-JMqclD7Akd+GSJiuaYNUHOP2wNtf/nauKeszlYeivSHfi0Lp3pmSW5PXDvJ2dO4aPmmSOQbF0ztTsW9Vcs2Whw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@svta/cml-xml": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@svta/cml-xml/-/cml-xml-1.1.4.tgz",
+      "integrity": "sha512-jbixqjiJIc16SGxylHwiOzO+DuhkGfuP+fJ9AHeVJKdFDKnabgfCDpnp6dvZpZnjMj4nHvzVtuUV7RISPIwYXw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.5.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1214,18 +1547,42 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/google_interactive_media_ads_types": {
+      "version": "3.697.1",
+      "resolved": "https://registry.npmjs.org/@types/google_interactive_media_ads_types/-/google_interactive_media_ads_types-3.697.1.tgz",
+      "integrity": "sha512-gRjJoPKQRjjTuySHqZe8Pnu6a5B0bKbTUD2ioDLPSWlEuBaAc2p1mzUzy42SCeWkyYffo2Mnv+blUGuvVvx3dQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.1.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.2.tgz",
+      "integrity": "sha512-Vu4a5UFA9rIIFJ7rB/Vaafh9lrCQszopTCx6KjFboXTGQbPNasehVR5TEiithSDGyd1DEiUByggTZsg8jukeIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.31",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
       "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -1242,6 +1599,31 @@
         "@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/warning": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.4.tgz",
+      "integrity": "sha512-CqN8MnISMwQbLJXO3doBAV4Yw9hx9/Pyr2rZ78+NfaCnhyRA/nKrpyk6E7mKw17ZOaQdLpK9GiUjrqLzBlN3sg==",
+      "license": "MIT"
+    },
+    "node_modules/@vimeo/player": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.29.0.tgz",
+      "integrity": "sha512-9JjvjeqUndb9otCCFd0/+2ESsLk7VkDE6sxOBy9iy2ukezuQbplVRi+g9g59yAurKofbmTi/KcKxBGO/22zWRw==",
+      "license": "MIT",
+      "dependencies": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.4"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1263,6 +1645,42 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.38",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.38.tgz",
@@ -1276,6 +1694,35 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bcp-47-match": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/bootstrap-icons": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
@@ -1326,6 +1773,15 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001799",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@@ -1347,6 +1803,80 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/castable-video": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.1.16.tgz",
+      "integrity": "sha512-wBhe2dZu2afhewL3EaGgVYTyDsa9HvNhY98clMZkNzDrLelOValSrTaoMos9YX7PPBCrgpd1j6YmNyyI2Vbq3w==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "~1.4.6"
+      }
+    },
+    "node_modules/ce-la-react": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.2.tgz",
+      "integrity": "sha512-QJ6k4lOD/btI08xG8jBPxRCGXvCnusGGkTsiXk0u3NqUu/W+BXRnFD4PYjwtqh8AWmGa5LDbGk0fLQsqr0nSMA==",
+      "license": "BSD-3-Clause",
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/cloudflare-video-element": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/cloudflare-video-element/-/cloudflare-video-element-1.3.5.tgz",
+      "integrity": "sha512-zj9gjJa6xW8MNrfc4oKuwgGS0njRLpOlQjdifbuNxvy8k4Y3pKCyKCMG2XIsjd2iQGhgjS57b1P5VWdJlxcXBw==",
+      "license": "MIT"
+    },
+    "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/codem-isoboxer": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/codem-isoboxer/-/codem-isoboxer-0.3.10.tgz",
+      "integrity": "sha512-eNk3TRV+xQMJ1PEj0FQGY8KD4m0GPxT487XJ+Iftm7mVa9WpPFDMWqPt+46buiP5j5Wzqe5oMIhqBcAeKfygSA==",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1358,9 +1888,50 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/custom-media-element": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.4.6.tgz",
+      "integrity": "sha512-/HRYqJOa1ob5ik4q7FIJVYxTJCFs/FL3+cQPAJjUf2uiqrDEzbTgB315gQ2rG8oK3w094W9m5tcB8S5Qah+caA==",
+      "license": "MIT"
+    },
+    "node_modules/dash-video-element": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/dash-video-element/-/dash-video-element-0.3.2.tgz",
+      "integrity": "sha512-eN1IqgtTAbq4zVkbt82BDwQtybQ6WOXyQU5HbftUSnqo+SHAPbZCif1Y7uViAhgvuEPvZtbiXDiacvvTeGxc/g==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "^1.4.6",
+        "dashjs": "^5.0.3",
+        "media-tracks": "^0.3.5"
+      }
+    },
+    "node_modules/dashjs": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dashjs/-/dashjs-5.2.0.tgz",
+      "integrity": "sha512-2W2KHFN53Sk7+rtdnIfSUK/3Oov+hraMTeVZwDOTSCNKM1cQtFiJdblNzRMnl59a/QDseG7JW+PC9mh/B+CMcg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@svta/cml-608": "1.0.2",
+        "@svta/cml-cmcd": "2.3.2",
+        "@svta/cml-cmsd": "1.0.6",
+        "@svta/cml-dash": "1.0.6",
+        "@svta/cml-id3": "1.0.6",
+        "@svta/cml-request": "1.0.12",
+        "@svta/cml-xml": "1.1.4",
+        "bcp-47-match": "^2.0.3",
+        "codem-isoboxer": "0.3.10",
+        "fast-deep-equal": "3.1.3",
+        "html-entities": "^2.6.0",
+        "imsc": "^1.1.5",
+        "localforage": "^1.10.0",
+        "path-browserify": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1379,6 +1950,40 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
+    "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/electron-to-chromium": {
       "version": "1.5.378",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.378.tgz",
@@ -1386,6 +1991,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -1438,6 +2049,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1456,6 +2073,19 @@
         }
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/flatpickr": {
       "version": "4.6.13",
       "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
@@ -1487,6 +2117,81 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/hls-video-element": {
+      "version": "1.5.11",
+      "resolved": "https://registry.npmjs.org/hls-video-element/-/hls-video-element-1.5.11.tgz",
+      "integrity": "sha512-tJJ65/52CDxj8XFyIve6zT9nVVdUIc6mqvKR25X0ycPKHk07rpjp4xxVteeCefDUBSf/tFLhlICFmn3KWj37xA==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "^1.4.6",
+        "hls.js": "^1.6.5",
+        "media-tracks": "^0.3.5"
+      }
+    },
+    "node_modules/hls.js": {
+      "version": "1.6.17",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.17.tgz",
+      "integrity": "sha512-NUplVGVuc1hSPwdB/9/cbRkUmLrYi75/hqiXKdA+l300pJNxDu96R7jRb2imDzWJqIUF4I5ThmAdp9GvOCXsuQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/imsc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/imsc/-/imsc-1.1.5.tgz",
+      "integrity": "sha512-V8je+CGkcvGhgl2C1GlhqFFiUOIEdwXbXLiu1Fcubvvbo+g9inauqT3l0pNYXGoLPBj3jxtZz9t+wCopMkwadQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "sax": "1.2.1"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1519,6 +2224,36 @@
         "node": ">=6"
       }
     },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1541,6 +2276,27 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/media-chrome": {
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.19.2.tgz",
+      "integrity": "sha512-4ai1ITN8wBhwugQcRgqe3tN0z6OSKGOXqHLNrS04MgKFfsLqu6Dm8MPq02pI9Y9ZKoXtFjIl85jOryIW9es3BA==",
+      "license": "MIT",
+      "dependencies": {
+        "ce-la-react": "^0.3.2"
+      }
+    },
+    "node_modules/media-played-ranges-mixin": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/media-played-ranges-mixin/-/media-played-ranges-mixin-0.1.0.tgz",
+      "integrity": "sha512-zTsvkleu5sAyTsPVxDI+KUbCwy/lXwHgOPi3ER9S3lhtAWhGTQH6qxvfrVMym1cvoLU36SPbVr6Qe8Zxyc0WpA==",
+      "license": "MIT"
+    },
+    "node_modules/media-tracks": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.5.tgz",
+      "integrity": "sha512-l54rkKXlLBt3ob3zOLWHcnjvwUmX5bNEZ70igyapOZZC9imzqBmq1oz8p2roiV04KhjblFIi2hetLPF1oYVLRA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1548,6 +2304,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mux-embed": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.18.1.tgz",
+      "integrity": "sha512-ePsHjiEKY+FgrSBiMmaF+LOtTQSSBWv/1zqpREQFN96JE93xlsArT/MEi30yKOE06MgjOlL70YI750molu3y7g==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.15",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
@@ -1567,6 +2329,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==",
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.49",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.49.tgz",
@@ -1577,6 +2345,66 @@
         "node": ">=18"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1597,6 +2425,31 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/player.style": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.3.4.tgz",
+      "integrity": "sha512-5O9bkbq0APQIkhptyZwp0gUgheCeImGPFo4hvPF2M5xBmgsUYzsUPHCfMye2xyeRE1zvQBKtziaC3jPgnHE1tw==",
+      "license": "MIT",
+      "workspaces": [
+        ".",
+        "site",
+        "examples/*",
+        "scripts/*",
+        "themes/*"
+      ],
+      "dependencies": {
+        "media-chrome": "~4.19.0"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -1626,6 +2479,47 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "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-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -1638,6 +2532,58 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-aria": {
+      "version": "3.51.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.51.0.tgz",
+      "integrity": "sha512-AyWLw0XR38cFPwBu/ErgGaVrc5dupLEKmRlMXTGvFKOtbaGRQ2+yQJkjVhpdHhoRhU4+G+tJDFeHDTS8tK3bfQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.3",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.10",
+        "@react-types/shared": "^3.36.1",
+        "@swc/helpers": "^0.5.0",
+        "aria-hidden": "^1.2.3",
+        "clsx": "^2.0.0",
+        "react-stately": "3.49.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.10",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.10.tgz",
+      "integrity": "sha512-gMckKUqn8aK/vCnfwoBpBVFUGT9SVQxwsYrp9yDHt0arXMamxALerliKBxr1TPbntirK/HGrUAHYbAeQTa9GHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.4",
+        "@types/prop-types": "^15.7.12",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -1651,6 +2597,50 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "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/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react-player": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-3.4.0.tgz",
+      "integrity": "sha512-QpQSHXtnMBKjQVNeaCYMtTVcynWQ0DDDhz/FJu1OR9PHLC1Aih94UqNstywzSHbJ6Oc7lI8/7kDDqcIvyTI6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-player-react": "^3.8.0",
+        "cloudflare-video-element": "^1.3.4",
+        "dash-video-element": "^0.3.0",
+        "hls-video-element": "^1.5.9",
+        "spotify-audio-element": "^1.0.3",
+        "tiktok-video-element": "^0.1.1",
+        "twitch-video-element": "^0.1.5",
+        "vimeo-video-element": "^1.6.1",
+        "wistia-video-element": "^1.3.5",
+        "youtube-video-element": "^1.8.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18 || ^19",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -1693,6 +2683,54 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-stately": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.49.0.tgz",
+      "integrity": "sha512-13iNq2KzBrRAzxRc+n53hgROfIistiYY/sPtIhCw1qUB7/kmo+X1xEU2uiS5zcCIrc55AUPwoHqOIIpKWSwB9A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.3",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.10",
+        "@react-types/shared": "^3.36.1",
+        "@swc/helpers": "^0.5.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "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/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/rollup": {
       "version": "4.62.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
@@ -1738,6 +2776,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sax": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
+      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
+      "license": "ISC"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -1757,6 +2801,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1767,6 +2817,50 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/spotify-audio-element": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/spotify-audio-element/-/spotify-audio-element-1.0.4.tgz",
+      "integrity": "sha512-QdKrJPkYCzaNwwz2vN2eDGyoW0KmQFmnwVprB41mpMzj4qujbqr6pegEchQeTn0b5PceKiLoVu0pp2QDpTcWnw==",
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/super-media-element": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/super-media-element/-/super-media-element-1.4.2.tgz",
+      "integrity": "sha512-9pP/CVNp4NF2MNlRzLwQkjiTgKKe9WYXrLh9+8QokWmMxz+zt2mf1utkWLco26IuA3AfVcTb//qtlTIjY3VHxA==",
+      "license": "MIT"
+    },
+    "node_modules/tiktok-video-element": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tiktok-video-element/-/tiktok-video-element-0.1.2.tgz",
+      "integrity": "sha512-w6TboLm236XJKKiIXIhCbYCnUxbixBbaAoty0etaEAZ/2kHkVIdfZdv2oouMU/HGMsWCHI/VjQ3wU3MJ+s192Q==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -1784,6 +2878,18 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/twitch-video-element": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/twitch-video-element/-/twitch-video-element-0.1.6.tgz",
+      "integrity": "sha512-X7l8gy+DEFKJ/EztUwaVnAYwQN9fUJxPkOVJj2sE62sGvGU4DNLyvmOsmVulM+8Plc5dMg6hYIMNRAPaH+39Uw==",
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -1798,6 +2904,28 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -1829,6 +2957,25 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/vimeo-video-element": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/vimeo-video-element/-/vimeo-video-element-1.7.2.tgz",
+      "integrity": "sha512-7QM7fvSZvTTSq4igxBuO6Gc+0u3Exgk4IaLNixVzilCPzHEf7SN8b6YLXSM5QCs0ineTJI4XjiUCSoIbabHvwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vimeo/player": "2.29.0",
+        "media-played-ranges-mixin": "^0.1.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
@@ -1904,12 +3051,109 @@
         }
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/weakmap-polyfill": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz",
+      "integrity": "sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
+    "node_modules/wistia-video-element": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/wistia-video-element/-/wistia-video-element-1.4.0.tgz",
+      "integrity": "sha512-udI8/yiMZ+KIGwYK1qNOFiXl+s/wffiY+XkwTXlBFICZylFalOS0QYEQqYOmuBsm3jNfGUS4O50tLuN7Ejqm3A==",
+      "license": "MIT",
+      "dependencies": {
+        "super-media-element": "~1.4.2"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/youtube-video-element": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/youtube-video-element/-/youtube-video-element-1.9.0.tgz",
+      "integrity": "sha512-Hh0dbQM+FVlUaYUbpYkZNUvdKxTNcSNvTGzkQKYShltnX+LRHEp2eYvC2Zm43eU8Np+CBZuoNR2i+seCYzzAyg==",
+      "license": "MIT",
+      "dependencies": {
+        "media-played-ranges-mixin": "^0.1.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 3536389..2180c96 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,19 @@
     "preview": "vite preview --port 5175"
   },
   "dependencies": {
+    "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "flatpickr": "^4.6.13",
+    "qrcode": "^1.5.4",
     "react": "^18.3.1",
+    "react-bootstrap": "^2.10.10",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.7.0",
+    "react-player": "^3.4.0",
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/src/App.tsx b/src/App.tsx
index bbe020f..3beae8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { LandingPage } from './pages/LandingPage';
 import { EventMicrositePage } from './pages/EventMicrositePage';
 import { RegisterPage } from './pages/RegisterPage';
 import { FormPage } from './pages/FormPage';
@@ -8,6 +9,7 @@ export default function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<LandingPage />} />
         <Route path="/event/:eventId" element={<EventMicrositePage />} />
         <Route path="/event/:eventId/register" element={<RegisterPage />} />
         <Route path="/event/:eventId/form/:formId" element={<FormPage />} />
diff --git a/src/api/microsite.ts b/src/api/microsite.ts
index 9edcbb2..e289741 100644
--- a/src/api/microsite.ts
+++ b/src/api/microsite.ts
@@ -5,7 +5,7 @@ import type { PublicMicrositePayload, RegistrationInfo } from '../types';
 export const micrositeApi = {
   get(eventId: string): Promise<PublicMicrositePayload> {
     //Real API call
-    return apiGet<PublicMicrositePayload>(`/public/events/${eventId}/microsite`);
+    return apiGet<PublicMicrositePayload>(`/public/events/${eventId}/defaultsite`);
 
     //Mock: Testing data
     // return Promise.resolve({
diff --git a/src/api/publicEventTickets.ts b/src/api/publicEventTickets.ts
new file mode 100644
index 0000000..8ec7a19
--- /dev/null
+++ b/src/api/publicEventTickets.ts
@@ -0,0 +1,163 @@
+import { apiGet, apiPost } from './client';
+
+export type PublicTicketCatalogItem = {
+  _id: string;
+  name: string;
+  description?: string;
+  keyPoints?: string[];
+  basePriceMinor: number;
+  currency: string;
+  maxPerOrder?: number | null;
+  requiresBillingState?: boolean;
+};
+
+export type TicketQuote = {
+  ticketId: string;
+  quantity: number;
+  billingStateCode: string | null;
+  baseMinor: number;
+  taxMinor: number;
+  totalMinor: number;
+  platformFeeMinor?: number;
+  ticketName?: string;
+  eventName?: string;
+  taxLines: { label: string; rateBps: number; amountMinor: number }[];
+  currency: string;
+};
+
+export type PublicCheckoutOptions = {
+  onlineAvailable: boolean;
+  onlineGateways?: Array<{
+    id: string;
+    provider: string;
+    label: string;
+    isActive: boolean;
+    isPrimary: boolean;
+    testMode: boolean;
+    ticketCheckoutSupported: boolean;
+  }>;
+  manualUpi: {
+    manualQrMode: 'upload' | 'dynamic';
+    eventName: string;
+    upiQrImageUrl: string;
+    upiId: string;
+    payeeName: string;
+    instructions: string;
+    platformFeeInr: number;
+  } | null;
+};
+
+export type CheckoutOrderResponse = {
+  keyId: string;
+  orderId: string;
+  amount: number;
+  currency: string;
+  transactionId: string;
+  checkoutSource: string;
+};
+
+export type TicketAttendeePayload = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone?: string;
+  organization?: string;
+  designation?: string;
+  displayName?: string;
+  formData?: Record<string, unknown>;
+};
+
+export type PublicEventSummary = {
+  name: string;
+  subtitle?: string;
+  startDate?: string;
+  endDate?: string;
+  location?: string;
+  locationType?: string;
+  image?: string;
+};
+
+export function loadRazorpayScript(): Promise<void> {
+  if (typeof window === 'undefined') return Promise.reject(new Error('No window'));
+  const w = window as unknown as { Razorpay?: unknown };
+  if (w.Razorpay) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = 'https://checkout.razorpay.com/v1/checkout.js';
+    s.async = true;
+    s.onload = () => resolve();
+    s.onerror = () => reject(new Error('Failed to load Razorpay'));
+    document.body.appendChild(s);
+  });
+}
+
+export const publicEventTicketsApi = {
+  getEventSummary(eventId: string): Promise<PublicEventSummary> {
+    return apiGet<PublicEventSummary>(`/public/events/${eventId}/summary`);
+  },
+
+  listTickets(eventId: string): Promise<PublicTicketCatalogItem[]> {
+    return apiGet<{ tickets: PublicTicketCatalogItem[] }>(`/public/events/${eventId}/tickets`).then(
+      (data) => data.tickets ?? [],
+    );
+  },
+
+  checkoutOptions(eventId: string): Promise<PublicCheckoutOptions> {
+    return apiGet<PublicCheckoutOptions>(`/public/events/${eventId}/tickets/checkout-options`);
+  },
+
+  quote(eventId: string, payload: { ticketId: string; quantity: number; billingStateCode?: string }): Promise<TicketQuote> {
+    return apiPost<TicketQuote>(`/public/events/${eventId}/tickets/quote`, payload);
+  },
+
+  manualQuote(
+    eventId: string,
+    payload: { ticketId: string; quantity: number; billingStateCode?: string },
+  ): Promise<TicketQuote> {
+    return apiPost<TicketQuote>(`/public/events/${eventId}/tickets/manual-quote`, payload);
+  },
+
+  checkout(
+    eventId: string,
+    payload: {
+      ticketId: string;
+      quantity: number;
+      billingStateCode?: string;
+      purchaserEmail: string;
+      sourceFormId?: string;
+      attendees: TicketAttendeePayload[];
+      expectedTotalMinor: number;
+      idempotencyKey?: string;
+      orgGatewayId?: string;
+    },
+  ): Promise<CheckoutOrderResponse> {
+    return apiPost<CheckoutOrderResponse>(`/public/events/${eventId}/tickets/checkout`, payload);
+  },
+
+  verifyPayment(
+    eventId: string,
+    payload: { orderId: string; paymentId: string; signature: string },
+  ): Promise<{ verified: boolean }> {
+    return apiPost<{ verified: boolean }>(`/public/events/${eventId}/payment/verify`, payload);
+  },
+
+  manualSubmit(
+    eventId: string,
+    payload: {
+      ticketId: string;
+      quantity: number;
+      billingStateCode?: string;
+      purchaserEmail: string;
+      sourceFormId?: string;
+      attendees: TicketAttendeePayload[];
+      expectedTotalMinor: number;
+      screenshotDataUrl: string;
+      buyerNote?: string;
+    },
+  ): Promise<{ orderId: string; message: string }> {
+    return apiPost<{ orderId: string; message: string }>(
+      `/public/events/${eventId}/tickets/manual-submit`,
+      payload,
+    );
+  },
+};
diff --git a/src/assets/logo-white.png b/src/assets/logo-white.png
new file mode 100644
index 0000000..3c05926
Binary files /dev/null and b/src/assets/logo-white.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..d5afd28
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/main_banner.png b/src/assets/main_banner.png
new file mode 100644
index 0000000..3ea8dc1
Binary files /dev/null and b/src/assets/main_banner.png differ
diff --git a/src/components/forms/FormShell.tsx b/src/components/forms/FormShell.tsx
index deca403..ab1901e 100644
--- a/src/components/forms/FormShell.tsx
+++ b/src/components/forms/FormShell.tsx
@@ -6,6 +6,8 @@ import { DynamicFormFields, buildSubmitData, validateFormFields } from './Dynami
 import { FormCaptchaField, validateCaptchaAnswer } from './FormCaptchaField';
 import { assignUniqueFieldNames } from '../../utils/formFieldNames';
 import { ensureRegistrationCoreFields } from '../../utils/registrationFormFields';
+import { RegistrationTicketStep } from './RegistrationTicketStep';
+import { buildTicketAttendeeFromForm } from '../../utils/registrationTicketAttendee';
 
 type Props = {
   eventId: string;
@@ -25,11 +27,15 @@ export function FormShell({ eventId, formId, titleOverride }: Props) {
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [done, setDone] = useState(false);
+  const [doneMessage, setDoneMessage] = useState<string | null>(null);
+  const [step, setStep] = useState<1 | 2>(1);
   const [captchaAnswer, setCaptchaAnswer] = useState('');
   const [captchaToken, setCaptchaToken] = useState('');
   const [captchaMode, setCaptchaMode] = useState<'server' | 'local'>('server');
   const [localCaptchaAnswer, setLocalCaptchaAnswer] = useState<string | null>(null);
 
+  const ticketsEnabled = !!(form?.settings?.paymentEnabled && (form.tickets?.length || 0) > 0);
+
   const handleCaptchaModeChange = useCallback((mode: 'server' | 'local', localAnswer: string | null) => {
     setCaptchaMode(mode);
     setLocalCaptchaAnswer(localAnswer);
@@ -69,6 +75,12 @@ export function FormShell({ eventId, formId, titleOverride }: Props) {
       setSubmitError(captchaErr);
       return;
     }
+
+    if (ticketsEnabled) {
+      setStep(2);
+      return;
+    }
+
     setSubmitting(true);
     try {
       await formsApi.submit(formId, {
@@ -103,7 +115,10 @@ export function FormShell({ eventId, formId, titleOverride }: Props) {
   }
 
   if (done) {
-    const msg = form.settings?.thankYouMessage?.trim() || 'Thank you for your response.';
+    const msg =
+      doneMessage
+      || form.settings?.thankYouMessage?.trim()
+      || 'Thank you for your response.';
     const ev = form.event;
     return (
       <div className={embed ? 'form-page-center form-page-center--embed' : 'form-page-center'}>
@@ -126,6 +141,11 @@ export function FormShell({ eventId, formId, titleOverride }: Props) {
 
   const ev = form.event;
   const pageTitle = titleOverride || form.name;
+  const attendee = buildTicketAttendeeFromForm(
+    form.fields || [],
+    values,
+    buildSubmitData(form.fields || [], values),
+  );
 
   return (
     <div className={embed ? 'form-page form-page--embed' : 'form-page'}>
@@ -136,26 +156,46 @@ export function FormShell({ eventId, formId, titleOverride }: Props) {
         </h1>
         {form.description ? <p className="form-desc">{form.description}</p> : <div style={{ marginBottom: 24 }} />}
 
-        <form className="form-panel" onSubmit={(e) => void onSubmit(e)}>
-          <DynamicFormFields
-            fields={form.fields || []}
-            values={values}
-            fileNames={fileNames}
-            onChange={(key, v) => setValues((prev) => ({ ...prev, [key]: v }))}
-            onFileNamesChange={(key, name) => setFileNames((prev) => ({ ...prev, [key]: name }))}
+        {step === 1 ? (
+          <form className="form-panel" onSubmit={(e) => void onSubmit(e)}>
+            {ticketsEnabled ? <p className="form-ticket-step-label">Step 1 of 2 — Your details</p> : null}
+            <DynamicFormFields
+              fields={form.fields || []}
+              values={values}
+              fileNames={fileNames}
+              onChange={(key, v) => setValues((prev) => ({ ...prev, [key]: v }))}
+              onFileNamesChange={(key, name) => setFileNames((prev) => ({ ...prev, [key]: name }))}
+            />
+            <FormCaptchaField
+              value={captchaAnswer}
+              onChange={setCaptchaAnswer}
+              onTokenChange={setCaptchaToken}
+              onModeChange={handleCaptchaModeChange}
+              disabled={submitting}
+            />
+            {submitError ? <p className="form-error">{submitError}</p> : null}
+            <button type="submit" className="form-submit" disabled={submitting}>
+              {submitting ? 'Submitting…' : ticketsEnabled ? 'Continue' : 'Submit'}
+            </button>
+          </form>
+        ) : (
+          <RegistrationTicketStep
+            eventId={eventId}
+            formId={formId}
+            eventName={ev?.name}
+            tickets={form.tickets || []}
+            attendee={attendee}
+            onBack={() => setStep(1)}
+            onPaid={() => {
+              setDoneMessage(null);
+              setDone(true);
+            }}
+            onPendingReview={(message) => {
+              setDoneMessage(message);
+              setDone(true);
+            }}
           />
-          <FormCaptchaField
-            value={captchaAnswer}
-            onChange={setCaptchaAnswer}
-            onTokenChange={setCaptchaToken}
-            onModeChange={handleCaptchaModeChange}
-            disabled={submitting}
-          />
-          {submitError ? <p className="form-error">{submitError}</p> : null}
-          <button type="submit" className="form-submit" disabled={submitting}>
-            {submitting ? 'Submitting…' : 'Submit'}
-          </button>
-        </form>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/forms/PublicFormEventHeader.tsx b/src/components/forms/PublicFormEventHeader.tsx
index 088b995..b6fa99e 100644
--- a/src/components/forms/PublicFormEventHeader.tsx
+++ b/src/components/forms/PublicFormEventHeader.tsx
@@ -64,7 +64,7 @@ export function PublicFormEventHeader({
   const showLoc = d.showVenue && shouldShowLocation(event);
   const embedded = variant === 'embedded';
 
-  const showBanner = d.showLogo && !!event.imageUrl && !event.logoUrl;
+  const showBanner = d.showBanner && !!event.imageUrl;
   const showLogo = d.showLogo && !!event.logoUrl;
   const showTitle = d.showTitle && !!event.name;
   const showSubtitle = d.showTitle && !!event.subtitle?.trim();
@@ -91,14 +91,14 @@ export function PublicFormEventHeader({
 
   return (
     <div className={`form-event-header${embedded ? ' form-event-header--embedded' : ''}`}>
+      {showLogo ? (
+        <img src={event.logoUrl!} alt={event.name} className="form-event-logo" />
+      ) : null}
       {showBanner ? (
         <div className="form-event-banner">
           <img src={event.imageUrl!} alt="" />
         </div>
       ) : null}
-      {showLogo ? (
-        <img src={event.logoUrl!} alt={event.name} className="form-event-logo" />
-      ) : null}
       {showTitle || showSubtitle || metaItems.length > 0 ? (
         <div>
           {showTitle ? <h1 className="form-event-name">{event.name}</h1> : null}
diff --git a/src/components/forms/RegistrationTicketStep.tsx b/src/components/forms/RegistrationTicketStep.tsx
new file mode 100644
index 0000000..2fdabc3
--- /dev/null
+++ b/src/components/forms/RegistrationTicketStep.tsx
@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import QRCode from 'qrcode';
+import {
+  loadRazorpayScript,
+  publicEventTicketsApi,
+  type PublicTicketCatalogItem,
+  type TicketAttendeePayload,
+  type TicketQuote,
+} from '../../api/publicEventTickets';
+import { formatTicketPrice, INDIAN_STATES } from '../../utils/registrationTicketAttendee';
+import { buildUpiPayUri } from '../../utils/upiPayUri';
+
+const PAYMENT_CANCELLED_MESSAGE = 'Payment cancelled';
+
+type ManualUpi = NonNullable<
+  Awaited<ReturnType<typeof publicEventTicketsApi.checkoutOptions>>['manualUpi']
+>;
+
+type Props = {
+  eventId: string;
+  formId: string;
+  eventName?: string;
+  tickets: PublicTicketCatalogItem[];
+  attendee: TicketAttendeePayload;
+  onBack: () => void;
+  onPaid: () => void;
+  onPendingReview: (message: string) => void;
+};
+
+export function RegistrationTicketStep({
+  eventId,
+  formId,
+  eventName,
+  tickets,
+  attendee,
+  onBack,
+  onPaid,
+  onPendingReview,
+}: Props) {
+  const [ticketId, setTicketId] = useState(tickets[0]?._id || '');
+  const [billingState, setBillingState] = useState('');
+  const [quote, setQuote] = useState<TicketQuote | null>(null);
+  const [quoteError, setQuoteError] = useState<string | null>(null);
+  const [payError, setPayError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [checkoutChannel, setCheckoutChannel] = useState<'online' | 'manual'>('online');
+  const [onlineAvailable, setOnlineAvailable] = useState(false);
+  const [manualUpi, setManualUpi] = useState<ManualUpi | null>(null);
+  const [screenshotDataUrl, setScreenshotDataUrl] = useState('');
+  const [buyerNote, setBuyerNote] = useState('');
+  const [dynamicQrDataUrl, setDynamicQrDataUrl] = useState<string | null>(null);
+
+  const selected = useMemo(() => tickets.find((t) => t._id === ticketId) || null, [tickets, ticketId]);
+  const payMode = useMemo(() => {
+    if (onlineAvailable && manualUpi) return 'both';
+    if (onlineAvailable) return 'online';
+    if (manualUpi) return 'manual';
+    return 'none';
+  }, [onlineAvailable, manualUpi]);
+
+  const isManualCheckout = payMode === 'manual' || (payMode === 'both' && checkoutChannel === 'manual');
+
+  useEffect(() => {
+    let cancelled = false;
+    void publicEventTicketsApi
+      .checkoutOptions(eventId)
+      .then((opts) => {
+        if (cancelled) return;
+        setOnlineAvailable(!!opts.onlineAvailable);
+        setManualUpi(opts.manualUpi || null);
+        if (!opts.onlineAvailable && opts.manualUpi) setCheckoutChannel('manual');
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setOnlineAvailable(false);
+          setManualUpi(null);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [eventId]);
+
+  useEffect(() => {
+    if (!ticketId || !selected) {
+      setQuote(null);
+      return;
+    }
+    if (selected.requiresBillingState && !billingState) {
+      setQuote(null);
+      setQuoteError(null);
+      return;
+    }
+    let cancelled = false;
+    setQuoteError(null);
+    const run = async () => {
+      try {
+        const q = isManualCheckout
+          ? await publicEventTicketsApi.manualQuote(eventId, {
+              ticketId,
+              quantity: 1,
+              billingStateCode: billingState || undefined,
+            })
+          : await publicEventTicketsApi.quote(eventId, {
+              ticketId,
+              quantity: 1,
+              billingStateCode: billingState || undefined,
+            });
+        if (!cancelled) setQuote(q);
+      } catch (e) {
+        if (!cancelled) {
+          setQuote(null);
+          setQuoteError(e instanceof Error ? e.message : 'Could not load price');
+        }
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [eventId, ticketId, billingState, selected, isManualCheckout]);
+
+  useEffect(() => {
+    if (!isManualCheckout || !manualUpi || manualUpi.manualQrMode !== 'dynamic') {
+      setDynamicQrDataUrl(null);
+      return;
+    }
+    const pa = manualUpi.upiId?.trim();
+    const evName = (manualUpi.eventName || eventName || '').trim();
+    const quoteTotal = quote?.totalMinor;
+    if (!pa || !selected?.name || !evName || quoteTotal == null) {
+      setDynamicQrDataUrl(null);
+      return;
+    }
+    const pn = `${selected.name} · ${evName}`.slice(0, 99);
+    const am = (quoteTotal / 100).toFixed(2);
+    const uri = buildUpiPayUri({ pa, pn, am });
+    if (!uri) {
+      setDynamicQrDataUrl(null);
+      return;
+    }
+    let cancelled = false;
+    void QRCode.toDataURL(uri, { margin: 1, width: 280, errorCorrectionLevel: 'M' }).then((url) => {
+      if (!cancelled) setDynamicQrDataUrl(url);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isManualCheckout, manualUpi, selected?.name, eventName, quote?.totalMinor]);
+
+  const onScreenshot = useCallback((file: File | null) => {
+    if (!file) {
+      setScreenshotDataUrl('');
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => setScreenshotDataUrl(typeof reader.result === 'string' ? reader.result : '');
+    reader.readAsDataURL(file);
+  }, []);
+
+  const pay = async () => {
+    setPayError(null);
+    if (!selected || !quote) {
+      setPayError('Select a ticket and wait for the price.');
+      return;
+    }
+    if (selected.requiresBillingState && !billingState) {
+      setPayError('Select your billing state.');
+      return;
+    }
+    if (!attendee.email || !attendee.firstName || !attendee.lastName) {
+      setPayError('Registration details are incomplete. Go back and fill required fields.');
+      return;
+    }
+    if (payMode === 'none') {
+      setPayError('Payment is not available for this event yet.');
+      return;
+    }
+    if (isManualCheckout && !screenshotDataUrl) {
+      setPayError('Upload a payment screenshot to continue.');
+      return;
+    }
+
+    setBusy(true);
+    try {
+      const attendees = [attendee];
+      const pe = attendee.email;
+      if (isManualCheckout) {
+        const res = await publicEventTicketsApi.manualSubmit(eventId, {
+          ticketId,
+          quantity: 1,
+          billingStateCode: billingState || undefined,
+          purchaserEmail: pe,
+          sourceFormId: formId,
+          expectedTotalMinor: quote.totalMinor,
+          screenshotDataUrl,
+          buyerNote: buyerNote.trim() || undefined,
+          attendees,
+        });
+        onPendingReview(res.message || 'Submitted for review.');
+        return;
+      }
+
+      const order = await publicEventTicketsApi.checkout(eventId, {
+        ticketId,
+        quantity: 1,
+        billingStateCode: billingState || undefined,
+        purchaserEmail: pe,
+        sourceFormId: formId,
+        expectedTotalMinor: quote.totalMinor,
+        idempotencyKey: `reg-${formId}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        attendees,
+      });
+
+      await loadRazorpayScript();
+      type RazorpayResponse = { razorpay_order_id: string; razorpay_payment_id: string; razorpay_signature: string };
+      type RazorpayConstructor = new (opts: {
+        key: string;
+        amount: number;
+        currency: string;
+        order_id: string;
+        name: string;
+        description: string;
+        handler: (response: RazorpayResponse) => void;
+        modal?: { ondismiss?: () => void };
+        theme?: { color?: string };
+        prefill?: { email?: string; name?: string };
+      }) => { open: () => void; on: (ev: string, fn: (r: { error: { description?: string } }) => void) => void };
+
+      const Rzp = (window as unknown as { Razorpay: RazorpayConstructor }).Razorpay;
+      await new Promise<void>((resolve, reject) => {
+        let invoked = false;
+        const rzp = new Rzp({
+          key: order.keyId,
+          amount: order.amount,
+          currency: order.currency,
+          order_id: order.orderId,
+          name: eventName || 'Event',
+          description: selected.name,
+          handler: (response: RazorpayResponse) => {
+            invoked = true;
+            void publicEventTicketsApi
+              .verifyPayment(eventId, {
+                orderId: response.razorpay_order_id,
+                paymentId: response.razorpay_payment_id,
+                signature: response.razorpay_signature,
+              })
+              .then(() => resolve())
+              .catch((e) => reject(e instanceof Error ? e : new Error('Verification failed')));
+          },
+          modal: {
+            ondismiss: () => {
+              if (!invoked) reject(new Error(PAYMENT_CANCELLED_MESSAGE));
+            },
+          },
+          theme: { color: '#0f172a' },
+          prefill: {
+            email: pe,
+            name: `${attendee.firstName} ${attendee.lastName}`.trim(),
+          },
+        });
+        rzp.on('payment.failed', (response: { error: { description?: string } }) => {
+          reject(new Error(response.error?.description || 'Payment failed'));
+        });
+        rzp.open();
+      });
+      onPaid();
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : 'Checkout failed';
+      if (msg !== PAYMENT_CANCELLED_MESSAGE) setPayError(msg);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!tickets.length) {
+    return (
+      <div className="form-panel">
+        <p className="form-error">No tickets are available for this form.</p>
+        <button type="button" className="form-submit" onClick={onBack}>
+          Back
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="form-panel form-ticket-step">
+      <p className="form-ticket-step-label">Step 2 of 2 — Choose your ticket</p>
+      <div className="form-ticket-list">
+        {tickets.map((t) => {
+          const active = t._id === ticketId;
+          return (
+            <button
+              key={t._id}
+              type="button"
+              className={`form-ticket-card${active ? ' form-ticket-card--active' : ''}`}
+              onClick={() => setTicketId(t._id)}
+            >
+              <span className="form-ticket-card-name">{t.name}</span>
+              <span className="form-ticket-card-price">
+                {formatTicketPrice(t.basePriceMinor, t.currency || 'INR')}
+              </span>
+              {t.description?.trim() ? (
+                <span className="form-ticket-card-desc">{t.description.trim()}</span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+
+      {selected?.requiresBillingState ? (
+        <label className="form-field">
+          <span className="form-label">Billing state</span>
+          <select
+            className="form-input"
+            value={billingState}
+            onChange={(e) => setBillingState(e.target.value)}
+          >
+            <option value="">Select state…</option>
+            {INDIAN_STATES.map((s) => (
+              <option key={s.code} value={s.code}>
+                {s.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+
+      {payMode === 'both' ? (
+        <div className="form-ticket-channels">
+          <button
+            type="button"
+            className={`form-ticket-channel${checkoutChannel === 'online' ? ' form-ticket-channel--active' : ''}`}
+            onClick={() => setCheckoutChannel('online')}
+          >
+            Card / UPI (Razorpay)
+          </button>
+          <button
+            type="button"
+            className={`form-ticket-channel${checkoutChannel === 'manual' ? ' form-ticket-channel--active' : ''}`}
+            onClick={() => setCheckoutChannel('manual')}
+          >
+            Manual UPI
+          </button>
+        </div>
+      ) : null}
+
+      {isManualCheckout && manualUpi ? (
+        <div className="form-ticket-manual">
+          {manualUpi.upiId ? <p className="form-ticket-upi-id">UPI ID: {manualUpi.upiId}</p> : null}
+          {manualUpi.instructions ? <p className="form-desc">{manualUpi.instructions}</p> : null}
+          <div className="form-ticket-qr-wrap">
+            {manualUpi.manualQrMode === 'dynamic' ? (
+              dynamicQrDataUrl ? (
+                <img src={dynamicQrDataUrl} alt="UPI QR" className="form-ticket-qr" />
+              ) : (
+                <p className="form-desc">Select a ticket to generate the UPI QR with the exact amount.</p>
+              )
+            ) : manualUpi.upiQrImageUrl ? (
+              <img src={manualUpi.upiQrImageUrl} alt="UPI QR" className="form-ticket-qr" />
+            ) : null}
+          </div>
+          <label className="form-field">
+            <span className="form-label">Payment screenshot</span>
+            <input
+              type="file"
+              accept="image/*"
+              className="form-input"
+              onChange={(e) => onScreenshot(e.target.files?.[0] || null)}
+            />
+          </label>
+          <label className="form-field">
+            <span className="form-label">Note (optional)</span>
+            <input
+              className="form-input"
+              value={buyerNote}
+              onChange={(e) => setBuyerNote(e.target.value)}
+              placeholder="Transaction reference"
+            />
+          </label>
+        </div>
+      ) : null}
+
+      {quoteError ? <p className="form-error">{quoteError}</p> : null}
+      {quote ? (
+        <p className="form-ticket-total">
+          Total: <strong>{formatTicketPrice(quote.totalMinor, quote.currency)}</strong>
+          {quote.taxMinor > 0 ? (
+            <span className="form-ticket-tax"> (incl. tax {formatTicketPrice(quote.taxMinor, quote.currency)})</span>
+          ) : null}
+        </p>
+      ) : null}
+      {payError ? <p className="form-error">{payError}</p> : null}
+
+      <div className="form-ticket-actions">
+        <button type="button" className="form-submit form-submit--secondary" onClick={onBack} disabled={busy}>
+          Back
+        </button>
+        <button type="button" className="form-submit" onClick={() => void pay()} disabled={busy || !quote || payMode === 'none'}>
+          {busy ? 'Processing…' : isManualCheckout ? 'Submit payment proof' : 'Pay & register'}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/microsite/AboutSection.tsx b/src/components/microsite/AboutSection.tsx
new file mode 100644
index 0000000..5b963b1
--- /dev/null
+++ b/src/components/microsite/AboutSection.tsx
@@ -0,0 +1,243 @@
+import { Card, Button, Container } from 'react-bootstrap';
+import { BsFillPersonFill } from 'react-icons/bs';
+import { FaFacebook, FaInstagram, FaLinkedin, FaRegCalendarAlt } from 'react-icons/fa';
+import { FaLocationDot, FaXTwitter } from 'react-icons/fa6';
+import { useState, type ReactNode } from 'react';
+import ReactPlayer from 'react-player';
+import { str } from './sectionUtils';
+import type { MicrositeAboutConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext as Ctx } from './sectionUtils';
+
+export type AboutSectionProps = {
+  section: MicrositeSectionEnvelope<'about', MicrositeAboutConfig>;
+  ctx: Ctx;
+};
+
+function socialIcon(name: string): ReactNode | null {
+  switch (name.trim().toLowerCase()) {
+    case 'facebook':
+      return <FaFacebook />;
+    case 'instagram':
+      return <FaInstagram />;
+    case 'x':
+    case 'twitter':
+      return <FaXTwitter />;
+    case 'linkedin':
+      return <FaLinkedin />;
+    default:
+      return null;
+  }
+}
+
+function AboutMedia({ mediaType, mediaUrl, alt }: { mediaType: string; mediaUrl: string; alt: string }) {
+  const type = mediaType.trim().toLowerCase() || 'video';
+
+  if (type === 'image') {
+    return (
+      <img
+        src={mediaUrl}
+        alt={alt}
+        className="w-100 h-100"
+        style={{ objectFit: 'cover', display: 'block' }}
+      />
+    );
+  }
+
+  // Default / "video"
+  return (
+    <ReactPlayer
+      src={mediaUrl}
+      width="100%"
+      height="100%"
+      controls
+      style={{ position: 'absolute', inset: 0 }}
+    />
+  );
+}
+
+export function AboutSection({ section, ctx }: AboutSectionProps) {
+  const c = section.config;
+  const body = str(c.body) || str(c.lead);
+  const bullets = Array.isArray(c.bullets) ? (c.bullets as string[]) : [];
+  const socialLinks = ctx.data.socialLinks ?? [];
+
+  const eventName = ctx.data.event?.name || '';
+  const eventDate = ctx.data.event?.date || '';
+  const eventLocation = ctx.data.event?.location || '';
+  const organizer = ctx.data.event?.organizerName || ctx.data.event?.organizer || 'EventBuzz';
+  const mediaUrl = str(c.mediaUrl);
+  const mediaType = str(c.mediaType, 'video').toLowerCase();
+
+  // Other sections are available on the shared payload via ctx
+  const registerConfig = ctx.data.register_links?.config;
+  const ticketsConfig = ctx.data.tickets?.config;
+
+  const registerTitle = str(registerConfig?.title, 'Register Now');
+  const registerText = str(registerConfig?.text, 'Welcome! To join the event, please register below.');
+  const registerLabel = str(registerConfig?.primaryLabel, 'Register Now');
+  const registerUrl =
+    ctx.registrationUrl || str(registerConfig?.primaryUrl) || '#';
+
+  const ticketsTitle = str(ticketsConfig?.title, 'Get Tickets');
+  const ticketsText = str(ticketsConfig?.text);
+  const ticketsLabel = str(ticketsConfig?.primaryLabel, 'Get Tickets');
+  const ticketsUrl =
+    ctx.registrationUrl || str(ticketsConfig?.primaryUrl) || registerUrl;
+  const ticketTiers = Array.isArray(ticketsConfig?.tiers) ? ticketsConfig.tiers : [];
+
+  const tierKey = (tier: { id?: string; name?: string }, index: number) =>
+    str(tier.id) || str(tier.name) || String(index);
+
+  const [selectedTicketKey, setSelectedTicketKey] = useState<string>(() =>
+    ticketTiers.length ? tierKey(ticketTiers[0]!, 0) : '',
+  );
+
+  return (
+    <section id={section?.id || 'about'} className="about-section section eb-section-ligh bg-transparent">
+      <Container>
+        <Card className="card-theme">
+          <Card.Body>
+            <div className="row g-4 pt-2">
+              <div className="col-12 col-md-6">
+                {mediaUrl ? (
+                  <div className="media-container overflow-hidden rounded-4 ratio ratio-16x9 mb-4 position-relative">
+                    <AboutMedia mediaType={mediaType} mediaUrl={mediaUrl} alt={eventName || 'Event media'} />
+                  </div>
+                ) : null}
+                <h2 className="about-event-name mb-4">{eventName}</h2>
+
+                {body ? <p style={{ lineHeight: 1.7 }}>{body}</p> : null}
+
+                {bullets.length > 0 ? (
+                  <ul className="theme-list" style={{ lineHeight: 1.8 }}>
+                    {bullets.map((b, i) => (
+                      <li key={i}>{b}</li>
+                    ))}
+                  </ul>
+                ) : null}
+
+                {socialLinks.length > 0 ? (
+                  <div
+                    className="d-flex align-items-center gap-2 pt-3 mt-3"
+                    style={{ borderTop: `1px dashed var(--theme-card-border-color)` }}
+                  >
+                    <span
+                      className="p-1 px-2 shadow-sm rounded-2 font-14 fw-sb"
+                      style={{ backgroundColor: `var(--btn-bg)` }}
+                    >
+                      Follow us:{' '}
+                    </span>
+                    <div className="d-flex align-items-center gap-2 social-links">
+                      {socialLinks.map((link, i) => {
+                        const icon = socialIcon(link.name);
+                        if (!icon || !link.handleUrl) return null;
+                        return (
+                          <a key={i} href={link.handleUrl} aria-label={link.name} target="_blank" rel="noreferrer">
+                            {icon}
+                          </a>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+
+              <div className="col-12 col-md-6">
+                <div className="d-flex flex-column gap-3">
+                  <div className="d-flex flex-column gap-2 flex-grow-1">
+                    <div className="d-flex align-items-center gap-2">
+                      <div className="d-flex align-items-center gap-2">
+                        <div className="icon-container">
+                          <BsFillPersonFill />
+                        </div>
+                        <div className="d-flex flex-column">
+                          <span className="font-12">Organized by</span>
+                          <span className="font-14 fw-b">{organizer}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="d-flex align-items-center gap-2">
+                      <div className="d-flex align-items-center gap-2">
+                        <div className="icon-container">
+                          <FaRegCalendarAlt />
+                        </div>
+                        <div className="d-flex flex-column">
+                          <span className="font-12">Date</span>
+                          <span className="font-14 fw-b">{eventDate}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="d-flex align-items-center gap-2">
+                      <div className="d-flex align-items-center gap-2">
+                        <div className="icon-container">
+                          <FaLocationDot />
+                        </div>
+                        <div className="d-flex flex-column">
+                          <span className="font-12">Location</span>
+                          <span className="font-14 fw-b">{eventLocation}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {(registerConfig || ticketsConfig) ? <hr className="dashed-hr my-2" /> : null}
+
+                  {registerConfig ? (
+                    <Card id="register" className="card-theme card-register overflow-hidden">
+                      <Card.Header>
+                        <div className="card-title">{registerTitle}</div>
+                      </Card.Header>
+                      <Card.Body>
+                        {registerText ? <div className="d-flex fw-b mb-3">{registerText}</div> : null}
+                        <Button className="btn btn-primary w-100" href={registerUrl}>
+                          {registerLabel}
+                        </Button>
+                      </Card.Body>
+                    </Card>
+                  ) : null}
+
+                  {ticketsConfig ? (
+                    <Card id="tickets" className="card-theme card-tickets overflow-hidden">
+                      <Card.Header>
+                        <div className="card-title">{ticketsTitle}</div>
+                      </Card.Header>
+                      <Card.Body>
+                        {ticketsText ? <div className="d-flex fw-b mb-3">{ticketsText}</div> : null}
+                        <div className="d-flex ticket-items flex-column gap-2">
+                          {ticketTiers.map((tier, i) => {
+                            const key = tierKey(tier, i);
+                            const isSelected = selectedTicketKey === key;
+                            return (
+                              <button
+                                key={key}
+                                type="button"
+                                className={`ticket-item text-start${isSelected ? ' selected' : ''}`}
+                                aria-pressed={isSelected}
+                                onClick={() => setSelectedTicketKey(key)}
+                              >
+                                <div className="ticket-item-title fw-b">{str(tier.name)}</div>
+                                <div className="ticket-item-price">{str(tier.price)}</div>
+                                {tier.description ? (
+                                  <div className="ticket-item-description">{str(tier.description)}</div>
+                                ) : null}
+                              </button>
+                            );
+                          })}
+                          <Button className="btn btn-primary w-100 mt-3" href={ticketsUrl}>
+                            {ticketsLabel}
+                          </Button>
+                        </div>
+                      </Card.Body>
+                    </Card>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          </Card.Body>
+        </Card>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/microsite/AgendaSection.tsx b/src/components/microsite/AgendaSection.tsx
new file mode 100644
index 0000000..37ee5c4
--- /dev/null
+++ b/src/components/microsite/AgendaSection.tsx
@@ -0,0 +1,148 @@
+import { useMemo, useState } from 'react';
+import type { AgendaItem, MicrositeAgendaConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext } from './sectionUtils';
+import { str } from './sectionUtils';
+import { IoChevronDownOutline, IoChevronUpOutline } from 'react-icons/io5';
+
+export type AgendaSectionProps = {
+  section: MicrositeSectionEnvelope<'agenda', MicrositeAgendaConfig>;
+  ctx: MicrositeSectionContext;
+};
+
+export function AgendaSection({ section, ctx }: AgendaSectionProps) {
+  const title = str(section.config.title, 'Schedule');
+
+  const list = useMemo((): AgendaItem[] => {
+    const items = Array.isArray(section.config.agenda) ? section.config.agenda : [];
+    if (items.length) return items;
+    return [
+      {
+        title: 'Session 1',
+        time: '9:00 AM',
+        track: 'Main',
+        date: '',
+      },
+    ];
+  }, [section.config.agenda]);
+
+  const dates = useMemo(() => {
+    const d = list.map((item) => item.date).filter(Boolean) as string[];
+    return Array.from(new Set(d));
+  }, [list]);
+
+  const [selectedDate, setSelectedDate] = useState<string>(dates.length ? dates[0]! : '');
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  const filteredList = dates.length ? list.filter((item) => item.date === selectedDate) : list;
+
+  return (
+    <section id={section?.id || 'agenda'} className="eb-schedule-section section py-5 bg-transparent">
+      <div className="container">
+        <h2 className="eb-section-heading text-center mb-4">{title}</h2>
+
+        <div className="d-flex justify-content-cente flex-wrap gap-2 mb-3">
+          {dates.map((date) => (
+            <button
+              key={date}
+              className={`btn btn-theme-tab ${selectedDate === date ? 'btn-primary' : 'btn-primary-outline'}`}
+              style={{ marginRight: '8px' }}
+              onClick={() => {
+                setSelectedDate(date);
+                setExpandedIndex(null);
+              }}
+            >
+              {date}
+            </button>
+          ))}
+        </div>
+
+        <div className="theme-accordion-wrapper">
+          {filteredList.map((item, index) => {
+            const isExpanded = expandedIndex === index;
+            const speakers = Array.isArray(item.speakers) ? item.speakers.filter((s) => str(s.name)) : [];
+            const hasSpeakers = speakers.length > 0;
+
+            return (
+              <div key={index} className="theme-accordion-item">
+                <button
+                  onClick={() => setExpandedIndex(isExpanded ? null : index)}
+                  className="theme-accordion-button"
+                >
+                  <div className="theme-accordion-button-content">
+                    <span className="theme-accordion-time">{item.time || 'TBA'}</span>
+                    <div className="flex-grow-1">
+                      <div className="theme-accordion-title">{item.title || 'Untitled Session'}</div>
+                      {item.track ? <span className="theme-accordion-track">{item.track}</span> : null}
+                    </div>
+                  </div>
+
+                  <div className="theme-accordion-icon">
+                    {isExpanded ? <IoChevronUpOutline /> : <IoChevronDownOutline />}
+                  </div>
+                </button>
+
+                {isExpanded && (
+                  <div className="theme-accordion-content">
+                    {item.description ? (
+                      <div style={{ marginBottom: '1.5rem' }}>
+                        <p>{item.description}</p>
+                      </div>
+                    ) : null}
+
+                    {hasSpeakers ? (
+                      <div className="theme-accordion-speaker-info">
+                        <h4 className="theme-accordion-speaker-info-heading">
+                          {speakers.length > 1 ? 'Speakers' : 'Speaker'}
+                        </h4>
+                        <div className="d-flex gap-3" style={{ marginTop: '0.75rem' }}>
+                          {speakers.map((speaker, si) => (
+                            <div key={si} className="d-flex align-items-center gap-3">
+                              {speaker.photoUrl ? (
+                                <img
+                                  src={speaker.photoUrl}
+                                  alt={str(speaker.name)}
+                                  style={{
+                                    width: '48px',
+                                    height: '48px',
+                                    borderRadius: '50%',
+                                    objectFit: 'cover',
+                                    border: '2px solid #e2e8f0',
+                                    flexShrink: 0,
+                                  }}
+                                />
+                              ) : null}
+                              <div className="theme-accordion-speaker-name">{str(speaker.name)}</div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="text-center mt-4">
+          {ctx.registrationUrl ? (
+            <a
+              className="btn btn-primary btn-lg me-2"
+              href={ctx.registrationUrl}
+              style={{ minWidth: '220px' }}
+            >
+              Register
+            </a>
+          ) : null}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes slideDown {
+          from { opacity: 0; transform: translateY(-10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </section>
+  );
+}
diff --git a/src/components/microsite/BannerSection.tsx b/src/components/microsite/BannerSection.tsx
new file mode 100644
index 0000000..9f8ffde
--- /dev/null
+++ b/src/components/microsite/BannerSection.tsx
@@ -0,0 +1,27 @@
+import { Container } from 'react-bootstrap';
+import type { MicrositeBannerConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext as Ctx } from './sectionUtils';
+import { str } from './sectionUtils';
+
+export type BannerSectionProps = {
+  section: MicrositeSectionEnvelope<'banner', MicrositeBannerConfig>;
+  ctx: Ctx;
+};
+
+export function BannerSection({ section }: BannerSectionProps) {
+  const c = section.config;
+  const bgImage = str(c.backgroundImage);
+
+  return (
+    <section id={section?.id || 'hero'}>
+      <Container fluid className="px-0">
+        <section className={`eb-hero-block position-relative text-white text-center overflow-hidden${bgImage ? ' eb-hero-has-image' : ''}`}>
+          {bgImage ? <div className="eb-hero-bg" style={{ backgroundImage: `url(${bgImage})` }} /> : null}
+          <div className="eb-hero-mask" />
+          <div className="container eb-hero-inner" />
+        </section>
+      </Container>
+    </section>
+  );
+}
+
diff --git a/src/components/microsite/ContactSection.tsx b/src/components/microsite/ContactSection.tsx
new file mode 100644
index 0000000..d37dcab
--- /dev/null
+++ b/src/components/microsite/ContactSection.tsx
@@ -0,0 +1,106 @@
+import { FaEnvelope, FaPhoneAlt } from 'react-icons/fa';
+import { FaLocationDot } from 'react-icons/fa6';
+import { Card, Col, Container, Row } from 'react-bootstrap';
+import type { MicrositeContactConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext as Ctx } from './sectionUtils';
+import { str } from './sectionUtils';
+
+export type ContactSectionProps = {
+  section: MicrositeSectionEnvelope<'contact', MicrositeContactConfig>;
+  ctx: Ctx;
+};
+
+export function ContactSection({ section, ctx }: ContactSectionProps) {
+  const c = section.config;
+  const title = str(c.title, 'Contact');
+  const text = str(c.text);
+  const email = str(c.email);
+  const phone = str(c.phone);
+  const address = str(c.address);
+  const eventLocation = str(ctx.data.event.location);
+  const safeEventLocation = encodeURIComponent(
+    // "1600 Amphitheatre Parkway, Mountain View, CA"
+    eventLocation
+  );
+
+
+  return (
+    <section id={section?.id || 'contact'} className="section">
+      <Container>
+        <Row className="g-4">
+          <Col xs={12} md={6}>
+            <Card className="h-100 card-theme card-contact-details">
+              <Card.Header>
+                <div className="card-title">{title}</div>
+              </Card.Header>
+              <Card.Body>
+                {text ? <p className="card-text mb-3">{text}</p> : null}
+                <div className="d-flex flex-column gap-2">
+                  {email ? (
+                    <div className="d-flex align-items-center contact-link-item gap-2">
+                      <div className="icon-container">
+                        <FaEnvelope />
+                      </div>
+                      <div className="d-flex flex-column">
+                        <span className="font-12">Email</span>
+                        <span className="font-14 fw-b contact-person">
+                          <a href={`mailto:${email}`}>{email}</a>
+                        </span>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {phone ? (
+                    <div className="d-flex align-items-center contact-link-item gap-2">
+                      <div className="icon-container">
+                        <FaPhoneAlt />
+                      </div>
+                      <div className="d-flex flex-column">
+                        <span className="font-12">Phone</span>
+                        <span className="font-14 fw-b contact-person">
+                          <a href={`tel:${phone.replace(/\s+/g, '')}`}>{phone}</a>
+                        </span>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {address ? (
+                    <div className="d-flex align-items-center contact-link-item gap-2">
+                      <div className="icon-container">
+                        <FaLocationDot />
+                      </div>
+                      <div className="d-flex flex-column">
+                        <span className="font-12">Address</span>
+                        <span className="font-14 fw-b">{address}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </Card.Body>
+            </Card>
+          </Col>
+
+          <Col xs={12} md={6}>
+            <Card className="h-100 card-theme">
+              <Card.Header>
+                <div className="card-title">Location</div>
+              </Card.Header>
+              <Card.Body>
+                {eventLocation ? <div className="font-14 mb-2">{eventLocation}</div> : null}
+                <div className="map-container ratio ratio-16x9 rounded-3 overflow-hidden">
+                  <iframe
+                    title="map"
+                    width="100%"
+                    height="450"
+                    loading="lazy"
+                    src={`https://maps.google.com/maps?q=${safeEventLocation}&z=15&output=embed`}
+                  />
+                </div>
+              </Card.Body>
+            </Card>
+          </Col>
+        </Row>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/microsite/CountdownSection.tsx b/src/components/microsite/CountdownSection.tsx
new file mode 100644
index 0000000..eff02a2
--- /dev/null
+++ b/src/components/microsite/CountdownSection.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { MicrositeCountdownConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext } from './sectionUtils';
+import { str } from './sectionUtils';
+
+export type CountdownSectionProps = {
+  section: MicrositeSectionEnvelope<'countdown', MicrositeCountdownConfig>;
+  ctx: MicrositeSectionContext;
+};
+
+const EVENT_TIMEZONE = 'Asia/Kolkata';
+
+type TimeLeft = {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  expired: boolean;
+};
+
+function isNoonUtcDateMarker(date: Date): boolean {
+  return (
+    !Number.isNaN(date.getTime()) &&
+    date.getUTCHours() === 12 &&
+    date.getUTCMinutes() === 0 &&
+    date.getUTCSeconds() === 0 &&
+    date.getUTCMilliseconds() === 0
+  );
+}
+
+/** Match backend: noon-UTC date markers → 12:00 Asia/Kolkata on that calendar day. */
+function resolveCountdownInstant(iso?: string | null): number {
+  if (!iso) return NaN;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return NaN;
+  if (isNoonUtcDateMarker(d)) {
+    return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 6, 30, 0, 0);
+  }
+  return d.getTime();
+}
+
+function formatCountdownHeading(startMs: number, timeZone = EVENT_TIMEZONE): string {
+  if (!Number.isFinite(startMs)) return '';
+  return new Date(startMs).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZone,
+  });
+}
+
+function getTimeLeft(startMs: number): TimeLeft {
+  const diff = startMs - Date.now();
+  if (!Number.isFinite(startMs) || diff <= 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0, expired: true };
+  }
+
+  const totalSeconds = Math.floor(diff / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return { days, hours, minutes, seconds, expired: false };
+}
+
+function pad(n: number) {
+  return String(n).padStart(2, '0');
+}
+
+export function CountdownSection({ section, ctx }: CountdownSectionProps) {
+  const startMs = useMemo(() => {
+    const fromConfig = str(section.config.startsAt);
+    if (fromConfig) {
+      const ms = new Date(fromConfig).getTime();
+      if (Number.isFinite(ms)) return ms;
+    }
+    return resolveCountdownInstant(ctx.data.event.startDate);
+  }, [section.config.startsAt, ctx.data.event.startDate]);
+
+  const title = useMemo(() => {
+    const configured = str(section.config.headingLine);
+    if (Number.isFinite(startMs)) {
+      return `Event starts · ${formatCountdownHeading(startMs)}`;
+    }
+    return configured || 'Event starts soon';
+  }, [section.config.headingLine, startMs]);
+
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(() => getTimeLeft(startMs));
+
+  useEffect(() => {
+    if (!Number.isFinite(startMs)) {
+      setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0, expired: true });
+      return;
+    }
+
+    const tick = () => setTimeLeft(getTimeLeft(startMs));
+    tick();
+    const id = window.setInterval(tick, 1000);
+    return () => window.clearInterval(id);
+  }, [startMs]);
+
+  if (!Number.isFinite(startMs)) return null;
+
+  const units = [
+    { label: 'Days', value: timeLeft.days },
+    { label: 'Hours', value: timeLeft.hours },
+    { label: 'Minutes', value: timeLeft.minutes },
+    { label: 'Seconds', value: timeLeft.seconds },
+  ];
+
+  return (
+    <section id={section.id || 'countdown'} className="eb-countdown-section" aria-label="Countdown to event">
+      <div className="container">
+        {title ? <h2 className="eb-countdown-title">{title}</h2> : null}
+
+        {timeLeft.expired ? (
+          <p className="eb-countdown-expired mb-0" role="status" aria-live="polite">
+            We're live — welcome to {ctx.data.event.name || 'the event'}!
+          </p>
+        ) : (
+          <div className="eb-countdown-units" role="timer" aria-live="polite">
+            {units.map((unit, i) => (
+              <div key={unit.label} className="d-flex align-items-center">
+                <div className="eb-countdown-unit">
+                  <div className="eb-countdown-value">{pad(unit.value)}</div>
+                  <div className="eb-countdown-label">{unit.label}</div>
+                </div>
+                {i < units.length - 1 ? <span className="eb-countdown-sep" aria-hidden="true">:</span> : null}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/microsite/FooterSection.tsx b/src/components/microsite/FooterSection.tsx
new file mode 100644
index 0000000..da824c6
--- /dev/null
+++ b/src/components/microsite/FooterSection.tsx
@@ -0,0 +1,32 @@
+import type { MicrositeFooterConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext as Ctx } from './sectionUtils';
+import { str } from './sectionUtils';
+
+export type FooterSectionProps = {
+  section: MicrositeSectionEnvelope<'footer', MicrositeFooterConfig>;
+  ctx: Ctx;
+};
+
+export function FooterSection({ section, ctx }: FooterSectionProps) {
+  const copyrightText = str(
+    section.config.copyrightText,
+    `© ${new Date().getFullYear()} ${ctx.data.event.name}. All rights reserved.`,
+  );
+
+  return (
+    <footer id={section?.id || 'footer'} className="mt-3 footer-section">
+      <div className="container py-3">
+        <div className="d-flex flex-column gap-3 flex-md-row justify-content-md-between">
+          <div className="flex-grow-1">
+            <span className="font-13 opacity-75">{copyrightText}</span>
+          </div>
+          <div className="flex-shrink-0">
+            <span className="font-13 opacity-75">
+              Powered by <a href="https://eventbuzz.live/" target="_blank" className="fw-sb theme-link">EventBuzz</a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/microsite/HeaderSection.tsx b/src/components/microsite/HeaderSection.tsx
new file mode 100644
index 0000000..2c0c175
--- /dev/null
+++ b/src/components/microsite/HeaderSection.tsx
@@ -0,0 +1,62 @@
+import { Container, Nav, Navbar, Offcanvas } from 'react-bootstrap';
+import type { MicrositeSectionEnvelope, MicrositeHeaderConfig } from '../../types';
+import type { MicrositeSectionContext } from './sectionUtils';
+import { str } from './sectionUtils';
+
+export type HeaderSectionProps = {
+  section: MicrositeSectionEnvelope<'header', MicrositeHeaderConfig>;
+  ctx: MicrositeSectionContext;
+};
+
+export function HeaderSection({ section, ctx }: HeaderSectionProps) {
+  const c = section.config;
+  const logoText = str(c.logoText, ctx.data.event.name);
+  const logoUrl = str(c.logoUrl || ctx.data.website.logo || ctx.data.event.logoUrl || '', '');
+
+  const menuItems = (Array.isArray(c.menuItems) ? c.menuItems : []) as { label?: string; url?: string }[];
+
+  return (
+    <Navbar id={section?.id || 'header'} fixed="top" expand="lg" className="theme-navbar mb-3">
+      <Container fluid>
+        <Navbar.Brand href="#">
+          <div className="eb-header-logo-container">{logoUrl && <img src={logoUrl} alt={logoText} className="eb-header-logo" />}</div>
+          <span>{logoText}</span>
+          {/* <span>ERS India SUMMIT 2026</span> */}
+        </Navbar.Brand>
+
+        <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-lg`} />
+        <Navbar.Offcanvas
+          id={`offcanvasNavbar-expand-lg`}
+          aria-labelledby={`offcanvasNavbarLabel-expand-lg`}
+          placement="end"
+          className="theme-navbar-offcanvas"
+        >
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title id={`offcanvasNavbarLabel-expand-lg`}>Menu</Offcanvas.Title>
+          </Offcanvas.Header>
+
+          <Offcanvas.Body>
+            <Nav className="justify-content-end flex-grow-1 pe-3">
+              {menuItems.map((item, i) => {
+                const label = str(item.label);
+                const url = str(item.url, '#');
+                const isReg = label.toLowerCase() === 'register';
+                if (isReg && !ctx.registrationUrl) return null;
+                return (
+                  <Nav.Link
+                    key={i}
+                    href={isReg ? ctx.registrationUrl : url}
+                    className={isReg ? 'btn btn-sm btn-primary btn-register ms-2' : ''}
+                  >
+                    {label}
+                  </Nav.Link>
+                );
+              })}
+            </Nav>
+          </Offcanvas.Body>
+        </Navbar.Offcanvas>
+      </Container>
+    </Navbar>
+  );
+}
+
diff --git a/src/components/microsite/KeyPersonsSection.tsx b/src/components/microsite/KeyPersonsSection.tsx
new file mode 100644
index 0000000..76479aa
--- /dev/null
+++ b/src/components/microsite/KeyPersonsSection.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { Card, Col, Modal, Row } from 'react-bootstrap';
+import type { MicrositeSectionContext as Ctx } from './sectionUtils';
+import { str } from './sectionUtils';
+import type { MicrositeKeyPerson, MicrositeKeyPersonsConfig, MicrositeSectionEnvelope } from '../../types';
+
+export type KeyPersonsSectionProps = {
+  section: MicrositeSectionEnvelope<'key_persons', MicrositeKeyPersonsConfig>;
+  ctx: Ctx;
+};
+
+export function KeyPersonsSection({ section }: KeyPersonsSectionProps) {
+  const title = str(section.config.title, 'Key Persons');
+  const limit = Number(section.config.limit) || 12;
+  const list = (
+    Array.isArray(section.config.keyPersons) ? (section.config.keyPersons as MicrositeKeyPerson[]) : []
+  ).slice(0, limit);
+  const [selected, setSelected] = useState<MicrositeKeyPerson | null>(null);
+
+  return (
+    <>
+      {list.length > 0 && (
+        <section id={section?.id || 'key-persons'} className="eb-key-persons-section section py-5">
+          <div className="container">
+            <h2 className="eb-section-heading text-center mb-5">{title}</h2>
+            <Row className="g-4">
+              {list.map((s, i) => (
+                <Col key={i} className="col-12 col-sm-12 col-lg-6">
+                  <Card
+                    className="card-theme card-key-person h-100 shadow-sm"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setSelected(s)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setSelected(s);
+                      }
+                    }}
+                    aria-label={`View details for ${s.name}`}
+                  >
+                    <Card.Body>
+                      <div className="d-flex flex-column flex-sm-row gap-3">
+                        <div className="flex-shrink-0 img-container">
+                          {s.photoUrl ? <img src={s.photoUrl} className="card-img-to" alt={s.name} /> : null}
+                        </div>
+                        <div className="flex-grow-1 pt-2">
+                          <h5 className="card-title">{s.name}</h5>
+                          {s.designation ? <p className="card-subtitle text-highlight">{s.designation}</p> : null}
+                          {s.bio ? <p className="card-text mt-2">{s.bio}</p> : null}
+                        </div>
+                      </div>
+                    </Card.Body>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          </div>
+        </section>
+      )}
+
+      <Modal
+        show={!!selected}
+        onHide={() => setSelected(null)}
+        centered
+        size="lg"
+        className="eb-speaker-modal"
+        contentClassName="eb-speaker-modal-content"
+      >
+        {selected ? (
+          <>
+            <Modal.Header closeButton>
+              <Modal.Title>{selected.name}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <div className="eb-speaker-modal-body">
+                <div className="eb-speaker-modal-photo">
+                  {selected.photoUrl ? (
+                    <img src={selected.photoUrl} alt="" />
+                  ) : (
+                    <div className="eb-speaker-modal-photo-placeholder" aria-hidden="true" />
+                  )}
+                </div>
+                <div className="eb-speaker-modal-info">
+                  {selected.designation ? (
+                    <p className="eb-speaker-modal-designation text-highlight">{selected.designation}</p>
+                  ) : null}
+                  {selected.bio ? <p className="eb-speaker-modal-bio mb-0">{selected.bio}</p> : null}
+                </div>
+              </div>
+            </Modal.Body>
+          </>
+        ) : null}
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/microsite/MicrositeLayout.tsx b/src/components/microsite/MicrositeLayout.tsx
index e8bbb65..590464e 100644
--- a/src/components/microsite/MicrositeLayout.tsx
+++ b/src/components/microsite/MicrositeLayout.tsx
@@ -1,5 +1,5 @@
-import { useEffect, type CSSProperties, type ReactNode } from 'react';
-import { conferenceCssVars, loadConferenceFont, resolveThemeClass } from '../../theme/conferenceTheme';
+import { useEffect, type ReactNode } from 'react';
+import { conferenceCssVars, loadConferenceFont, resolveThemeClasses } from '../../theme/conferenceTheme';
 import type { PublicMicrositePayload } from '../../types';
 
 type Props = {
@@ -7,6 +7,31 @@ type Props = {
   children: ReactNode;
 };
 
+const THEME_CLASS_PREFIX = 'theme-';
+const PATTERN_CLASS_PREFIX = 'pattern-';
+
+function clearThemeClasses(el: HTMLElement) {
+  const toRemove: string[] = [];
+  el.classList.forEach((cls) => {
+    if (cls.startsWith(THEME_CLASS_PREFIX) || cls.startsWith(PATTERN_CLASS_PREFIX)) {
+      toRemove.push(cls);
+    }
+  });
+  toRemove.forEach((cls) => el.classList.remove(cls));
+}
+
+function applyCssVars(el: HTMLElement, vars: Record<string, string>) {
+  for (const [key, value] of Object.entries(vars)) {
+    el.style.setProperty(key, value);
+  }
+}
+
+function clearCssVars(el: HTMLElement, keys: string[]) {
+  for (const key of keys) {
+    el.style.removeProperty(key);
+  }
+}
+
 export function MicrositeLayout({ data, children }: Props) {
   useEffect(() => {
     loadConferenceFont(data.website);
@@ -23,17 +48,27 @@ export function MicrositeLayout({ data, children }: Props) {
     }
   }, [data]);
 
-  const style = conferenceCssVars(data.website) as CSSProperties;
-  const themeClass = resolveThemeClass(data.website.theme);
+  useEffect(() => {
+    const html = document.documentElement;
+    const vars = conferenceCssVars(data.website);
+    const themeClasses = resolveThemeClasses(data.website.theme);
+    const varKeys = Object.keys(vars);
+
+    clearThemeClasses(html);
+    themeClasses.forEach((cls) => html.classList.add(cls));
+    applyCssVars(html, vars);
+
+    return () => {
+      clearThemeClasses(html);
+      clearCssVars(html, varKeys);
+    };
+  }, [data]);
 
   return (
-    <div className={['eb-microsite-root', themeClass].filter(Boolean).join(' ')} style={style}>
+    <div className="eb-microsite-root">
       <main className="eb-microsite-main">
         {children}
         <div className="eb-microsite-footer-spacer"></div>
-        <footer className="eb-static-footer">
-          Powered by <strong>EventBuzz</strong>
-        </footer>
       </main>
     </div>
   );
diff --git a/src/components/microsite/RegisterLinksSection.tsx b/src/components/microsite/RegisterLinksSection.tsx
new file mode 100644
index 0000000..a1cb3a2
--- /dev/null
+++ b/src/components/microsite/RegisterLinksSection.tsx
@@ -0,0 +1,42 @@
+import type { MicrositeRegisterLinksConfig, MicrositeSectionEnvelope } from '../../types';
+import type { MicrositeSectionContext } from './sectionUtils';
+import { str } from './sectionUtils';
+
+export type RegisterLinksSectionProps = {
+  section: MicrositeSectionEnvelope<'register_links', MicrositeRegisterLinksConfig>;
+  ctx: MicrositeSectionContext;
+};
+
+export function RegisterLinksSection({ section, ctx }: RegisterLinksSectionProps) {
+  if (!ctx.registrationUrl) return null;
+
+  const c = section.config;
+  const title = str(c.title, 'Register');
+  const primaryLabel = str(c.primaryLabel, 'Register Now');
+  const primaryUrl = ctx.registrationUrl || str(c.primaryUrl);
+  const secondaryLabel = str(c.secondaryLabel);
+  const secondaryUrl = str(c.secondaryUrl, '#');
+  const text = str(c.text, 'Welcome! To join the event, please register below.');
+
+  return (
+    <section id={section?.id || 'register'} className="section register-section">
+      <div className="container text-center">
+        <h2 className="eb-section-heading mb-4">{title}</h2>
+        <p className="font-18 fw-l mb-3">{text}</p>
+        <a className="btn btn-primary btn-lg" href={primaryUrl}>
+          {primaryLabel}
+        </a>
+        {secondaryLabel ? (
+          <a
+            className="btn btn-outline-secondary btn-lg ms-2"
+            href={secondaryUrl}
+            style={{ marginLeft: '0.5rem' }}
+          >
+            {secondaryLabel}
+          </a>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
diff --git a/src/components/microsite/SectionRenderer.tsx b/src/components/microsite/SectionRenderer.tsx
deleted file mode 100644
index af93f2b..0000000
--- a/src/components/microsite/SectionRenderer.tsx
+++ /dev/null
@@ -1,1146 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { AgendaItem, MicrositeSection, MicrositeSpeaker, PublicMicrositePayload } from '../../types';
-import { visitorApi } from '../../api/visitor';
-import 'bootstrap-icons/font/bootstrap-icons.css';
-type Ctx = {
-  data: PublicMicrositePayload;
-  eventId: string;
-  registrationUrl: string;
-};
-
-function str(v: unknown, fallback = ''): string {
-  return v != null ? String(v).trim() : fallback;
-}
-
-function isRegisterLabel(label: string): boolean {
-  return /\bregister\b/i.test(label);
-}
-
-function looksLikeRegistrationUrl(url: string): boolean {
-  return /\/register\/?$/i.test(url) || /\/form\/[a-f0-9]{24}\/?$/i.test(url);
-}
-
-function resolveRegistrationCtaUrl(label: string, configuredUrl: unknown, registrationUrl: string): string {
-  const configured = str(configuredUrl);
-  const wantsRegistration = isRegisterLabel(label) || looksLikeRegistrationUrl(configured);
-  if (wantsRegistration) return registrationUrl;
-  return configured || '#';
-}
-
-function HeaderSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const logoText = str(c.logoText, ctx.data.event.name);
-  // const logoUrl = str(c.logoUrl, ctx.data.website.logo || ctx.data.event.logoUrl || '');
-  const logoUrl = str( c.logoUrl || ctx.data.website.logo || ctx.data.event.logoUrl, '');
-  const menuItems = (Array.isArray(c.menuItems) ? c.menuItems : []) as { label?: string; url?: string }[];
-
-  // Temporary console logs for debugging for Logo in Navbar
-  // console.log("Header config:", c);
-  // console.log("Website logo:", ctx.data.website.logo);
-  // console.log("Event logo:", ctx.data.event.logoUrl);
-  // console.log("Final logoUrl:", logoUrl);
-
-  return (
-    <header className="eb-conference-header fixed-top">
-      <nav className="navbar navbar-expand-lg navbar-dark">
-        <div className="container-fluid px-3 px-lg-4" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
-          {/* <a className="navbar-brand" href="#hero" style={{ textDecoration: 'none', color: '#fff' }}>
-            {logoUrl ? <img src={logoUrl} alt={logoText} className="eb-header-logo" /> : <span>{logoText}</span>}
-          </a> */}
-          <a className="navbar-brand" href="#hero" > 
-            <div className="eb-header-logo-container">{logoUrl && ( <img src={logoUrl} alt={logoText} className="eb-header-logo" /> )}</div>
-            <span>{logoText}</span>
-          </a>
-          {/* <ul className="navbar-nav" style={{ display: 'flex',alignItems: 'center', gap: '0.75rem', listStyle: 'none', margin: 0, padding: 0, flexWrap: 'wrap' }}>
-            {menuItems.map((item, i) => {
-              const label = str(item.label);
-              const url = str(item.url, '#');
-              const isReg = label.toLowerCase() === 'register';
-              if (isReg && !ctx.registrationUrl) return null;
-              return (
-                <li key={i}>
-                  <a
-                    className={isReg ? 'nav-link btn btn-sm btn-outline-light' : 'nav-link'}
-                    href={isReg ? ctx.registrationUrl : url}
-                    style={{ textDecoration: 'none', color: '#fff' }}
-                  >
-                    {label}
-                  </a>
-                </li>
-              );
-            })}
-          </ul> */}
-        </div>
-      </nav>
-    </header>
-  );
-}
-
-function BannerSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const headline = str(c.headline, 'Welcome');
-  const subtext = str(c.subtext);
-  const heroMetaLine = str(c.heroMetaLine);
-  const ctaText = str(c.ctaText);
-  const ctaUrl = resolveRegistrationCtaUrl(ctaText, c.ctaUrl, ctx.registrationUrl);
-  const bgImage = str(c.backgroundImage);
-  const secText = str(c.secondaryCtaText);
-  const secUrl = str(c.secondaryCtaUrl, '#schedule');
-
-  return (
-    <section id="hero" className={`eb-hero-block position-relative text-white text-center overflow-hidden${bgImage ? ' eb-hero-has-image' : ''}`}>
-      {bgImage ? <div className="eb-hero-bg" style={{ backgroundImage: `url(${bgImage})` }} /> : null}
-      <div className="eb-hero-mask" />
-      <div className="container eb-hero-inner">
-        {/* <h1 className="eb-hero-heading mb-4">{headline}</h1> */}
-        {/* {heroMetaLine ? <div className="eb-hero-meta mb-3">{heroMetaLine}</div> : null} */}
-        {/* {subtext ? <p className="eb-hero-intro mb-4">{subtext}</p> : null} */}
-        {(ctaText || secText) && (
-          <div className="eb-hero-cta">
-            {ctaText && ctaUrl ? (
-              <a className="btn btn-primary btn-lg" href={ctaUrl}>
-                {ctaText}
-              </a>
-            ) : null}
-            {/* {secText ? (
-              <a className="btn btn-outline-light btn-lg" href={secUrl}>
-                {secText}
-              </a>
-            ) : null} */}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function CountdownSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const headingLine = str(section.config.headingLine);
-  const start = ctx.data.event.startDate ? new Date(ctx.data.event.startDate).getTime() : NaN;
-  const [phrase, setPhrase] = useState('…');
-
-  useEffect(() => {
-    const eventName = ctx.data.event.name || 'Event';
-    const tick = () => {
-      if (!Number.isFinite(start)) {
-        setPhrase('');
-        return;
-      }
-      const t = start - Date.now();
-      if (t <= 0) {
-        setPhrase(`We're live — welcome to ${eventName}!`);
-        return;
-      }
-      const sec = Math.floor(t / 1000);
-      const days = Math.floor(sec / 86400);
-      const hours = Math.floor((sec % 86400) / 3600);
-      const mins = Math.floor((sec % 3600) / 60);
-      const toGo = (n: number, unit: string) => (n === 1 ? `1 ${unit} to go` : `${n} ${unit}s to go`);
-      if (days >= 1) setPhrase(toGo(days, 'day'));
-      else if (hours >= 1) setPhrase(toGo(hours, 'hour'));
-      else if (mins >= 1) setPhrase(toGo(mins, 'minute'));
-      else setPhrase('Starting soon');
-    };
-    tick();
-    const id = window.setInterval(tick, 1000);
-    return () => window.clearInterval(id);
-  }, [start, ctx.data.event.name]);
-
-  return (
-    // <section className="eb-static-stats py-5 text-center" aria-label="Countdown to event">
-    //   <div className="container">
-    //     {headingLine ? <p className="eb-countdown-heading small text-uppercase mb-3">{headingLine}</p> : null}
-    //     <p className="eb-countdown-phrase mb-0" role="status" aria-live="polite">
-    //       {phrase}
-    //     </p>
-    //   </div>
-    // </section>
-    <></>
-  );
-}
-
-function AboutSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const title = str(c.title, 'About');
-  const body = str(c.body) || str(c.lead);
-  const bullets = Array.isArray(c.bullets) ? (c.bullets as string[]) : [];
-  const ctaText = str(c.ctaText) || str(c.ctaLabel);
-  const ctaUrl = resolveRegistrationCtaUrl(ctaText, c.ctaUrl, ctx.registrationUrl);
-
-  return (
-    <section id="about" className="about-section section eb-section-ligh bg-transparent">
-      {/* <div className="container" style={{ maxWidth: 820 }}> */}
-      <div className="container">
-        {/* <h2 className="eb-section-heading text-center mb-4">{title}</h2> */}
-        {/* {body ? <p style={{ lineHeight: 1.7, color: '#475569' }}>{body}</p> : null} */}
-        {body ? <p style={{ lineHeight: 1.7 }}>{body}</p> : null}
-        {bullets.length > 0 ? (
-          <ul className="theme-list" style={{ lineHeight: 1.8 }}>
-            {bullets.map((b, i) => (
-              <li key={i}>{b}</li>
-            ))}
-          </ul>
-        ) : null}
-        {/* {ctaText && ctaUrl ? (
-          <div className="text-center mt-4">
-            <a className="btn btn-primary btn-lg" href={ctaUrl}>
-              {ctaText}
-            </a>
-          </div>
-        ) : null} */}
-      </div>
-    </section>
-  );
-}
-
-// function AgendaSection({ section, items }: { section: MicrositeSection; items: AgendaItem[] }) {
-//   const title = str(section.config.title, 'Schedule');
-//   const list = items.length ? items : [{ title: 'Session 1', time: '9:00 AM', track: 'Main' }];
-//   const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
-
-//   return (
-//     <section id="schedule" className="eb-schedule-section section py-5">
-//       <div className="container">
-//         <h2 className="eb-section-heading text-center mb-5">{title}</h2>
-        
-//         <div
-//           style={{
-//             maxWidth: '900px',
-//             margin: '0 auto',
-//             background: '#fff',
-//             borderRadius: '12px',
-//             overflow: 'hidden',
-//             boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
-//             border: '0.5px solid #e2e8f0',
-//           }}
-//         >
-//           {list.map((item, index) => {
-//             const isExpanded = expandedIndex === index;
-//             const hasSp = !!str(item.speakerName);
-
-//             return (
-//               <div key={index} style={{ borderBottom: index < list.length - 1 ? '0.5px solid #e2e8f0' : 'none' }}>
-//                 <button
-//                   onClick={() => setExpandedIndex(isExpanded ? null : index)}
-//                   style={{
-//                     width: '100%',
-//                     background: isExpanded ? '#f8fafc' : '#fff',
-//                     border: 'none',
-//                     padding: '1rem 1.5rem',
-//                     textAlign: 'left',
-//                     cursor: 'pointer',
-//                     transition: 'background-color 0.3s, padding 0.3s',
-//                     display: 'flex',
-//                     alignItems: 'center',
-//                     gap: '1rem',
-//                     justifyContent: 'space-between',
-//                   }}
-//                   onMouseEnter={(e) => {
-//                     e.currentTarget.style.backgroundColor = '#f1f5f9';
-//                   }}
-//                   onMouseLeave={(e) => {
-//                     e.currentTarget.style.backgroundColor = isExpanded ? '#f8fafc' : '#fff';
-//                   }}
-//                 >
-//                   <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: 1, minWidth: 0, overflow: 'hidden'}}>
-//                     <span
-//                       style={{
-//                         background: '#0f3072',
-//                         color: '#fff',
-//                         padding: '0.5rem 0.75rem',
-//                         borderRadius: '4px',
-//                         fontSize: '0.8rem',
-//                         fontWeight: 600,
-//                         whiteSpace: 'nowrap',
-//                         flexShrink: 0,
-//                       }}
-//                     >
-//                       {item.time || 'TBA'}
-//                     </span>
-
-//                     <div style={{ minWidth: 0, flex: 1 }}>
-//                       <div
-//                         style={{
-//                           fontSize: '1rem',
-//                           fontWeight: 700,
-//                           color: '#0f172a',
-//                           margin: '0 0 0.25rem 0',
-//                           overflow: 'hidden',
-//                           textOverflow: 'ellipsis',
-//                           whiteSpace: 'nowrap',
-//                         }}
-//                       >
-//                         {item.title || 'Untitled Session'}
-//                       </div>
-//                       {item.track && (
-//                         <span
-//                           style={{
-//                             background: 'rgba(0, 194, 209, 0.1)',
-//                             color: '#0891b2',
-//                             padding: '0.25rem 0.6rem',
-//                             borderRadius: '3px',
-//                             fontSize: '0.65rem',
-//                             fontWeight: 600,
-//                             textTransform: 'uppercase',
-//                             letterSpacing: '0.3px',
-//                             display: 'inline-block',
-//                           }}
-//                         >
-//                           {item.track}
-//                         </span>
-//                       )}
-//                     </div>
-//                   </div>
-
-//                   <div
-//                     style={{
-//                       display: 'flex',
-//                       alignItems: 'center',
-//                       justifyContent: 'center',
-//                       width: '26px',
-//                       height: '26px',
-//                       background: isExpanded ? '#e0f2fe' : '#f1f5f9',
-//                       borderRadius: '6px',
-//                       transition: 'all 0.3s',
-//                       color: isExpanded ? '#0891b2' : '#64748b',
-//                       fontWeight: 600,
-//                       fontSize: '1.2rem',
-//                       flexShrink: 0,
-//                     }}
-//                   >
-//                     <i className={`bi ${isExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
-//                   </div>
-//                 </button>
-
-//                 {isExpanded && (
-//                   <div
-//                     style={{
-//                       background: '#f8fafc',
-//                       padding: '1.5rem',
-//                       borderTop: '1px solid #e2e8f0',
-//                       animation: 'slideDown 0.3s ease-out',
-//                     }}
-//                   >
-//                     {item.description && (
-//                       <div style={{ marginBottom: '1.5rem' }}>
-//                         <h4
-//                           style={{
-//                             fontSize: '0.85rem',
-//                             fontWeight: 600,
-//                             color: '#475569',
-//                             textTransform: 'uppercase',
-//                             letterSpacing: '0.5px',
-//                             marginBottom: '0.75rem',
-//                             margin: 0,
-//                           }}
-//                         >
-//                           Session Details
-//                         </h4>
-//                         <h3
-//                           style={{
-//                             margin: '0.75rem 0 0',
-//                             fontSize: '0.95rem',
-//                             color: '#536885',
-//                             lineHeight: 1.6,
-//                           }}
-//                         >
-//                           {item.title}
-//                         </h3>
-//                         {item.track && (
-//                         <span
-//                           style={{
-//                             background: 'rgba(0, 194, 209, 0.1)',
-//                             color: '#0891b2',
-//                             padding: '0.25rem 0.6rem',
-//                             borderRadius: '3px',
-//                             fontSize: '0.65rem',
-//                             fontWeight: 600,
-//                             textTransform: 'uppercase',
-//                             letterSpacing: '0.3px',
-//                             display: 'inline-block',
-//                           }}
-//                         >
-//                           {item.track}
-//                         </span>
-//                       )}
-                        
-//                         <p
-//                           style={{
-//                             margin: '0.75rem 0 0',
-//                             fontSize: '0.95rem',
-//                             color: '#475569',
-//                             lineHeight: 1.6,
-//                           }}
-//                         >
-//                           {item.description}
-//                         </p>
-//                       </div>
-//                     )}
-
-//                     {hasSp && (
-//                       <div style={{ paddingTop: '1rem', borderTop: '1px solid #e2e8f0' }}>
-//                         <h4
-//                           style={{
-//                             fontSize: '0.85rem',
-//                             fontWeight: 600,
-//                             color: '#475569',
-//                             textTransform: 'uppercase',
-//                             letterSpacing: '0.5px',
-//                             marginBottom: '0.75rem',
-//                             margin: 0,
-//                           }}
-//                         >
-//                           Speaker
-//                         </h4>
-//                         <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '0.75rem' }}>
-//                           {item.speakerPhotoUrl && (
-//                             <img
-//                               src={item.speakerPhotoUrl}
-//                               alt={str(item.speakerName)}
-//                               style={{
-//                                 width: '48px',
-//                                 height: '48px',
-//                                 borderRadius: '50%',
-//                                 objectFit: 'cover',
-//                                 border: '2px solid #e2e8f0',
-//                               }}
-//                             />
-//                           )}
-//                           <div>
-//                             <div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#0f172a' }}>
-//                               {item.speakerName}
-//                             </div>
-//                           </div>
-//                         </div>
-//                       </div>
-//                     )}
-//                   </div>
-//                 )}
-//               </div>
-//             );
-//           })}
-//         </div>
-
-//         <div className="text-center mt-4">
-//           <a className="btn btn-primary btn-lg me-2" href="#register">
-//             Register
-//           </a>
-//           <a className="btn btn-outline-secondary btn-lg" href="#hero">
-//             Back to top
-//           </a>
-//         </div>
-//       </div>
-
-//       <style>{`
-//         @keyframes slideDown {
-//           from {
-//             opacity: 0;
-//             transform: translateY(-10px);
-//           }
-//           to {
-//             opacity: 1;
-//             transform: translateY(0);
-//           }
-//         }
-//       `}</style>
-//     </section>
-//   );
-// }
-function AgendaSection({
-  section,
-  items,
-  ctx,
-}: {
-  section: MicrositeSection;
-  items: AgendaItem[];
-  ctx: Ctx;
-}) {
-  const title = str(section.config.title, 'Schedule');
-
-  const list = items.length
-    ? items
-    : [{ title: 'Session 1', time: '9:00 AM', track: 'Main', date: '' }];
-
-  const dates = [...new Set(list.map((item) => item.date).filter(Boolean))];
-
-  const [selectedDate, setSelectedDate] = useState(dates.length ? dates[0]! : '');
-
-  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
-
-  const filteredList = dates.length ? list.filter((item) => item.date === selectedDate) : list;
-  return (
-    <section id="schedule" className="eb-schedule-section section py-5 bg-transparent">
-      <div className="container">
-        <h2 className="eb-section-heading text-start mb-4">{title}</h2>
-
-        {/* Day Selector */}
-        <div
-          className="d-flex justify-content-center flex-wrap gap-2 mb-3"
-        >
-          {dates.map((date) => (
-            <button
-              key={date}
-              className={`btn btn-theme-tab ${
-                selectedDate === date
-                  ? "btn-primary"
-                  : "btn-outline-primary"
-              }`}
-              style={{ marginRight: "8px" }}
-              onClick={() => {
-                setSelectedDate(date);
-                setExpandedIndex(null);
-              }}
-            >
-              {date}
-            </button>
-          ))}
-        </div>
-
-        {/* Agenda */}
-        <div
-          style={{
-            // maxWidth: "900px" ,
-            // margin: "0 auto",
-            // background: "#fff",
-            // borderRadius: "12px",
-            // overflow: "hidden",
-            // boxShadow: "0 1px 3px rgba(0,0,0,.05)",
-            // border: "0.5px solid #e2e8f0",
-          }}
-          className='theme-accordion-wrapper'
-        >
-          {filteredList.map((item, index) => {
-            const isExpanded = expandedIndex === index;
-            const hasSp = !!str(item.speakerName);
-
-            return (
-              <div
-                key={index}
-                // style={{
-                //   borderBottom:
-                //     index < filteredList.length - 1
-                //       ? "0.5px solid #e2e8f0"
-                //       : "none",
-                // }}
-                className={`theme-accordion-item ${index < filteredList.length - 1 ? 'border-bottom' : ''}`}
-              >
-                {/* Your existing accordion code */}
-                <button
-                  onClick={() => setExpandedIndex(isExpanded ? null : index)}
-                  style={{
-                    // width: '100%',
-                    // background: isExpanded ? '#f8fafc' : '#fff',
-                    // border: 'none',
-                    // padding: '1rem 1.5rem',
-                    // textAlign: 'left',
-                    // cursor: 'pointer',
-                    // transition: 'background-color 0.3s, padding 0.3s',
-                    // display: 'flex',
-                    // alignItems: 'center',
-                    // gap: '1rem',
-                    // justifyContent: 'space-between',
-                    
-                  }}
-                  // onMouseEnter={(e) => {
-                  //   e.currentTarget.style.backgroundColor = '#f1f5f9';
-                  // }}
-                  // onMouseLeave={(e) => {
-                  //   e.currentTarget.style.backgroundColor = isExpanded ? '#f8fafc' : '#fff';
-                  // }}
-                  className='theme-accordion-button'
-                >
-                  {/* Left: Time and Title */}
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: 1, minWidth: 0, overflow: 'hidden'}}>
-                    {/* Time Badge */}
-                    <span
-                      style={{
-                        // background: '#0f3072',
-                        // color: '#fff',
-                        // padding: '0.5rem 0.75rem',
-                        // borderRadius: '4px',
-                        // fontSize: '0.8rem',
-                        // fontWeight: 600,
-                        // whiteSpace: 'nowrap',
-                        // flexShrink: 0,
-                      }}
-                      className='theme-accordion-time'
-                    >
-                      {item.time || 'TBA'}
-                    </span>
-
-                    {/* Title and Track */}
-                    <div style={{ minWidth: 0, flex: 1 }}>
-                      <div
-                        style={{
-                          // fontSize: '1rem',
-                          // fontWeight: 700,
-                          // color: '#0f172a',
-                          // margin: '0 0 0.25rem 0',
-                          // overflow: 'hidden',
-                          // textOverflow: 'ellipsis',
-                          // whiteSpace: 'nowrap',
-                        }}
-                        className='theme-accordion-title'
-                      >
-                        {item.title || 'Untitled Session'}
-                      </div>
-                      {item.track && (
-                        <span
-                          style={{
-                            // background: 'rgba(0, 194, 209, 0.1)',
-                            // color: '#0891b2',
-                            // padding: '0.25rem 0.6rem',
-                            // borderRadius: '3px',
-                            // fontSize: '0.65rem',
-                            // fontWeight: 600,
-                            // textTransform: 'uppercase',
-                            // letterSpacing: '0.3px',
-                            // display: 'inline-block',
-                          }}
-                          className='theme-accordion-track'
-                        >
-                          {item.track}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Right: Expand/Collapse Icon */}
-                  <div
-                    style={{
-                      // display: 'flex',
-                      // alignItems: 'center',
-                      // justifyContent: 'center',
-                      // width: '26px',
-                      // height: '26px',
-                      // background: isExpanded ? '#e0f2fe' : '#f1f5f9',
-                      // borderRadius: '6px',
-                      // transition: 'all 0.3s',
-                      // color: isExpanded ? '#0891b2' : '#64748b',
-                      // fontWeight: 600,
-                      // fontSize: '1.2rem',
-                      // flexShrink: 0,
-                    }}
-                    className='theme-accordion-icon'
-                  >
-                    {/* {isExpanded ? '−' : '+'} */}
-                    <i className={`bi ${isExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
-                  </div>
-                </button>
-
-                {/* Accordion Body/Content */}
-                {isExpanded && (
-                  <div
-                    // style={{
-                    //   background: '#f8fafc',
-                    //   padding: '1.5rem',
-                    //   borderTop: '1px solid #e2e8f0',
-                    //   animation: 'slideDown 0.3s ease-out',
-                    // }}
-                    className='theme-accordion-content'
-                  >
-                    {/* Description/ Session Details*/}
-                    {item.description && (
-                      <div style={{ marginBottom: '1.5rem' }}>
-                        {/* <h4
-                          style={{
-                            fontSize: '0.85rem',
-                            fontWeight: 600,
-                            color: '#475569',
-                            textTransform: 'uppercase',
-                            letterSpacing: '0.5px',
-                            marginBottom: '0.75rem',
-                            margin: 0,
-                          }}
-                        >
-                          Session Details
-                        </h4> */}
-                        {/* <h3
-                          style={{
-                            margin: '0.75rem 0 0',
-                            fontSize: '0.95rem',
-                            color: '#536885',
-                            lineHeight: 1.6,
-                          }}
-                        >
-                          {item.title}
-                        </h3> */}
-                        {/* {item.track && (
-                        <span
-                          style={{
-                            background: 'rgba(0, 194, 209, 0.1)',
-                            color: '#0891b2',
-                            padding: '0.25rem 0.6rem',
-                            borderRadius: '3px',
-                            fontSize: '0.65rem',
-                            fontWeight: 600,
-                            textTransform: 'uppercase',
-                            letterSpacing: '0.3px',
-                            display: 'inline-block',
-                          }}
-                        >
-                          {item.track}
-                        </span>
-                      )} */}
-                        
-                        <p
-                          // style={{
-                          //   margin: '0.75rem 0 0',
-                          //   fontSize: '0.95rem',
-                          //   color: '#475569',
-                          //   lineHeight: 1.6,
-                          // }}
-                        >
-                          {item.description}
-                        </p>
-                      </div>
-                    )}
-
-                    {/* Speaker Info */}
-                    {hasSp && (
-                      <div style={{ paddingTop: '1rem', borderTop: '1px solid #e2e8f0' }}>
-                        <h4
-                          style={{
-                            fontSize: '0.85rem',
-                            fontWeight: 600,
-                            color: '#475569',
-                            textTransform: 'uppercase',
-                            letterSpacing: '0.5px',
-                            marginBottom: '0.75rem',
-                            margin: 0,
-                          }}
-                        >
-                          Speaker
-                        </h4>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '0.75rem' }}>
-                          {item.speakerPhotoUrl && (
-                            <img
-                              src={item.speakerPhotoUrl}
-                              alt={str(item.speakerName)}
-                              style={{
-                                width: '48px',
-                                height: '48px',
-                                borderRadius: '50%',
-                                objectFit: 'cover',
-                                border: '2px solid #e2e8f0',
-                              }}
-                            />
-                          )}
-                          <div>
-                            <div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#0f172a' }}>
-                              {item.speakerName}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Action Buttons */}
-        <div className="text-center mt-4">
-          {ctx.registrationUrl ? (
-            <a className="btn btn-primary btn-lg me-2" href={ctx.registrationUrl} style={{ minWidth: '220px' }}>
-              Register
-            </a>
-          ) : null}
-          {/* <a className="btn btn-outline-secondary btn-lg" href="#hero">
-            Back to top
-          </a> */}
-        </div>
-      </div>
-
-      <style>{`
-        @keyframes slideDown {
-          from {
-            opacity: 0;
-            transform: translateY(-10px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-      `}</style>
-           
-    </section>
-  );
-}
-
-function SpeakersSection({ section, speakers }: { section: MicrositeSection; speakers: MicrositeSpeaker[] }) {
-  const title = str(section.config.title, 'Speakers');
-  const limit = Number(section.config.limit) || 12;
-  const list = speakers.slice(0, limit);
-
-  return (
-    <>{list?.length > 0 && (
-      <section id="speakers" className="eb-speakers-section section py-5">
-        <div className="container">
-          <h2 className="eb-section-heading text-center mb-5">{title}</h2>
-          <div className="row">
-            {list.length ? (
-              list.map((s, i) => (
-                <div key={i} className="col-6 col-lg-3 mb-4">
-                  <div className="card h-100 shadow-sm">
-                    {s.photoUrl ? (
-                      <img src={s.photoUrl} className="card-img-top" alt={s.name} />
-                    ) : (
-                      <div className="card-img-top" style={{ background: '#cbd5e1', minHeight: 120 }} />
-                    )}
-                    <div className="card-body">
-                      <h5 className="card-title">{s.name}</h5>
-                      {s.designation ? <p className="card-text text-muted small">{s.designation}</p> : null}
-                    </div>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="col-12 text-center text-muted py-4">No speakers added yet.</div>
-            )}
-          </div>
-        </div>
-      </section>
-    )}</>
-  );
-}
-
-function RegisterLinksSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  if (!ctx.registrationUrl) return null;
-
-  const c = section.config;
-  const title = str(c.title, 'Register');
-  const primaryLabel = str(c.primaryLabel, 'Register Now');
-  const primaryUrl = ctx.registrationUrl;
-  const secondaryLabel = str(c.secondaryLabel);
-  const secondaryUrl = str(c.secondaryUrl, '#');
-
-  return (
-    // <section id="register" className="py-5">
-    //   <div className="container text-center">
-    //     <h2 className="eb-section-heading mb-4">{title}</h2>
-    //     <a className="btn btn-primary btn-lg" href={primaryUrl}>
-    //       {primaryLabel}
-    //     </a>
-    //     {secondaryLabel ? (
-    //       <a className="btn btn-outline-secondary btn-lg ms-2" href={secondaryUrl} style={{ marginLeft: '0.5rem' }}>
-    //         {secondaryLabel}
-    //       </a>
-    //     ) : null}
-    //   </div>
-    // </section>
-    <></>
-  );
-}
-
-function ContactFormSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const title = str(c.title, 'Contact Us');
-  const submitLabel = str(c.submitLabel, 'Send');
-  const notifyEmail = str(c.notifyEmail);
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [email, setEmail] = useState('');
-  const [message, setMessage] = useState('');
-  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
-  const [error, setError] = useState('');
-
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!notifyEmail) {
-      setError('Contact form is not configured.');
-      setStatus('error');
-      return;
-    }
-    setStatus('sending');
-    setError('');
-    try {
-      await visitorApi.submitMicrositeContact({
-        eventId: ctx.eventId,
-        notifyEmail,
-        firstName,
-        lastName,
-        email,
-        message,
-        _gotcha: '',
-      });
-      setStatus('sent');
-      setFirstName('');
-      setLastName('');
-      setEmail('');
-      setMessage('');
-    } catch (err) {
-      setStatus('error');
-      setError(err instanceof Error ? err.message : 'Could not send message.');
-    }
-  };
-
-  return (
-    <section id="contact" className="py-5 eb-section-contact">
-      <div className="container">
-        <h2 className="eb-section-heading text-center mb-4">{title}</h2>
-        <form className="g-3 mx-auto" style={{ maxWidth: 600 }} onSubmit={(e) => void onSubmit(e)}>
-          <div className="g-3">
-            <label className="form-label" htmlFor="contact-name">
-              Name
-            </label>
-            <input
-              id="contact-name"
-              className="form-control"
-              value={`${firstName}${lastName ? ` ${lastName}` : ''}`.trim()}
-              onChange={(e) => {
-                const parts = e.target.value.split(' ');
-                setFirstName(parts[0] || '');
-                setLastName(parts.slice(1).join(' '));
-              }}
-              required
-            />
-          </div>
-          <div className="g-3">
-            <label className="form-label" htmlFor="contact-email">
-              Email
-            </label>
-            <input id="contact-email" type="email" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} required />
-          </div>
-          <div className="g-3">
-            <label className="form-label" htmlFor="contact-message">
-              Message
-            </label>
-            <textarea id="contact-message" className="form-control" rows={4} value={message} onChange={(e) => setMessage(e.target.value)} required />
-          </div>
-          {status === 'sent' ? <p style={{ color: '#15803d' }}>Message sent. Thank you!</p> : null}
-          {status === 'error' && error ? <p className="form-error">{error}</p> : null}
-          <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
-            {status === 'sending' ? 'Sending…' : submitLabel}
-          </button>
-        </form>
-      </div>
-    </section>
-  );
-}
-
-function FooterSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const copyrightText = str(c.copyrightText, `© ${new Date().getFullYear()} ${ctx.data.event.name}. All rights reserved.`);
-  const links = (Array.isArray(c.links) ? c.links : []) as { label?: string; url?: string }[];
-
-  return (
-    <footer id="footer" className="mt-5" style={{ color: 'inherit' }}>
-      <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
-        <span style={{ opacity: 0.85 }}>{copyrightText}</span>
-        <div>
-          {links.map((link, i) => (
-            <a key={i} href={str(link.url, '#')} style={{  marginRight: '1rem' }}>
-              {str(link.label)}
-            </a>
-          ))}
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-function SponsorsSection({ section }: { section: MicrositeSection }) {
-  const c = section.config;
-  const title = str(c.title, 'Sponsors');
-  const sponsors = (Array.isArray(c.sponsors) ? c.sponsors : []) as Array<{ name?: string; logoUrl?: string; url?: string } | { name: string }>;  
-  const cells =
-    sponsors.length > 0
-      ? sponsors
-      : Array.from({ length: 6 }, (_, i) => ({ name: `Sponsor ${String.fromCharCode(65 + i)}` }));
-
-  return (
-    <section id="sponsors" className="eb-static-sponsors section py-5">
-      <div className="container">
-        <h2 className="eb-section-heading text-center mb-5">{title}</h2>
-        <div className="row g-3 justify-content-center">
-          {cells.map((s, i) => {
-            const sponsor = s as any;
-            const url = str(sponsor.url, '#');
-            const logoUrl = sponsor.logoUrl ? str(sponsor.logoUrl) : null;
-            const name = str(sponsor.name);
-            return (
-              <div key={i} className="col-6 col-md-4 col-lg-2 text-center">
-                <a href={url} style={{ textDecoration: 'none', color: '#475569' }}>
-                  {logoUrl ? <img src={logoUrl} alt={name} style={{ maxHeight: 48 }} className="img-fluid" /> : name}
-                </a>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function CtaSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const headline = str(c.headline, 'Join us');
-  const subtext = str(c.subtext);
-  const buttonLabel = str(c.buttonLabel, 'Register');
-  const buttonUrl = resolveRegistrationCtaUrl(buttonLabel, c.buttonUrl, ctx.registrationUrl);
-
-  return (
-    <section id="cta" className="py-5 text-white text-center" style={{ background: 'var(--eb-conf-primary)' }}>
-      <div className="container">
-        <h2 className="eb-section-heading text-white mb-3">{headline}</h2>
-        {subtext ? <p className="lead mb-4">{subtext}</p> : null}
-        {buttonUrl && buttonUrl !== '#' ? (
-          <a className="btn btn-light btn-lg" href={buttonUrl}>
-            {buttonLabel}
-          </a>
-        ) : null}
-      </div>
-    </section>
-  );
-}
-
-function VenueSection({ section }: { section: MicrositeSection }) {
-  const c = section.config;
-  const title = str(c.title, 'Venue');
-  const body = str(c.body);
-  const mapEmbedUrl = str(c.mapEmbedUrl);
-
-  return (
-    <section id="venue" className="py-5 eb-section-light">
-      <div className="container">
-        <h2 className="eb-section-heading text-center mb-4">{title}</h2>
-        {body ? <p style={{ maxWidth: 720, margin: '0 auto 1.5rem', lineHeight: 1.7 }}>{body}</p> : null}
-        {mapEmbedUrl ? (
-          <div style={{ maxWidth: 900, margin: '0 auto' }}>
-            <iframe title="Venue map" src={mapEmbedUrl} width="100%" height="360" style={{ border: 0, borderRadius: 8 }} loading="lazy" />
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-}
-
-function FaqSection({ section }: { section: MicrositeSection }) {
-  const c = section.config;
-  const title = str(c.title, 'FAQ');
-  const items = (Array.isArray(c.items) ? c.items : []) as { question?: string; answer?: string }[];
-
-  return (
-    <section id="faq" className="py-5">
-      <div className="container" style={{ maxWidth: 760 }}>
-        <h2 className="eb-section-heading text-center mb-4">{title}</h2>
-        {items.map((item, i) => (
-          <details key={i} style={{ marginBottom: '1rem', borderBottom: '1px solid #e2e8f0', paddingBottom: '0.75rem' }}>
-            <summary style={{ fontWeight: 600, cursor: 'pointer' }}>{str(item.question)}</summary>
-            <p style={{ marginTop: '0.5rem', color: '#475569', lineHeight: 1.6 }}>{str(item.answer)}</p>
-          </details>
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function GallerySection({ section }: { section: MicrositeSection }) {
-  const c = section.config;
-  const title = str(c.title, 'Gallery');
-  const images = (Array.isArray(c.images) ? c.images : []) as string[];
-
-  return (
-    <section id="gallery" className="py-5 eb-section-light">
-      <div className="container">
-        <h2 className="eb-section-heading text-center mb-4">{title}</h2>
-        <div className="row">
-          {images.length ? (
-            images.map((src, i) => (
-              <div key={i} className="col-6 col-md-4 mb-3">
-                <img src={src} alt="" style={{ width: '100%', borderRadius: 8, objectFit: 'cover', aspectRatio: '4/3' }} />
-              </div>
-            ))
-          ) : (
-            <div className="col-12 text-center text-muted">No gallery images yet.</div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function CustomHtmlSection({ section }: { section: MicrositeSection }) {
-  const html = str(section.config.html);
-  if (!html) return null;
-  return (
-    <section id="custom-html" className="py-5 eb-section-light">
-      <div className="container">
-        <div className="custom-section" dangerouslySetInnerHTML={{ __html: html }} />
-      </div>
-    </section>
-  );
-}
-
-function TicketsSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  const c = section.config;
-  const title = str(c.title, 'Tickets');
-  const tiers = (Array.isArray(c.tiers) ? c.tiers : []) as { name?: string; price?: string; description?: string }[];
-
-  return (
-    <section id="tickets" className="py-5">
-      <div className="container">
-        <h2 className="eb-section-heading text-center mb-5">{title}</h2>
-        <div className="row justify-content-center">
-          {(tiers.length ? tiers : [{ name: 'General Admission', price: 'Free', description: 'Register to attend.' }]).map((tier, i) => (
-            <div key={i} className="col-md-4 mb-4">
-              <div className="card h-100 shadow-sm" style={{ padding: '1.25rem' }}>
-                <h3 style={{ marginTop: 0 }}>{str(tier.name)}</h3>
-                <p style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--eb-conf-primary)' }}>{str(tier.price)}</p>
-                {tier.description ? <p className="text-muted">{tier.description}</p> : null}
-                {ctx.registrationUrl ? (
-                  <a className="btn btn-primary" href={ctx.registrationUrl}>
-                    Register
-                  </a>
-                ) : null}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export function SectionRenderer({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
-  switch (section.type) {
-    case 'header':
-      return <HeaderSection section={section} ctx={ctx} />;
-    case 'banner':
-      return <BannerSection section={section} ctx={ctx} />;
-    case 'countdown':
-      return <CountdownSection section={section} ctx={ctx} />;
-    case 'about':
-      return <AboutSection section={section} ctx={ctx} />;
-    case 'agenda':
-      return <AgendaSection section={section} items={ctx.data.agenda} ctx={ctx} />;
-    case 'speakers':
-      return <SpeakersSection section={section} speakers={ctx.data.speakers} />;
-    case 'register_links':
-      return <RegisterLinksSection section={section} ctx={ctx} />;
-    case 'contact_form':
-      return <ContactFormSection section={section} ctx={ctx} />;
-    case 'footer':
-      return <FooterSection section={section} ctx={ctx} />;
-    case 'sponsors':
-      return <SponsorsSection section={section} />;
-    case 'cta':
-      return <CtaSection section={section} ctx={ctx} />;
-    case 'venue':
-      return <VenueSection section={section} />;
-    case 'faq':
-      return <FaqSection section={section} />;
-    case 'gallery':
-      return <GallerySection section={section} />;
-    case 'custom_html':
-      return <CustomHtmlSection section={section} />;
-    case 'tickets':
-      return <TicketsSection section={section} ctx={ctx} />;
-    default:
-      return null;
-  }
-}
diff --git a/src/components/microsite/SpeakersSection.tsx b/src/components/microsite/SpeakersSection.tsx
new file mode 100644
index 0000000..a10d62c
--- /dev/null
+++ b/src/components/microsite/SpeakersSection.tsx
@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Card, Modal } from 'react-bootstrap';
+import type { MicrositeSectionContext } from './sectionUtils';
+import type { MicrositeSectionEnvelope, MicrositeSpeakersConfig, MicrositeSpeaker } from '../../types';
+import { str } from './sectionUtils';
+
+export type SpeakersSectionProps = {
+  section: MicrositeSectionEnvelope<'speakers', MicrositeSpeakersConfig>;
+  ctx: MicrositeSectionContext;
+};
+
+export function SpeakersSection({ section }: SpeakersSectionProps) {
+  const title = str(section.config.title, 'Speakers');
+  const limit = Number(section.config.limit) || 12;
+  const list = (Array.isArray(section.config.speakers) ? (section.config.speakers as MicrositeSpeaker[]) : []).slice(0, limit);
+  const [selected, setSelected] = useState<MicrositeSpeaker | null>(null);
+
+  return (
+    <>
+      {list.length > 0 && (
+        <section id={section?.id || 'speakers'} className="eb-speakers-section section py-5">
+          <div className="container">
+            <h2 className="eb-section-heading text-center mb-5">{title}</h2>
+            <div className="row">
+              {list.map((s, i) => (
+                <div key={i} className="col-12 col-sm-6 col-md-6 col-lg-3 mb-4">
+                  <Card
+                    className="card-theme card-speaker h-100 shadow-sm"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setSelected(s)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setSelected(s);
+                      }
+                    }}
+                    aria-label={`View details for ${s.name}`}
+                  >
+                    <div className="img-container img-container-sm mx-auto">
+                      {s.photoUrl ? (
+                        <img src={s.photoUrl} className="card-img-to" alt={s.name} />
+                      ) : (
+                        <div className="card-img-top" style={{ background: '#cbd5e1', minHeight: 120 }} />
+                      )}
+                    </div>
+                    <div className="card-body text-center">
+                      <h5 className="card-title">{s.name}</h5>
+                      {s.designation ? <p className="card-subtitle text-highlight">{s.designation}</p> : null}
+                    </div>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      <Modal
+        show={!!selected}
+        onHide={() => setSelected(null)}
+        centered
+        size="lg"
+        className="eb-speaker-modal"
+        contentClassName="eb-speaker-modal-content"
+      >
+        {selected ? (
+          <>
+            <Modal.Header closeButton>
+              <Modal.Title>{selected.name}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <div className="eb-speaker-modal-body">
+                <div className="eb-speaker-modal-photo">
+                  {selected.photoUrl ? (
+                    <img src={selected.photoUrl} alt="" />
+                  ) : (
+                    <div className="eb-speaker-modal-photo-placeholder" aria-hidden="true" />
+                  )}
+                </div>
+                <div className="eb-speaker-modal-info">
+                  {selected.designation ? (
+                    <p className="eb-speaker-modal-designation text-highlight">{selected.designation}</p>
+                  ) : null}
+                  {selected.bio ? <p className="eb-speaker-modal-bio mb-0">{selected.bio}</p> : null}
+                </div>
+              </div>
+            </Modal.Body>
+          </>
+        ) : null}
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/microsite/TicketsSection.tsx b/src/components/microsite/TicketsSection.tsx
new file mode 100644
index 0000000..2bfc985
--- /dev/null
+++ b/src/components/microsite/TicketsSection.tsx
@@ -0,0 +1,43 @@
+import type { MicrositeSectionContext } from './sectionUtils';
+import { str } from './sectionUtils';
+import type { MicrositeSectionEnvelope, MicrositeTicketsConfig } from '../../types';
+
+export type TicketsSectionProps = {
+  section: MicrositeSectionEnvelope<'tickets', MicrositeTicketsConfig>;
+  ctx: MicrositeSectionContext;
+};
+
+export function TicketsSection({ section, ctx }: TicketsSectionProps) {
+  const c = section.config;
+  const title = str(c.title, 'Tickets');
+  const tiers = (Array.isArray(c.tiers) ? (c.tiers as { name?: string; price?: string; description?: string }[]) : []) as {
+    name?: string;
+    price?: string;
+    description?: string;
+  }[];
+
+  return (
+    <section id={section?.id || 'tickets'} className="py-5">
+      <div className="container">
+        <h2 className="eb-section-heading text-center mb-5">{title}</h2>
+        <div className="row justify-content-center">
+          {(tiers.length ? tiers : [{ name: 'General Admission', price: 'Free', description: 'Register to attend.' }]).map((tier, i) => (
+            <div key={i} className="col-md-4 mb-4">
+              <div className="card h-100 shadow-sm" style={{ padding: '1.25rem' }}>
+                <h3 style={{ marginTop: 0 }}>{str(tier.name)}</h3>
+                <p style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--eb-conf-primary)' }}>{str(tier.price)}</p>
+                {tier.description ? <p className="text-muted">{str(tier.description)}</p> : null}
+                {ctx.registrationUrl ? (
+                  <a className="btn btn-primary" href={ctx.registrationUrl}>
+                    Register
+                  </a>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
diff --git a/src/components/microsite/sectionUtils.ts b/src/components/microsite/sectionUtils.ts
new file mode 100644
index 0000000..80744a0
--- /dev/null
+++ b/src/components/microsite/sectionUtils.ts
@@ -0,0 +1,26 @@
+import type { PublicMicrositePayload } from '../../types';
+
+export type MicrositeSectionContext = {
+  data: PublicMicrositePayload;
+  eventId: string;
+  registrationUrl: string;
+};
+
+export function str(v: unknown, fallback = ''): string {
+  return v != null ? String(v).trim() : fallback;
+}
+
+export function isRegisterLabel(label: string): boolean {
+  return /\bregister\b/i.test(label);
+}
+
+export function looksLikeRegistrationUrl(url: string): boolean {
+  return /\/register\/?$/i.test(url) || /\/form\/[a-f0-9]{24}\/?$/i.test(url);
+}
+
+export function resolveRegistrationCtaUrl(label: string, configuredUrl: unknown, registrationUrl: string): string {
+  const configured = str(configuredUrl);
+  const wantsRegistration = isRegisterLabel(label) || looksLikeRegistrationUrl(configured);
+  if (wantsRegistration) return registrationUrl;
+  return configured || '#';
+}
diff --git a/src/main.tsx b/src/main.tsx
index ee0f223..630518f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/conference.css';
 import './styles/forms.css';
 
diff --git a/src/pages/EventMicrositePage.tsx b/src/pages/EventMicrositePage.tsx
index d75d19e..fbb4042 100644
--- a/src/pages/EventMicrositePage.tsx
+++ b/src/pages/EventMicrositePage.tsx
@@ -4,7 +4,15 @@ import { micrositeApi } from '../api/microsite';
 import { PUBLIC_WEB_BASE } from '../api/client';
 import type { PublicMicrositePayload } from '../types';
 import { MicrositeLayout } from '../components/microsite/MicrositeLayout';
-import { SectionRenderer } from '../components/microsite/SectionRenderer';
+import { HeaderSection } from '../components/microsite/HeaderSection';
+import { BannerSection } from '../components/microsite/BannerSection';
+import { CountdownSection } from '../components/microsite/CountdownSection';
+import { AboutSection } from '../components/microsite/AboutSection';
+import { AgendaSection } from '../components/microsite/AgendaSection';
+import { SpeakersSection } from '../components/microsite/SpeakersSection';
+import { KeyPersonsSection } from '../components/microsite/KeyPersonsSection';
+import { ContactSection } from '../components/microsite/ContactSection';
+import { FooterSection } from '../components/microsite/FooterSection';
 
 export function EventMicrositePage() {
   const { eventId = '' } = useParams();
@@ -44,8 +52,8 @@ export function EventMicrositePage() {
   }
 
   const registrationUrl = data.registrationFormId
-    ? `${PUBLIC_WEB_BASE}/event/${eventId}/form/${data.registrationFormId}`
-    : '';
+    ? data.registrationUrl || `${PUBLIC_WEB_BASE}/event/${eventId}/form/${data.registrationFormId}`
+    : data.registrationUrl || '';
   const ctx = { data, eventId, registrationUrl };
 
   if (data.micrositeHtml) {
@@ -56,15 +64,22 @@ export function EventMicrositePage() {
     );
   }
 
-  const sections = [...(data.sections || [])]
-    .filter((section) => section.type !== 'sponsors')
-    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-
   return (
     <MicrositeLayout data={data}>
-      {sections.map((section) => (
-        <SectionRenderer key={section.id || section.type} section={section} ctx={ctx} />
-      ))}
+      {data.header ? <HeaderSection section={data.header} ctx={ctx} /> : null}
+      {data.banner ? <BannerSection section={data.banner} ctx={ctx} /> : null}
+      {data.countdown ? <CountdownSection section={data.countdown} ctx={ctx} /> : null}
+
+      {data.about ? <AboutSection section={data.about} ctx={ctx} /> : null}
+      {data.agenda ? <AgendaSection section={data.agenda} ctx={ctx} /> : null}
+
+      {data.speakers ? <SpeakersSection section={data.speakers} ctx={ctx} /> : null}
+      {data.key_persons ? <KeyPersonsSection section={data.key_persons} ctx={ctx} /> : null}
+
+      {/* register_links + tickets render inside AboutSection via ctx.data */}
+
+      {data.contact ? <ContactSection section={data.contact} ctx={ctx} /> : null}
+      {data.footer ? <FooterSection section={data.footer} ctx={ctx} /> : null}
     </MicrositeLayout>
   );
 }
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
new file mode 100644
index 0000000..4781de1
--- /dev/null
+++ b/src/pages/LandingPage.tsx
@@ -0,0 +1,351 @@
+import { useEffect, useMemo, useState, type FormEvent } from 'react';
+import {
+  loadRazorpayScript,
+  publicEventTicketsApi,
+  type PublicTicketCatalogItem,
+  type TicketQuote,
+} from '../api/publicEventTickets';
+import { formatTicketPrice } from '../utils/registrationTicketAttendee';
+import logoWhite from '../assets/logo-white.png';
+import logoColor from '../assets/logo.png';
+import heroBanner from '../assets/main_banner.png';
+import '../styles/landing.css';
+
+const DEMO_EVENT_ID =
+  (import.meta.env.VITE_DEMO_EVENT_ID as string | undefined)?.trim() || '6a620657ef2449311c51fd6b';
+const DEMO_TICKET_ID =
+  (import.meta.env.VITE_DEMO_TICKET_ID as string | undefined)?.trim() || '6a6b37ba9ce2326fe3e591f6';
+
+const PAYMENT_CANCELLED = 'Payment cancelled';
+const CONSOLE_URL = 'https://console.eventbuzz.live';
+const MARKETING_URL = 'https://eventbuzz.live';
+
+type Buyer = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+};
+
+const emptyBuyer: Buyer = { firstName: '', lastName: '', email: '', phone: '' };
+
+export function LandingPage() {
+  const [ticket, setTicket] = useState<PublicTicketCatalogItem | null>(null);
+  const [eventName, setEventName] = useState('EventBuzz');
+  const [quote, setQuote] = useState<TicketQuote | null>(null);
+  const [gatewayId, setGatewayId] = useState<string | undefined>();
+  const [onlineAvailable, setOnlineAvailable] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [payError, setPayError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [paid, setPaid] = useState(false);
+  const [buyer, setBuyer] = useState<Buyer>(emptyBuyer);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const [summary, tickets, options] = await Promise.all([
+          publicEventTicketsApi.getEventSummary(DEMO_EVENT_ID),
+          publicEventTicketsApi.listTickets(DEMO_EVENT_ID),
+          publicEventTicketsApi.checkoutOptions(DEMO_EVENT_ID),
+        ]);
+        if (cancelled) return;
+        setEventName(summary.name || 'EventBuzz');
+        const selected =
+          tickets.find((t) => t._id === DEMO_TICKET_ID) || tickets[0] || null;
+        setTicket(selected);
+        setOnlineAvailable(!!options.onlineAvailable);
+        const primary =
+          options.onlineGateways?.find((g) => g.isPrimary && g.ticketCheckoutSupported) ||
+          options.onlineGateways?.find((g) => g.ticketCheckoutSupported);
+        setGatewayId(primary?.id);
+        setLoadError(null);
+      } catch (e) {
+        if (!cancelled) {
+          setLoadError(e instanceof Error ? e.message : 'Could not load the test product.');
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!ticket) {
+      setQuote(null);
+      return;
+    }
+    let cancelled = false;
+    void publicEventTicketsApi
+      .quote(DEMO_EVENT_ID, { ticketId: ticket._id, quantity: 1 })
+      .then((q) => {
+        if (!cancelled) setQuote(q);
+      })
+      .catch((e) => {
+        if (!cancelled) setLoadError(e instanceof Error ? e.message : 'Could not price ticket.');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [ticket]);
+
+  const displayPrice = useMemo(() => {
+    if (quote) return formatTicketPrice(quote.totalMinor, quote.currency);
+    if (ticket) return formatTicketPrice(ticket.basePriceMinor, ticket.currency || 'INR');
+    return '—';
+  }, [quote, ticket]);
+
+  const productTitle = ticket?.name?.trim() === 'test' ? 'EventBuzz Test Pass' : ticket?.name || 'Test Pass';
+
+  async function onPay(e: FormEvent) {
+    e.preventDefault();
+    if (!ticket || !quote) return;
+    const firstName = buyer.firstName.trim();
+    const lastName = buyer.lastName.trim();
+    const email = buyer.email.trim().toLowerCase();
+    if (!firstName || !lastName || !email) {
+      setPayError('Please enter your name and email.');
+      return;
+    }
+    if (!onlineAvailable) {
+      setPayError('Online checkout is not available for this product right now.');
+      return;
+    }
+
+    setBusy(true);
+    setPayError(null);
+    try {
+      const order = await publicEventTicketsApi.checkout(DEMO_EVENT_ID, {
+        ticketId: ticket._id,
+        quantity: 1,
+        purchaserEmail: email,
+        expectedTotalMinor: quote.totalMinor,
+        idempotencyKey: `landing-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        orgGatewayId: gatewayId,
+        attendees: [
+          {
+            firstName,
+            lastName,
+            email,
+            phone: buyer.phone.trim() || undefined,
+          },
+        ],
+      });
+
+      await loadRazorpayScript();
+      type RazorpayResponse = {
+        razorpay_order_id: string;
+        razorpay_payment_id: string;
+        razorpay_signature: string;
+      };
+      type RazorpayConstructor = new (opts: {
+        key: string;
+        amount: number;
+        currency: string;
+        order_id: string;
+        name: string;
+        description: string;
+        handler: (response: RazorpayResponse) => void;
+        modal?: { ondismiss?: () => void };
+        theme?: { color?: string };
+        prefill?: { email?: string; name?: string; contact?: string };
+      }) => {
+        open: () => void;
+        on: (ev: string, fn: (r: { error: { description?: string } }) => void) => void;
+      };
+
+      const Rzp = (window as unknown as { Razorpay: RazorpayConstructor }).Razorpay;
+      await new Promise<void>((resolve, reject) => {
+        let invoked = false;
+        const rzp = new Rzp({
+          key: order.keyId,
+          amount: order.amount,
+          currency: order.currency,
+          order_id: order.orderId,
+          name: 'EventBuzz',
+          description: productTitle,
+          handler: (response: RazorpayResponse) => {
+            invoked = true;
+            void publicEventTicketsApi
+              .verifyPayment(DEMO_EVENT_ID, {
+                orderId: response.razorpay_order_id,
+                paymentId: response.razorpay_payment_id,
+                signature: response.razorpay_signature,
+              })
+              .then(() => resolve())
+              .catch((err) => reject(err instanceof Error ? err : new Error('Verification failed')));
+          },
+          modal: {
+            ondismiss: () => {
+              if (!invoked) reject(new Error(PAYMENT_CANCELLED));
+            },
+          },
+          theme: { color: '#1d66ef' },
+          prefill: {
+            email,
+            name: `${firstName} ${lastName}`.trim(),
+            contact: buyer.phone.trim() || undefined,
+          },
+        });
+        rzp.on('payment.failed', (response: { error: { description?: string } }) => {
+          reject(new Error(response.error?.description || 'Payment failed'));
+        });
+        rzp.open();
+      });
+      setPaid(true);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Checkout failed';
+      if (msg !== PAYMENT_CANCELLED) setPayError(msg);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="eb-landing">
+      <header className="eb-landing-nav">
+        <img src={logoWhite} alt="EventBuzz" className="eb-landing-nav-logo" />
+        <a className="eb-landing-nav-cta" href={CONSOLE_URL}>
+          Open console
+        </a>
+      </header>
+
+      <section className="eb-landing-hero">
+        <img src={heroBanner} alt="" className="eb-landing-hero-media" aria-hidden />
+        <div className="eb-landing-hero-shade" aria-hidden />
+        <div className="eb-landing-hero-inner">
+          <img src={logoWhite} alt="EventBuzz" className="eb-landing-brand" />
+          <h1>Run live events with confidence</h1>
+          <p>
+            Registration, ticketing, agendas, and real-time engagement — built for organizers who
+            need one place to host every moment.
+          </p>
+          <div className="eb-landing-hero-actions">
+            <a className="eb-landing-btn eb-landing-btn--primary" href="#buy">
+              Try a ₹1 test purchase
+            </a>
+            <a className="eb-landing-btn eb-landing-btn--ghost" href={MARKETING_URL}>
+              Learn more
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <section className="eb-landing-shop" id="buy" aria-labelledby="buy-heading">
+        <div className="eb-landing-shop-inner">
+          <div className="eb-landing-shop-copy">
+            <h2 id="buy-heading">Test product</h2>
+            <p>
+              Complete a real checkout against EventBuzz ticketing (Razorpay test mode). Use this
+              to verify payments end-to-end before going live with your own event.
+            </p>
+            {ticket ? (
+              <div className="eb-landing-product">
+                <div className="eb-landing-product-name">{productTitle}</div>
+                <div className="eb-landing-product-price">{displayPrice}</div>
+                <div className="eb-landing-product-meta">
+                  Linked to {eventName}
+                  {ticket.description?.trim() ? ` · ${ticket.description.trim()}` : null}
+                </div>
+              </div>
+            ) : loadError ? (
+              <p className="eb-landing-error">{loadError}</p>
+            ) : (
+              <p className="eb-landing-product-meta">Loading product…</p>
+            )}
+          </div>
+
+          <div className="eb-landing-checkout">
+            {paid ? (
+              <div className="eb-landing-success">
+                <img src={logoColor} alt="" width={160} height={30} style={{ margin: '0 auto 8px' }} />
+                <h3>Payment successful</h3>
+                <p>Your test purchase went through. You’re all set to use EventBuzz ticketing.</p>
+                <a className="eb-landing-btn eb-landing-btn--solid" href={CONSOLE_URL}>
+                  Go to console
+                </a>
+              </div>
+            ) : (
+              <form onSubmit={(e) => void onPay(e)}>
+                <h3>Buy {productTitle}</h3>
+                <p className="eb-landing-checkout-lead">
+                  Enter buyer details, then pay with Razorpay. Amount: {displayPrice}.
+                </p>
+                {loadError ? <p className="eb-landing-error">{loadError}</p> : null}
+                <div className="eb-landing-fields">
+                  <div className="eb-landing-row">
+                    <label className="eb-landing-field">
+                      <span>First name</span>
+                      <input
+                        required
+                        autoComplete="given-name"
+                        value={buyer.firstName}
+                        onChange={(e) => setBuyer((b) => ({ ...b, firstName: e.target.value }))}
+                      />
+                    </label>
+                    <label className="eb-landing-field">
+                      <span>Last name</span>
+                      <input
+                        required
+                        autoComplete="family-name"
+                        value={buyer.lastName}
+                        onChange={(e) => setBuyer((b) => ({ ...b, lastName: e.target.value }))}
+                      />
+                    </label>
+                  </div>
+                  <label className="eb-landing-field">
+                    <span>Email</span>
+                    <input
+                      required
+                      type="email"
+                      autoComplete="email"
+                      value={buyer.email}
+                      onChange={(e) => setBuyer((b) => ({ ...b, email: e.target.value }))}
+                    />
+                  </label>
+                  <label className="eb-landing-field">
+                    <span>Phone (optional)</span>
+                    <input
+                      type="tel"
+                      autoComplete="tel"
+                      value={buyer.phone}
+                      onChange={(e) => setBuyer((b) => ({ ...b, phone: e.target.value }))}
+                    />
+                  </label>
+                </div>
+                {quote ? (
+                  <p className="eb-landing-total">
+                    Total: <strong>{formatTicketPrice(quote.totalMinor, quote.currency)}</strong>
+                  </p>
+                ) : null}
+                {payError ? <p className="eb-landing-error">{payError}</p> : null}
+                <button
+                  type="submit"
+                  className="eb-landing-btn eb-landing-btn--solid"
+                  disabled={busy || !ticket || !quote || !onlineAvailable}
+                >
+                  {busy ? 'Opening checkout…' : `Pay ${displayPrice}`}
+                </button>
+              </form>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <footer className="eb-landing-footer">
+        <div className="eb-landing-footer-inner">
+          <span>© {new Date().getFullYear()} EventBuzz</span>
+          <span>
+            <a href={MARKETING_URL}>eventbuzz.live</a>
+            {' · '}
+            <a href={CONSOLE_URL}>console</a>
+            {' · '}
+            <a href="mailto:hello@eventbuzz.live">hello@eventbuzz.live</a>
+          </span>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index f91bfb4..a63ab4b 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -5,7 +5,10 @@ export function NotFoundPage() {
     <div className="form-page-center">
       <div style={{ textAlign: 'center' }}>
         <h1 style={{ margin: '0 0 8px' }}>Page not found</h1>
-        <p style={{ color: '#64748b' }}>The page you are looking for does not exist.</p>
+        <p style={{ color: '#64748b', margin: '0 0 16px' }}>The page you are looking for does not exist.</p>
+        <Link to="/" style={{ color: '#1d66ef', fontWeight: 600 }}>
+          Back to EventBuzz
+        </Link>
       </div>
     </div>
   );
diff --git a/src/styles/conference.css b/src/styles/conference.css
index 1376cc9..6d11340 100644
--- a/src/styles/conference.css
+++ b/src/styles/conference.css
@@ -14,175 +14,81 @@
 
 html {
   scroll-behavior: smooth;
+
+  --text-content-color: rgba(255, 255, 255, 0.9);
+  --text-content-hover-color: rgba(255, 255, 255, 1);
+  --theme-header-bg: rgba(255, 255, 255, 0.075);
+  --theme-navbar-bg: rgba(255, 255, 255, 0.075);
+  --theme-navbar-color: rgba(255, 255, 255, 0.8);
+  --theme-navbar-hover-color: rgba(255, 255, 255, 1);
+  --theme-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
+  --theme-navabar-toggler-bg: rgba(255, 255, 255, 0.2);
+  --theme-navabar-toggler-hover-bg: rgba(255, 255, 255, 0.3);
+  
+  --theme-seperator-color: rgba(255,255,255,0.1);
+
+  --theme-card-text-color: rgba(255,255,255,0.73) !important;
+  --theme-card-border-color: rgba(255,255,255,0.1) !important;
+
+  --section-heading-color: rgba(255,255,255,0.45);
+
+  --list-bullet-icon-bg: rgba(255,255,255,0.18);
+  --list-bullet-icon-border: rgba(255,255,255,0.6);
+  --list-bullet-icon-outline: rgba(255,255,255,0.15);
+
+  --btn-border: rgba(255,255,255,0.06);
+  --btn-bg: rgba(255,255,255,0.03);
+
+  --theme-accordion-title: rgba(255,255,255,0.73);
+  --theme-accordion-button-bg: rgba(255, 255, 255, 0.06);
+  --theme-accordion-time-bg: rgba(255,255,255,0.15);
+  --theme-accordion-time-text: rgba(255,255,255,0.63);
+  --theme-accordion-content-bg: rgba(255, 255, 255, 0.1);
+  --theme-accordion-content-text: rgba(255,255,255,0.73);
 }
 
 body {
   margin: 0;
-  font-family: var(--eb-conf-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
+  font-family: var(--theme-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
   
-  color: #0f172a;
-  background: #ffffff;
+  /* color: #0f172a; */
+  color: var(--theme-text-color);
+  background-color: var(--theme-primary-color);
+  background-image: var(--theme-bg-pattern, none);
+  background-repeat: repeat;
+  background-size: var(--theme-bg-pattern-size, auto);
   line-height: 1.6;
 }
 
 .eb-microsite-root {
-  --text-content-color: rgba(255, 255, 255, 0.9);
-  --navbar-brand-color: rgba(255, 255, 255, 0.9);
-  --eb-conf-primary-dark: rgba(72,83,153,1) !important;
-  --eb-conf-primary-light: rgba(158,168,254,1);
-  --btn-primary-start: rgba(72,83,153,0.33) !important;
-  --btn-primary-end: rgba(72,83,153,0.83) !important;
-  --btn-primary-border: rgba(72,83,153,0.23) !important;
-  --btn-primary-border-hover: rgba(72,83,153,0.93) !important;
-  --section-heading-color: rgba(255,255,255,0.45);
-  --section-text-color: rgba(255,255,255,0.3);
-  --list-bullet-icon-bg: rgba(255,255,255,0.18);
-  --list-bullet-icon-border: rgba(255,255,255,0.6);
-  --list-bullet-icon-outline: rgba(255,255,255,0.15);
-  --btn-primary-text-color: rgba(255, 255, 255, 0.85);
-  --btn-border: rgba(255,255,255,0.06);
-  --btn-bg: rgba(255,255,255,0.03);
-  --btn-text-color: rgba(255,255,255,0.95);
-  --theme-accordion-title: rgba(255,255,255,0.73);
-  --theme-accordion-button-bg: rgba(255, 255, 255, 0.06);
-  --theme-accordion-time-bg: rgba(255,255,255,0.15);
-  --theme-accordion-time-text: rgba(255,255,255,0.63);
-  --theme-accordion-content-bg: rgba(255, 255, 255, 0.1);
-  --theme-accordion-content-text: rgba(255,255,255,0.73);
-  --theme-accordion-icon-bg: rgba(255,255,255,0.15);
-  --theme-accordion-track-text: rgba(158,168,254,1);
-
   min-height: 100vh;
   overflow-x: hidden;
-  background: var(--eb-conf-primary-dark);
-  color: var(--text-content-color);
+  background-color: var(--theme-primary-color);
+  background-image: var(--theme-bg-pattern, none);
+  background-repeat: repeat;
+  background-size: var(--theme-bg-pattern-size, auto);
+  color: var(--theme-text-color);
 }
 
-.eb-microsite-root.theme-simple-green {
-  --text-content-color: rgba(255, 255, 255, 0.9);
-  --navbar-brand-color: rgba(255, 255, 255, 0.9);
-  --eb-conf-primary-dark: rgba(13, 103, 76, 1) !important;
-  --btn-primary-start: rgba(13,103,76,0.33) !important;
-  --btn-primary-end: rgba(13,103,76,0.83) !important;
-  --btn-primary-border: rgba(13,103,76,0.23) !important;
-  --btn-primary-border-hover: rgba(13,103,76,0.93) !important;
-  --section-heading-color: rgba(255, 255, 255, 0.45) !important;
-  --section-text-color: rgba(255,255,255,0.3);
-  --list-bullet-icon-bg: rgba(255,255,255,0.18);
-  --list-bullet-icon-border: rgba(255,255,255,0.6);
-  --list-bullet-icon-outline: rgba(255,255,255,0.15);
-  --btn-primary-text-color: rgba(255, 255, 255, 0.85);
-  --btn-border: rgba(255,255,255,0.06);
-  --btn-bg: rgba(255,255,255,0.03);
-  --btn-text-color: rgba(255,255,255,0.95);
-  --theme-accordion-title: rgba(255,255,255,0.73);
-  --theme-accordion-button-bg: rgba(255, 255, 255, 0.06);
-  --theme-accordion-time-bg: rgba(255,255,255,0.15);
-  --theme-accordion-time-text: rgba(255,255,255,0.63);
-  --theme-accordion-content-bg: rgba(255, 255, 255, 0.1);
-  --theme-accordion-content-text: rgba(255,255,255,0.73);
-  --theme-accordion-icon-bg: rgba(255,255,255,0.15);
-  --theme-accordion-track-text: rgb(125, 201, 178);
-  /* --text-white: rgba(92,106,196,0.5) !important; */
-  background: var(--eb-conf-primary-dark);
-  color: var(--text-content-color);
+/** Pattern Themes — palette matches simple; tile comes from --theme-bg-pattern */
+html[class*='theme-pattern-'] {
+  /* --theme-bg-pattern-size: 50px 50px !important; */
+  background-color: var(--theme-primary-color);
+  background-image: var(--theme-bg-pattern, none);
+  background-repeat: repeat;
+  background-size: var(--theme-bg-pattern-size, auto);
+  color: var(--theme-text-color);
 }
-.eb-microsite-root.theme-simple-purple {
-  --text-content-color: rgba(255, 255, 255, 0.9);
-  --navbar-brand-color: rgba(255, 255, 255, 0.9);
-  --eb-conf-primary-dark: rgba(49, 27, 146, 1) !important;
-  --btn-primary-start: rgba(49, 27, 146,0.33) !important;
-  --btn-primary-end: rgba(49, 27, 146,0.83) !important;
-  --btn-primary-border: rgba(49, 27, 146,0.23) !important;
-  --btn-primary-border-hover: rgba(49, 27, 146,0.93) !important;
-  --section-heading-color: rgba(255, 255, 255, 0.45) !important;
-  --section-text-color: rgba(255,255,255,0.3);
-  --list-bullet-icon-bg: rgba(255,255,255,0.18);
-  --list-bullet-icon-border: rgba(255,255,255,0.6);
-  --list-bullet-icon-outline: rgba(255,255,255,0.15);
-  --btn-primary-text-color: rgba(255, 255, 255, 0.85);
-  --btn-border: rgba(255,255,255,0.06);
-  --btn-bg: rgba(255,255,255,0.03);
-  --btn-text-color: rgba(255,255,255,0.95);
-  --theme-accordion-title: rgba(255,255,255,0.73);
-  --theme-accordion-button-bg: rgba(255, 255, 255, 0.06);
-  --theme-accordion-time-bg: rgba(255,255,255,0.15);
-  --theme-accordion-time-text: rgba(255,255,255,0.63);
-  --theme-accordion-content-bg: rgba(255, 255, 255, 0.1);
-  --theme-accordion-content-text: rgba(255,255,255,0.73);
-  --theme-accordion-icon-bg: rgba(255,255,255,0.15);
-  --theme-accordion-track-text: rgb(164, 150, 230);
-  /* --text-white: rgba(92,106,196,0.5) !important; */
 
-  background: var(--eb-conf-primary-dark);
-  color: var(--text-content-color);
-}
-.eb-microsite-root.theme-simple-gray {
-  --text-content-color: rgba(255, 255, 255, 0.9);
-  --navbar-brand-color: rgba(255, 255, 255, 0.9);
-  --eb-conf-primary-dark: rgba(55, 71, 79, 1) !important;
-  --btn-primary-start: rgba(55, 71, 79,0.33) !important;
-  --btn-primary-end: rgba(55, 71, 79,0.83) !important;
-  --btn-primary-border: rgba(55, 71, 79,0.23) !important;
-  --btn-primary-border-hover: rgba(55, 71, 79,0.93) !important;
-  --section-heading-color: rgba(255, 255, 255, 0.45) !important;
-  --section-text-color: rgba(255,255,255,0.3);
-  --list-bullet-icon-bg: rgba(255,255,255,0.18);
-  --list-bullet-icon-border: rgba(255,255,255,0.6);
-  --list-bullet-icon-outline: rgba(255,255,255,0.15);
-  --btn-primary-text-color: rgba(255, 255, 255, 0.85);
-  --btn-border: rgba(255,255,255,0.06);
-  --btn-bg: rgba(255,255,255,0.03);
-  --btn-text-color: rgba(255,255,255,0.95);
-  --theme-accordion-title: rgba(255,255,255,0.73);
-  --theme-accordion-button-bg: rgba(255, 255, 255, 0.06);
-  --theme-accordion-time-bg: rgba(255,255,255,0.15);
-  --theme-accordion-time-text: rgba(255,255,255,0.63);
-  --theme-accordion-content-bg: rgba(255, 255, 255, 0.1);
-  --theme-accordion-content-text: rgba(255,255,255,0.73);
-  --theme-accordion-icon-bg: rgba(255,255,255,0.15);
-  --theme-accordion-track-text: rgb(187, 206, 215);
-  /* --text-white: rgba(92,106,196,0.5) !important; */
-
-  background: var(--eb-conf-primary-dark);
-  color: var(--text-content-color);
-}
-.eb-microsite-root.theme-simple-yellow {
-  --text-content-color: rgba(55, 55, 55, 0.9);
-  --navbar-brand-color: rgba(55, 55, 55, 0.9);
-  --eb-conf-primary-dark: rgb(255, 236, 179, 1) !important;
-  --btn-primary-start: rgba(255, 236, 179,0.33) !important;
-  --btn-primary-end: rgba(255, 236, 179,0.83) !important;
-  --btn-primary-border: rgba(255, 236, 179,0.23) !important;
-  --btn-primary-border-hover: rgba(255, 236, 179,0.93) !important;
-  --section-heading-color: rgba(55, 55, 55, 0.45) !important;
-  --section-text-color: rgba(55,55,55,0.3);
-  --list-bullet-icon-bg: rgba(55,55,55,0.18);
-  --list-bullet-icon-border: rgba(55,55,55,0.6);
-  --list-bullet-icon-outline: rgba(55,55,55,0.15);
-  --btn-primary-text-color: rgba(55, 55, 55, 0.75);
-  --btn-border: rgba(55,55,55,0.06);
-  --btn-bg: rgba(55,55,55,0.03);
-  --btn-text-color: rgba(55,55,55,0.95);
-  --theme-accordion-title: rgba(55,55,55,0.73);
-  --theme-accordion-button-bg: rgba(55, 55, 55, 0.06);
-  --theme-accordion-time-bg: rgba(55,55,55,0.15);
-  --theme-accordion-time-text: rgba(55,55,55,0.63);
-  --theme-accordion-content-bg: rgba(55, 55, 55, 0.1);
-  --theme-accordion-content-text: rgba(55,55,55,0.73);
-  --theme-accordion-icon-bg: rgba(55,55,55,0.15);
-  --theme-accordion-track-text: rgb(160, 134, 57);
-  /* --text-white: rgba(92,106,196,0.5) !important; */
-
-  background: var(--eb-conf-primary-dark);
-  color: var(--text-content-color);
-}
-.eb-microsite-root.theme-gradient-green {
+/** Gradient Themes */
+html.theme-gradient-green {
   --text-content-color: rgba(55, 55, 55, 1);
   --navbar-brand-color: rgba(42, 123, 155, 1);
+  --theme-seperator-color: rgba(55,55,55,0.085);
+  --theme-highlight-color: rgba(42, 123, 155,1);
   --eb-conf-primary-dark: rgba(42, 123, 155, 1) !important;
   --eb-conf-primary-light: rgb(93, 179, 212);
-  --btn-primary-start: rgba(42, 123, 155,0.33) !important;
+  --btn-primary-start: rgba(70, 144, 174, 0.9) !important;
   --btn-primary-end: rgba(42, 123, 155,0.83) !important;
   --btn-primary-border: rgba(42, 123, 155,0.23) !important;
   --btn-primary-border-hover: rgba(42, 123, 155,0.93) !important;
@@ -196,41 +102,52 @@ body {
   --btn-bg: rgba(42,123,155,0.15);
   --btn-text-color: rgba(42,123,155,0.95);
   --theme-accordion-title: rgba(55,55,55,0.73);
-  --theme-accordion-button-bg: rgba(55, 55, 55, 0.1);
+  --theme-accordion-button-bg: rgba(25, 25, 55, 0.055);
   --theme-accordion-time-bg: rgba(55,55,55,0.03);
   --theme-accordion-time-text: rgba(55, 55, 55, 0.75);
-  --theme-accordion-content-bg: rgba(55, 55, 55, 0.12);
+  --theme-accordion-content-bg: rgba(25, 25, 55, 0.085);
   --theme-accordion-content-text: rgba(55,55,55,0.73);
-  --theme-accordion-icon-bg: rgba(55,55,55,0.1);
-  --theme-accordion-track-text: rgb(93, 179, 212);
+  --theme-accordion-icon-bg: rgba(25,25,55,0.2);
+  --theme-accordion-icon-color: rgba(255,255,255,0.65);
+  --theme-accordion-track-text: rgb(42, 123, 155);
+  --theme-accordion-highlight-text: rgba(42, 123, 155,1);
+  --speaker-card-bg: rgba(25, 25, 55, 0.085);
+  --speaker-card-border: rgba(25,25,55,0.02);
+  --speaker-card-text: rgba(55,55,55,0.73);
 
   background: #2A7B9B;
   /* background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%) !important; */
-  background:linear-gradient(-45deg, rgba(42, 123, 155, 0.8) 0%, rgba(87, 199, 133, 0.32) 50%, rgba(237, 221, 83, 0.87) 100%);
+  /* background:linear-gradient(-45deg, rgba(42, 123, 155, 0.8) 0%, rgba(87, 199, 133, 0.32) 50%, rgba(237, 221, 83, 0.87) 100%); */
+  background: radial-gradient(circle, rgba(24, 142, 106, 0.49) 0%, rgba(172, 225, 115, 0.32) 40%, rgba(121, 209, 245, 0.96) 100%);
   /* background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); */
-  background-size: 400% 400%;
+  background-size: 200% 200%;
   animation: gradient 12s ease infinite;
+  /* background: linear-gradient(136deg, rgba(41, 187, 170, 0.694), #dfffd0, rgba(104, 202, 213, 0.875)); */
+  /* background-size: 300% 300%; */
+  /* animation: animate-bg-gradient 12s ease infinite; */
   color: var(--text-content-color);
 }
 
-.eb-microsite-root.theme-gradient-warm {
+html.theme-gradient-warm {
   --text-content-color: rgba(55, 55, 55, 1);
-  --navbar-brand-color: rgba(131, 58, 180, 1);
-  --eb-conf-primary-dark: rgba(131, 58, 180, 1) !important;
-  --eb-conf-primary-light: rgb(202, 155, 234);
-  --btn-primary-start: rgba(131, 58, 180,0.33) !important;
-  --btn-primary-end: rgba(131, 58, 180,0.83) !important;
-  --btn-primary-border: rgba(131, 58, 180,0.23) !important;
-  --btn-primary-border-hover: rgba(131, 58, 180,0.93) !important;
-  --section-heading-color: rgba(131, 58, 180, 0.8) !important;
-  --section-text-color: rgba(131, 58, 180, 1) !important;
-  --list-bullet-icon-bg: rgba(131, 58, 180,0.38);
-  --list-bullet-icon-border: rgba(131, 58, 180,0.6);
-  --list-bullet-icon-outline: rgba(131, 58, 180,0.3);
+  --navbar-brand-color: rgba(233, 57, 104, 1);
+  --theme-seperator-color: rgba(55,55,55,0.085);
+  --theme-highlight-color: rgb(224, 81, 119);
+  --eb-conf-primary-dark: rgba(233, 57, 104, 1) !important;
+  --eb-conf-primary-light: rgb(227, 108, 140);
+  --btn-primary-start: rgba(235, 116, 148, 0.9) !important;
+  --btn-primary-end: rgba(233, 57, 104,0.83) !important;
+  --btn-primary-border: rgba(233, 57, 104,0.23) !important;
+  --btn-primary-border-hover: rgba(233, 57, 104,0.93) !important;
+  --section-heading-color: rgba(233, 57, 104, 0.8) !important;
+  --section-text-color: rgba(233, 57, 104, 1) !important;
+  --list-bullet-icon-bg: rgba(233, 57, 104,0.38);
+  --list-bullet-icon-border: rgba(233, 57, 104,0.6);
+  --list-bullet-icon-outline: rgba(233, 57, 104,0.3);
   --btn-primary-text-color: rgba(255, 255, 255, 0.95);
-  --btn-border: rgba(131, 58, 180,0.05);
-  --btn-bg: rgba(131, 58, 180,0.15);
-  --btn-text-color: rgba(131, 58, 180,0.95);
+  --btn-border: rgba(233, 57, 104,0.05);
+  --btn-bg: rgba(233, 57, 104,0.15);
+  --btn-text-color: rgba(233, 57, 104,0.95);
   --theme-accordion-title: rgba(55,55,55,0.73);
   --theme-accordion-button-bg: rgba(55, 55, 55, 0.1);
   --theme-accordion-time-bg: rgba(55,55,55,0.03);
@@ -238,19 +155,24 @@ body {
   --theme-accordion-content-bg: rgba(55, 55, 55, 0.12);
   --theme-accordion-content-text: rgba(55,55,55,0.73);
   --theme-accordion-icon-bg: rgba(55,55,55,0.1);
-  --theme-accordion-track-text: rgb(202, 155, 234);
+  --theme-accordion-track-text: rgb(224, 81, 119);
+  --theme-accordion-highlight-text: rgba(224, 81, 119,1);
+  --speaker-card-bg: rgba(25, 25, 55, 0.085);
+  --speaker-card-border: rgba(25,25,55,0.02);
+  --speaker-card-text: rgba(55,55,55,0.73);
 
   background: #2A7B9B;
   /* background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%) !important; */
   /* background:linear-gradient(-45deg, rgba(42, 123, 155, 0.8) 0%, rgba(87, 199, 133, 0.32) 50%, rgba(237, 221, 83, 0.87) 100%); */
-  background: linear-gradient(-45deg,rgba(131, 58, 180, 0.82) 0%, rgba(253, 29, 29, 0.1) 50%, rgba(252, 176, 69, 0.79) 100%);
+  /* background: radial-gradient(circle,rgba(247, 147, 244, 0.137) 0%, rgba(233, 57, 104, 0.325) 50%, rgba(247, 210, 76, 0.9) 100%); */
+  background: radial-gradient(circle,rgba(247, 210, 76, 0.27) 0%, rgba(233, 57, 104, 0.225) 40%, rgba(247, 147, 244, 0.59) 100%);
   /* background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); */
   background-size: 400% 400%;
   animation: gradient 12s ease infinite;
   color: var(--text-content-color);
 }
 
-.eb-microsite-root.theme-gradient-warm2 {
+html.theme-gradient-warm2 {
   --text-content-color: rgba(55, 55, 55, 1);
   --navbar-brand-color: rgba(194, 147, 82, 1);
   --eb-conf-primary-dark: rgba(194, 147, 82, 1) !important;
@@ -287,15 +209,20 @@ body {
   color: var(--text-content-color);
 }
 
+@keyframes animate-bg-gradient {
+  0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+}
 
 @keyframes gradient{
-  0%{background-position:0% 50%;}
+  0%{background-position:50% 50%;}
   50%{background-position:100% 50%;}
-  100%{background-position:0% 50%;}
+  100%{background-position:50% 50%;}
 }
 
 .eb-microsite-main {
-  max-width: 1000px;
+  /* max-width: 1000px; */
   margin: 0 auto;
 }
 
@@ -303,218 +230,171 @@ body {
    UTILITIES
    ===================== */
 
-   .container {
-    width: 100%;
-    max-width: 1140px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
+  .theme-link {
+    color: var(--tex-content-color);
+    text-decoration: none;
+    transition: var(--transition-smooth);
+  }
+  .theme-link:hover {
+    /* color: var(--text-content-hover-color); */
+    color: var(--theme-text-highlight-color);
+  }
+
+  .font-12 {
+    font-size: 12px;
+  }
+  .font-13 {
+    font-size: 13px;
+  }
+  .font-14 {
+    font-size: 14px;
+  }
+  .font-15 {
+    font-size: 15px;
+  }
+  .font-16 {
+    font-size: 16px;
+  }
+  .font-17 {
+    font-size: 17px;
+  }
+  .font-18 {
+    font-size: 18px;
+  }
+  .font-19 {
+    font-size: 19px;
+  }
+  .font-20 {
+    font-size: 20px;
+  }
+  .font-21 {
+    font-size: 21px;
+  }
+  .font-22 {
+    font-size: 22px;
+  }
+  .font-23 {
+    font-size: 23px;
+  }
+  .font-24 {
+    font-size: 24px;
+  }
+  .font-25 {
+    font-size: 25px;
+  }
+  .font-26 {
+    font-size: 26px;
+  }
+  .font-27 {
+    font-size: 27px;
+  }
+  .font-28 {
+    font-size: 28px;
+  }
+  .font-29 {
+    font-size: 29px;
+  }
+  .font-30 {
+    font-size: 30px;
+  }
+  .fw-l {
+    font-weight: 300;
+  }
+  .fw-n {
+    font-weight: 400;
+  }
+  .fw-b {
+    font-weight: 600;
+  }
+  .fw-sb {
+    font-weight: 500;
+  }
+  .fw-eb {
+    font-weight: 700;
   }
   
-  .container-fluid {
-    width: 100%;
-    padding: 0 1.5rem;
+  .text-highlight {
+    color: var(--theme-text-highlight-color);
   }
-  
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -0.75rem;
-  }
-  
-  .col-6,
-  .col-md-3,
-  .col-md-4,
-  .col-md-9,
-  .col-lg-2,
-  .col-lg-3 {
-    padding: 0 0.75rem;
-    margin-bottom: 1.5rem;
-  }
-  
-  .col-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  
-  @media (min-width: 768px) {
-    .col-md-3 {
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-    .col-md-4 {
-      flex: 0 0 33.333%;
-      max-width: 33.333%;
-    }
-    .col-md-9 {
-      flex: 0 0 75%;
-      max-width: 75%;
-    }
-  }
-  
-  @media (min-width: 992px) {
-    .col-lg-2 {
-      flex: 0 0 16.667%;
-      max-width: 16.667%;
-    }
-    .col-lg-3 {
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-  }
-  
-  .g-3 > * {
-    margin-bottom: 1rem;
-  }
-  
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  
-  .mt-4 {
-    margin-top: 1.5rem;
-  }
-  
-  .me-2 {
-    margin-right: 0.5rem;
-  }
-  
-  .ms-2 {
-    margin-left: 0.5rem;
-  }
-  .mb-3 {
-    margin-bottom: 1rem;
-  }  
-  .mb-4 {
-    margin-bottom: 1.5rem;
-  }
-  
-  .mb-5 {
-    margin-bottom: 3rem;
-  }
-  
-  .py-3 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-  
-  .py-4 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-  
-  .py-5 {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-  
-  .px-lg-4 {
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
-  }
-  
-  .text-center {
-    text-align: center;
-  }
-  
-  .text-muted {
-    color: #64748b !important;
-  }
-  
-  .small {
-    font-size: 0.875rem;
-  }
-  
-  .rounded-circle {
-    border-radius: 50%;
-  }
-  
-  .h-100 {
-    height: 100%;
-  }
-  
+
   .shadow-sm {
     box-shadow: var(--shadow-sm);
   }
-  
-  .img-fluid {
-    max-width: 100%;
-    height: auto;
-    display: block;
-  }
-  
-  .align-items-start {
-    align-items: flex-start;
-  }
-  
-  .align-items-center {
-    align-items: center;
-  }
-  
-  .justify-content-center {
-    justify-content: center;
-  }
 
+  .dashed-hr {
+    border-style: dashed;
+  }
 
 /* =====================
    HEADER & NAVIGATION
    ===================== */
 
-.eb-conference-header {
-  /* background: var(--eb-conf-nav-bg); */
+.theme-navbar {
+  background: var(--theme-header-color);
+  backdrop-filter: blur(20px);
   padding: 0rem 0;
-  /* position: relative; */
-  /* top: 0; */
-  /* z-index: 1000; */
-  /* box-shadow: var(--shadow-md); */
   transition: box-shadow var(--transition-smooth);
 }
 
-.eb-conference-header .navbar {
-  padding: 0rem 0 1rem;
-  position: relative;
-  min-height: 70px;
-}
-
-.eb-conference-header .navbar-brand {
-  color: var(--navbar-brand-color) !important;
-  font-family: var(--eb-conf-heading-font);
-  font-weight: 700;
-  font-size: 1.25rem;
+.theme-navbar .navbar-brand {
+  color: var(--theme-text-color) !important;
+  font-family: var(--theme-heading-font);
+  font-weight: 600;
+  font-size: 1.1rem;
   transition: opacity var(--transition-smooth);
-  position: absolute;
   top: -3rem;
   display: flex;
+  align-items: center;
   text-decoration: none;
-  flex-direction: column;
+}
+.theme-navbar .navbar-brand span {
+  padding-left: 1rem;
+  text-wrap: wrap;
 }
 
-/* .eb-conference-header .navbar-brand:hover {
-  opacity: 0.85;
-} */
-
-.eb-conference-header .nav-link {
-  /* color: rgba(255, 255, 255, 0.9) !important; */
-  transition: color var(--transition-smooth);
-  font-weight: 500;
+.theme-navbar .nav-link {
+  /* color: var(--theme-navbar-color); */
+  color: var(--theme-text-color);
+  transition: var(--transition-smooth);
+  font-weight: 600;
   letter-spacing: 0.3px;
+  font-size: 0.9rem;
 }
 
-/* .eb-conference-header .nav-link:hover {
-  color: #fff !important;
-} */
-.eb-header-logo-container {
-  position: relative;
-  z-index: 999;
+.theme-navbar .nav-link:hover,
+.theme-navbar .nav-link:focus {
+  /* color: var(--theme-navbar-hover-color); */
+  color: var(--theme-text-highlight-color);
+}
+.theme-navbar .navbar-nav .nav-link.active, .theme-navbar .navbar-nav .nav-link.show {
+  color: var(--theme-navbar-hover-color);
+}
+
+.theme-navbar .navbar-toggler {
+  padding: 0.5rem;
+  font-size: 1rem;
+  line-height: 1;
+  /* color: var(--theme-navbar-color); */
+  color: var(--theme-text-color);
+  background-color: var(--theme-navabar-toggler-bg);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--theme-navbar-toggler-border-color);
+  border-radius: 6px;
+  transition: var(--transition-smooth);
+  position: absolute;
+  right: calc(var(--bs-gutter-x) * .5);
+}
+.theme-navbar .navbar-toggler:focus {
+  box-shadow: none;
+}
+.theme-navbar .navbar-toggler:hover {
+  background-color: var(--theme-navabar-toggler-hover-bg);
 }
 .eb-header-logo {
   border-radius: 6px;
   max-height: 100px;
-  width: 150px;
+  width: 120px;
   transition: transform var(--transition-smooth);
-  border: 6px solid var(--eb-conf-primary-dark);
-  box-shadow: -2px -2px 0px var(--eb-conf-primary-dark), 2px -2px 0px var(--eb-conf-primary-dark);
-  margin-left: -8px;
 }
 .eb-header-logo-container span { padding-left: 10px;}
 
@@ -522,6 +402,64 @@ body {
   transform: scale(1.02);
 }
 
+.theme-navbar .offcanvas.theme-navbar-offcanvas {
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.offcanvas.theme-navbar-offcanvas {
+  /* background: rgba(255,255,255, 0.15); */
+  background: var(--theme-header-color);
+  backdrop-filter: blur(20px);
+}
+.offcanvas.theme-navbar-offcanvas.show {
+  /* background: rgba(255,255,255, 0.15); */
+  background: var(--theme-header-color);
+  backdrop-filter: blur(20px);
+}
+.offcanvas.theme-navbar-offcanvas.show .offcanvas-header,
+.offcanvas.theme-navbar-offcanvas.show .offcanvas-body {
+  color: rgba(255,255,255, 0.75);
+}
+.offcanvas.theme-navbar-offcanvas.show .btn-close {
+  background-color: rgba(255,255,255, 0.2);
+  backdrop-filter: blur(20px);
+}
+.offcanvas.theme-navbar-offcanvas.show .nav-link {
+  color: var(--theme-text-color);
+  transition: color var(--transition-smooth);
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  font-size: 1rem;
+}
+.offcanvas.theme-navbar-offcanvas.show .nav-link.btn {
+  color: var(--theme-text-color);
+  transition: color var(--transition-smooth);
+  text-transform: capitalize;
+  margin-top: 0.5rem;
+}
+.offcanvas.theme-navbar-offcanvas.show .nav-link.btn.btn-register {
+  /* border: 1px dashed rgba(255, 255, 255, 0.2); */
+  /* background: rgba(255, 255, 255, 0.1); */
+  transition: var(--transition-smooth);
+}
+
+.offcanvas.theme-navbar-offcanvas.show .nav-link:hover,
+.offcanvas.theme-navbar-offcanvas.show .nav-link:focus {
+  color: var(--theme-text-highlight-color);
+}
+.offcanvas.theme-navbar-offcanvas.show .navbar-nav .nav-link.active, .offcanvas.theme-navbar-offcanvas.show .navbar-nav .nav-link.show {
+  color: var(--theme-text-highlight-color);
+}
+
+.offcanvas.theme-navbar-offcanvas.show .nav-link.btn.btn-register:hover,
+.offcanvas.theme-navbar-offcanvas.show .nav-link.btn.btn-register:focus {
+  /* background: rgba(255, 255, 255, 0.2); */
+  background: var(--theme-button-color);
+}
+
+
+
 /* =====================
    HERO SECTION
    ===================== */
@@ -535,24 +473,10 @@ body {
   background: var(--eb-conf-hero-gradient);
   position: relative;
   overflow: hidden;
-  border-radius: 15px;
-  margin-top: 1.5rem;
-  margin-left: -1rem;
-  margin-right: -1rem;
-  /* clip-path: polygon(
-        0 0,
-        100% 0,
-        100% 100%,
-        200px 100%,
-        200px calc(100% - 90px),
-        0 calc(100% - 90px)
-    ); */
-    /* -webkit-mask:
-    radial-gradient(90px 60px at 110px 100%, transparent 99%, #000 100%),
-    linear-gradient(#000 0 0); */
-
-/* -webkit-mask-composite: source-over; */
-/* mask-composite: add;   */
+  border-radius: 1px;
+  margin-top: 3rem;
+  /* margin-left: -1rem; */
+  /* margin-right: -1rem; */
 
 }
 
@@ -565,7 +489,7 @@ body {
 }
 
 .eb-hero-has-image .eb-hero-bg {
-  opacity: 0.35;
+  opacity: 0.95;
 }
 
 .eb-hero-mask {
@@ -573,6 +497,8 @@ body {
   inset: 0;
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
   z-index: 2;
+  opacity: 0;
+  visibility: hidden;
 }
 
 .eb-hero-inner {
@@ -595,7 +521,7 @@ body {
 }
 
 .eb-hero-heading {
-  font-family: var(--eb-conf-heading-font);
+  font-family: var(--theme-heading-font);
   font-size: clamp(2.25rem, 6vw, 3.5rem);
   font-weight: 800;
   line-height: 1.15;
@@ -628,6 +554,120 @@ body {
   justify-content: flex-end;
 }
 
+/* =====================
+   Theme Card Styles
+   ===================== */
+.card.card-theme {
+  background: var(--theme-secondary-color);
+  color: var(--theme-card-text-color);
+  border: 1px solid var(--theme-card-border-color);
+  border-radius: 1rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  /* cursor: pointer; */
+}
+
+.card.card-theme .card-header {
+  border-bottom: 1px dashed var(--theme-card-border-color);
+}
+.card.card-theme .card-footer {
+  border-top: 1px dashed var(--theme-card-border-color);
+}
+
+.card.card-theme .card-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.card.card-theme .card-subtitle {
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+.card.card-theme .card-text {
+  font-size: 0.9rem;
+}
+.card-key-person .img-container {
+  width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin: 1rem auto 0rem;
+}
+.card-key-person .img-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.eb-key-persons-section .card[role='button'] {
+  cursor: pointer;
+}
+
+.eb-key-persons-section .card[role='button']:focus-visible {
+  outline: 2px solid var(--theme-text-highlight-color, #fff);
+  outline-offset: 3px;
+}
+
+.card.card-theme .img-container {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 1rem auto 0rem;
+}
+.card.card-theme .img-container.img-container-sm {
+  width: 100px;
+  height: 100px;
+}
+
+.card.card-theme .img-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card.card-theme.card-key-person .img-container {
+  border-radius: 12px;
+  margin: 0;
+}
+
+.contact-person .contact-link-item, .contact-link-item a {
+  color: var(--theme-card-text-color);
+  text-decoration: none;  
+  transition: color var(--transition-smooth);
+  font-size: 0.9rem;
+}
+.contact-link-item a:hover, .contact-link-item a:focus, .contact-link-item a:active {
+  color: var(--theme-text-highlight-color);
+}
+
+/** Icon Styles */
+.icon-container {
+  width: 50px;
+  height: 50px;
+  border-radius: 5px;
+  background: var(--theme-secondary-color-light);
+  color: var(--theme-card-text-color);
+  font-size: 1.35rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-container.icon-sm {
+  width: 32px;
+  height: 32px;
+  font-size: 1rem;
+}
+.icon-container.icon-md {
+  width: 42px;
+  height: 42px;
+  font-size: 1.1rem;
+}
+.icon-container.icon-lg {
+  width: 60px;
+  height: 60px;
+  font-size: 1.75rem;
+}
+
 /* =====================
    SECTIONS & LAYOUT
    ===================== */
@@ -638,7 +678,7 @@ body {
 }
 
 .eb-section-heading {
-  font-family: var(--eb-conf-heading-font);
+  font-family: var(--theme-heading-font);
   font-weight: 700;
   font-size: clamp(1.5rem, 2.5vw, 2rem);
   /* color: var(--eb-conf-primary-dark); */
@@ -649,9 +689,9 @@ body {
 
 .eb-section-heading::after {
   content: '';
-  display: block;
+  display: none;
   width: 60px;
-  height: 4px;
+  height: 3px;
   /* background: linear-gradient(90deg, var(--eb-conf-accent) 0%, var(--eb-conf-primary) 100%); */
   background: linear-gradient(135deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%);
   margin: 0rem 0 0;
@@ -669,6 +709,88 @@ body {
   overflow: hidden;
 }
 
+.eb-countdown-section {
+  position: relative;
+  z-index: 2;
+  margin-top: -3.5rem;
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
+}
+
+.eb-countdown-section .container {
+  max-width: 600px;
+  background: var(--theme-secondary-color, rgba(255, 255, 255, 0.08));
+  border: 1px solid var(--theme-card-border-color, rgba(255, 255, 255, 0.1));
+  border-radius: 1rem;
+  padding: 1rem;
+  backdrop-filter: blur(40px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+}
+
+.eb-countdown-title {
+  font-family: var(--theme-heading-font);
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: center;
+  margin: 0 0 1.1rem;
+  color: var(--theme-text-color, rgba(255, 255, 255, 0.9));
+  opacity: 1;
+}
+
+.eb-countdown-units {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.5rem;
+}
+
+.eb-countdown-unit {
+  min-width: 4.5rem;
+  text-align: center;
+  padding: 0.5rem 0.65rem;
+  border-radius: 0.65rem;
+  /* background: var(--theme-card-bg, rgba(255, 255, 255, 0.08)); */
+  /* border: 1px solid var(--theme-card-border-color, rgba(255, 255, 255, 0.1)); */
+}
+
+.eb-countdown-value {
+  font-family: var(--theme-heading-font);
+  font-size: clamp(1.25rem, 3vw, 1.8rem);
+  font-weight: 600;
+  line-height: 1.1;
+  color: var(--theme-text-color, #fff);
+}
+
+.eb-countdown-label {
+  margin-top: 0.25rem;
+  font-size: 0.6rem;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.7;
+  color: var(--theme-text-color, #fff);
+}
+
+.eb-countdown-sep {
+  font-family: var(--theme-heading-font);
+  font-size: 1.5rem;
+  font-weight: 700;
+  opacity: 0.45;
+  padding: 0 0.15rem;
+  color: var(--theme-text-color, #fff);
+  align-self: flex-start;
+  margin-top: 0.55rem;
+}
+
+.eb-countdown-expired {
+  text-align: center;
+  font-family: var(--theme-heading-font);
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--theme-text-highlight-color, var(--theme-text-color, #fff));
+}
+
 .eb-countdown-heading {
   letter-spacing: 0.1em;
   opacity: 0.85;
@@ -678,24 +800,89 @@ body {
 }
 
 .eb-countdown-phrase {
-  font-family: var(--eb-conf-heading-font);
+  font-family: var(--theme-heading-font);
   font-size: clamp(1.5rem, 4vw, 2rem);
   font-weight: 700;
   margin: 0.5rem 0 0;
 }
 
 .about-section {
-  padding-top: 1rem;
   padding-bottom: 2rem;
 }
-
+.about-section .about-event-name {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
 .about-section p {
   font-size: 1rem;
   font-weight: 300;
-  /* color: var(--section-text-color); */
   color: inherit;
 }
 
+.card.card-theme.card-register .card-header,
+.card.card-theme.card-tickets .card-header {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background: var(--theme-card-bg);
+}
+.card.card-theme.card-register .card-title,
+.card.card-theme.card-tickets .card-title {
+  font-size: 0.95rem;
+  margin-bottom: 0;
+}
+
+.ticket-item {
+  background: transparent;
+  border: 1px solid var(--theme-card-border-color);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: inherit;
+  cursor: pointer;
+  width: 100%;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.ticket-item .ticket-item-description {
+  font-size: 0.8rem;
+  opacity: 0.75;
+  font-weight: 400;
+}
+
+.ticket-item.active,
+.ticket-item.selected {
+  background: var(--theme-secondary-color-light);
+  border-style: solid;
+}
+
+.register-section {
+  position: relative;
+  mask-image: linear-gradient(
+    to right,
+    rgba(250, 0, 0, 0),
+    rgba(250, 250, 250, 1) 30%,
+    rgba(250, 250, 250, 1) 70%,
+    rgba(250, 250, 250, 0)
+  );
+  backdrop-filter: blur(100px);
+  border-top: 1px solid rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+  margin: 5rem 0;
+}
+.register-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 1px;
+  height: 1px;
+  border-radius: 50%;
+  box-shadow: 0 0 10vw 10vw rgba(255, 255, 255, 0.18), 0 0 100px 100px rgba(255, 255, 255, 0.01);
+}
+
 /* ======
 LIST STYLES
 ============= */
@@ -713,15 +900,15 @@ LIST STYLES
 .theme-list li::before {
   content: '';
   display: block;
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   background: var(--list-bullet-icon-bg);
   border: 0.5px solid var(--list-bullet-icon-border);
   outline: 2px solid var(--list-bullet-icon-outline);
   outline-offset: 1px;
   border-radius: 50%;
   position: absolute;
-  left: 0;
+  left: 5px;
   top: 0.7rem;
 }
 
@@ -733,17 +920,17 @@ Theme Accordion Styles
   border-radius: 12px;
   overflow: hidden;
 }
-.theme-accordion-item.border-bottom {
-  /* border-bottom: 0.5px solid rgba(255,255,255,0.3); */
-  margin-bottom: 0.05rem;
+.theme-accordion-item:not(:last-child) {
+  margin-bottom: 0.09rem;
 }
 
 .theme-accordion-button {
   width: 100%;
-  background: var(--theme-accordion-button-bg);
+  /* background: var(--theme-accordion-button-bg); */
+  background: var(--theme-secondary-color);
   backdrop-filter: blur(5px);
   border: none;
-  padding: 1rem 1.5rem;
+  padding: 1rem 1rem;
   text-align: left;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -755,10 +942,20 @@ Theme Accordion Styles
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
   cursor: pointer;
 }
+
+.theme-accordion-button-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .theme-accordion-time {
   background: var(--theme-accordion-time-bg);
   backdrop-filter: blur(5px);
-  color: var(--theme-accordion-time-text);
+  color: var(--theme-text-color);
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
@@ -776,18 +973,14 @@ Theme Accordion Styles
   margin: 0 0 0.25rem 0;
   overflow: hidden;
   text-align: ellipsis;
-  /* white-space: nowrap; */
   letter-spacing: 0.35px;
 }
 .theme-accordion-track {
-  /* background: rgba(0, 194, 209, 0.1); */
-  /* color: #0891b2; */
-  color: var(--theme-accordion-track-text);
+  color: var(--theme-text-highlight-color);
   padding: 0.25rem 0rem;
   border-radius: 3px;
   font-size: 0.8rem;
   font-weight: 500;
-  /* text-transform: uppercase; */
   letter-spacing: 0.5px;
   display: inline-block;
 }
@@ -797,30 +990,49 @@ Theme Accordion Styles
   justify-content: center;
   width: 26px;
   height: 26px;
-  background: var(--theme-accordion-icon-bg);
   border-Radius: 6px;
   transition: all 0.3s;
-  color: #3d4249;
+  color: var(--theme-text-color);
   font-weight: 600;
   font-size: 1.2rem;
   flex-shrink: 0;
   backdrop-filter: blur(5px);
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
 }
 .theme-accordion-content {
-  background: var(--theme-accordion-content-bg);
+  /* background: var(--theme-accordion-content-bg); */
+  background: var(--theme-secondary-color-light);
   backdrop-filter: blur(5px);
-  padding: 1.5rem;
-  /* border-top: 0.5px solid rgba(255,255,255,0.3); */
+  padding: 1.5rem 1rem;
   color: inherit;
   animation: 0.2s ease-out 0s 1 normal both running slideDown;
-  /* border-bottom-left-radius: 12px; */
-  /* border-bottom-right-radius: 12px; */
 }
 .theme-accordion-content p {
   color: inherit;
   margin: 0 0 0.5rem;
 }
 
+.theme-accordion-speaker-info {
+  border-top: 1px dashed var(--theme-seperator-color);
+  padding-top: 1rem;
+  color: var(--theme-text-color);
+}
+.theme-accordion-speaker-info-heading {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;  
+  margin-bottom: 0.75rem;
+  margin: 0;
+}
+.theme-accordion-speaker-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--theme-text-highlight-color);
+}
+
 /* =====================
    SCHEDULE SECTION
    ===================== */
@@ -829,7 +1041,6 @@ Theme Accordion Styles
   /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
   /* border-top: 1px solid rgba(255,255,255,0.05); */
   padding-top: 2rem;
-  box-shadow: 0 -1px 0px rgba(250, 250, 250, 0.05);
 }
 
 /* New horizontal card layout */
@@ -899,7 +1110,7 @@ Theme Accordion Styles
 }
 
 .eb-schedule-title {
-  font-family: var(--eb-conf-heading-font);
+  font-family: var(--theme-heading-font);
   color: #0f172a;
   font-size: 1.125rem;
   margin: 0.5rem 0;
@@ -926,7 +1137,7 @@ Theme Accordion Styles
    ===================== */
 
 .eb-speakers-section {
-  background: #fff;
+  background: transparent;
 }
 
 .eb-speakers-section .card {
@@ -936,6 +1147,10 @@ Theme Accordion Styles
   box-shadow: var(--shadow-md);
   transition: all var(--transition-smooth);
   height: 100%;
+  /* background: var(--speaker-card-bg); */
+  /* color: var(--speaker-card-text); */
+  /* border: 1px solid var(--speaker-card-border); */
+  backdrop-filter: blur(14px);
 }
 
 .eb-speakers-section .card:hover {
@@ -943,6 +1158,20 @@ Theme Accordion Styles
   transform: translateY(-8px);
 }
 
+/* .eb-speakers-section .img-container {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 1rem auto 0rem;
+}
+
+.eb-speakers-section .img-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+} */
+
 .eb-speakers-section .card-img-top {
   width: 100%;
   height: 240px;
@@ -959,18 +1188,106 @@ Theme Accordion Styles
 }
 
 .eb-speakers-section .card-title {
-  font-family: var(--eb-conf-heading-font);
+  font-family: var(--theme-heading-font);
   font-size: 1.125rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #0f172a;
+  /* color: #0f172a; */
 }
 
 .eb-speakers-section .card-text {
-  color: #64748b;
+  color: var(--theme-text-highlight-color);
   font-size: 0.95rem;
 }
 
+.eb-speakers-section .card[role='button'] {
+  cursor: pointer;
+}
+
+.eb-speakers-section .card[role='button']:focus-visible {
+  outline: 2px solid var(--theme-text-highlight-color, #fff);
+  outline-offset: 3px;
+}
+
+.eb-speaker-modal-content {
+  background: var(--theme-card-bg, rgba(20, 24, 40, 0.96));
+  color: var(--theme-text-color, rgba(255, 255, 255, 0.92));
+  border: 1px solid var(--theme-card-border-color, rgba(255, 255, 255, 0.12));
+  border-radius: 1rem;
+  backdrop-filter: blur(12px);
+}
+
+.eb-speaker-modal-content .modal-header {
+  border-bottom-color: var(--theme-card-border-color, rgba(255, 255, 255, 0.1));
+}
+
+.eb-speaker-modal-content .modal-title {
+  font-family: var(--theme-heading-font);
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.eb-speaker-modal-content .btn-close {
+  filter: invert(1) grayscale(1);
+  opacity: 0.7;
+}
+
+.eb-speaker-modal-body {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+.eb-speaker-modal-photo {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.eb-speaker-modal-photo img,
+.eb-speaker-modal-photo-placeholder {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.eb-speaker-modal-photo-placeholder {
+  background: #cbd5e1;
+}
+
+.eb-speaker-modal-name {
+  font-family: var(--theme-heading-font);
+  font-size: 1.35rem;
+  font-weight: 700;
+  margin: 0 0 0.35rem;
+}
+
+.eb-speaker-modal-designation {
+  font-size: 0.85rem;
+  font-weight: 500;
+  margin-bottom: 0.6rem;
+}
+
+.eb-speaker-modal-bio {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  opacity: 0.9;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 575.98px) {
+  .eb-speaker-modal-body {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    text-align: center;
+  }
+}
+
 /* =====================
    SPONSORS SECTION
    ===================== */
@@ -1012,6 +1329,23 @@ Theme Accordion Styles
   filter: brightness(0.95);
 }
 
+/* ======
+Social Links Styles
+============= */
+.social-links {
+  font-size: 1.2rem;
+}
+.social-links a {
+  /* color: rgba(255, 255, 255, 0.65); */
+  color: var(--theme-text-color);
+  transition: color var(--transition-smooth);
+}
+
+.social-links a:hover {
+  /* color: rgba(255, 255, 255, 1); */
+  color: var(--theme-text-highlight-color);
+}
+
 /* =====================
    BUTTONS
    ===================== */
@@ -1031,29 +1365,36 @@ Theme Accordion Styles
   text-transform: uppercase;
   font-size: 0.95rem;
   background: var(--btn-bg);
-  color: var(--btn-text-color);
+  color: var(--theme-text-color);
+}
+.btn.btn-sm {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+}
+.btn.btn-lg {
+  padding: 0.9rem 1.8rem;
+  font-size: 1.1rem;
 }
 
-.btn-primary {
-  /* background: linear-gradient(135deg, var(--eb-conf-accent) 0%, var(--eb-conf-primary) 100%); */
-  /* background: linear-gradient(135deg, rgba(92,106,196,0.33) 0%, rgba(92,106,196,0.83) 100%); */
-  background: linear-gradient(135deg, var(--btn-primary-start) 0%, var(--btn-primary-end) 100%);
-  border-color: var(--btn-primary-border) !important;
-  /* color: var(--eb-conf-accent-foreground) !important; */
-  color: var(--btn-primary-text-color) !important;
+.btn.btn-primary {
+  background: var(--theme-button-color);
+  border-color: var(--theme-button-color) !important;
+  color: var(--theme-text-color) !important;
   box-shadow: var(--shadow-md);
   backdrop-filter: blur(5px);
 }
 
-.btn-primary:hover {
-  /* background: linear-gradient(135deg, var(--eb-conf-accent-hover) 0%, var(--eb-conf-primary) 100%); */
-  /* background: linear-gradient(135deg, rgba(92,106,196,0.33) 0%, rgba(92,106,196,0.83) 100%); */
-  border-color: var(--btn-primary-border-hover) !important;
+.btn.btn-primary:hover {
+  border-color: var(--theme-button-color) !important;
+  background: var(--theme-button-color);
   box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
 }
 
-.btn-primary:active {
+.btn.btn-primary:active {
+  border-color: var(--theme-button-color) !important;
+  background: var(--theme-button-color);
+  background-color: var(--theme-button-color);
   transform: translateY(0);
   box-shadow: var(--shadow-md);
 }
@@ -1063,6 +1404,20 @@ Theme Accordion Styles
   font-size: 1.0625rem;
 }
 
+.btn.btn-primary-outline {
+  background: var(--btn-bg);
+  border-color: var(--btn-border) !important;
+  color: var(--theme-text-color) !important;
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(5px);
+}
+.btn.btn-primary-outline:hover {
+  border-color: var(--theme-button-color) !important;
+  background: var(--theme-button-color);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
 .btn-outline-secondary {
   background: transparent;
   border-color: #94a3b8;
@@ -1135,7 +1490,7 @@ textarea.form-control {
   margin-top: 0.25rem;
 }
 
-.card {
+/* .card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
@@ -1162,12 +1517,16 @@ textarea.form-control {
 .card-text {
   margin: 0;
   color: #64748b;
-}
+} */
 
 /* =====================
    FOOTER
    ===================== */
 
+ .footer-section .container {
+  border-top: 1px dashed var(--theme-seperator-color);
+ }  
+
 .eb-static-footer {
   /* background: linear-gradient(135deg, var(--eb-conf-footer-bg) 0%, rgba(0, 0, 0, 0.8) 100%); */
   color: inherit;
@@ -1196,11 +1555,21 @@ textarea.form-control {
 
 /* =====================
    RESPONSIVE
-   ===================== */
+   ===================== */ 
 
 @media (max-width: 767px) {
+
+  .theme-navbar .navbar-brand {
+    margin-right: 50px;
+    font-size: 0.9rem;
+  }
+  .eb-header-logo {
+    width: 100px;
+  }
+  .theme-navbar .navbar-brand span { padding-left: 0.5rem; display: none; }
+  
   .section {
-    padding: 3rem 1rem;
+    padding: 3rem 0rem;
   }
 
   .eb-hero-block {
@@ -1216,17 +1585,19 @@ textarea.form-control {
     width: 100%;
   }
 
-  .row {
-    margin: 0 -0.5rem;
+  .theme-accordion-button-content {
+    flex-direction: column;
+    align-items: flex-start
+  }
+  .theme-accordion-time {
+    padding: 0.25rem 0.5rem;
   }
 
-  .col-6,
-  .col-md-3,
-  .col-md-4,
-  .col-md-9,
-  .col-lg-2,
-  .col-lg-3 {
-    padding: 0 0.5rem;
-    margin-bottom: 1rem;
+}
+
+@media (max-width: 575px) {
+  .theme-accordion-time {
+    padding: 0.35rem 0.5rem;
+    font-size: 0.7rem;
   }
 }
diff --git a/src/styles/forms.css b/src/styles/forms.css
index 6588f3e..ade5853 100644
--- a/src/styles/forms.css
+++ b/src/styles/forms.css
@@ -348,23 +348,25 @@
 }
 
 .form-event-banner {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
+  width: 100%;
+  margin: 0 0 16px;
   border-radius: 10px;
   overflow: hidden;
-  max-height: 120px;
+  max-height: 180px;
+  line-height: 0;
 }
 
 .form-event-banner img {
+  width: 100%;
   height: auto;
-  max-height: 120px;
+  max-height: 180px;
+  object-fit: cover;
   display: block;
 }
 
 .form-event-logo {
   display: block;
-  max-height: 120px;
+  max-height: 96px;
   width: auto;
   height: auto;
   max-width: 100%;
@@ -480,3 +482,134 @@
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+.form-ticket-step-label {
+  margin: 0 0 12px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.form-ticket-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.form-ticket-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  text-align: left;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+}
+
+.form-ticket-card--active {
+  border-color: #0f172a;
+  box-shadow: 0 0 0 1px #0f172a;
+}
+
+.form-ticket-card-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.form-ticket-card-price {
+  font-size: 0.875rem;
+  color: #334155;
+}
+
+.form-ticket-card-desc {
+  font-size: 0.8125rem;
+  color: #64748b;
+}
+
+.form-ticket-channels {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.form-ticket-channel {
+  flex: 1;
+  min-width: 120px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  cursor: pointer;
+  font-size: 0.8125rem;
+}
+
+.form-ticket-channel--active {
+  border-color: #0f172a;
+  background: #0f172a;
+  color: #fff;
+}
+
+.form-ticket-manual {
+  margin-bottom: 12px;
+}
+
+.form-ticket-qr {
+  display: block;
+  max-width: 180px;
+  margin: 0 auto 10px;
+  border-radius: 8px;
+}
+
+.form-ticket-qr-wrap {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 12px;
+  padding: 12px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.form-ticket-upi-id {
+  margin: 0 0 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.form-ticket-total {
+  margin: 0 0 12px;
+  font-size: 0.95rem;
+}
+
+.form-ticket-tax {
+  color: #64748b;
+  font-weight: 400;
+}
+
+.form-ticket-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.form-submit--secondary {
+  background: #fff;
+  color: #0f172a;
+  border: 1px solid #cbd5e1;
+}
+
+.form-field {
+  display: block;
+  margin-bottom: 12px;
+}
diff --git a/src/styles/landing.css b/src/styles/landing.css
new file mode 100644
index 0000000..088b449
--- /dev/null
+++ b/src/styles/landing.css
@@ -0,0 +1,397 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');
+
+.eb-landing {
+  --eb-blue: #1d66ef;
+  --eb-navy: #0f3072;
+  --eb-ink: #0c1222;
+  --eb-muted: #5b657a;
+  --eb-surface: #ffffff;
+  --eb-line: rgba(15, 48, 114, 0.12);
+  --eb-font-display: 'Outfit', sans-serif;
+  --eb-font-body: 'Source Sans 3', sans-serif;
+  min-height: 100vh;
+  color: var(--eb-ink);
+  font-family: var(--eb-font-body);
+  background: #eef2f8;
+}
+
+.eb-landing *,
+.eb-landing *::before,
+.eb-landing *::after {
+  box-sizing: border-box;
+}
+
+.eb-landing a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.eb-landing-nav {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22px clamp(20px, 5vw, 56px);
+}
+
+.eb-landing-nav-logo {
+  display: block;
+  height: 36px;
+  width: auto;
+}
+
+.eb-landing-nav-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0 18px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  font-family: var(--eb-font-display);
+  font-size: 0.95rem;
+  font-weight: 600;
+  backdrop-filter: blur(8px);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.eb-landing-nav-cta:hover {
+  background: rgba(255, 255, 255, 0.22);
+  transform: translateY(-1px);
+}
+
+.eb-landing-hero {
+  position: relative;
+  min-height: min(92vh, 820px);
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  color: #fff;
+  background: #0f3072;
+}
+
+.eb-landing-hero-media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.48;
+  transform: scale(1.03);
+  animation: eb-landing- ken 18s ease-in-out infinite alternate;
+}
+
+.eb-landing-hero-shade {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(12, 18, 34, 0.35) 0%, rgba(12, 18, 34, 0.72) 55%, rgba(12, 18, 34, 0.92) 100%),
+    linear-gradient(115deg, rgba(29, 102, 239, 0.45), transparent 55%);
+}
+
+.eb-landing-hero-inner {
+  position: relative;
+  z-index: 1;
+  width: min(720px, 100%);
+  padding: clamp(120px, 18vh, 180px) clamp(20px, 5vw, 56px) clamp(48px, 8vh, 72px);
+}
+
+.eb-landing-brand {
+  display: block;
+  height: clamp(44px, 7vw, 64px);
+  width: auto;
+  margin-bottom: 28px;
+  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
+  animation: eb-landing-rise 0.7s ease both;
+}
+
+.eb-landing-hero h1 {
+  margin: 0 0 14px;
+  font-family: var(--eb-font-display);
+  font-size: clamp(2.4rem, 6vw, 4.2rem);
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  animation: eb-landing-rise 0.8s ease 0.08s both;
+}
+
+.eb-landing-hero p {
+  margin: 0 0 28px;
+  max-width: 34rem;
+  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.88);
+  animation: eb-landing-rise 0.8s ease 0.16s both;
+}
+
+.eb-landing-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  animation: eb-landing-rise 0.8s ease 0.24s both;
+}
+
+.eb-landing-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0 22px;
+  border: 0;
+  border-radius: 999px;
+  font-family: var(--eb-font-display);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+
+.eb-landing-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.eb-landing-btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.eb-landing-btn--primary {
+  background: #fff;
+  color: var(--eb-blue);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
+}
+
+.eb-landing-btn--primary:hover:not(:disabled) {
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
+}
+
+.eb-landing-btn--ghost {
+  background: transparent;
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.45);
+}
+
+.eb-landing-btn--solid {
+  width: 100%;
+  background: var(--eb-blue);
+  color: #fff;
+}
+
+.eb-landing-btn--solid:hover:not(:disabled) {
+  background: #1557d4;
+}
+
+.eb-landing-shop {
+  padding: clamp(48px, 8vw, 88px) clamp(20px, 5vw, 56px);
+}
+
+.eb-landing-shop-inner {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: clamp(28px, 5vw, 56px);
+  align-items: start;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+.eb-landing-shop-copy h2 {
+  margin: 0 0 12px;
+  font-family: var(--eb-font-display);
+  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
+  letter-spacing: -0.02em;
+  color: var(--eb-navy);
+}
+
+.eb-landing-shop-copy p {
+  margin: 0 0 18px;
+  color: var(--eb-muted);
+  font-size: 1.05rem;
+  line-height: 1.6;
+  max-width: 36rem;
+}
+
+.eb-landing-product {
+  display: grid;
+  gap: 10px;
+  padding: 22px 0 0;
+}
+
+.eb-landing-product-name {
+  font-family: var(--eb-font-display);
+  font-size: 1.35rem;
+  font-weight: 600;
+  color: var(--eb-ink);
+}
+
+.eb-landing-product-price {
+  font-family: var(--eb-font-display);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--eb-blue);
+}
+
+.eb-landing-product-meta {
+  color: var(--eb-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.eb-landing-checkout {
+  background: var(--eb-surface);
+  border: 1px solid var(--eb-line);
+  border-radius: 20px;
+  padding: clamp(20px, 3vw, 28px);
+  box-shadow: 0 18px 40px rgba(15, 48, 114, 0.08);
+  scroll-margin-top: 24px;
+}
+
+.eb-landing-checkout h3 {
+  margin: 0 0 6px;
+  font-family: var(--eb-font-display);
+  font-size: 1.25rem;
+  color: var(--eb-navy);
+}
+
+.eb-landing-checkout-lead {
+  margin: 0 0 18px;
+  color: var(--eb-muted);
+  font-size: 0.95rem;
+}
+
+.eb-landing-fields {
+  display: grid;
+  gap: 12px;
+}
+
+.eb-landing-field {
+  display: grid;
+  gap: 6px;
+}
+
+.eb-landing-field span {
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--eb-muted);
+}
+
+.eb-landing-field input {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 1px solid #d7deea;
+  border-radius: 10px;
+  background: #fff;
+  color: var(--eb-ink);
+  font: inherit;
+}
+
+.eb-landing-field input:focus {
+  outline: 2px solid rgba(29, 102, 239, 0.28);
+  border-color: var(--eb-blue);
+}
+
+.eb-landing-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.eb-landing-total {
+  margin: 16px 0 14px;
+  font-size: 1rem;
+  color: var(--eb-ink);
+}
+
+.eb-landing-total strong {
+  font-family: var(--eb-font-display);
+}
+
+.eb-landing-error {
+  margin: 0 0 12px;
+  color: #b42318;
+  font-size: 0.92rem;
+}
+
+.eb-landing-success {
+  display: grid;
+  gap: 10px;
+  text-align: center;
+  padding: 18px 8px;
+}
+
+.eb-landing-success h3 {
+  margin: 0;
+}
+
+.eb-landing-success p {
+  margin: 0;
+  color: var(--eb-muted);
+}
+
+.eb-landing-footer {
+  padding: 28px clamp(20px, 5vw, 56px) 40px;
+  border-top: 1px solid var(--eb-line);
+  color: var(--eb-muted);
+  font-size: 0.92rem;
+}
+
+.eb-landing-footer-inner {
+  max-width: 1120px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.eb-landing-footer a {
+  color: var(--eb-blue);
+  font-weight: 600;
+}
+
+@keyframes eb-landing-rise {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes eb-landing-ken {
+  from {
+    transform: scale(1.03) translate3d(0, 0, 0);
+  }
+  to {
+    transform: scale(1.08) translate3d(-1.5%, -1%, 0);
+  }
+}
+
+@media (max-width: 860px) {
+  .eb-landing-shop-inner {
+    grid-template-columns: 1fr;
+  }
+
+  .eb-landing-nav-logo {
+    display: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .eb-landing-row {
+    grid-template-columns: 1fr;
+  }
+
+  .eb-landing-hero {
+    min-height: 78vh;
+  }
+}
diff --git a/src/theme/conferenceTheme.ts b/src/theme/conferenceTheme.ts
index 9209de1..26fde97 100644
--- a/src/theme/conferenceTheme.ts
+++ b/src/theme/conferenceTheme.ts
@@ -1,36 +1,85 @@
 import type { MicrositeThemeConfig } from '../types';
+import { getThemePatternSpec, resolveThemePattern } from './themePatterns';
 
-const DEFAULT_PRIMARY = '#5c6ac4';
-const DEFAULT_ACCENT = '#00c2d1';
 const DEFAULT_FONT_PAIR = 'Montserrat + Roboto';
 const DEFAULT_THEME_FONT = 'Open Sans';
 
-/** Colors that have matching `.theme-simple-*` rules in conference.css */
-const SIMPLE_COLORS = new Set(['green', 'purple', 'gray', 'yellow']);
+/** Colors that have matching `html.theme-simple-*` / `html.theme-pattern-*` palette rules */
+const SIMPLE_COLORS = new Set(['green', 'purple', 'gray', 'yellow', 'blue', 'red', 'orange']);
 
-/** Colors that have matching `.theme-gradient-*` rules in conference.css */
+/** Default --theme-primary-color for simple/pattern presets when primaryColor is empty. */
+const SIMPLE_PRIMARY_COLORS: Record<string, string> = {
+  blue: '#112c59',
+  red: '#4c1429',
+  green: '#073428',
+  purple: '#2a235d',
+  gray: '#2a2e33',
+  yellow: '#4f4109',
+  orange: '#683606',
+};
+
+/** Default --theme-button-color for simple/pattern presets when buttonColor is empty. */
+const SIMPLE_BUTTON_COLORS: Record<string, string> = {
+  blue: '#50a2ed',
+  green: '#46b295',
+  purple: '#6954c9',
+  gray: '#5f656d',
+  yellow: '#ac9943',
+  red: '#8f3958',
+  orange: '#c7782e',
+};
+
+/** Default --theme-text-highlight-color for simple/pattern presets when textHighlightColor is empty. */
+const SIMPLE_TEXT_HIGHLIGHT_COLORS: Record<string, string> = {
+  blue: '#6ba8e3',
+  green: '#7dc9b2',
+  purple: '#9f94ec',
+  gray: '#c2cad3',
+  yellow: '#d4c169',
+  red: '#e27fa3',
+  orange: '#e5b587',
+};
+
+/** Colors that have matching `html.theme-gradient-*` rules in conference.css */
 const GRADIENT_COLORS = new Set(['green', 'warm', 'warm2']);
 
 type FontFaceSpec = { href: string; heading: string; body: string };
 
+function usesSimplePalette(mode: string): boolean {
+  return mode === 'simple' || mode === 'pattern';
+}
+
 /**
- * Maps API theme config → a single class on `.eb-microsite-root`.
- * Unknown mode/color returns '' so the default root styles apply.
+ * Maps API theme config → class names on `<html>`.
+ * - simple:   theme-simple-{color}
+ * - gradient: theme-gradient-{color}
+ * - pattern:  theme-pattern-{color} pattern-{name}
  */
-export function resolveThemeClass(config?: MicrositeThemeConfig | null): string {
-  if (!config?.theme || !config?.color) return '';
+export function resolveThemeClasses(config?: MicrositeThemeConfig | null): string[] {
+  if (!config?.theme || !config?.color) return [];
 
   const mode = String(config.theme).trim().toLowerCase();
   const color = String(config.color).trim().toLowerCase();
-  if (!mode || !color) return '';
+  if (!mode || !color) return [];
 
   if (mode === 'simple' && SIMPLE_COLORS.has(color)) {
-    return `theme-simple-${color}`;
+    return [`theme-simple-${color}`];
   }
   if (mode === 'gradient' && GRADIENT_COLORS.has(color)) {
-    return `theme-gradient-${color}`;
+    return [`theme-gradient-${color}`];
   }
-  return '';
+  if (mode === 'pattern' && SIMPLE_COLORS.has(color)) {
+    const classes = [`theme-pattern-${color}`];
+    const pattern = resolveThemePattern(config.pattern) || 'dots';
+    classes.push(`pattern-${pattern}`);
+    return classes;
+  }
+  return [];
+}
+
+/** @deprecated Prefer resolveThemeClasses — kept for single-class call sites. */
+export function resolveThemeClass(config?: MicrositeThemeConfig | null): string {
+  return resolveThemeClasses(config).join(' ');
 }
 
 /** Single-family fonts for theme.font (heading + body share the same family). */
@@ -117,6 +166,63 @@ function normalizeHex(input?: string | null): string | null {
   return s;
 }
 
+/** Accepts hex / rgb() / rgba() / named colors as CSS color strings. */
+function normalizeCssColor(input?: string | null): string | null {
+  if (input == null) return null;
+  const s = String(input).trim();
+  if (!s) return null;
+  const hex = normalizeHex(s);
+  if (hex) return hex;
+  // rgb/rgba/hsl/hsla or other CSS color values from the API
+  if (/^(rgb|rgba|hsl|hsla)\(/i.test(s) || /^[a-z]+$/i.test(s)) return s;
+  return s;
+}
+
+function themePaletteVars(theme?: MicrositeThemeConfig | null): Record<string, string> {
+  if (!theme) return {};
+  const vars: Record<string, string> = {};
+  const mode = String(theme.theme || '').trim().toLowerCase();
+  const colorKey = String(theme.color || '').trim().toLowerCase();
+  const primary = normalizeCssColor(theme.primaryColor);
+  const secondary = normalizeCssColor(theme.secondaryColor);
+  const header = normalizeCssColor(theme.headerColor);
+  const button = normalizeCssColor(theme.buttonColor);
+  const text = normalizeCssColor(theme.textColor);
+  const textHighlight = normalizeCssColor(theme.textHighlightColor);
+
+  const paletteFallback = usesSimplePalette(mode);
+  const simplePrimaryFallback =
+    paletteFallback && colorKey ? SIMPLE_PRIMARY_COLORS[colorKey] : undefined;
+  const simpleButtonFallback =
+    paletteFallback && colorKey ? SIMPLE_BUTTON_COLORS[colorKey] : undefined;
+  const simpleTextHighlightFallback =
+    paletteFallback && colorKey ? SIMPLE_TEXT_HIGHLIGHT_COLORS[colorKey] : undefined;
+  vars['--theme-primary-color'] = primary || simplePrimaryFallback || SIMPLE_PRIMARY_COLORS.blue;
+  if (secondary) {
+    vars['--theme-secondary-color'] = secondary;
+    vars['--theme-secondary-color-light'] = lightenCssColor(secondary, 0.2);
+  } else {
+    vars['--theme-secondary-color'] = 'rgba(255,255,255, 0.08)';
+    vars['--theme-secondary-color-light'] = 'rgba(255, 255, 255, 0.1)';
+  }
+  vars['--theme-header-color'] = header || 'rgba(255, 255, 255, 0.075)';
+  vars['--theme-button-color'] = button || simpleButtonFallback || SIMPLE_BUTTON_COLORS.blue;
+  vars['--theme-text-color'] = text || 'rgba(255,255,255,0.9)';
+  vars['--theme-text-highlight-color'] =
+    textHighlight || simpleTextHighlightFallback || SIMPLE_TEXT_HIGHLIGHT_COLORS.blue;
+
+  // Pattern tile overlay (solid primary underneath via background-color)
+  if (mode === 'pattern') {
+    const spec = getThemePatternSpec(theme.pattern) || getThemePatternSpec('dots');
+    if (spec) {
+      vars['--theme-bg-pattern'] = spec.image;
+      vars['--theme-bg-pattern-size'] = spec.size;
+    }
+  }
+
+  return vars;
+}
+
 function hexToRgb(hex: string) {
   const n = parseInt(hex.slice(1), 16);
   return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
@@ -127,33 +233,33 @@ function rgbToHex(r: number, g: number, b: number) {
   return `#${c(r)}${c(g)}${c(b)}`;
 }
 
-function darken(hex: string, amount: number) {
-  const rgb = hexToRgb(hex);
-  const f = 1 - amount;
-  return rgbToHex(rgb.r * f, rgb.g * f, rgb.b * f);
-}
-
-function lighten(hex: string, amount: number) {
-  const rgb = hexToRgb(hex);
-  return rgbToHex(rgb.r + (255 - rgb.r) * amount, rgb.g + (255 - rgb.g) * amount, rgb.b + (255 - rgb.b) * amount);
-}
-
-function relativeLuminance(hex: string) {
-  const { r, g, b } = hexToRgb(hex);
-  const lin = (c: number) => {
-    const v = c / 255;
-    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+function parseCssRgb(input: string): { r: number; g: number; b: number; a: number } | null {
+  const hex = normalizeHex(input);
+  if (hex) {
+    const { r, g, b } = hexToRgb(hex);
+    return { r, g, b, a: 1 };
+  }
+  const m = input.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i,
+  );
+  if (!m) return null;
+  return {
+    r: Number(m[1]),
+    g: Number(m[2]),
+    b: Number(m[3]),
+    a: m[4] != null ? Number(m[4]) : 1,
   };
-  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
 }
 
-function accentForeground(accentHex: string) {
-  return relativeLuminance(accentHex) > 0.45 ? '#0d2137' : '#ffffff';
-}
-
-function hexToRgba(hex: string, alpha: number) {
-  const { r, g, b } = hexToRgb(hex);
-  return `rgba(${r},${g},${b},${alpha})`;
+/** Lightens hex/rgb/rgba toward white. Falls back to the original string if unparseable. */
+function lightenCssColor(input: string, amount: number): string {
+  const parsed = parseCssRgb(input);
+  if (!parsed) return input;
+  const r = Math.round(parsed.r + (255 - parsed.r) * amount);
+  const g = Math.round(parsed.g + (255 - parsed.g) * amount);
+  const b = Math.round(parsed.b + (255 - parsed.b) * amount);
+  if (parsed.a < 1) return `rgba(${r}, ${g}, ${b}, ${parsed.a})`;
+  return rgbToHex(r, g, b);
 }
 
 export function fontSpec(fontPair?: string) {
@@ -181,34 +287,15 @@ export function resolveWebsiteFont(website: {
 }
 
 export function conferenceCssVars(website: {
-  primaryColor?: string;
-  accentColor?: string;
   fontPair?: string;
   theme?: MicrositeThemeConfig | null;
 }) {
-  const primary = normalizeHex(website.primaryColor) || DEFAULT_PRIMARY;
-  const accent = normalizeHex(website.accentColor) || DEFAULT_ACCENT;
-  const primaryDark = darken(primary, 0.22);
-  const accentHover = lighten(accent, 0.12);
-  const gradStop1 = darken(primary, 0.35);
-  const gradStop2 = primaryDark;
-  const navBg = darken(primary, 0.42);
-  const footerBg = darken(primary, 0.48);
   const spec = resolveWebsiteFont(website);
 
   return {
-    '--eb-conf-primary': primary,
-    '--eb-conf-primary-dark': primaryDark,
-    '--eb-conf-accent': accent,
-    '--eb-conf-accent-hover': accentHover,
-    '--eb-conf-accent-foreground': accentForeground(accent),
-    '--eb-conf-hero-gradient': `linear-gradient(135deg, ${gradStop1} 0%, ${gradStop2} 45%, ${primary} 100%)`,
-    '--eb-conf-heading-font': spec.heading,
-    '--eb-conf-body-font': spec.body,
-    '--eb-conf-nav-bg': navBg,
-    '--eb-conf-footer-bg': footerBg,
-    '--eb-static-footer-bg': darken(primary, 0.52),
-    '--eb-conf-card-glow': hexToRgba(primary, 0.28),
+    '--theme-heading-font': spec.heading,
+    '--theme-body-font': spec.body,
+    ...themePaletteVars(website.theme),
   } as Record<string, string>;
 }
 
diff --git a/src/theme/themePatterns.ts b/src/theme/themePatterns.ts
new file mode 100644
index 0000000..2475174
--- /dev/null
+++ b/src/theme/themePatterns.ts
@@ -0,0 +1,105 @@
+/**
+ * SVG background patterns for theme.mode === 'pattern'.
+ *
+ * How to add a pattern:
+ * 1. Add a key here (e.g. 'hexagon')
+ * 2. Provide a data-URI (or /public path) SVG that is mostly transparent
+ * 3. Use light fills/strokes (white @ ~10–18% opacity) so they work on dark primary colors
+ * 4. Set tile size via `size` (CSS background-size)
+ *
+ * No per-pattern CSS rules are required — JS sets:
+ *   --theme-bg-pattern
+ *   --theme-bg-pattern-size
+ */
+
+export type ThemePatternName = 'dots' | 'grid' | 'zigzag' | 'diagonal' | 'hexa' | 'plus';
+
+export type ThemePatternSpec = {
+  /** CSS background-image value (usually a data-URI SVG) */
+  image: string;
+  /** CSS background-size, e.g. '20px 20px' */
+  size: string;
+};
+
+/** Encode a raw SVG string as a CSS data-URI background-image. */
+export function svgToDataUri(svg: string): string {
+  const encoded = encodeURIComponent(svg.replace(/\s+/g, ' ').trim())
+    .replace(/'/g, '%27')
+    .replace(/"/g, '%22');
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+
+const DOTS_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <circle cx="3" cy="3" r="1.75" fill="rgba(255,255,255,0.04)"/>
+</svg>`;
+
+// const GRID_SVG = `
+// <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+//   <path d="M24 0H0V24" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
+// </svg>`;
+const GRID_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="55.425" viewBox="0 0 32 55.425">
+  <path d="M16 0L32 9.238v18.475L16 36.95 0 27.713V9.238zM16 36.95l16 9.238v9.237M16 36.95L0 46.188v9.237M16 0v18.475M32 9.238L16 18.475 0 9.238" fill="none" stroke="rgba(255, 255, 255, 0.08)" stroke-width="1"/>
+</svg>`;
+
+
+const ZIGZAG_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20">
+  <path d="M0 14 L10 6 L20 14 L30 6 L40 14" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
+const DIAGONAL_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M-2 18 L18 -2" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
+</svg>`;
+
+// const DIAGONAL_SVG = `
+// <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+//   <g fill="none" stroke="rgba(255, 255, 255, 0.05)" stroke-width="1" transform="translate(10,10)">
+//     <circle cx="20" cy="20" r="18" stroke-dasharray="2 2"/>
+//     <rect x="6" y="6" width="28" height="28" rx="2"/>
+//     <rect x="6" y="6" width="28" height="28" rx="2" transform="rotate(45 20 20)"/>
+//     <circle cx="20" cy="20" r="6" fill="rgba(255, 255, 255, 0.03)"/>
+//     <circle cx="20" cy="20" r="1.5" fill="rgba(255, 255, 255, 0.08)"/>
+//   </g>
+// </svg>
+
+// `;
+
+const HEXA_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M-2 18 L18 -2" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="10"/>
+</svg>`;
+
+const PLUS_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M12 6v12M6 12h12" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1.25" stroke-linecap="round"/>
+</svg>`;
+
+/** Registry of available background patterns. */
+export const THEME_PATTERNS: Record<ThemePatternName, ThemePatternSpec> = {
+  dots: { image: svgToDataUri(DOTS_SVG), size: '20px 20px' },
+  grid: { image: svgToDataUri(GRID_SVG), size: '24px 24px' },
+  zigzag: { image: svgToDataUri(ZIGZAG_SVG), size: '40px 20px' },
+  diagonal: { image: svgToDataUri(DIAGONAL_SVG), size: '16px 16px' },
+  hexa: { image: svgToDataUri(HEXA_SVG), size: '16px 16px' },
+  plus: { image: svgToDataUri(PLUS_SVG), size: '24px 24px' },
+};
+
+const PATTERN_ALIASES: Record<string, ThemePatternName> = Object.fromEntries(
+  (Object.keys(THEME_PATTERNS) as ThemePatternName[]).map((name) => [name.toLowerCase(), name]),
+);
+
+/** Resolves API pattern string → registry key. Unknown → null. */
+export function resolveThemePattern(pattern?: string | null): ThemePatternName | null {
+  if (pattern == null) return null;
+  const key = String(pattern).trim().toLowerCase();
+  if (!key) return null;
+  return PATTERN_ALIASES[key] || null;
+}
+
+export function getThemePatternSpec(pattern?: string | null): ThemePatternSpec | null {
+  const name = resolveThemePattern(pattern);
+  return name ? THEME_PATTERNS[name] : null;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 19bbd41..0e732d2 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -16,6 +16,7 @@ export interface FormField {
 }
 
 export interface PublicFormEventSummary {
+  _id?: string;
   name: string;
   subtitle?: string;
   description?: string;
@@ -27,6 +28,26 @@ export interface PublicFormEventSummary {
   locationType?: string;
   logoUrl?: string | null;
   imageUrl?: string | null;
+
+  // Used by microsite JSX (About/Contact/Footer)
+  organizer?: string;
+  organizerName?: string;
+
+  facebookUrl?: string;
+  instagramUrl?: string;
+  twitterUrl?: string;
+  linkedinUrl?: string;
+}
+
+export interface PublicFormTicketOption {
+  _id: string;
+  name: string;
+  description?: string;
+  keyPoints?: string[];
+  basePriceMinor: number;
+  currency: string;
+  maxPerOrder?: number | null;
+  requiresBillingState?: boolean;
 }
 
 export interface PublicFormDefinition {
@@ -36,13 +57,17 @@ export interface PublicFormDefinition {
   type?: string;
   event?: PublicFormEventSummary | null;
   fields?: FormField[];
+  tickets?: PublicFormTicketOption[];
   settings?: {
     thankYouMessage?: string;
     showThankYou?: boolean;
     collectEmail?: boolean;
     allowAnonymous?: boolean;
+    paymentEnabled?: boolean;
+    ticketIds?: string[];
     eventHeader?: {
       showLogo?: boolean;
+      showBanner?: boolean;
       showTitle?: boolean;
       showDateRange?: boolean;
       showEventType?: boolean;
@@ -52,13 +77,6 @@ export interface PublicFormDefinition {
   };
 }
 
-export interface MicrositeSection {
-  id: string;
-  type: string;
-  order: number;
-  config: Record<string, unknown>;
-}
-
 export interface MicrositeSpeaker {
   name: string;
   designation?: string;
@@ -66,18 +84,57 @@ export interface MicrositeSpeaker {
   bio?: string;
 }
 
+export interface MicrositeKeyPerson {
+  name: string;
+  designation?: string;
+  photoUrl?: string;
+  bio?: string;
+}
+
+export interface AgendaSpeaker {
+  name?: string;
+  photoUrl?: string;
+}
+
 export interface AgendaItem {
   title?: string;
   date?: string;
   time?: string;
   track?: string;
   description?: string;
+  /** Legacy v1 fields (kept for any remaining consumers) */
   speakerName?: string;
   speakerPhotoUrl?: string;
+  /** Defaultsite agenda speakers */
+  speakers?: AgendaSpeaker[];
 }
 
-/** Page background preset. Pattern / confetti / emoji come later. */
-export type MicrositeThemeMode = 'simple' | 'gradient';
+export type MicrositeSectionEnvelope<
+  TType extends string = string,
+  TConfig extends Record<string, unknown> = Record<string, unknown>
+> = {
+  id: string;
+  type: TType;
+  order: number;
+  config: TConfig;
+};
+
+/** @deprecated Prefer MicrositeSectionEnvelope — kept for transitional references */
+export interface MicrositeSection {
+  id: string;
+  type: string;
+  order: number;
+  config: Record<string, unknown>;
+}
+
+// =========================
+// Theme typing (luma-like)
+// =========================
+/** Page background preset. Confetti / emoji come later. */
+export type MicrositeThemeMode = 'simple' | 'gradient' | 'pattern';
+
+/** SVG tile pattern names for theme === 'pattern' (see themePatterns.ts). */
+export type MicrositeThemePattern = 'dots' | 'grid' | 'zigzag' | 'diagonal' | 'hexa' | 'plus';
 
 /** Single-family fonts driven by theme.font (separate from website.fontPair). */
 export type MicrositeThemeFont = 'Open Sans' | 'Montserrat' | 'Roboto' | 'Poppins' | 'Raleway';
@@ -85,10 +142,120 @@ export type MicrositeThemeFont = 'Open Sans' | 'Montserrat' | 'Roboto' | 'Poppin
 export interface MicrositeThemeConfig {
   theme: MicrositeThemeMode;
   color: string;
+  /** Required for theme === 'pattern'; e.g. dots | grid | zigzag */
+  pattern?: MicrositeThemePattern | string | null;
   /** Optional; defaults to Open Sans when theme is present. */
   font?: MicrositeThemeFont | string | null;
+  /** Dynamic palette from API — mapped to --theme-* CSS vars */
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
+  headerColor?: string | null;
+  buttonColor?: string | null;
+  textColor?: string | null;
+  textHighlightColor?: string | null;
 }
 
+// =========================
+// Section configs
+// =========================
+export type SocialLink = { name: string; handleUrl: string };
+
+export type MicrositeHeaderMenuItem = { label?: string; url?: string };
+export type MicrositeHeaderConfig = {
+  logoText?: string;
+  logoUrl?: string;
+  menuItems?: MicrositeHeaderMenuItem[];
+};
+
+export type MicrositeBannerConfig = {
+  headline?: string;
+  subtext?: string;
+  ctaText?: string;
+  ctaUrl?: string;
+  secondaryCtaText?: string;
+  secondaryCtaUrl?: string;
+  backgroundClass?: string;
+  backgroundImage?: string;
+  heroMetaLine?: string;
+};
+
+export type MicrositeCountdownConfig = {
+  headingLine?: string;
+  /** ISO instant for the countdown target (IST-aware from /defaultsite). */
+  startsAt?: string;
+};
+
+export type MicrositeAboutConfig = {
+  title?: string;
+  lead?: string;
+  body?: string;
+  bulletsTitle?: string;
+  bullets?: string[];
+  ctaLabel?: string;
+  ctaUrl?: string;
+  ctaText?: string;
+  mediaUrl?: string;
+  mediaType?: 'image' | 'video' | string;
+};
+
+export type MicrositeAgendaConfig = {
+  title?: string;
+  agenda?: AgendaItem[];
+};
+
+export type MicrositeSpeakersConfig = {
+  title?: string;
+  limit?: number;
+  speakers?: MicrositeSpeaker[];
+};
+
+export type MicrositeKeyPersonsConfig = {
+  title?: string;
+  limit?: number;
+  keyPersons?: MicrositeKeyPerson[];
+};
+
+export type MicrositeRegisterLinksConfig = {
+  title?: string;
+  text?: string;
+  primaryLabel?: string;
+  primaryUrl?: string;
+  secondaryLabel?: string;
+  secondaryUrl?: string;
+};
+
+export type MicrositeFooterConfig = {
+  copyrightText?: string;
+  // Optional; older config uses `links` here
+  links?: { label?: string; url?: string }[];
+};
+
+export type MicrositeContactConfig = {
+  title?: string;
+  text?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+};
+
+export type MicrositeTicketTier = {
+  id?: string;
+  name?: string;
+  price?: string;
+  description?: string;
+};
+
+export type MicrositeTicketsConfig = {
+  title?: string;
+  text?: string;
+  primaryLabel?: string;
+  primaryUrl?: string;
+  tiers?: MicrositeTicketTier[];
+};
+
+// =========================
+// Defaultsite payload (named sections)
+// =========================
 export interface PublicMicrositePayload {
   event: PublicFormEventSummary & { _id: string };
   website: {
@@ -103,15 +270,30 @@ export interface PublicMicrositePayload {
     fontPair: string;
     layoutTemplate: string;
     seoDescription: string;
-    /** Luma-style background preset: maps to theme-{simple|gradient}-{color} on the root. */
+    /** Luma-style background preset: maps to theme-{simple|gradient|pattern}-{color} on html. */
     theme?: MicrositeThemeConfig | null;
   };
+
   title: string;
-  sections: MicrositeSection[];
-  agenda: AgendaItem[];
-  speakers: MicrositeSpeaker[];
+
+  // Explicit top-level sections (no `sections[]` array)
+  header?: MicrositeSectionEnvelope<'header', MicrositeHeaderConfig>;
+  banner?: MicrositeSectionEnvelope<'banner', MicrositeBannerConfig>;
+  countdown?: MicrositeSectionEnvelope<'countdown', MicrositeCountdownConfig>;
+  about?: MicrositeSectionEnvelope<'about', MicrositeAboutConfig>;
+  agenda?: MicrositeSectionEnvelope<'agenda', MicrositeAgendaConfig>;
+  speakers?: MicrositeSectionEnvelope<'speakers', MicrositeSpeakersConfig>;
+  key_persons?: MicrositeSectionEnvelope<'key_persons', MicrositeKeyPersonsConfig>;
+  register_links?: MicrositeSectionEnvelope<'register_links', MicrositeRegisterLinksConfig>;
+  tickets?: MicrositeSectionEnvelope<'tickets', MicrositeTicketsConfig>;
+  contact?: MicrositeSectionEnvelope<'contact', MicrositeContactConfig>;
+  footer?: MicrositeSectionEnvelope<'footer', MicrositeFooterConfig>;
+
+  // Misc
+  socialLinks?: SocialLink[];
   registrationFormId: string | null;
   registrationUrl: string;
+
   micrositeHtml?: string;
 }
 
diff --git a/src/utils/formEventHeaderDisplay.ts b/src/utils/formEventHeaderDisplay.ts
index 848fa93..c901cab 100644
--- a/src/utils/formEventHeaderDisplay.ts
+++ b/src/utils/formEventHeaderDisplay.ts
@@ -1,5 +1,6 @@
 export interface FormEventHeaderDisplay {
   showLogo?: boolean;
+  showBanner?: boolean;
   showTitle?: boolean;
   showDateRange?: boolean;
   showEventType?: boolean;
@@ -14,6 +15,7 @@ export function resolveFormEventHeaderDisplay(
 ): ResolvedFormEventHeaderDisplay {
   return {
     showLogo: display?.showLogo !== false,
+    showBanner: display?.showBanner === true,
     showTitle: display?.showTitle !== false,
     showDateRange: display?.showDateRange !== false,
     showEventType: display?.showEventType !== false,
diff --git a/src/utils/registrationTicketAttendee.ts b/src/utils/registrationTicketAttendee.ts
new file mode 100644
index 0000000..741f080
--- /dev/null
+++ b/src/utils/registrationTicketAttendee.ts
@@ -0,0 +1,89 @@
+import type { FormField } from '../types';
+
+function fieldKey(f: FormField): string {
+  return String(f.name || f.label || '').trim();
+}
+
+function mappedValue(fields: FormField[], values: Record<string, unknown>, mapsTo: string): string {
+  const f = fields.find((x) => x.mapsTo === mapsTo);
+  if (!f) return '';
+  const raw = values[fieldKey(f)];
+  return raw != null ? String(raw).trim() : '';
+}
+
+/** Build ticket checkout attendee + formData from registration form answers. */
+export function buildTicketAttendeeFromForm(
+  fields: FormField[],
+  values: Record<string, unknown>,
+  submitData: Record<string, unknown>,
+) {
+  return {
+    firstName: mappedValue(fields, values, 'firstName') || mappedValue(fields, submitData, 'firstName'),
+    lastName: mappedValue(fields, values, 'lastName') || mappedValue(fields, submitData, 'lastName'),
+    email: (
+      mappedValue(fields, values, 'email') || mappedValue(fields, submitData, 'email')
+    ).toLowerCase(),
+    phone: mappedValue(fields, values, 'phone') || mappedValue(fields, submitData, 'phone') || undefined,
+    organization:
+      mappedValue(fields, values, 'organization')
+      || mappedValue(fields, submitData, 'organization')
+      || undefined,
+    designation:
+      mappedValue(fields, values, 'designation')
+      || mappedValue(fields, submitData, 'designation')
+      || undefined,
+    displayName:
+      mappedValue(fields, values, 'displayName')
+      || mappedValue(fields, submitData, 'displayName')
+      || undefined,
+    formData: submitData,
+  };
+}
+
+export function formatTicketPrice(minor: number, currency = 'INR'): string {
+  const major = (Number(minor) || 0) / 100;
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(major);
+  } catch {
+    return `${currency} ${major.toFixed(2)}`;
+  }
+}
+
+export const INDIAN_STATES = [
+  { code: 'AN', name: 'Andaman and Nicobar Islands' },
+  { code: 'AP', name: 'Andhra Pradesh' },
+  { code: 'AR', name: 'Arunachal Pradesh' },
+  { code: 'AS', name: 'Assam' },
+  { code: 'BR', name: 'Bihar' },
+  { code: 'CH', name: 'Chandigarh' },
+  { code: 'CT', name: 'Chhattisgarh' },
+  { code: 'DN', name: 'Dadra and Nagar Haveli and Daman and Diu' },
+  { code: 'DL', name: 'Delhi' },
+  { code: 'GA', name: 'Goa' },
+  { code: 'GJ', name: 'Gujarat' },
+  { code: 'HR', name: 'Haryana' },
+  { code: 'HP', name: 'Himachal Pradesh' },
+  { code: 'JK', name: 'Jammu and Kashmir' },
+  { code: 'JH', name: 'Jharkhand' },
+  { code: 'KA', name: 'Karnataka' },
+  { code: 'KL', name: 'Kerala' },
+  { code: 'LA', name: 'Ladakh' },
+  { code: 'LD', name: 'Lakshadweep' },
+  { code: 'MP', name: 'Madhya Pradesh' },
+  { code: 'MH', name: 'Maharashtra' },
+  { code: 'MN', name: 'Manipur' },
+  { code: 'ML', name: 'Meghalaya' },
+  { code: 'MZ', name: 'Mizoram' },
+  { code: 'NL', name: 'Nagaland' },
+  { code: 'OR', name: 'Odisha' },
+  { code: 'PY', name: 'Puducherry' },
+  { code: 'PB', name: 'Punjab' },
+  { code: 'RJ', name: 'Rajasthan' },
+  { code: 'SK', name: 'Sikkim' },
+  { code: 'TN', name: 'Tamil Nadu' },
+  { code: 'TG', name: 'Telangana' },
+  { code: 'TR', name: 'Tripura' },
+  { code: 'UP', name: 'Uttar Pradesh' },
+  { code: 'UT', name: 'Uttarakhand' },
+  { code: 'WB', name: 'West Bengal' },
+];
diff --git a/src/utils/upiPayUri.ts b/src/utils/upiPayUri.ts
new file mode 100644
index 0000000..4279f6d
--- /dev/null
+++ b/src/utils/upiPayUri.ts
@@ -0,0 +1,11 @@
+/**
+ * UPI deep link for QR / intent. Amount is major currency units (e.g. "1234.56").
+ */
+export function buildUpiPayUri(params: { pa: string; pn: string; am: string; cu?: string }): string {
+  const cu = params.cu ?? 'INR';
+  const pa = params.pa.trim();
+  const pn = params.pn.trim().slice(0, 99);
+  const am = params.am.trim();
+  if (!pa || !pn || !am) return '';
+  return `upi://pay?pa=${encodeURIComponent(pa)}&pn=${encodeURIComponent(pn)}&am=${encodeURIComponent(am)}&cu=${encodeURIComponent(cu)}`;
+}