Fix(UI): Fix security page routing and standardize marketing CTA card styles

This commit is contained in:
2026-03-29 10:49:27 +05:45
parent 7003bbf8c6
commit 6ab4b8c2a5
7 changed files with 58 additions and 52 deletions
+1 -1
View File
@@ -172,7 +172,7 @@ function AppRoutes() {
<Route element={<ProtectedLayout />}> <Route element={<ProtectedLayout />}>
{/* User routes */} {/* User routes */}
<Route path="/profile" element={<ProfilePage />} /> <Route path="/profile" element={<ProfilePage />} />
<Route path="/security" element={<SecurityPage />} /> <Route path="/account/security" element={<UserSecurityPage />} />
<Route path="/linked-accounts" element={<LinkedAccountsPage />} /> <Route path="/linked-accounts" element={<LinkedAccountsPage />} />
<Route path="/activity" element={<ActivityPage />} /> <Route path="/activity" element={<ActivityPage />} />
<Route path="/ssh-keys" element={<SSHKeysPage />} /> <Route path="/ssh-keys" element={<SSHKeysPage />} />
+1 -1
View File
@@ -39,7 +39,7 @@ import { cn } from "@/lib/utils";
const userNavItems = [ const userNavItems = [
{ title: "Profile", url: "/profile", icon: User }, { 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: "SSH Keys", url: "/ssh-keys", icon: Terminal },
{ title: "Linked Accounts", url: "/linked-accounts", icon: Link2 }, { title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
{ title: "Activity", url: "/activity", icon: Activity }, { title: "Activity", url: "/activity", icon: Activity },
+10 -7
View File
@@ -227,29 +227,32 @@ return (
</section> </section>
{/* CTA */} {/* 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="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto"> <Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
<h2 className="text-3xl font-bold text-foreground mb-4"> <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? Ready to Try It Yourself?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8"> <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. Start your free trial today. No credit card required. Full access to all features.
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register"> <Link to="/register">
<Button size="lg" className="gap-2"> <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial Start Free Trial
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link to="/pricing"> <Link to="/pricing">
<Button variant="outline" size="lg"> <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
View Pricing View Pricing
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </CardContent>
</Card>
</div> </div>
</section> </section>
</> </>
+2 -2
View File
@@ -509,13 +509,13 @@ return (
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register"> <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 Start Free Trial
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link to="/demo"> <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 Watch Demo
</Button> </Button>
</Link> </Link>
+10 -7
View File
@@ -328,29 +328,32 @@ return (
</section> </section>
{/* CTA */} {/* 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="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto"> <Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
<h2 className="text-3xl font-bold text-foreground mb-4"> <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 Start Your Free Trial Today
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8"> <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. Try Secuird free for 14 days. No credit card required. Full access to all Business features.
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register"> <Link to="/register">
<Button size="lg" className="gap-2"> <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial Start Free Trial
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link to="/demo"> <Link to="/demo">
<Button variant="outline" size="lg"> <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
Watch Demo Watch Demo
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </CardContent>
</Card>
</div> </div>
</section> </section>
</> </>
+2 -2
View File
@@ -435,13 +435,13 @@ $ systemctl restart sshd`}
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register"> <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 Start Free Trial
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link to="/demo"> <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 Watch Demo
</Button> </Button>
</Link> </Link>
+2 -2
View File
@@ -464,12 +464,12 @@ return (
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register"> <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 Start Free Trial
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </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 Contact Security Team
</Button> </Button>
</div> </div>