✨ feat: add new contact form, hero, features, and richtext blocks; implement scroll-reveal action and update styles

- Introduced ContactFormBlock, FeaturesBlock, HeroBlock, and RichtextBlock components.
- Implemented a scroll-reveal action for animations on element visibility.
- Enhanced CSS styles for better theming and prose formatting.
- Added localization support for new components and updated existing translations.
- Created e2e tests for demo pages including contact form validation and navigation.
- Added a video tour showcasing the demo pages and interactions.

frontend/src/css/style.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -9,11 +9,161 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentcolor);
+    }
+}
+
+/* ── Custom theme tokens ─────────────────────────────────────────── */
+@theme {
+    --color-brand-50: #f0f5ff;
+    --color-brand-100: #e0eaff;
+    --color-brand-200: #c7d7fe;
+    --color-brand-300: #a4bcfd;
+    --color-brand-400: #8098f9;
+    --color-brand-500: #6172f3;
+    --color-brand-600: #444ce7;
+    --color-brand-700: #3538cd;
+    --color-brand-800: #2d31a6;
+    --color-brand-900: #2d3282;
+    --color-brand-950: #1f235b;
+
+    --color-accent-400: #f79009;
+    --color-accent-500: #f59e0b;
+
+    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+
+/* ── Scroll-triggered reveal animation ───────────────────────────── */
+@keyframes reveal-up {
+    from {
+        opacity: 0;
+        transform: translateY(2rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.reveal {
+    opacity: 0;
+}
+
+.reveal.revealed {
+    animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* ── Prose styling for CMS richtext blocks ───────────────────────── */
+.prose h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+}
+.prose h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+.prose p {
+    margin-bottom: 1rem;
+    line-height: 1.7;
+}
+.prose ul {
+    list-style: disc;
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+.prose ol {
+    list-style: decimal;
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+.prose a {
+    color: var(--color-brand-600);
+    text-decoration: underline;
+}
+
+/* ── Smooth page transitions ─────────────────────────────────────── */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.page-enter {
+    animation: fade-in 0.35s ease-out;
+}
+
+/* ── Gradient text helper ────────────────────────────────────────── */
+.text-gradient {
+    background: linear-gradient(135deg, var(--color-brand-600), var(--color-brand-400));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* ── Feature cards (rendered via CMS richtext HTML) ──────────────── */
+.feature-card {
+    background: white;
+    border: 1px solid var(--color-gray-100, #f3f4f6);
+    border-radius: 1rem;
+    padding: 2rem;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.feature-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+    border-color: var(--color-brand-200);
+}
+
+.feature-card .feature-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--color-gray-900, #111827);
+    margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+    font-size: 0.938rem;
+    color: var(--color-gray-500, #6b7280);
+    line-height: 1.65;
+}
+
+/* ── Prose code inline styling ───────────────────────────────────── */
+.prose code {
+    background: var(--color-brand-50, #f0f5ff);
+    color: var(--color-brand-700, #3538cd);
+    padding: 0.15em 0.4em;
+    border-radius: 0.375rem;
+    font-size: 0.875em;
+    font-weight: 500;
+}
+
+.prose strong {
+    color: var(--color-gray-900, #111827);
+}
+
+.prose li {
+    margin-bottom: 0.35rem;
+}
+
+/* ── Smooth scroll for anchor links ──────────────────────────────── */
+html {
+    scroll-behavior: smooth;
 }