forked from mrwyndham/fastpocket
259 lines
9.6 KiB
TypeScript
259 lines
9.6 KiB
TypeScript
import React from "react";
|
|
import iconClipboard from "@/images/icon-clipboard.svg";
|
|
import iconClock from "@/images/icon-clock.svg";
|
|
import iconLink from "@/images/icon-link.svg";
|
|
import iconUsDollar from "@/images/icon-us-dollar.svg";
|
|
import iconUser from "@/images/icon-user.svg";
|
|
import iconVector from "@/images/icon-vector.svg";
|
|
import Image from "next/image";
|
|
|
|
const FeaturesBlocks = () => {
|
|
return (
|
|
<section>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
|
<div className="py-8 md:py-10">
|
|
{/* Section header */}
|
|
<div className="max-w-3xl mx-auto text-center pb-6 md:pb-8">
|
|
<h2 className="mb-4 text-black dark:text-white">
|
|
Say Goodbye To Manual Data Entry With Sign365.
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Items */}
|
|
<div
|
|
className="max-w-sm mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-16 items-start md:max-w-2xl lg:max-w-none"
|
|
data-aos-id-blocks
|
|
>
|
|
{/* 1st item */}
|
|
<div
|
|
className="relative flex flex-col items-center"
|
|
data-aos="fade-up"
|
|
data-aos-anchor="[data-aos-id-blocks]"
|
|
>
|
|
<div className="relative flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-16 h-16"
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<rect
|
|
className="fill-current text-pink-550"
|
|
width="64"
|
|
height="64"
|
|
rx="32"
|
|
/>
|
|
</svg>
|
|
<Image
|
|
className="absolute w-[50%]"
|
|
src={iconClipboard}
|
|
alt="Enter Data Once"
|
|
/>
|
|
</div>
|
|
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
|
Enter Data Once
|
|
</h3>
|
|
<p className="text-lg text-black dark:text-gray-200 text-center">
|
|
Say goodbye to manual data entry with Sign365's offline
|
|
forms. Enter data once and let our app do the rest. We'll
|
|
send the information to your business systems, saving you time
|
|
and effort.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 2nd item */}
|
|
<div
|
|
className="relative flex flex-col items-center"
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
data-aos-anchor="[data-aos-id-blocks]"
|
|
>
|
|
<div className="relative flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-16 h-16"
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<rect
|
|
className="fill-current text-pink-550"
|
|
width="64"
|
|
height="64"
|
|
rx="32"
|
|
/>
|
|
</svg>
|
|
<Image
|
|
className="absolute w-[50%]"
|
|
src={iconLink}
|
|
alt="Connect To Over 1000 Apps"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl text-black mb-2 text-center dark:text-white">
|
|
Connect To Over 1000 Apps
|
|
</h3>
|
|
<p className="text-lg text-black dark:text-gray-200 text-center">
|
|
Sign365 can submit information to over 1000 apps. Whether you
|
|
use Salesforce, Hubspot, or any other business app, Sign365 has
|
|
got you covered.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 3rd item */}
|
|
<div
|
|
className="relative flex flex-col items-center"
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
data-aos-anchor="[data-aos-id-blocks]"
|
|
>
|
|
<div className="relative flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-16 h-16"
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<rect
|
|
className="fill-current text-pink-550"
|
|
width="64"
|
|
height="64"
|
|
rx="32"
|
|
/>
|
|
</svg>
|
|
<Image
|
|
className="absolute w-[40%]"
|
|
src={iconClock}
|
|
alt="Start Time Saving"
|
|
/>
|
|
</div>
|
|
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
|
Start Time Saving
|
|
</h3>
|
|
<p className="text-lg text-black dark:text-gray-200 text-center">
|
|
With Sign365, you'll save valuable time that you can then
|
|
invest in other aspects of your business. Our offline forms
|
|
collect and send your data, so you can complete more tasks
|
|
faster.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 4th item */}
|
|
<div
|
|
className="relative flex flex-col items-center"
|
|
data-aos="fade-up"
|
|
data-aos-delay="600"
|
|
data-aos-anchor="[data-aos-id-blocks]"
|
|
>
|
|
<div className="relative flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-16 h-16"
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<rect
|
|
className="fill-current text-pink-550"
|
|
width="64"
|
|
height="64"
|
|
rx="32"
|
|
/>
|
|
</svg>
|
|
<Image
|
|
className="absolute w-[40%]"
|
|
src={iconUsDollar}
|
|
alt="Start Saving Money"
|
|
/>
|
|
</div>
|
|
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
|
Start Saving Money
|
|
</h3>
|
|
<p className="text-lg text-black dark:text-gray-200 text-center">
|
|
Sign365's offline forms can help you save money on staffing
|
|
and data entry costs. By automating your data collection, you
|
|
can reduce labor costs and increase profits.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 5th item */}
|
|
<div
|
|
className="relative flex flex-col items-center"
|
|
data-aos="fade-up"
|
|
data-aos-delay="800"
|
|
data-aos-anchor="[data-aos-id-blocks]"
|
|
>
|
|
<div className="relative flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-16 h-16"
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<rect
|
|
className="fill-current text-pink-550"
|
|
width="64"
|
|
height="64"
|
|
rx="32"
|
|
/>
|
|
</svg>
|
|
<Image
|
|
className="absolute w-[40%]"
|
|
src={iconVector}
|
|
alt="Your Forms Your Way"
|
|
/>
|
|
</div>
|
|
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
|
Your Forms Your Way
|
|
</h3>
|
|
<p className="text-lg text-black dark:text-gray-200 text-center">
|
|
With Sign365, you have full control over your offline forms.
|
|
Create forms that for your business needs and customise them to
|
|
match your brand. Get started with Sign365 today and start
|
|
collecting data the way you want.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 6th item */}
|
|
<div
|
|
className="relative flex flex-col items-center"
|
|
data-aos="fade-up"
|
|
data-aos-delay="1000"
|
|
data-aos-anchor="[data-aos-id-blocks]"
|
|
>
|
|
<div className="relative flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-16 h-16"
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<rect
|
|
className="fill-current text-pink-550"
|
|
width="64"
|
|
height="64"
|
|
rx="32"
|
|
/>
|
|
</svg>
|
|
<Image
|
|
className="absolute w-[40%]"
|
|
src={iconUser}
|
|
alt="Collect Customer Info"
|
|
/>
|
|
</div>
|
|
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
|
Collect Customer Info
|
|
</h3>
|
|
<p className="text-lg text-black dark:text-gray-200 text-center">
|
|
Sign365's offline digital forms capture accurate and secure
|
|
customer information. You can customise your forms to send
|
|
information where you need it. Ensuring you have the insights to
|
|
make informed business decisions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeaturesBlocks;
|