feat: update CallToAction component styling and add cyan glow effect

- Replaced hardcoded heading and paragraph elements with reusable H3 and P components
- Added cyan radial glow SVG overlay to HomeBlink for enhanced visual atmosphere
- Updated audience images (7.jpg and 8.jpg)
This commit is contained in:
2025-11-12 15:59:18 +01:00
parent dfe71dd4eb
commit 37d4371288
4 changed files with 29 additions and 6 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 152 KiB

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 182 KiB

View File

@@ -1,5 +1,6 @@
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import { Button } from '@/components/Button' import { Button } from '@/components/Button'
import { H3, P } from '@/components/Texts'
export function CallToAction() { export function CallToAction() {
return ( return (
@@ -37,18 +38,18 @@ export function CallToAction() {
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl"> <H3 className=" text-white ">
A Living Network A Living Network
</h2> </H3>
<p className="mt-6 text-lg text-gray-300"> <P className="mt-6 text-gray-300">
Mycelium isnt a platform. Mycelium isnt a platform.
Its the soil where a new internet grows open, resilient, and alive. Its the soil where a new internet grows open, resilient, and alive.
</p> </P>
<p className="mt-4 text-lg text-gray-300"> <P className="mt-4 text-gray-300">
The self-sovereign network powering the next internet. The self-sovereign network powering the next internet.
</p> </P>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4"> <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/cloud" variant="solid" color="cyan"> <Button to="/cloud" variant="solid" color="cyan">

View File

@@ -13,6 +13,28 @@ export function HomeBlink({ onGetStartedClick }: { onGetStartedClick: () => void
{/* ✅ Animated blinking grid */} {/* ✅ Animated blinking grid */}
<GridBlink /> <GridBlink />
{/* ✅ Cyan Radial Glow */}
<svg
viewBox="0 0 1024 1024"
aria-hidden="true"
className="absolute top-full left-1/2 w-7xl h-520 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
>
<circle
r={512}
cx={512}
cy={512}
fill="url(#mycelium-cyan-glow)"
fillOpacity="0.1"
/>
<defs>
<radialGradient id="mycelium-cyan-glow">
<stop stopColor="#00e5ff" />
<stop offset="1" stopColor="transparent" />
</radialGradient>
</defs>
</svg>
{/* ✅ Cyan Spotlight */} {/* ✅ Cyan Spotlight */}
<Spotlight className="-top-40 left-0 md:-top-20 md:left-60" /> <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" />