forked from emre/www_projectmycelium_com
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:
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 |
@@ -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 isn’t a platform.
|
Mycelium isn’t a platform.
|
||||||
It’s the soil where a new internet grows — open, resilient, and alive.
|
It’s 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">
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user