forked from emre/www_projectmycelium_com
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user