forked from mrwyndham/fastpocket
171 lines
6.8 KiB
TypeScript
171 lines
6.8 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
|
|
function ContainerImageIconBlocksFeature() {
|
|
return (
|
|
<>
|
|
{/* 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_713x640.webp"
|
|
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 Preline 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 */}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ContainerImageIconBlocksFeature;
|