diff --git a/frontend/package.json b/frontend/package.json
index 396522d8..9eaab3e1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:marketing": "vite build --mode marketing",
     "build:check": "tsc -b && vite build",
     "type-check": "tsc -b --noEmit",
     "lint": "eslint .",
diff --git a/frontend/src/marketing/components/HeroSection.tsx b/frontend/src/marketing/components/HeroSection.tsx
index 335f5414..16d3fc5a 100644
--- a/frontend/src/marketing/components/HeroSection.tsx
+++ b/frontend/src/marketing/components/HeroSection.tsx
@@ -16,6 +16,29 @@ const HeroSection: React.FC<HeroSectionProps> = ({
   primaryCta,
   secondaryCta,
 }) => {
+  const renderCta = (cta: { label: string; href: string }, className: string) => {
+    const isExternal = cta.href.startsWith("http");
+    
+    if (isExternal) {
+      return (
+        <a
+          href={cta.href}
+          className={className}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {cta.label}
+        </a>
+      );
+    }
+    
+    return (
+      <Link to={cta.href} className={className}>
+        {cta.label}
+      </Link>
+    );
+  };
+
   return (
     <section className="relative overflow-hidden">
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(66,133,244,0.25),_rgba(9,14,26,0.9))]" />
@@ -31,19 +54,13 @@ const HeroSection: React.FC<HeroSectionProps> = ({
             {subheadline}
           </p>
           <div className="flex flex-col sm:flex-row gap-4">
-            <Link
-              to={primaryCta.href}
-              className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm md:text-base font-semibold transition"
-            >
-              {primaryCta.label}
-            </Link>
-            {secondaryCta && (
-              <Link
-                to={secondaryCta.href}
-                className="inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm md:text-base font-semibold text-white/80 hover:text-white hover:border-white/40 transition"
-              >
-                {secondaryCta.label}
-              </Link>
+            {renderCta(
+              primaryCta,
+              "inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm md:text-base font-semibold transition"
+            )}
+            {secondaryCta && renderCta(
+              secondaryCta,
+              "inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm md:text-base font-semibold text-white/80 hover:text-white hover:border-white/40 transition"
             )}
           </div>
         </div>
diff --git a/frontend/src/marketing/pages/Tour.tsx b/frontend/src/marketing/pages/Tour.tsx
index 64aa51b2..b37cedb6 100644
--- a/frontend/src/marketing/pages/Tour.tsx
+++ b/frontend/src/marketing/pages/Tour.tsx
@@ -49,16 +49,16 @@ const Tour: React.FC = () => {
         {tourSteps.map((step, index) => (
           <div
             key={step.title}
-            className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${index % 2 === 1 ? "lg:flex-row-reverse" : ""}`}
+            className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
           >
-            <div className="space-y-4">
+            <div className={`space-y-4 ${index % 2 === 1 ? "lg:order-2" : ""}`}>
               <span className="text-xs uppercase tracking-[0.3em] text-white/50">
                 Step {index + 1}
               </span>
               <h3 className="text-2xl font-semibold">{step.title}</h3>
               <p className="text-sm text-white/70 leading-relaxed">{step.description}</p>
             </div>
-            <div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
+            <div className={`rounded-3xl border border-white/10 bg-white/5 overflow-hidden ${index % 2 === 1 ? "lg:order-1" : ""}`}>
               <img
                 src={`/marketing/images/${step.image}`}
                 alt={step.title}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index f9dc9a47..c1865f61 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -6,6 +6,7 @@ import { resolve } from "path";
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
   const isDev = mode === "development";
+  const isMarketingBuild = mode === "marketing";
 
   return {
     plugins: [
@@ -23,27 +24,26 @@ export default defineConfig(({ mode }) => {
     optimizeDeps: {
       include: [
         // Only pre-bundle frequently used, small dependencies
-        'clsx',
-        'tailwind-merge',
-        'zustand',
-        // Include apexcharts for proper module resolution
-        'apexcharts',
-        'react-apexcharts',
+        "clsx",
+        "tailwind-merge",
+        "zustand",
+        // Include apexcharts for proper module resolution (skip during marketing-only build)
+        ...(isMarketingBuild ? [] : ["apexcharts", "react-apexcharts"]),
       ],
       // Exclude heavy dependencies that are only used in specific pages
       // They will be lazy-loaded when needed
       exclude: [
-        '@fullcalendar/core',
-        '@fullcalendar/daygrid',
-        '@fullcalendar/interaction',
-        '@fullcalendar/list',
-        '@fullcalendar/react',
-        '@fullcalendar/timegrid',
-        '@react-jvectormap/core',
-        '@react-jvectormap/world',
-        'react-dnd',
-        'react-dnd-html5-backend',
-        'swiper',
+        "@fullcalendar/core",
+        "@fullcalendar/daygrid",
+        "@fullcalendar/interaction",
+        "@fullcalendar/list",
+        "@fullcalendar/react",
+        "@fullcalendar/timegrid",
+        "@react-jvectormap/core",
+        "@react-jvectormap/world",
+        "react-dnd",
+        "react-dnd-html5-backend",
+        "swiper",
       ],
       esbuildOptions: {
         target: 'es2020',
@@ -57,10 +57,14 @@ export default defineConfig(({ mode }) => {
       cssCodeSplit: true,
       // Optimize chunk size
       rollupOptions: {
-        input: {
-          main: resolve(__dirname, "index.html"),
-          marketing: resolve(__dirname, "marketing.html"),
-        },
+        input: isMarketingBuild
+          ? {
+              marketing: resolve(__dirname, "marketing.html"),
+            }
+          : {
+              main: resolve(__dirname, "index.html"),
+              marketing: resolve(__dirname, "marketing.html"),
+            },
         output: {
           // Manual chunk splitting for better code splitting
           manualChunks: (id) => {