First public commit

components/home/features.tsx

@@ -0,0 +1,64 @@
+import Bell from "@/components/icons/bell.svg";
+import Chat from "@/components/icons/chat.svg";
+import Clock from "@/components/icons/clock.svg";
+import DeviceMobile from "@/components/icons/device-mobile.svg";
+import * as React from "react";
+
+const Features: React.VoidFunctionComponent = () => {
+  return (
+    <div className="py-16 px-8 max-w-7xl mx-auto">
+      <h2 className="heading">Features</h2>
+      <p className="subheading">Everything you need to get the job done</p>
+      <div className="grid grid-cols-2 gap-12">
+        <div className="col-span-2 md:col-span-1">
+          <div className="p-3 bg-green-100/50 text-green-400 inline-block rounded-2xl mb-4">
+            <Clock className="w-8 h-8" />
+          </div>
+          <h3 className="heading-sm flex items-center">
+            Time slots
+            <span className="ml-2 font-normal text-sm bg-green-500 text-white rounded-full px-2 py-1">
+              New
+            </span>
+          </h3>
+          <p className="text">
+            If you need more granular options, Rallly lets you choose time slots
+            as options. If your participants are international, they can see
+            times in on their own time zone.
+          </p>
+        </div>
+        <div className="col-span-2 md:col-span-1">
+          <div className="p-3 bg-cyan-100/50 text-cyan-400 inline-block rounded-2xl mb-4">
+            <DeviceMobile className="w-8 h-8" />
+          </div>
+          <h3 className="heading-sm">Mobile friendly design</h3>
+          <p className="text">
+            Rallly is optimized to look and work great on mobile devices so you
+            and your participants can use it on the go.
+          </p>
+        </div>
+        <div className="col-span-2 md:col-span-1">
+          <div className="p-3 bg-rose-100/50 text-rose-400 inline-block rounded-2xl mb-4">
+            <Bell className="w-8 h-8" />
+          </div>
+          <h3 className="heading-sm">Notifications</h3>
+          <p className="text">
+            Need help staying on top of things? Rallly can send you an email
+            whenever participants vote or comment on your poll.
+          </p>
+        </div>
+        <div className="col-span-2 md:col-span-1">
+          <div className="p-3 bg-yellow-100/50 text-yellow-400 inline-block rounded-2xl mb-4">
+            <Chat className="w-8 h-8" />
+          </div>
+          <h3 className="heading-sm">Comments</h3>
+          <p className="text">
+            Got a question or just have something to say? You and your
+            participants can comment on polls to start a discussion.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Features;