forked from mrwyndham/fastpocket
156 lines
6.4 KiB
Markdown
156 lines
6.4 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Polygon Background Element
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/HeroSections/PolygonBackgroundElement.tsx"
|
|
<>
|
|
{/* <!-- Hero --> */}
|
|
<div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/polygon-bg-element.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-[1] before:transform before:-translate-x-1/2 dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')]">
|
|
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
|
|
{/* <!-- Announcement Banner --> */}
|
|
<div className="flex justify-center">
|
|
<a
|
|
className="inline-flex items-center gap-x-2 bg-base-100 border border-base-200 text-sm text-base-content p-1 ps-3 rounded-full transition hover:base-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-base-100"
|
|
href="#"
|
|
>
|
|
PRO release - Join to waitlist
|
|
<span className="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-base-200 font-semibold text-sm text-base-content">
|
|
<svg
|
|
className="flex-shrink-0 size-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="m9 18 6-6-6-6" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{/* <!-- End Announcement Banner --> */}
|
|
|
|
{/* <!-- Title --> */}
|
|
<div className="mt-5 max-w-2xl text-center mx-auto">
|
|
<h1 className="block font-bold text-base-content text-4xl md:text-5xl lg:text-6xl">
|
|
Let's Build
|
|
<span className="bg-clip-text bg-gradient-to-tl from-primary to-accent text-transparent">
|
|
Together
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
{/* <!-- End Title --> */}
|
|
|
|
<div className="mt-5 max-w-3xl text-center mx-auto">
|
|
<p className="text-lg text-base-content">
|
|
FastPocket UI is an open-source set of prebuilt UI components,
|
|
ready-to-use examples and Figma design system based on the
|
|
utility-first Tailwind CSS framework.
|
|
</p>
|
|
</div>
|
|
|
|
{/* <!-- Buttons --> */}
|
|
<div className="mt-8 gap-3 flex justify-center">
|
|
<a
|
|
className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-primary to-accent hover:from-accent hover:to-primary border border-transparent text-base-100 text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-base-100 py-3 px-4 dark:focus:ring-offset-base-200"
|
|
href="#"
|
|
>
|
|
Get started
|
|
<svg
|
|
className="flex-shrink-0 size-4"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
className="relative group p-2 ps-3 inline-flex items-center gap-x-2 text-sm font-mono rounded-lg border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-base-300 dark:border-base-100 dark:hover:bg-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
|
>
|
|
$ npm i FastPocket
|
|
<span className="flex justify-center items-center bg-base-200 rounded-md size-7 text-base-300">
|
|
<svg
|
|
className="flex-shrink-0 size-4 group-hover:rotate-6 transition"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
|
|
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
{/* <!-- End Buttons --> */}
|
|
|
|
<div className="mt-5 flex justify-center items-center gap-x-1 sm:gap-x-3">
|
|
<span className="text-sm text-base-content">
|
|
Package Manager:
|
|
</span>
|
|
<span className="text-sm font-bold text-base-content">
|
|
npm
|
|
</span>
|
|
<svg
|
|
className="size-5 text-base-200"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M6 13L10 3"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<a
|
|
className="inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 hover:underline font-medium"
|
|
href="#"
|
|
>
|
|
Installation Guide
|
|
<svg
|
|
className="flex-shrink-0 size-4"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Hero --> */}
|
|
</>
|
|
```
|