ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add background video and enhance hover effects in CTA and GetStarted components

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-16 14:05:51 +02:00
parent 979a6523fa
commit 13ecc4d2ec
3 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/videos/cta.mp4 Normal file
View File

Binary file not shown.

32
src/components/CallToAction.tsx
View File

@@ -6,25 +6,37 @@ export function CallToAction() {
return (
<section
id="get-free-shares-today"
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
className="relative overflow-hidden py-20 sm:py-28"
>
<div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
<video
autoPlay
loop
muted
playsInline
className="absolute top-0 left-0 w-full h-full object-cover z-0"
>
<source src="/videos/cta.mp4" type="video/mp4" />
</video>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-10"></div>
<div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
<CircleBackground color="#fff" className="animate-spin-slower" />
</div>
<Container className="relative">
<Container className="relative z-20">
<div className="mx-auto max-w-md sm:text-center">
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
Decentralized AI Agents that are Truly Yours
Decentralized AI Agents that are Truly Yours
</h2>
<p className="mt-4 text-lg text-gray-300">
Why hand out your intelligence to centralized giants when you can build your own. Ready to own your intelligence?
Why hand out your intelligence to centralized giants when you can
build your own. Ready to own your intelligence?
</p>
<div className="mt-8 flex justify-center gap-x-6">
<Button
variant="solid"
href="#">Book a Meeting</Button>
<Button href="#"
variant="outline">Join the Waitlist</Button>
<Button variant="solid" href="#">
Book a Meeting
</Button>
<Button href="#" variant="outline">
Join the Waitlist
</Button>
</div>
</div>
</Container>

16
src/components/GetStarted.tsx
View File

@@ -10,18 +10,21 @@ export function GetStarted() {
description:
"Learn how Mycelium works and get a high-level understanding of its architecture, deployment, and API references.",
href: "/docs",
buttonText: "Docs",
},
{
title: "Mycelium Repository",
description:
"Explore the official code repositories, contribute, and stay up-to-date with the latest changes.",
href: "https://github.com/your-repo", // replace with actual repo
buttonText: "Explore",
},
{
title: "Mycelium Support",
description:
"Need help? Reach out to our support team or join the community to get your questions answered quickly.",
href: "/support",
buttonText: "Support",
},
];
@@ -41,13 +44,22 @@ export function GetStarted() {
{items.map((item, idx) => (
<div
key={idx}
className="flex flex-col justify-between border border-white/10 rounded-2xl p-6 hover:border-white/20 transition bg-black/20"
className="relative flex flex-col justify-between overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6 shadow-md shadow-gray-900/5 transition-all duration-300 ease-out hover:scale-105 hover:border-white/40 hover:bg-black/60"
style={{
filter: 'brightness(1)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.filter = 'brightness(0.8)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.filter = 'brightness(1)';
}}
>
{/* Title + Button Row */}
<div className="flex items-center justify-between">
<h3 className="text-xl font-semibold">{item.title}</h3>
<Button variant="outline" href={item.href}>
View All
{item.buttonText}
</Button>
</div>