84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import clsx from "clsx"
|
|
import { Card, IconHeadline, Link, WindowPaintbrushIcon } from "docs-ui"
|
|
import { Book } from "@medusajs/icons"
|
|
import { basePathUrl } from "../../../utils/base-path-url"
|
|
import HomepageCodeTabs from "../CodeTabs"
|
|
|
|
const HomepageTopSection = () => {
|
|
return (
|
|
<div className="w-full relative">
|
|
<div
|
|
className={clsx(
|
|
"absolute h-full",
|
|
"left-0 top-0 w-full z-0 lg:hidden bg-contain bg-right-bottom bg-no-repeat"
|
|
)}
|
|
style={{
|
|
backgroundImage: `url(${basePathUrl(
|
|
"/images/get-started-card-md.png"
|
|
)})`,
|
|
}}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
"absolute h-full lg:h-[calc(50%-32px)] border-b border-medusa-border-base",
|
|
"left-0 top-0 w-full z-1 bg-cover bg-repeat",
|
|
"bg-bg-stripes dark:bg-bg-stripes-dark"
|
|
)}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
"w-fit mx-auto lg:grid lg:grid-cols-2 lg:grid-rows-2",
|
|
"xl:grid-cols-[336px_752px] lg:grid-cols-[25%_75%] lg:gap-x-4",
|
|
"2xl:pl-[184px] lg:pb-4 2xl:pr-[176px] z-[2] relative",
|
|
"xs:px-4 xs:pb-4 px-1 pb-8",
|
|
"flex justify-center items-start"
|
|
)}
|
|
>
|
|
<div className="flex flex-col gap-1.5 pt-1 xs:pt-4 lg:py-4">
|
|
<div className="flex flex-col gap-[10px]">
|
|
<IconHeadline title="Documentation" icon={<Book />} />
|
|
<h2 className="text-medusa-fg-base text-h1 text-pretty w-full md:w-2/3 lg:w-full">
|
|
Learn how to build Medusa projects. Explore our guides.
|
|
</h2>
|
|
</div>
|
|
<Card
|
|
type="mini"
|
|
title="Get started"
|
|
text="Introduction"
|
|
themeImage={{
|
|
light: basePathUrl("/images/get-started-card.png"),
|
|
dark: basePathUrl("/images/get-started-card-dark.png"),
|
|
}}
|
|
href={"/learn"}
|
|
/>
|
|
</div>
|
|
<HomepageCodeTabs />
|
|
<div className="pt-4 hidden lg:flex flex-col gap-0.5">
|
|
<IconHeadline
|
|
title="Optimized for Customizations"
|
|
icon={<WindowPaintbrushIcon />}
|
|
/>
|
|
<h2 className="text-medusa-fg-base text-h1 text-pretty">
|
|
A digital commerce platform with a built-in framework for
|
|
customizations.
|
|
</h2>
|
|
<span className="text-small-plus text-medusa-fg-subtle">
|
|
Unlike other platforms, the Medusa Framework allows you to easily
|
|
customize and extend the behavior of your commerce platform to
|
|
always fit your business needs.
|
|
</span>
|
|
<Link
|
|
href={"/learn/fundamentals/framework"}
|
|
className="text-compact-small-plus"
|
|
withIcon
|
|
>
|
|
<span>Learn about the Framework</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HomepageTopSection
|