hero, sponsor, support section added to home.

components/home-utils/get-started.tsx

@@ -0,0 +1,159 @@
+import Link from "next/link";
+
+export default function GetStarted({ className }: { className: string }) {
+  return (
+    <Link href="/docs" className={`cta-button ${className}`}>
+      Get started
+      <div className="star-1">
+        <svg
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 784.11 815.53"
+          style={{
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            imageRendering: "-webkit-optimize-contrast",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          version="1.1"
+          xmlSpace="preserve"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g id="Layer_x0020_1">
+            <metadata id="CorelCorpID_0Corel-Layer"></metadata>
+            <path
+              d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
+              className="star-fill"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div className="star-2">
+        <svg
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 784.11 815.53"
+          style={{
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            imageRendering: "-webkit-optimize-contrast",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          version="1.1"
+          xmlSpace="preserve"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g id="Layer_x0020_1">
+            <metadata id="CorelCorpID_0Corel-Layer"></metadata>
+            <path
+              d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
+              className="star-fill"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div className="star-3">
+        <svg
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 784.11 815.53"
+          style={{
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            imageRendering: "-webkit-optimize-contrast",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          version="1.1"
+          xmlSpace="preserve"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g id="Layer_x0020_1">
+            <metadata id="CorelCorpID_0Corel-Layer"></metadata>
+            <path
+              d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
+              className="star-fill"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div className="star-4">
+        <svg
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 784.11 815.53"
+          style={{
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            imageRendering: "-webkit-optimize-contrast",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          version="1.1"
+          xmlSpace="preserve"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g id="Layer_x0020_1">
+            <metadata id="CorelCorpID_0Corel-Layer"></metadata>
+            <path
+              d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
+              className="star-fill"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div className="star-5">
+        <svg
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 784.11 815.53"
+          style={{
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            imageRendering: "-webkit-optimize-contrast",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          version="1.1"
+          xmlSpace="preserve"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g id="Layer_x0020_1">
+            <metadata id="CorelCorpID_0Corel-Layer"></metadata>
+            <path
+              d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
+              className="star-fill"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div className="star-6">
+        <svg
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 784.11 815.53"
+          style={{
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            imageRendering: "-webkit-optimize-contrast",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          version="1.1"
+          xmlSpace="preserve"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g id="Layer_x0020_1">
+            <metadata id="CorelCorpID_0Corel-Layer"></metadata>
+            <path
+              d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
+              className="star-fill"
+            ></path>
+          </g>
+        </svg>
+      </div>
+    </Link>
+  );
+}

components/home-utils/hero.tsx

@@ -0,0 +1,49 @@
+import CresteemBrandMark from "../utils/cresteem-logo";
+import NPMInstall from "../utils/npm-install";
+import GetStarted from "./get-started";
+import Universe from "./universe";
+
+export default function Hero() {
+  return (
+    <section className="py-[5%]">
+      <div className="max-w-screen-xl mx-auto text-gray-600 gap-x-12 items-center justify-between overflow-hidden md:flex md:px-8">
+        <div className="flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl">
+          <h1 className="text-sm text-primary font-medium">
+            One Tool, All Search Engines.
+          </h1>
+          <h2 className="text-4xl text-gray-800 font-extrabold mx-auto md:text-5xl">
+            <span className="text-primary">Hawk.js:</span> Let Search Engines
+            Finally Notice You –{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#51c1b5] to-[#2d6a8a]">
+              No More Hiding!
+            </span>
+          </h2>
+          <p>
+            Automates your SEO process by effortlessly submitting your sitemap,
+            ensuring search engines like Google, Bing, Yahoo, DuckDuckGo,
+            Yandex, Naver, Seznam.cz, and Yep stay updated with your latest
+            content.
+          </p>
+          <div className="items-center justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0">
+            <NPMInstall className="relative w-full" />
+            <GetStarted className="bg-primary w-[70%] px-[10%] py-[6px] text-white font-semibold tracking-wider  rounded-lg text-center border-[2px] hover:bg-primary/[80%] border-primary" />
+          </div>
+        </div>
+        <div className="w-full">
+          <Universe />
+        </div>
+      </div>
+      <div className="mt-14 px-4 md:px-8">
+        <p className="text-center text-sm text-gray-700 font-semibold">
+          Sponsor by the best companies
+        </p>
+        <div className="flex justify-center items-center flex-wrap gap-x-12 gap-y-6 mt-6 text-primary">
+          <CresteemBrandMark classNames="w-[190px]" />
+          <a className="bl" href="/sponsors">
+            Your Logo can be Here
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

components/home-utils/sponsor-home.tsx

@@ -0,0 +1,55 @@
+import CresteemBrandMark from "../utils/cresteem-logo";
+import SponsorButton from "../utils/sponsor-button";
+
+export default function SponsorHome() {
+  return (
+    <section className="py-14">
+      <div className="max-w-screen-xl mx-auto px-4 text-gray-600 md:px-8">
+        <div className="relative z-10 max-w-2xl mx-auto sm:text-center">
+          <h3 className="text-gray-800 text-3xl font-semibold sm:text-4xl">
+            Sponsor Hawk.js
+          </h3>
+          <p className="mt-3 text-justify leading-loose">
+            Hawk.js is a powerful open-source project, built and maintained by{" "}
+            <a
+              href="https://cresteem.com/"
+              className="text-deep"
+              target="_blank"
+            >
+              Cresteem
+            </a>
+            , a software agency dedicated to pushing the boundaries of web
+            development and SEO automation. By sponsoring Hawk.js, you support
+            the growth of a tool that’s making an impact on developers,
+            businesses, and digital marketers worldwide.
+          </p>
+          <a href="https://cresteem.com/" target="_blank">
+            <CresteemBrandMark classNames="py-10 text-black w-[80%] mx-auto" />
+          </a>
+        </div>
+        <div className="relative mt-8 mx-auto max-w-2xl text-justify">
+          <h4 className="font-bold text-primary">Why Sponsor?</h4>
+          <ul className="leading-loose">
+            <li>
+              <span className="font-medium">Visibility:</span> Get featured on
+              our website and documentation with your logo and backlink.
+            </li>
+            <li>
+              <span className="font-medium">Priority Support:</span> Enjoy
+              dedicated support and priority for feature requests.
+            </li>
+            <li>
+              <span className="font-medium">Impact:</span> Support the
+              development of a tool that empowers the community and
+              revolutionizes SEO.
+            </li>
+          </ul>
+          <a href="/sponsors" className="text-deep underline">
+            Explore more about sponsorship
+          </a>
+          <SponsorButton className="my-8" />
+        </div>
+      </div>
+    </section>
+  );
+}

components/home-utils/support-home.tsx

@@ -0,0 +1,78 @@
+import { RiGithubFill, RiTelegramFill } from "react-icons/ri";
+
+export default function SupportHome() {
+  const contactMethods = [
+    {
+      icon: <RiGithubFill size={30} />,
+      title: "Follow us on GitHub",
+      desc: "To file new issues, contribute to the project, and check the latest status updates.",
+      link: {
+        name: "Explore Repository",
+        href: "https://github.com/cresteem/Hawk.js",
+      },
+    },
+    {
+      icon: <RiTelegramFill size={30} />,
+
+      title: "Join us on Telegram",
+      desc: "For quick troubleshooting, integration assistance, and real-time user support.",
+      link: {
+        name: "Ask your Questions",
+        href: "https://t.me/cresteem/6",
+      },
+    },
+  ];
+
+  return (
+    <section className="py-14">
+      <div className="max-w-screen-xl mx-auto px-4 text-gray-600 gap-12 md:px-8 lg:flex">
+        <div className="max-w-md">
+          <h3 className="text-gray-800 text-3xl font-semibold sm:text-4xl">
+            Stay Connected & Contribute
+          </h3>
+          <p className="mt-3">
+            Whether you’re just getting started with Hawk.js or running into
+            issues, we’ve got you covered.
+          </p>
+        </div>
+        <div>
+          <ul className="mt-12 gap-y-6 gap-x-12 items-center md:flex lg:gap-x-0 lg:mt-0">
+            {contactMethods.map((item, idx) => (
+              <li
+                key={idx}
+                className="space-y-3 border-t py-6 md:max-w-sm md:py-0 md:border-t-0 lg:border-l lg:px-12 lg:max-w-none"
+              >
+                <div className="w-12 h-12 rounded-full border flex items-center justify-center text-gray-700">
+                  {item.icon}
+                </div>
+                <h4 className="text-gray-800 text-lg font-medium xl:text-xl">
+                  {item.title}
+                </h4>
+                <p>{item.desc}</p>
+                <a
+                  href={item.link.href}
+                  className="flex items-center gap-1 text-sm text-primary duration-150 hover:text-indigo-400 font-medium"
+                  target="_blank"
+                >
+                  {item.link.name}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    className="w-5 h-5"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}