added newsletter and some other stuffs

app/page.tsx

@@ -2,14 +2,16 @@ import About from "@/components/shared/About";
 import Hero from "@/components/shared/Hero";
 import HowItWorks from "@/components/shared/HowItWorks";
 import Navbar from "@/components/shared/Navbar";
+import Newsletter from "@/components/shared/Newsletter";
 
 const RootPage = () => {
   return (
     <>
       <Navbar />
       <Hero />
-      <About />
       <HowItWorks />
+      <About />
+      <Newsletter />
     </>
   );
 };

components/shared/FAQ.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Faq = () => {
+  return <div>Faq</div>;
+};
+
+export default Faq;

components/shared/Hero.tsx

@@ -95,7 +95,7 @@ const Hero = () => {
             ) : (
               <Check className="w-4 h-4 mr-2" />
             )}
-            {command.slice(0, 40)}
+            {command.slice(0, 39)}...
           </Button>
           <p className="hidden lg:block">|</p>
           <p className="block lg:hidden">or</p>

components/shared/HeroCards.tsx

@@ -115,7 +115,34 @@ const HeroCards = () => {
             })}
           >
             <span className="sr-only">X icon</span>
-            <Twitter />
+            <div className="hidden dark:block">
+              <svg
+                width="25"
+                height="25"
+                viewBox="0 0 25 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.0039 2.34375H22.4512L14.9219 10.9473L23.7793 22.6562H16.8457L11.4111 15.5566L5.2002 22.6562H1.74805L9.7998 13.4521L1.30859 2.34375H8.41797L13.3252 8.83301L19.0039 2.34375ZM17.793 20.5957H19.7021L7.37793 4.29688H5.32715L17.793 20.5957Z"
+                  fill="white"
+                />
+              </svg>
+            </div>
+            <div className="dark:hidden block">
+              <svg
+                width="25"
+                height="25"
+                viewBox="0 0 25 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.0039 2.34375H22.4512L14.9219 10.9473L23.7793 22.6562H16.8457L11.4111 15.5566L5.2002 22.6562H1.74805L9.7998 13.4521L1.30859 2.34375H8.41797L13.3252 8.83301L19.0039 2.34375ZM17.793 20.5957H19.7021L7.37793 4.29688H5.32715L17.793 20.5957Z"
+                  fill="black"
+                />
+              </svg>
+            </div>
           </Link>
           <Link
             href={cards.aboutCard.socialLinks.Mastodon}
@@ -320,6 +347,7 @@ const HeroCards = () => {
           </span>
         </div>
       </Card>
+
       {/* Service  */}
       <Card className="absolute w-[350px] -right-[10px] bottom-[75px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
         <CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">

components/shared/HowItWorks.tsx

@@ -1,4 +1,6 @@
+import { Features } from "@/constants";
 import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 
 const HowItWorks = () => {
   return (
@@ -9,6 +11,23 @@ const HowItWorks = () => {
           development
         </span>
       </h2>
+      <p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
+        Beautifully designed components that you can copy and paste into your
+        apps. Accessible. Customizable. Open Source.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        {Features.map(({ icon, title, description }) => (
+          <Card key={title} className="bg-muted/50">
+            <CardHeader>
+              <CardTitle className="grid gap-4 place-items-center">
+                {icon}
+                {title}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>{description}</CardContent>
+          </Card>
+        ))}
+      </div>
     </section>
   );
 };

components/shared/MobileNav.tsx

@@ -53,15 +53,31 @@ const MobileNav = () => {
                 {label}
               </Link>
             ))}
-            {NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
+            {NAVBAR.rightLinks?.map(({ href, label, target }) => (
               <Link
                 key={label}
                 href={href}
                 target={target}
-                className={`w-[110px] ${buttonVariants({
+                className={`w-[110px] gap-2 ${buttonVariants({
                   variant: "secondary",
                 })}`}
-              ></Link>
+              >
+                <Image
+                  src="/next.svg"
+                  alt="git"
+                  width={23}
+                  height={23}
+                  className="hidden dark:block"
+                />
+                <Image
+                  src="/nextdark.svg"
+                  alt="git"
+                  width={23}
+                  height={23}
+                  className="block dark:hidden"
+                />
+                {label}
+              </Link>
             ))}
           </nav>
         </SheetContent>

components/shared/Newsletter.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+
+const Newsletter = () => {
+  const [submission, setSubmission] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+
+  const handleSubmit = async () => {
+    console.log("Done");
+  };
+
+  return (
+    <section id="newsletter">
+      <hr className="w-11/12 mx-auto" />
+      <div className="container py-24 md:py-32">
+        <h3 className="text-center text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600">
+          Join The Newsletter!
+        </h3>
+        <p className="text-lg text-muted-foreground text-center mt-4 mb-8">
+          Choosing the right website deployment option is important when
+          creating a website, because it directly impacts the user experience
+          and the resources required to run your website. Website deployment is
+          a process of publishing a website into a production hosting
+          environment
+        </p>
+        <form
+          className="relative flex flex-col w-full md:flex-row md:w-6/12 lg:w-4/12 mx-auto gap-4 md:gap-2"
+          onSubmit={handleSubmit}
+        ></form>
+      </div>
+    </section>
+  );
+};
+
+export default Newsletter;

components/shared/Partners.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Partners = () => {
+  return <div>Partners</div>;
+};
+
+export default Partners;

constants/index.tsx

@@ -1,3 +1,5 @@
+import { BadgeAlert, BarChart4, Cog, ShieldCheck } from "lucide-react";
+
 export const NAVBAR = {
   centerLinks: [
     {
@@ -48,3 +50,30 @@ export const stats = [
     count: 2,
   },
 ];
+
+export const Features = [
+  {
+    icon: <ShieldCheck className="w-10 h-10 text-primary" />,
+    title: "Complete Secured ",
+    description:
+      "lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
+  },
+  {
+    icon: <BadgeAlert className="w-10 h-10 text-primary" />,
+    title: "Best Support",
+    description:
+      "lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
+  },
+  {
+    icon: <BarChart4 className="w-10 h-10 text-primary" />,
+    title: "Most Scalable ",
+    description:
+      "lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
+  },
+  {
+    icon: <Cog className="w-10 h-10 text-primary" />,
+    title: "Fully Configurable ",
+    description:
+      "lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
+  },
+];

public/vercel.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>