forked from mrwyndham/fastpocket
154 lines
6.2 KiB
Markdown
154 lines
6.2 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Description On Left Icon Blocks On Right
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/IconSections/DescriptionOnLeftIconBlocksOnRight.tsx"
|
|
<>
|
|
{/* <!-- Icon Blocks --> */}
|
|
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|
{/* <!-- Grid --> */}
|
|
<div className="grid md:grid-cols-2 gap-12">
|
|
<div className="lg:w-3/4">
|
|
<h2 className="text-3xl text-secondary-content font-bold lg:text-4xl">
|
|
Collaborative tools to design better user experience
|
|
</h2>
|
|
<p className="mt-3 text-secondary-content">
|
|
We help businesses bring ideas to life in the digital world, by
|
|
designing and implementing the technology tools that they need to
|
|
win.
|
|
</p>
|
|
<p className="mt-5">
|
|
<a
|
|
className="inline-flex items-center gap-x-1 font-medium text-primary"
|
|
href="#"
|
|
>
|
|
Contact sales to learn more
|
|
<svg
|
|
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
|
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>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
{/* <!-- End Col --> */}
|
|
|
|
<div className="space-y-6 lg:space-y-10">
|
|
{/* <!-- Icon Block --> */}
|
|
<div className="flex">
|
|
{/* <!-- Icon --> */}
|
|
<span className="flex-shrink-0 inline-flex justify-center items-center w-[46px] rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm mx-auto">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
|
</svg>
|
|
</span>
|
|
<div className="ms-5 sm:ms-8">
|
|
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
|
Industry-leading documentation
|
|
</h3>
|
|
<p className="mt-1 text-secondary-content">
|
|
Our documentation and extensive Client libraries contain
|
|
everything a business needs to build a custom integration in a
|
|
fraction of the time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Icon Block --> */}
|
|
|
|
{/* <!-- Icon Block --> */}
|
|
<div className="flex">
|
|
{/* <!-- Icon --> */}
|
|
<span className="flex-shrink-0 inline-flex justify-center items-center w-[46px] rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm mx-auto">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
|
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
|
</svg>
|
|
</span>
|
|
<div className="ms-5 sm:ms-8">
|
|
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
|
Developer community support
|
|
</h3>
|
|
<p className="mt-1 text-secondary-content">
|
|
We actively contribute to open-source projects—giving back to
|
|
the community through development, patches, and sponsorships.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Icon Block --> */}
|
|
|
|
{/* <!-- Icon Block --> */}
|
|
<div className="flex">
|
|
{/* <!-- Icon --> */}
|
|
<span className="flex-shrink-0 inline-flex justify-center items-center w-[46px] rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm mx-auto">
|
|
<svg
|
|
className="flex-shrink-0 w-5"
|
|
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="M7 10v12" />
|
|
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
|
|
</svg>
|
|
</span>
|
|
<div className="ms-5 sm:ms-8">
|
|
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
|
Simple and affordable
|
|
</h3>
|
|
<p className="mt-1 text-secondary-content">
|
|
From boarding passes to movie tickets, there's pretty much
|
|
nothing you can't store with FastPocket.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Icon Block --> */}
|
|
</div>
|
|
{/* <!-- End Col --> */}
|
|
</div>
|
|
{/* <!-- End Grid --> */}
|
|
</div>
|
|
{/* <!-- End Icon Blocks --> */}
|
|
</>
|
|
```
|