64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { H2, P, CP } from "@/components/Texts";
|
|
import { Button } from "@/components/ui/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",
|
|
},
|
|
{
|
|
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
|
|
},
|
|
{
|
|
title: "Mycelium Support",
|
|
description:
|
|
"Need help? Reach out to our support team or join the community to get your questions answered quickly.",
|
|
href: "/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">
|
|
<H2>Get Started</H2>
|
|
<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="flex flex-col justify-between border border-white/10 rounded-2xl p-6 hover:border-white/20 transition bg-black/20"
|
|
>
|
|
{/* 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
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Divider + Description */}
|
|
<div className="mt-4 border-t border-white/10"></div>
|
|
|
|
<CP className="mt-4">{item.description}</CP>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|