Clean

.gitignore

@@ -25,3 +25,5 @@ yarn-error.log*
 #user generated content
 public/profile.json
 public/beat.mp3
+.next/
+out/

components/DarkSwitch.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+
+const ThemeChanger = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="flex items-center">
+      {theme === "dark" ? (
+        <button
+          onClick={() => setTheme("light")}
+          className="text-gray-300 rounded-full outline-none focus:outline-none">
+          <span className="sr-only">Light Mode</span>
+
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-5 h-5"
+            viewBox="0 0 20 20"
+            fill="currentColor">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+          </svg>
+        </button>
+      ) : (
+        <button
+          onClick={() => setTheme("dark")}
+          className="text-gray-500 rounded-full outline-none focus:outline-none focus-visible:ring focus-visible:ring-gray-100 focus:ring-opacity-20">
+          <span className="sr-only">Dark Mode</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <circle cx="12" cy="12" r="5" />
+            <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ThemeChanger;

components/benefits.js

@@ -0,0 +1,76 @@
+import Image from "next/image";
+import React from "react";
+import Container from "./container";
+
+export default function Benefits(props) {
+  const { data } = props;
+
+  return (
+    <>
+      <Container className="flex flex-wrap mb-20 lg:gap-10 lg:flex-nowrap ">
+        <div
+          className={`flex items-center justify-center w-full lg:w-1/2 ${
+            props.imgPos === "right" ? "lg:order-1" : ""
+          }`}>
+          <div>
+            <Image
+              src={data.image}
+              width="521"
+              height="482"
+              alt="Benefits"
+              layout="intrinsic"
+              placeholder="blur"
+            />
+          </div>
+        </div>
+
+        <div
+          className={`flex flex-wrap items-center w-full lg:w-1/2 ${
+            props.imgPos === "right" ? "lg:justify-end" : ""
+          }`}>
+          <div>
+            <div className="flex flex-col w-full mt-4">
+              <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white">
+                {data.title}
+              </h3>
+
+              <p className="max-w-2xl py-4 text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">
+                {data.desc}
+              </p>
+            </div>
+
+            <div className="w-full mt-5">
+              {data.bullets.map((item, index) => (
+                <Benefit key={index} title={item.title} icon={item.icon}>
+                  {item.desc}
+                </Benefit>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+}
+
+function Benefit(props) {
+  return (
+    <>
+      <div className="flex items-start mt-8 space-x-3">
+        <div className="flex items-center justify-center flex-shrink-0 mt-1 bg-indigo-500 rounded-md w-11 h-11 ">
+          {React.cloneElement(props.icon, {
+            className: "w-7 h-7 text-indigo-50",
+          })}
+        </div>
+        <div>
+          <h4 className="text-xl font-medium text-gray-800 dark:text-gray-200">
+            {props.title}
+          </h4>
+          <p className="mt-1 text-gray-500 dark:text-gray-400">
+            {props.children}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}

components/container.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Container(props) {
+  return (
+    <div
+      className={`container p-8 mx-auto xl:px-0 ${
+        props.className ? props.className : ""
+      }`}>
+      {props.children}
+    </div>
+  );
+}

components/cta.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Container from "./container";
+
+export default function Cta() {
+  return (
+    <Container>
+      <div className="flex flex-wrap items-center justify-between w-full max-w-4xl gap-5 mx-auto text-white bg-indigo-600 px-7 py-7 lg:px-12 lg:py-12 lg:flex-nowrap rounded-xl">
+        <div className="flex-grow text-center lg:text-left">
+          <h2 className="text-2xl font-medium lg:text-3xl">
+            Ready to try-out this template?
+          </h2>
+          <p className="mt-2 font-medium text-white text-opacity-90 lg:text-xl">
+            Don't let your visitors see a poor landing.
+          </p>
+        </div>
+        <div className="flex-shrink-0 w-full text-center lg:w-auto">
+          <a
+            href="https://github.com/web3templates"
+            target="_blank"
+            rel="noopener"
+            className="inline-block py-3 mx-auto text-lg font-medium text-center text-indigo-600 bg-white rounded-md px-7 lg:px-10 lg:py-5 ">
+            Download for Free
+          </a>
+        </div>
+      </div>
+    </Container>
+  );
+}

components/data.js

@@ -0,0 +1,59 @@
+import {
+  EmojiHappyIcon,
+  ChartSquareBarIcon,
+  CursorClickIcon,
+  DeviceMobileIcon,
+  AdjustmentsIcon,
+  SunIcon,
+} from "@heroicons/react/outline";
+
+import benefitOneImg from "../public/img/benefit-one.png";
+import benefitTwoImg from "../public/img/benefit-two.png";
+
+const benefitOne = {
+  title: "Benefits with Smaller Studios",
+  desc: "Some of the reasons to choose Smaller Studios",
+  image: benefitOneImg,
+  bullets: [
+    {
+      title: "We Understand your customers",
+      desc: "",
+      icon: <EmojiHappyIcon />,
+    },
+    {
+      title: "We try to Improve acquisition",
+      desc: "",
+      icon: <ChartSquareBarIcon />,
+    },
+    {
+      title: "We Drive customer retention",
+      desc: "",
+      icon: <CursorClickIcon />,
+    },
+  ],
+};
+
+const benefitTwo = {
+  title: "some design benefits with smaller studios",
+  desc: "we love design it is what we do",
+  image: benefitTwoImg,
+  bullets: [
+    {
+      title: "Mobile Responsive Design",
+      desc: "",
+      icon: <DeviceMobileIcon />,
+    },
+    {
+      title: "Performance",
+      desc: "",
+      icon: <AdjustmentsIcon />,
+    },
+    {
+      title: "Dark & Light Mode",
+      desc: "",
+      icon: <SunIcon />,
+    },
+  ],
+};
+
+export { benefitOne, benefitTwo };

components/faq.js

@@ -0,0 +1,55 @@
+import React from "react";
+import Container from "./container";
+import { Disclosure } from "@headlessui/react";
+import { ChevronUpIcon } from "@heroicons/react/solid";
+
+export default function Faq() {
+  return (
+    <Container className="!p-0">
+      <div className="w-full max-w-2xl p-2 mx-auto rounded-2xl">
+        {faqdata.map((item, index) => (
+          <div key={item.question} className="mb-5">
+            <Disclosure>
+              {({ open }) => (
+                <>
+                  <Disclosure.Button className="flex items-center justify-between w-full px-4 py-4 text-lg text-left text-gray-800 rounded-lg bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-indigo-100 focus-visible:ring-opacity-75 dark:bg-trueGray-800 dark:text-gray-200">
+                    <span>{item.question}</span>
+                    <ChevronUpIcon
+                      className={`${
+                        open ? "transform rotate-180" : ""
+                      } w-5 h-5 text-indigo-500`}
+                    />
+                  </Disclosure.Button>
+                  <Disclosure.Panel className="px-4 pt-4 pb-2 text-gray-500 dark:text-gray-300">
+                    {item.answer}
+                  </Disclosure.Panel>
+                </>
+              )}
+            </Disclosure>
+          </div>
+        ))}
+      </div>
+    </Container>
+  );
+}
+
+const faqdata = [
+  {
+    question: "Is this template completely free to use?",
+    answer: "Yes, this template is completely free to use.",
+  },
+  {
+    question: "Can I use it in a commercial project?",
+    answer: "Yes, this you can.",
+  },
+  {
+    question: "What is your refund policy? ",
+    answer:
+      "If you're unhappy with your purchase for any reason, email us within 90 days and we'll refund you in full, no questions asked.",
+  },
+  {
+    question: "Do you offer technical support? ",
+    answer:
+      "No, we don't offer technical support for free downloads. Please purchase a support plan to get 6 months of support.",
+  },
+];