feat: add cyan glow effects and new network resilience animation

- Added cyan radial glow SVG to CallToAction components across all product pages for visual consistency
- Created NoSinglePoint animation demonstrating redundant network paths and resilience against single point failures
- Updated HomeArchitecture layout to better center and display animations with improved flex positioning
This commit is contained in:
2025-11-14 22:23:11 +01:00
parent 33821987aa
commit a3028ff448
20 changed files with 548 additions and 174 deletions

View File

@@ -4,6 +4,7 @@ import { Eyebrow, H3, P } from "@/components/Texts";
import NoExtraction from "./animations/NoExtraction";
import NoControl from "./animations/NoControl";
import NoCentral from "./animations/NoCentral";
import NoSinglePoint from "./animations/NoSinglePoint";
const deterministicCards = [
{
@@ -45,7 +46,7 @@ const deterministicCards = [
title: "No single point of failure.",
description:
"No single entity can dictate or censor your online experience.",
animation: <NoControl />, // ✅ NEW
animation: <NoSinglePoint />, // ✅ NEW
colSpan: "lg:col-span-2",
rowSpan: "lg:row-span-1",
rounded: "",
@@ -76,7 +77,7 @@ export function HomeArchitecture() {
{deterministicCards.map((card) => (
<div
key={card.id}
className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
className={`relative flex flex-col ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
>
{/* ✅ Disable wrapper on first card */}
{!card.noBorder && (
@@ -90,8 +91,8 @@ export function HomeArchitecture() {
>
{/* ✅ SVG Animation instead of images */}
{card.animation ? (
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
<div className="w-full h-full">
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
<div className="w-full h-full object-cover">
{card.animation}
</div>
</div>