304 lines
15 KiB
Rust
304 lines
15 KiB
Rust
//! Unified Services Page Component using shared delegation patterns
|
|
//!
|
|
//! This module provides a unified interface that automatically selects between
|
|
//! client-side reactive and server-side static implementations based on context.
|
|
|
|
use leptos::prelude::*;
|
|
use rustelo_content::rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;
|
|
#[cfg(target_arch = "wasm32")]
|
|
use rustelo_content::rustelo_core_lib::utils::nav;
|
|
|
|
/// Unified Services Page component that works in both SSR and client contexts
|
|
/// Takes structured content data instead of individual parameters
|
|
#[component]
|
|
pub fn UnifiedServicesPage(
|
|
#[prop(default = rustelo_content::rustelo_core_lib::config::get_default_language().to_string())]
|
|
_language: String,
|
|
#[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
|
|
) -> impl IntoView {
|
|
// Use DRY content accessor helper
|
|
let content = create_content_provider_reactive(lang_content.clone());
|
|
|
|
// Pre-extract ONLY URLs for href attributes to avoid closure ownership issues
|
|
// Map to actual keys from the FTL file
|
|
let services_cta_contact_url = content.t("services-contact-url");
|
|
let services_cta_work_request_url = content.t("services-work-request-url");
|
|
let services_cta_contact_text = content.t("services-schedule-consultation");
|
|
let services_cta_work_request_text = content.t("services-request-project-quote");
|
|
|
|
view! {
|
|
<div class="min-h-screen ds-bg-page">
|
|
// Header Section
|
|
<section class="py-8 ds-container">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
|
|
{content.t("services-page-title")}
|
|
</h1>
|
|
<p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
|
|
{content.t("services-page-subtitle")}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
// Project Participation Section
|
|
<section id="projects" data-anchor-es="proyectos" class="py-16 ds-bg">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-12">
|
|
<h2 class="text-3xl font-bold ds-text">{content.t("services-project-participation")}</h2>
|
|
<p class="mt-4 ds-text-secondary max-w-3xl mx-auto">
|
|
{content.t("services-project-participation-desc")}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-requirements-criteria")}</h3>
|
|
<p class="ds-text-secondary">
|
|
{content.t("services-requirements-criteria-desc")}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-custom-infrastructure")}</h3>
|
|
<p class="ds-text-secondary">
|
|
{content.t("services-custom-infrastructure-desc")}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-cicd-implementation")}</h3>
|
|
<p class="ds-text-secondary">
|
|
{content.t("services-cicd-implementation-desc")}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm md:col-span-2 lg:col-span-1">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-research-prototyping")}</h3>
|
|
<p class="ds-text-secondary">
|
|
{content.t("services-research-prototyping-desc")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
// What You Get Section
|
|
<div class="mt-16">
|
|
<h3 class="text-2xl font-bold ds-text text-center mb-8">
|
|
{content.t("services-what-you-get")}
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
|
<div class="flex items-start gap-3">
|
|
<span class="ds-text-secondary">{content.t("services-production-ready-code")}</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="ds-text-secondary">{content.t("services-complete-documentation")}</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="ds-text-secondary">{content.t("services-knowledge-transfer")}</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="ds-text-secondary">{content.t("services-post-deployment-support")}</span>
|
|
</div>
|
|
<div class="flex items-start gap-3 md:col-span-2">
|
|
<span class="ds-text-secondary">{content.t("services-open-source-focus")}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
// Mentoring Section
|
|
<section id="mentoring" data-anchor-es="mentoria" class="py-16 ds-bg-page">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-12">
|
|
<h2 class="text-3xl font-bold ds-text">{content.t("services-mentoring-guidance")}</h2>
|
|
<p class="mt-4 ds-text-secondary max-w-3xl mx-auto">
|
|
{content.t("services-mentoring-guidance-desc")}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
// Technical Collaboration
|
|
<div>
|
|
<h3 class="text-2xl font-bold ds-text mb-6">
|
|
{content.t("services-technical-collaboration")}
|
|
</h3>
|
|
<p class="ds-text-secondary mb-8">
|
|
{content.t("services-technical-collaboration-desc")}
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{content.t("services-one-on-one-sessions")}</h4>
|
|
<span class="text-sm ds-text-secondary">{content.t("services-one-to-four-hours")}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{content.t("services-pair-programming")}</h4>
|
|
<span class="text-sm ds-text-secondary">{content.t("services-two-to-eight-hours")}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-pair-programming-sessions-desc")}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{content.t("services-code-review-sessions")}</h4>
|
|
<span class="text-sm ds-text-secondary">{content.t("services-one-to-two-hours")}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-architecture-reviews-desc")}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{content.t("services-team-guidance")}</h4>
|
|
<span class="text-sm ds-text-secondary">{content.t("services-ongoing")}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-research-guidance-desc")}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
// Training & Education
|
|
<div id="training" data-anchor-es="capacitacion">
|
|
<h3 class="text-2xl font-bold ds-text mb-6">
|
|
{content.t("services-training-education")}
|
|
</h3>
|
|
<p class="ds-text-secondary mb-8">
|
|
{content.t("services-training-education-desc")}
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{content.t("services-custom-courses")}</h4>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-custom-courses-desc")}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{content.t("services-technical-workshops")}</h4>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-technical-workshops-desc")}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{content.t("services-conference-talks")}</h4>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-conference-talks-desc")}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{content.t("services-educational-content")}</h4>
|
|
<p class="text-sm ds-text-secondary">{content.t("services-educational-content-desc")}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
// Popular Topics Section
|
|
<section class="py-16 ds-bg">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-12">
|
|
<h2 class="text-3xl font-bold ds-text">{content.t("services-popular-topics")}</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
// Rust Development
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 mx-auto mb-ds-4 ds-bg-page ds-rounded-lg flex items-center justify-center">
|
|
<span class="text-2xl">"🦀"</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-rust-development")}</h3>
|
|
<ul class="text-sm ds-text-secondary space-y-1 list-none">
|
|
<li>{content.t("services-systems-programming")}</li>
|
|
<li>{content.t("services-web-applications")}</li>
|
|
<li>{content.t("services-performance-optimization")}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
// Infrastructure
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 mx-auto mb-ds-4 ds-bg-page ds-rounded-lg flex items-center justify-center">
|
|
<span class="text-2xl">"🏗️"</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-infrastructure")}</h3>
|
|
<ul class="text-sm ds-text-secondary space-y-1 list-none">
|
|
<li>{content.t("services-kubernetes-deployment")}</li>
|
|
<li>{content.t("services-cicd-pipelines")}</li>
|
|
<li>{content.t("services-self-hosting")}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
// Web3 & Blockchain
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 mx-auto mb-ds-4 ds-bg-page ds-rounded-lg flex items-center justify-center">
|
|
<span class="text-2xl">"🌐"</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-web3-blockchain")}</h3>
|
|
<ul class="text-sm ds-text-secondary space-y-1 list-none">
|
|
<li>{content.t("services-polkadot-ecosystem")}</li>
|
|
<li>{content.t("services-smart-contracts")}</li>
|
|
<li>{content.t("services-dapp-development")}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
// Best Practices
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 mx-auto mb-ds-4 ds-bg-page ds-rounded-lg flex items-center justify-center">
|
|
<span class="text-2xl">"⚡"</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{content.t("services-best-practices")}</h3>
|
|
<ul class="text-sm ds-text-secondary space-y-1 list-none">
|
|
<li>{content.t("services-open-source-strategy")}</li>
|
|
<li>{content.t("services-security-practices")}</li>
|
|
<li>{content.t("services-code-quality")}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
// Call to Action Section
|
|
<section class="py-16 ds-bg-page">
|
|
<div class="mx-auto max-w-4xl ds-container text-center">
|
|
<h2 class="text-3xl font-bold ds-text mb-ds-4">{content.t("services-lets-discuss-needs")}</h2>
|
|
<p class="ds-text-secondary mb-8 ds-body">
|
|
{content.t("services-every-project-unique")}
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href={services_cta_contact_url.clone()} class="no-underline ds-btn-primary"
|
|
on:click=move |_ev: leptos::ev::MouseEvent| {
|
|
#[cfg(target_arch = "wasm32")]
|
|
{
|
|
if let Some(set_path) = use_context::<WriteSignal<String>>() {
|
|
_ev.prevent_default();
|
|
_ev.stop_propagation();
|
|
nav::anchor_navigate(set_path, &services_cta_contact_url);
|
|
rustelo_content::rustelo_core_lib::utils::doc_scroll_to_top(100);
|
|
}
|
|
}
|
|
}
|
|
>
|
|
{services_cta_contact_text}
|
|
</a>
|
|
<a href={services_cta_work_request_url.clone()} class="no-underline ds-btn-secondary"
|
|
on:click=move |_ev: leptos::ev::MouseEvent| {
|
|
#[cfg(target_arch = "wasm32")]
|
|
{
|
|
if let Some(set_path) = use_context::<WriteSignal<String>>() {
|
|
_ev.prevent_default();
|
|
_ev.stop_propagation();
|
|
nav::anchor_navigate(set_path, &services_cta_work_request_url);
|
|
rustelo_content::rustelo_core_lib::utils::doc_scroll_to_top(100);
|
|
}
|
|
}
|
|
}
|
|
>
|
|
{services_cta_work_request_text}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
}
|
|
}
|