Files
medusa-store/www/apps/book/components/Homepage/CloudSection/index.tsx
Shahed Nasser 5122ced9f6 docs: prepare cloud docs (#12784)
* initial

* fixes

* docs: prepare cloud docs
2025-06-20 12:59:38 +03:00

67 lines
2.1 KiB
TypeScript

import clsx from "clsx"
import {
getLinkWithBasePath,
IconCloudSolid,
IconHeadline,
Link,
} from "docs-ui"
import Image from "next/image"
export const HomepageCloudSection = () => {
return (
<div className="border-t border-medusa-border-base">
<div
className={clsx(
"flex justify-center gap-2 lg:gap-4",
"xl:mx-auto xl:max-w-[1136px] w-full py-4 px-1 sm:px-4 xl:px-0"
)}
>
<div className="flex flex-col gap-1 w-full lg:w-1/3 xl:max-w-[336px]">
<div className="flex flex-col gap-0.5">
<IconHeadline title="Cloud" icon={<IconCloudSolid />} />
<h2 className="text-h1 text-medusa-fg-base">
Deploy scalable applications with Cloud
</h2>
<div
className={clsx(
"text-medusa-fg-subtle text-small-plus",
"flex flex-col gap-1 lg:gap-2"
)}
>
<span>
Focus on building new features without worrying about
infrastructure with our PaaS Cloud offering.
</span>
<span>
Deploy directly from your GitHub repository on a
security-compliant infrastructure that is pre-configured for
optimal operation and scaling of your Medusa application.
</span>
<span>
Access our support team and receive guidance as you build your
application and go live.
</span>
</div>
</div>
<Link
href={"https://docs.medusajs.com/cloud"}
className="flex gap-0.25 items-center text-compact-small-plus"
withIcon
>
<span>Learn about Cloud</span>
</Link>
</div>
<div className="hidden lg:block lg:w-2/3">
<Image
src={getLinkWithBasePath("/images/cloud.png")}
alt="Cloud"
className="w-full h-auto"
width={700}
height={400}
/>
</div>
</div>
</div>
)
}