forked from mrwyndham/fastpocket
117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
import React from "react";
|
|
|
|
function SolidBackgrondIcon() {
|
|
return (
|
|
<>
|
|
{/* Icon Blocks */}
|
|
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
|
|
{/* Icon Block */}
|
|
<a
|
|
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
|
|
href="#"
|
|
>
|
|
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
|
|
<svg
|
|
className="flex-shrink-0 size-6 text-white"
|
|
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={10} height={14} x={3} y={8} rx={2} />
|
|
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
|
<path d="M8 18h.01" />
|
|
</svg>
|
|
</div>
|
|
<div className="mt-5">
|
|
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
|
Stripe Payments
|
|
</h3>
|
|
<p className="mt-1 text-base-content ">
|
|
We have built stripe payments for 1 off and reoccuring payments
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{/* End Icon Block */}
|
|
{/* Icon Block */}
|
|
<a
|
|
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
|
|
href="#"
|
|
>
|
|
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
|
|
<svg
|
|
className="flex-shrink-0 size-6 text-white"
|
|
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="M20 7h-9" />
|
|
<path d="M14 17H5" />
|
|
<circle cx={17} cy={17} r={3} />
|
|
<circle cx={7} cy={7} r={3} />
|
|
</svg>
|
|
</div>
|
|
<div className="mt-5">
|
|
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
|
Theming
|
|
</h3>
|
|
<p className="mt-1 text-base-content ">
|
|
All our components include intuative theming with a js utility
|
|
class that uses your themes colors programmatically
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{/* End Icon Block */}
|
|
{/* Icon Block */}
|
|
<a
|
|
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
|
|
href="#"
|
|
>
|
|
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
|
|
<svg
|
|
className="flex-shrink-0 size-6 text-white"
|
|
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>
|
|
<div className="mt-5">
|
|
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
|
Documentation
|
|
</h3>
|
|
<p className="mt-1 text-base-content ">
|
|
Every component and plugin is well documented
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{/* End Icon Block */}
|
|
</div>
|
|
</div>
|
|
{/* End Icon Blocks */}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SolidBackgrondIcon;
|