forked from emre/www_projectmycelium_com
- Updated card component design from image background to structured layout with separate content and image sections - Added dedicated image container with proper scaling and positioning for product images - Refined typography with new styling for category, title and description text - Increased gap between carousel cards from 4 to 6 units for better spacing - Adjusted card dimensions and padding for better responsive behavior - Update
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { H1, H5 } from "@/components/Texts"
|
|
import { Button } from "@/components/Button"
|
|
|
|
|
|
export function HomeAurora() {
|
|
return (
|
|
<div
|
|
className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
|
|
style={{ backgroundImage: "url('/images/hero11.webp')" }}
|
|
>
|
|
<div className="mx-auto max-w-7xl lg:px-4">
|
|
<div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
|
|
<div className="mx-auto max-w-3xl lg:mx-0">
|
|
<div className="hidden sm:flex">
|
|
<div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
|
Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
|
|
<a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
|
|
<span aria-hidden="true" className="absolute inset-0" />
|
|
Read more <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<H1 className="mt-8">
|
|
Full Sovereignty for Cloud, Network & AI.
|
|
</H1>
|
|
<H5 className="mt-8 text-lg text-gray-600">
|
|
Build and run mission-critical workloads on distributed compute, encrypted networking, and sovereign AI orchestration without centralized gatekeepers.
|
|
</H5>
|
|
<div className="mt-10 flex items-center gap-x-6">
|
|
<Button
|
|
to="#"
|
|
variant="solid"
|
|
className=""
|
|
color="cyan"
|
|
>
|
|
Get started
|
|
</Button>
|
|
<Button to="#" variant="outline">
|
|
Explore Docs <span aria-hidden="true"> →</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|