From 6ab4b8c2a59563424eb2d8454637a05004a9ffa4 Mon Sep 17 00:00:00 2001
From: James Bhattarai <jamesbhattarai14@gmail.com>
Date: Sun, 29 Mar 2026 10:49:27 +0545
Subject: [PATCH] Fix(UI): Fix security page routing and standardize marketing
 CTA card styles

---
 src/App.tsx                                 |  2 +-
 src/components/navigation/AppSidebar.tsx    |  2 +-
 src/pages/marketing/DemoPage.tsx            | 47 +++++++++++----------
 src/pages/marketing/FeaturesPage.tsx        |  4 +-
 src/pages/marketing/PricingPage.tsx         | 47 +++++++++++----------
 src/pages/marketing/SSHCertificatesPage.tsx |  4 +-
 src/pages/marketing/SecurityPage.tsx        |  4 +-
 7 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1979e11..8bce14c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -172,7 +172,7 @@ function AppRoutes() {
         <Route element={<ProtectedLayout />}>
           {/* User routes */}
           <Route path="/profile" element={<ProfilePage />} />
-          <Route path="/security" element={<SecurityPage />} />
+          <Route path="/account/security" element={<UserSecurityPage />} />
           <Route path="/linked-accounts" element={<LinkedAccountsPage />} />
           <Route path="/activity" element={<ActivityPage />} />
           <Route path="/ssh-keys" element={<SSHKeysPage />} />
diff --git a/src/components/navigation/AppSidebar.tsx b/src/components/navigation/AppSidebar.tsx
index 017ff0d..06b2685 100644
--- a/src/components/navigation/AppSidebar.tsx
+++ b/src/components/navigation/AppSidebar.tsx
@@ -39,7 +39,7 @@ import { cn } from "@/lib/utils";
 
 const userNavItems = [
   { title: "Profile", url: "/profile", icon: User },
-  { title: "Security", url: "/security", icon: Shield },
+  { title: "Security", url: "/account/security", icon: Shield },
   { title: "SSH Keys", url: "/ssh-keys", icon: Terminal },
   { title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
   { title: "Activity", url: "/activity", icon: Activity },
diff --git a/src/pages/marketing/DemoPage.tsx b/src/pages/marketing/DemoPage.tsx
index 0b97a56..51490a5 100644
--- a/src/pages/marketing/DemoPage.tsx
+++ b/src/pages/marketing/DemoPage.tsx
@@ -227,29 +227,32 @@ return (
     </section>
 
     {/* CTA */}
-    <section className="py-16 lg:py-24 bg-muted/30">
+    <section className="py-16 lg:py-24">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="text-center max-w-2xl mx-auto">
-          <h2 className="text-3xl font-bold text-foreground mb-4">
-            Ready to Try It Yourself?
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8">
-            Start your free trial today. No credit card required. Full access to all features.
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Link to="/register">
-              <Button size="lg" className="gap-2">
-                Start Free Trial
-                <ArrowRight className="h-4 w-4" />
-              </Button>
-            </Link>
-            <Link to="/pricing">
-              <Button variant="outline" size="lg">
-                View Pricing
-              </Button>
-            </Link>
-          </div>
-        </div>
+        <Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
+          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
+          <CardContent className="p-12 text-center relative">
+            <h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
+              Ready to Try It Yourself?
+            </h2>
+            <p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
+              Start your free trial today. No credit card required. Full access to all features.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Link to="/register">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
+                  Start Free Trial
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+              <Link to="/pricing">
+                <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
+                  View Pricing
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </section>
   </>
diff --git a/src/pages/marketing/FeaturesPage.tsx b/src/pages/marketing/FeaturesPage.tsx
index 1360b35..748b84f 100644
--- a/src/pages/marketing/FeaturesPage.tsx
+++ b/src/pages/marketing/FeaturesPage.tsx
@@ -509,13 +509,13 @@ return (
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link to="/register">
-                <Button size="lg" variant="secondary" className="gap-2">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
                   Start Free Trial
                   <ArrowRight className="h-4 w-4" />
                 </Button>
               </Link>
               <Link to="/demo">
-                <Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
+                <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
                   Watch Demo
                 </Button>
               </Link>
diff --git a/src/pages/marketing/PricingPage.tsx b/src/pages/marketing/PricingPage.tsx
index e840b28..b021949 100644
--- a/src/pages/marketing/PricingPage.tsx
+++ b/src/pages/marketing/PricingPage.tsx
@@ -328,29 +328,32 @@ return (
     </section>
 
     {/* CTA */}
-    <section className="py-16 lg:py-24 bg-muted/30">
+    <section className="py-16 lg:py-24">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="text-center max-w-2xl mx-auto">
-          <h2 className="text-3xl font-bold text-foreground mb-4">
-            Start Your Free Trial Today
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8">
-            Try Secuird free for 14 days. No credit card required. Full access to all Business features.
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Link to="/register">
-              <Button size="lg" className="gap-2">
-                Start Free Trial
-                <ArrowRight className="h-4 w-4" />
-              </Button>
-            </Link>
-            <Link to="/demo">
-              <Button variant="outline" size="lg">
-                Watch Demo
-              </Button>
-            </Link>
-          </div>
-        </div>
+        <Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
+          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
+          <CardContent className="p-12 text-center relative">
+            <h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
+              Start Your Free Trial Today
+            </h2>
+            <p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
+              Try Secuird free for 14 days. No credit card required. Full access to all Business features.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Link to="/register">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
+                  Start Free Trial
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+              <Link to="/demo">
+                <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
+                  Watch Demo
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </section>
   </>
diff --git a/src/pages/marketing/SSHCertificatesPage.tsx b/src/pages/marketing/SSHCertificatesPage.tsx
index 5ba917a..a876f73 100644
--- a/src/pages/marketing/SSHCertificatesPage.tsx
+++ b/src/pages/marketing/SSHCertificatesPage.tsx
@@ -435,13 +435,13 @@ $ systemctl restart sshd`}
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link to="/register">
-                <Button size="lg" variant="secondary" className="gap-2">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
                   Start Free Trial
                   <ArrowRight className="h-4 w-4" />
                 </Button>
               </Link>
               <Link to="/demo">
-                <Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
+                <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
                   Watch Demo
                 </Button>
               </Link>
diff --git a/src/pages/marketing/SecurityPage.tsx b/src/pages/marketing/SecurityPage.tsx
index 4dd920d..7ad2b44 100644
--- a/src/pages/marketing/SecurityPage.tsx
+++ b/src/pages/marketing/SecurityPage.tsx
@@ -464,12 +464,12 @@ return (
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link to="/register">
-                <Button size="lg" variant="secondary" className="gap-2">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
                   Start Free Trial
                   <ArrowRight className="h-4 w-4" />
                 </Button>
               </Link>
-              <Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
+              <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
                 Contact Security Team
               </Button>
             </div>