From e870f889c53cb4c8178efea853ee135876c4872e Mon Sep 17 00:00:00 2001 From: Tony Giorgio Date: Tue, 25 Mar 2025 18:16:32 -0500 Subject: [PATCH 01/13] Redesign proof of concept --- frontend/src/components/Footer.tsx | 183 ++++++---- frontend/src/components/Marketing.tsx | 459 ++++++++++++++++++++++---- frontend/src/components/TopNav.tsx | 30 +- frontend/src/index.css | 76 ++--- frontend/src/utils/utils.ts | 8 +- 5 files changed, 576 insertions(+), 180 deletions(-) diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 221a9be23..7e8b7906b 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -3,68 +3,127 @@ import { DiscordIcon } from "./icons/DiscordIcon"; export function Footer() { return ( -
-

- Powered by{" "} - - OpenSecret - -

-
- - Terms of Service - - {" | "} - - Privacy Policy - -
-
- - - - - - - - - - - - +
+
+
+
+ Maple +

+ Private AI chat with end-to-end encryption. Your conversations stay yours. +

+ +
+ + + + + + +
+ +
+

+ © {new Date().getFullYear()} Maple AI. All rights reserved. Powered by{" "} + + OpenSecret + +

+
); diff --git a/frontend/src/components/Marketing.tsx b/frontend/src/components/Marketing.tsx index 5a0e657dc..df66aef35 100644 --- a/frontend/src/components/Marketing.tsx +++ b/frontend/src/components/Marketing.tsx @@ -1,7 +1,6 @@ import { Link } from "@tanstack/react-router"; import { VerificationStatus } from "./VerificationStatus"; -import { MessageSquareMore } from "lucide-react"; -import { MarketingHeader } from "./MarketingHeader"; +import { ArrowRight, Check, Lock, MessageSquareMore, Shield, Sparkles } from "lucide-react"; import { Footer } from "./Footer"; function CTAButton({ @@ -17,78 +16,414 @@ function CTAButton({ {children} + {primary && ( +
+
+
+ )} ); } -export function Marketing() { +function FeatureCard({ + icon: Icon, + title, + description, + gradient = "from-[#9469F8]/10 to-[#3FDBFF]/10" +}: { + icon: React.ElementType; + title: string; + description: string; + gradient?: string; +}) { return ( -
-
- - 🎉 Now Live • Read the Announcement → - - - Encrypted. At every step. -
- Nobody can read your chats but you. - - } - /> +
+
+
-
- - - Start Chatting Securely - - Log In +

{title}

+

{description}

+
+ ); +} + +function TestimonialCard({ + quote, + author, + role, + avatar +}: { + quote: string; + author: string; + role: string; + avatar: string; +}) { + return ( +
+

“{quote}”

+
+ {author} +
+

{author}

+

{role}

+
-
-
- mask test -

Your Device

-

- All your communications are encrypted locally before being sent to our servers. -

+
+ ); +} + +function PricingTier({ + name, + price, + description, + features, + ctaText, + popular = false +}: { + name: string; + price: string; + description: string; + features: string[]; + ctaText: string; + popular?: boolean; +}) { + return ( +
+ {popular && ( +
+ Most Popular
-
- mask test -

Secure Server

-

- Our servers can't be spied on, even by us. And we can prove it. -

- + )} +

{name}

+
+ {price} + {price !== "Free" && /mo} +
+

{description}

+
+ {features.map((feature, index) => ( +
+ + {feature} +
+ ))} +
+ + {ctaText} + +
+ ); +} + +export function Marketing() { + return ( +
+ {/* Hero Section */} +
+
+
+
+ + + Now Live • Read the Announcement + +

+ Private AI Chat
that's truly secure +

+

+ End-to-end encryption means your conversations are protected at every step. Only you + can access your data — not even we can read your chats. +

+
+
+ + + Start Secure Chat + + Log In +
+
+
+ User avatar + User avatar + User avatar +
+

Trusted by thousands of security-conscious users

+
+
+
+
+
+
+
+
+
+
+
Encrypted Chat
+
+
+
+
+ AI +
+
+ How can I help you today? Your conversation is fully encrypted. +
+
+
+
+ I need to discuss some sensitive information. Is this really secure? +
+
+ U +
+
+
+
+ AI +
+
+ Yes, absolutely. Your messages are end-to-end encrypted. Even the server admins + can't read your conversations. We use zero-knowledge proofs to verify this. +
+
+
+
+
+ End-to-End Encrypted +
+
-
- mask test -

AI Cloud

-

- Your chats are encrypted and sent to a GPU, providing a highly secure transmission - that's resistant to interception. -

+
+ + {/* Features Section */} +
+
+
+

+ Privacy at Every Layer +

+

+ Your security is our primary concern. We've engineered Maple to ensure your data + remains yours alone, protected by cutting-edge encryption. +

+
+ +
+ + + +
-
+ + + {/* Proof/Verification Section */} +
+
+
+
+

+ We Prove Our Security +

+

+ Unlike other services that merely claim to be secure, we provide cryptographic + proof. Our commitment to transparency means you don't have to trust us - you can + verify it yourself. +

+
+ +
+ + Learn more about our verification system + +
+
+ Verification illustration +
+
+
+
+ + {/* Testimonials */} +
+
+
+

+ What Our Users Say +

+

+ Hear from those who've made privacy a priority with Maple AI. +

+
+ +
+ + + +
+
+
+ + {/* Pricing Section */} +
+
+
+

+ Simple, Transparent Pricing +

+

+ No hidden fees. Choose the plan that works for your needs. +

+
+ +
+ + + +
+
+
+ + {/* CTA Section */} +
+
+
+
+

+ Ready to Chat Securely? +

+

+ Join thousands of privacy-conscious users who've made the switch to truly secure AI + chat. +

+
+ + + Start Chatting Securely + + Log In +
+
+
+
+
+
); diff --git a/frontend/src/components/TopNav.tsx b/frontend/src/components/TopNav.tsx index 28601f84c..034e5a0bb 100644 --- a/frontend/src/components/TopNav.tsx +++ b/frontend/src/components/TopNav.tsx @@ -26,8 +26,8 @@ export function TopNav() { to={to} onClick={onClick} className={cn( - "transition-colors font-light tracking-tight text-xl text-white", - isActive ? "text-white" : "text-white/80 hover:text-white" + "transition-colors font-light tracking-tight text-lg", + isActive ? "text-[#E2E2E2]" : "text-[#E2E2E2]/70 hover:text-[#E2E2E2]" )} > {children} @@ -36,9 +36,9 @@ export function TopNav() { }; return ( -
-