Sharang Parnerkar
ca5da3c232
Overhaul landing page design with updated CSS, Tailwind config, and i18n translations across all supported languages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
349 lines
13 KiB
Rust
349 lines
13 KiB
Rust
use dioxus::prelude::*;
|
|
use dioxus_free_icons::icons::bs_icons::{BsArrowRight, BsShieldCheck};
|
|
use dioxus_free_icons::Icon;
|
|
|
|
use crate::i18n::{t, Locale};
|
|
use crate::Route;
|
|
|
|
/// Public landing page for the CERTifAI platform.
|
|
///
|
|
/// Displays a marketing-oriented page with hero section, feature grid,
|
|
/// how-it-works steps, and call-to-action banners. This page is accessible
|
|
/// without authentication. Uses the Glass Aurora design with glassmorphic
|
|
/// effects, aurora gradients, and centered hero layout.
|
|
#[component]
|
|
pub fn LandingPage() -> Element {
|
|
rsx! {
|
|
div { class: "landing",
|
|
LandingNav {}
|
|
HeroSection {}
|
|
TrustBar {}
|
|
FeaturesGrid {}
|
|
HowItWorks {}
|
|
CtaBanner {}
|
|
LandingFooter {}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Sticky top navigation bar with logo, nav links, and CTA buttons.
|
|
/// Uses Glass Aurora glassmorphic nav with backdrop-filter blur.
|
|
#[component]
|
|
fn LandingNav() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
nav { class: "landing-nav",
|
|
div { class: "landing-nav-inner",
|
|
Link { to: Route::LandingPage {}, class: "landing-logo",
|
|
span { class: "landing-logo-icon",
|
|
Icon { icon: BsShieldCheck, width: 24, height: 24 }
|
|
}
|
|
span { "CERTifAI" }
|
|
}
|
|
div { class: "landing-nav-links",
|
|
a { href: "#features", {t(l, "common.features")} }
|
|
a { href: "#how-it-works", {t(l, "common.how_it_works")} }
|
|
a { href: "#pricing", {t(l, "nav.pricing")} }
|
|
}
|
|
div { class: "landing-nav-actions",
|
|
Link {
|
|
to: Route::Login {
|
|
redirect_url: "/dashboard".into(),
|
|
},
|
|
class: "btn btn-ghost btn-sm",
|
|
{t(l, "common.log_in")}
|
|
}
|
|
Link {
|
|
to: Route::Login {
|
|
redirect_url: "/dashboard".into(),
|
|
},
|
|
class: "btn btn-primary btn-sm",
|
|
{t(l, "common.get_started")}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Hero section with pill badges, headline, subtitle, CTA buttons, and
|
|
/// a glass-preview stat panel. Centered layout per Glass Aurora design.
|
|
#[component]
|
|
fn HeroSection() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
section { class: "hero-section",
|
|
div { class: "hero-content",
|
|
div { class: "hero-pills",
|
|
span { class: "pill accent", {t(l, "landing.pill_gdpr")} }
|
|
span { class: "pill", {t(l, "landing.pill_self_hosted")} }
|
|
span { class: "pill", {t(l, "landing.pill_eu")} }
|
|
}
|
|
h1 { class: "hero-title",
|
|
{t(l, "landing.hero_title_1")}
|
|
br {}
|
|
span { class: "hero-title-accent", {t(l, "landing.hero_title_2")} }
|
|
}
|
|
p { class: "hero-subtitle",
|
|
{t(l, "landing.hero_subtitle")}
|
|
}
|
|
div { class: "hero-actions",
|
|
Link {
|
|
to: Route::Login {
|
|
redirect_url: "/dashboard".into(),
|
|
},
|
|
class: "btn btn-primary btn-lg",
|
|
{t(l, "common.get_started")}
|
|
Icon { icon: BsArrowRight, width: 18, height: 18 }
|
|
}
|
|
a { href: "#features", class: "btn btn-outline btn-lg",
|
|
{t(l, "landing.learn_more")}
|
|
}
|
|
}
|
|
div { class: "preview-container",
|
|
div { class: "glass-preview",
|
|
div { class: "preview-stat",
|
|
div { class: "preview-stat-value", "5" }
|
|
div { class: "preview-stat-label",
|
|
{t(l, "landing.preview_models")}
|
|
}
|
|
}
|
|
div { class: "preview-stat",
|
|
div { class: "preview-stat-value", "847K" }
|
|
div { class: "preview-stat-label",
|
|
{t(l, "landing.preview_tokens")}
|
|
}
|
|
}
|
|
div { class: "preview-stat",
|
|
div { class: "preview-stat-value", "$47.82" }
|
|
div { class: "preview-stat-label",
|
|
{t(l, "landing.preview_spend")}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Trust bar with aurora dot indicators and stat labels.
|
|
/// Replaces the previous text-based social proof section.
|
|
#[component]
|
|
fn TrustBar() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
section { class: "trust-bar",
|
|
div { class: "trust-item",
|
|
div { class: "trust-dot" }
|
|
span { "100% " {t(l, "landing.on_premise")} }
|
|
}
|
|
div { class: "trust-item",
|
|
div { class: "trust-dot" }
|
|
span { "GDPR " {t(l, "landing.compliant")} }
|
|
}
|
|
div { class: "trust-item",
|
|
div { class: "trust-dot" }
|
|
span { "EU " {t(l, "landing.data_residency")} }
|
|
}
|
|
div { class: "trust-item",
|
|
div { class: "trust-dot" }
|
|
span { "Zero " {t(l, "landing.third_party")} }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Feature cards grid section. Uses gradient icon bars instead of SVG icons.
|
|
#[component]
|
|
fn FeaturesGrid() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
section { id: "features", class: "features-section",
|
|
h2 { class: "section-title", {t(l, "landing.features_title")} }
|
|
p { class: "section-subtitle",
|
|
{t(l, "landing.features_subtitle")}
|
|
}
|
|
div { class: "features-grid",
|
|
FeatureCard {
|
|
title: t(l, "landing.feat_infra_title"),
|
|
description: t(l, "landing.feat_infra_desc"),
|
|
}
|
|
FeatureCard {
|
|
title: t(l, "landing.feat_gdpr_title"),
|
|
description: t(l, "landing.feat_gdpr_desc"),
|
|
}
|
|
FeatureCard {
|
|
title: t(l, "landing.feat_llm_title"),
|
|
description: t(l, "landing.feat_llm_desc"),
|
|
}
|
|
FeatureCard {
|
|
title: t(l, "landing.feat_agent_title"),
|
|
description: t(l, "landing.feat_agent_desc"),
|
|
}
|
|
FeatureCard {
|
|
title: t(l, "landing.feat_mcp_title"),
|
|
description: t(l, "landing.feat_mcp_desc"),
|
|
}
|
|
FeatureCard {
|
|
title: t(l, "landing.feat_api_title"),
|
|
description: t(l, "landing.feat_api_desc"),
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Individual feature card with a gradient icon bar accent.
|
|
///
|
|
/// # Arguments
|
|
///
|
|
/// * `title` - Feature title (owned String from translation lookup)
|
|
/// * `description` - Feature description text (owned String from translation lookup)
|
|
#[component]
|
|
fn FeatureCard(title: String, description: String) -> Element {
|
|
rsx! {
|
|
div { class: "card feature-card",
|
|
div { class: "feature-icon-bar" }
|
|
h3 { class: "feature-card-title", "{title}" }
|
|
p { class: "feature-card-desc", "{description}" }
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Three-step "How It Works" section.
|
|
#[component]
|
|
fn HowItWorks() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
section { id: "how-it-works", class: "how-it-works-section",
|
|
h2 { class: "section-title", {t(l, "landing.how_title")} }
|
|
p { class: "section-subtitle", {t(l, "landing.how_subtitle")} }
|
|
div { class: "steps-grid",
|
|
StepCard {
|
|
number: "01",
|
|
title: t(l, "landing.step_deploy"),
|
|
description: t(l, "landing.step_deploy_desc"),
|
|
}
|
|
StepCard {
|
|
number: "02",
|
|
title: t(l, "landing.step_configure"),
|
|
description: t(l, "landing.step_configure_desc"),
|
|
}
|
|
StepCard {
|
|
number: "03",
|
|
title: t(l, "landing.step_scale"),
|
|
description: t(l, "landing.step_scale_desc"),
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Individual step card.
|
|
///
|
|
/// # Arguments
|
|
///
|
|
/// * `number` - Step number string (e.g. "01")
|
|
/// * `title` - Step title (owned String from translation lookup)
|
|
/// * `description` - Step description text (owned String from translation lookup)
|
|
#[component]
|
|
fn StepCard(number: &'static str, title: String, description: String) -> Element {
|
|
rsx! {
|
|
div { class: "step-card",
|
|
span { class: "step-number", "{number}" }
|
|
h3 { class: "step-title", "{title}" }
|
|
p { class: "step-desc", "{description}" }
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Call-to-action banner wrapped in a glass box with aurora top border.
|
|
#[component]
|
|
fn CtaBanner() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
section { class: "cta-section",
|
|
div { class: "cta-box",
|
|
h2 { class: "cta-title", {t(l, "landing.cta_title")} }
|
|
p { class: "cta-subtitle",
|
|
{t(l, "landing.cta_subtitle")}
|
|
}
|
|
div { class: "cta-actions",
|
|
Link {
|
|
to: Route::Login {
|
|
redirect_url: "/dashboard".into(),
|
|
},
|
|
class: "btn btn-primary btn-lg",
|
|
{t(l, "landing.get_started_free")}
|
|
Icon { icon: BsArrowRight, width: 18, height: 18 }
|
|
}
|
|
Link {
|
|
to: Route::Login {
|
|
redirect_url: "/dashboard".into(),
|
|
},
|
|
class: "btn btn-outline btn-lg",
|
|
{t(l, "common.log_in")}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Landing page footer with links and copyright.
|
|
/// Uses glass border-top styling per Glass Aurora design.
|
|
#[component]
|
|
fn LandingFooter() -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
rsx! {
|
|
footer { class: "landing-footer",
|
|
div { class: "landing-footer-inner",
|
|
div { class: "footer-brand",
|
|
div { class: "landing-logo",
|
|
span { class: "landing-logo-icon",
|
|
Icon { icon: BsShieldCheck, width: 20, height: 20 }
|
|
}
|
|
span { "CERTifAI" }
|
|
}
|
|
p { class: "footer-tagline", {t(l, "landing.footer_tagline")} }
|
|
}
|
|
div { class: "footer-links-group",
|
|
h4 { class: "footer-links-heading", {t(l, "landing.product")} }
|
|
a { href: "#features", {t(l, "common.features")} }
|
|
a { href: "#how-it-works", {t(l, "common.how_it_works")} }
|
|
a { href: "#pricing", {t(l, "nav.pricing")} }
|
|
}
|
|
div { class: "footer-links-group",
|
|
h4 { class: "footer-links-heading", {t(l, "landing.legal")} }
|
|
Link { to: Route::ImpressumPage {}, {t(l, "common.impressum")} }
|
|
Link { to: Route::PrivacyPage {}, {t(l, "common.privacy_policy")} }
|
|
}
|
|
div { class: "footer-links-group",
|
|
h4 { class: "footer-links-heading", {t(l, "landing.resources")} }
|
|
a { href: "#", {t(l, "landing.documentation")} }
|
|
a { href: "#", {t(l, "landing.api_reference")} }
|
|
a { href: "#", {t(l, "landing.support")} }
|
|
}
|
|
}
|
|
div { class: "footer-bottom",
|
|
p { {t(l, "landing.copyright")} }
|
|
}
|
|
}
|
|
}
|
|
}
|