76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { SectionHeader, P, CP } from "@/components/Texts";
|
|
import { Button } from "@/components/Button";
|
|
|
|
export function GetStarted() {
|
|
const items = [
|
|
{
|
|
title: "Mycelium Docs",
|
|
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",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
className="bg-cover bg-center text-white py-32 px-6 relative"
|
|
style={{
|
|
backgroundImage: `url('/images/getstarted.webp')`,
|
|
}}
|
|
>
|
|
<div className="max-w-8xl mx-auto px-4 text-left mb-12">
|
|
<SectionHeader>Get Started</SectionHeader>
|
|
<P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-3 max-w-8xl mx-auto px-4">
|
|
{items.map((item, idx) => (
|
|
<div
|
|
key={idx}
|
|
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} color="white">
|
|
{item.buttonText}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Divider + Description */}
|
|
<div className="mt-4 border-t border-white/10"></div>
|
|
|
|
<CP className="mt-4">{item.description}</CP>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|