forked from mrwyndham/fastpocket
6.8 KiB
6.8 KiB
| sidebar_position |
|---|
| 2 |
Container Image Icon Blocks
<>
{/* Features */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
{/* HIDDEN */}
<div className="hidden aspect-w-16 aspect-h-7 rounded-xl">
<Image
className="w-full object-contain max-h-[40rem] rounded-xl"
width="1000"
height="1000"
src="/images/fastpocket-diagram.png"
alt="Image Description"
/>
</div>
{/* Grid */}
<div className="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
<div className="lg:col-span-1">
<h2 className="font-bold text-2xl md:text-3xl text-base-content ">
Want To Build Fast?
</h2>
<p className="mt-2 md:mt-4 text-base-content/80">
There is so much to do in order to get an application developed.
Just getting the essentials together like payments and emails is
an enormous undertaking. That's why FastPocket exists. To
give you the essentials so you can focus on what makes your app
unique.
</p>
</div>
{/* End Col */}
<div className="lg:col-span-2">
<div className="grid sm:grid-cols-2 gap-8 md:gap-12">
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<rect width={18} height={10} x={3} y={11} rx={2} />
<circle cx={12} cy={5} r={2} />
<path d="M12 7v4" />
<line x1={8} x2={8} y1={16} y2={16} />
<line x1={16} x2={16} y1={16} y2={16} />
</svg>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Payments
</h3>
<p className="mt-1 text-base-content/80 ">
FastPocket includes Stripe for simple payment so that you
can get profitable quickly. All your products in Stripe
automatically syncronize with Pocketbase meaning no
additional work for you
</p>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="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>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Style
</h3>
<p className="mt-1 text-base-content/80 ">
FastPocket includes components to help you get styling your
codebase really quickly. We use TailwindCSS, DaisyUI and
Modified FastPocket components in order to fit the look and
feel of your brand
</p>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="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>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Email
</h3>
<p className="mt-1 text-base-content/80 ">
We know how annoying it is to setup email and that is why we
provide email templates as well as frameworks for building
your own emails for signup verifications and more
</p>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx={9} cy={7} r={4} />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Backend
</h3>
<p className="mt-1 text-base-content/80 ">
We provide Pocketbase + stripe build templates to ship your
product with no hassle. This includes login and payment for
reoccuring and one time transactions
</p>
</div>
</div>
{/* End Icon Block */}
</div>
</div>
{/* End Col */}
</div>
{/* End Grid */}
</div>
{/* End Features */}
</>