Spaces:

salgadev
/

docverifyrag

Sleeping

App Files Files Community

SANDRAMSC commited on Apr 14

Commit

ca314ba

•

1 Parent(s): c190cbc

Frontend Template initialized

Browse files

Files changed (11) hide show

frontend/index.html +1 -55
frontend/src/App.tsx +1 -5
frontend/src/components/About.tsx +0 -40
frontend/src/components/App.tsx +0 -0
frontend/src/components/Features.tsx +14 -37
frontend/src/components/Footer.tsx +22 -88
frontend/src/components/Hero.tsx +7 -27
frontend/src/components/HeroCards.tsx +2 -137
frontend/src/components/Navbar.tsx +9 -18
frontend/src/components/Statistics.tsx +41 -0
frontend/src/components/theme-provider.tsx +1 -0

frontend/index.html CHANGED Viewed

@@ -12,61 +12,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <!-- Primary Meta Tags -->
-    <title>Shadcn/React - Landing template</title>
-    <meta
-      name="title"
-      content="Shadcn/React - Landing template"
-    />
-    <meta
-      name="description"
-      content="Free Shadcn landing page for React developers"
-    />
-    <!-- Open Graph / Facebook -->
-    <meta
-      property="og:type"
-      content="website"
-    />
-    <meta
-      property="og:url"
-      content="https://github.com/leoMirandaa/shadcn-landing-page.git"
-    />
-    <meta
-      property="og:title"
-      content="Shadcn/React - Landing template"
-    />
-    <meta
-      property="og:description"
-      content="Free Shadcn landing page for React developers"
-    />
-    <meta
-      property="og:image"
-      content="https://res.cloudinary.com/dbzv9xfjp/image/upload/v1705560686/og-images/shadc-react_gketpd.jpg"
-    />
-    <!-- Twitter -->
-    <meta
-      name="twitter:card"
-      content="summary_large_image"
-    />
-    <meta
-      name="twitter:url"
-      content="https://github.com/leoMirandaa/shadcn-landing-page.git"
-    />
-    <meta
-      name="twitter:title"
-      content="Shadcn/React - Landing template"
-    />
-    <meta
-      name="twitter:description"
-      content="Free Shadcn landing page for React developers"
-    />
-    <meta
-      name="twitter:image"
-      content="https://res.cloudinary.com/dbzv9xfjp/image/upload/v1705560686/og-images/shadc-react_gketpd.jpg"
-    />
   </head>
   <body>
     <div id="root"></div>

       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
+    <title>DocVerifyRAG</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.tsx CHANGED Viewed

@@ -1,11 +1,9 @@
-import { About } from "./components/About";
 import { Features } from "./components/Features";
 import { Footer } from "./components/Footer";
 import { Hero } from "./components/Hero";
 import { HowItWorks } from "./components/HowItWorks";
 import { Navbar } from "./components/Navbar";
 import { ScrollToTop } from "./components/ScrollToTop";
-import { Team } from "./components/Team";
 import "./App.css";
 function App() {
@@ -13,10 +11,8 @@ function App() {
     <>
       <Navbar />
       <Hero />
-      <About />
-      <Features />
       <HowItWorks />
-      <Team />
       <Footer />
       <ScrollToTop />
     </>

 import { Features } from "./components/Features";
 import { Footer } from "./components/Footer";
 import { Hero } from "./components/Hero";
 import { HowItWorks } from "./components/HowItWorks";
 import { Navbar } from "./components/Navbar";
 import { ScrollToTop } from "./components/ScrollToTop";
 import "./App.css";
 function App() {
     <>
       <Navbar />
       <Hero />
       <HowItWorks />
+      <Features />
       <Footer />
       <ScrollToTop />
     </>

frontend/src/components/About.tsx DELETED Viewed

@@ -1,40 +0,0 @@
-import { Statistics } from "./Statistics";
-import pilot from "../assets/pilot.png";
-export const About = () => {
-  return (
-    <section
-      id="about"
-      className="container py-24 sm:py-32"
-    >
-      <div className="bg-muted/50 border rounded-lg py-12">
-        <div className="px-6 flex flex-col-reverse md:flex-row gap-8 md:gap-12">
-          <img
-            src={pilot}
-            alt=""
-            className="w-[300px] object-contain rounded-lg"
-          />
-          <div className="bg-green-0 flex flex-col justify-between">
-            <div className="pb-6">
-              <h2 className="text-3xl md:text-4xl font-bold">
-                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
-                  About{" "}
-                </span>
-                Company
-              </h2>
-              <p className="text-xl text-muted-foreground mt-4">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
-                amet, consectetur adipiscing elit.
-              </p>
-            </div>
-            <Statistics />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};

frontend/src/components/App.tsx ADDED Viewed

File without changes

frontend/src/components/Features.tsx CHANGED Viewed

@@ -1,52 +1,31 @@
 import { Badge } from "./ui/badge";
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
-  CardTitle,
 } from "@/components/ui/card";
-import image from "../assets/growth.png";
-import image3 from "../assets/reflecting.png";
 import image4 from "../assets/looking-ahead.png";
 interface FeatureProps {
   title: string;
-  description: string;
   image: string;
 }
 const features: FeatureProps[] = [
   {
-    title: "Responsive Design",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
     image: image4,
   },
-  {
-    title: "Intuitive user interface",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
-    image: image3,
-  },
-  {
-    title: "AI-Powered insights",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
-    image: image,
-  },
 ];
 const featureList: string[] = [
-  "Dark/Light theme",
-  "Reviews",
-  "Features",
-  "Pricing",
-  "Contact form",
-  "Our team",
-  "Responsive design",
-  "Newsletter",
-  "Minimalist",
 ];
 export const Features = () => {
@@ -56,10 +35,11 @@ export const Features = () => {
       className="container py-24 sm:py-32 space-y-8"
     >
       <h2 className="text-3xl lg:text-4xl font-bold md:text-center">
-        Many{" "}
         <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
-          Great Features
         </span>
       </h2>
       <div className="flex flex-wrap md:justify-center gap-4">
@@ -75,20 +55,17 @@ export const Features = () => {
         ))}
       </div>
-      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {features.map(({ title, description, image }: FeatureProps) => (
           <Card key={title}>
-            <CardHeader>
               <CardTitle>{title}</CardTitle>
             </CardHeader>
-            <CardContent>{description}</CardContent>
             <CardFooter>
               <img
                 src={image}
                 alt="About feature"
-                className="w-[200px] lg:w-[300px] mx-auto"
               />
             </CardFooter>
           </Card>

 import { Badge } from "./ui/badge";
 import {
   Card,
+  CardTitle,
   CardContent,
   CardFooter,
   CardHeader,
 } from "@/components/ui/card";
 import image4 from "../assets/looking-ahead.png";
 interface FeatureProps {
   title: string;
   image: string;
 }
 const features: FeatureProps[] = [
   {
+    title: "UPLOAD DOCUMENT",
     image: image4,
   },
 ];
 const featureList: string[] = [
+  "STEP1: Do this",
+  "STEP2: Do that that",
+  "STEP3: Do that that that",
+  "STEP4: Do that that that that",
 ];
 export const Features = () => {
       className="container py-24 sm:py-32 space-y-8"
     >
       <h2 className="text-3xl lg:text-4xl font-bold md:text-center">
+        Fast and Accurate Document{" "}
         <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+           Meta Data{" "}
         </span>
+	  Verification
       </h2>
       <div className="flex flex-wrap md:justify-center gap-4">
         ))}
       </div>
+      <div className="grid md:grid-cols-2 lg:grid-cols-1">
+        {features.map(({ title, image }: FeatureProps) => (
           <Card key={title}>
+	   <CardHeader className="text-3xl lg:text-4xl font-bold md:text-center">
               <CardTitle>{title}</CardTitle>
             </CardHeader>
             <CardFooter>
               <img
                 src={image}
                 alt="About feature"
+                className="w-[150px] lg:w-[300px] mx-auto"
               />
             </CardFooter>
           </Card>

frontend/src/components/Footer.tsx CHANGED Viewed

@@ -12,140 +12,74 @@ export const Footer = () => {
             className="font-bold text-xl flex"
           >
             <LogoIcon />
-            ShadcnUI/React
           </a>
         </div>
         <div className="flex flex-col gap-2">
-          <h3 className="font-bold text-lg">Follow US</h3>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              Github
-            </a>
-          </div>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              Twitter
-            </a>
-          </div>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              Dribbble
-            </a>
-          </div>
-        </div>
-        <div className="flex flex-col gap-2">
-          <h3 className="font-bold text-lg">Platforms</h3>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              Web
-            </a>
-          </div>
-          <div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
-              Mobile
             </a>
           </div>
-          <div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
-              Desktop
             </a>
           </div>
-        </div>
-        <div className="flex flex-col gap-2">
-          <h3 className="font-bold text-lg">About</h3>
-          <div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
-              Features
             </a>
           </div>
-          <div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
-              Pricing
             </a>
           </div>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              FAQ
-            </a>
-          </div>
-        </div>
         <div className="flex flex-col gap-2">
-          <h3 className="font-bold text-lg">Community</h3>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              Youtube
-            </a>
-          </div>
           <div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
-              Discord
             </a>
           </div>
-          <div>
-            <a
-              href="#"
-              className="opacity-60 hover:opacity-100"
-            >
-              Twitch
-            </a>
-          </div>
-        </div>
       </section>
       <section className="container pb-14 text-center">
         <h3>
-          &copy; 2024 Landing page made by{" "}
           <a
             target="_blank"
-            href="https://github.com/leoMirandaa"
             className="text-primary transition-all border-primary hover:border-b-2"
           >
-            Leo Miranda
           </a>
         </h3>
       </section>

             className="font-bold text-xl flex"
           >
             <LogoIcon />
+            DocVerifyRAG
           </a>
         </div>
         <div className="flex flex-col gap-2">
+          <h3 className="font-bold text-lg">About Us</h3>
+<div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
+              GitHub
             </a>
           </div>
+</div>
+       <div className="flex flex-col gap-2">
+          <h3 className="font-bold text-lg">Industries</h3>
+<div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
+              Health
             </a>
           </div>
+<div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
+              FinTech
             </a>
           </div>
+<div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
+              Banking
             </a>
           </div>
+</div>
         <div className="flex flex-col gap-2">
+          <h3 className="font-bold text-lg">Follow Us</h3>
           <div>
             <a
               href="#"
               className="opacity-60 hover:opacity-100"
             >
+              GitHub
             </a>
           </div>
+</div>
       </section>
       <section className="container pb-14 text-center">
         <h3>
+          &copy; 2024 Efficient Document Verification by{" "}
           <a
             target="_blank"
+            href="https://github.com/eliawaefler/DocVerifyRAG"
             className="text-primary transition-all border-primary hover:border-b-2"
           >
+            DocVerifyRAG
           </a>
         </h3>
       </section>

frontend/src/components/Hero.tsx CHANGED Viewed

@@ -10,38 +10,18 @@ export const Hero = () => {
         <main className="text-5xl md:text-6xl font-bold">
           <h1 className="inline">
             <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-              Shadcn
-            </span>{" "}
-            landing page
-          </h1>{" "}
-          for{" "}
-          <h2 className="inline">
             <span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text">
-              React
-            </span>{" "}
-            developers
-          </h2>
         </main>
         <p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
-          Build your React landing page effortlessly with the required sections
-          to your project.
         </p>
-        <div className="space-y-4 md:space-y-0 md:space-x-4">
-          <Button className="w-full md:w-1/3">Get Started</Button>
-          <a
-            href="https://github.com/leoMirandaa/shadcn-landing-page.git"
-            target="_blank"
-            className={`w-full md:w-1/3 ${buttonVariants({
-              variant: "outline",
-            })}`}
-          >
-            Github Repository
-            <GitHubLogoIcon className="ml-2 w-5 h-5" />
-          </a>
-        </div>
       </div>
       {/* Hero cards sections */}

         <main className="text-5xl md:text-6xl font-bold">
           <h1 className="inline">
             <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+              Doc
+            </span>
+            Verify
             <span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text">
+              RAG
+            </span></h1>{" "}
         </main>
         <p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis dolor pariatur sit!
         </p>
       </div>
       {/* Hero cards sections */}

frontend/src/components/HeroCards.tsx CHANGED Viewed

@@ -16,140 +16,6 @@ import { GitHubLogoIcon } from "@radix-ui/react-icons";
 export const HeroCards = () => {
   return (
     <div className="hidden lg:flex flex-row flex-wrap gap-8 relative w-[700px] h-[500px]">
-      {/* Testimonial */}
-      <Card className="absolute w-[340px] -top-[15px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
-        <CardHeader className="flex flex-row items-center gap-4 pb-2">
-          <Avatar>
-            <AvatarImage
-              alt=""
-              src="https://github.com/shadcn.png"
-            />
-            <AvatarFallback>SH</AvatarFallback>
-          </Avatar>
-          <div className="flex flex-col">
-            <CardTitle className="text-lg">John Doe React</CardTitle>
-            <CardDescription>@john_doe</CardDescription>
-          </div>
-        </CardHeader>
-        <CardContent>This landig page is awesome!</CardContent>
-      </Card>
-      {/* Team */}
-      <Card className="absolute right-[20px] top-4 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
-        <CardHeader className="mt-8 flex justify-center items-center pb-2">
-          <img
-            src="https://i.pravatar.cc/150?img=58"
-            alt="user avatar"
-            className="absolute grayscale-[0%] -top-12 rounded-full w-24 h-24 aspect-square object-cover"
-          />
-          <CardTitle className="text-center">Leo Miranda</CardTitle>
-          <CardDescription className="font-normal text-primary">
-            Frontend Developer
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="text-center pb-2">
-          <p>
-            I really enjoy transforming ideas into functional software that
-            exceeds expectations
-          </p>
-        </CardContent>
-        <CardFooter>
-          <div>
-            <a
-              href="https://github.com/leoMirandaa"
-              target="_blank"
-              className={buttonVariants({
-                variant: "ghost",
-                size: "sm",
-              })}
-            >
-              <span className="sr-only">Github icon</span>
-              <GitHubLogoIcon className="w-5 h-5" />
-            </a>
-            <a
-              href="https://twitter.com/leo_mirand4"
-              target="_blank"
-              className={buttonVariants({
-                variant: "ghost",
-                size: "sm",
-              })}
-            >
-              <span className="sr-only">X icon</span>
-              <svg
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-                className="fill-foreground w-5 h-5"
-              >
-                <title>X</title>
-                <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
-              </svg>
-            </a>
-            <a
-              href="https://www.linkedin.com/"
-              target="_blank"
-              className={buttonVariants({
-                variant: "ghost",
-                size: "sm",
-              })}
-            >
-              <span className="sr-only">Linkedin icon</span>
-              <Linkedin size="20" />
-            </a>
-          </div>
-        </CardFooter>
-      </Card>
-      {/* Pricing */}
-      <Card className="absolute top-[150px] left-[50px] w-72  drop-shadow-xl shadow-black/10 dark:shadow-white/10">
-        <CardHeader>
-          <CardTitle className="flex item-center justify-between">
-            Free
-            <Badge
-              variant="secondary"
-              className="text-sm text-primary"
-            >
-              Most popular
-            </Badge>
-          </CardTitle>
-          <div>
-            <span className="text-3xl font-bold">$0</span>
-            <span className="text-muted-foreground"> /month</span>
-          </div>
-          <CardDescription>
-            Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button className="w-full">Start Free Trial</Button>
-        </CardContent>
-        <hr className="w-4/5 m-auto mb-4" />
-        <CardFooter className="flex">
-          <div className="space-y-4">
-            {["4 Team member", "4 GB Storage", "Upto 6 pages"].map(
-              (benefit: string) => (
-                <span
-                  key={benefit}
-                  className="flex"
-                >
-                  <Check className="text-green-500" />{" "}
-                  <h3 className="ml-2">{benefit}</h3>
-                </span>
-              )
-            )}
-          </div>
-        </CardFooter>
-      </Card>
       {/* Service */}
       <Card className="absolute w-[350px] -right-[10px] bottom-[35px]  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">
@@ -157,10 +23,9 @@ export const HeroCards = () => {
             <LightBulbIcon />
           </div>
           <div>
-            <CardTitle>Light & dark mode</CardTitle>
             <CardDescription className="text-md mt-2">
-              Lorem ipsum dolor sit amet consect adipisicing elit. Consectetur
-              natusm.
             </CardDescription>
           </div>
         </CardHeader>

 export const HeroCards = () => {
   return (
     <div className="hidden lg:flex flex-row flex-wrap gap-8 relative w-[700px] h-[500px]">
       {/* Service */}
       <Card className="absolute w-[350px] -right-[10px] bottom-[35px]  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">
             <LightBulbIcon />
           </div>
           <div>
+            <CardTitle>IMAGE</CardTitle>
             <CardDescription className="text-md mt-2">
+              Some nice image conveying DocVerifyRAG use
             </CardDescription>
           </div>
         </CardHeader>

frontend/src/components/Navbar.tsx CHANGED Viewed

@@ -11,7 +11,6 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { buttonVariants } from "./ui/button";
 import { Menu } from "lucide-react";
@@ -29,16 +28,8 @@ const routeList: RouteProps[] = [
     label: "Features",
   },
   {
-    href: "#testimonials",
-    label: "Testimonials",
-  },
-  {
-    href: "#pricing",
-    label: "Pricing",
-  },
-  {
-    href: "#faq",
-    label: "FAQ",
   },
 ];
@@ -54,7 +45,7 @@ export const Navbar = () => {
               className="ml-2 font-bold text-xl flex"
             >
               <LogoIcon />
-              ShadcnUI/React
             </a>
           </NavigationMenuItem>
@@ -78,7 +69,7 @@ export const Navbar = () => {
               <SheetContent side={"left"}>
                 <SheetHeader>
                   <SheetTitle className="font-bold text-xl">
-                    Shadcn/React
                   </SheetTitle>
                 </SheetHeader>
                 <nav className="flex flex-col justify-center items-center gap-2 mt-4">
@@ -93,14 +84,14 @@ export const Navbar = () => {
                     </a>
                   ))}
                   <a
-                    href="https://github.com/leoMirandaa/shadcn-landing-page.git"
                     target="_blank"
                     className={`w-[110px] border ${buttonVariants({
                       variant: "secondary",
                     })}`}
                   >
-                    <GitHubLogoIcon className="mr-2 w-5 h-5" />
-                    Github
                   </a>
                 </nav>
               </SheetContent>
@@ -128,8 +119,8 @@ export const Navbar = () => {
               target="_blank"
               className={`border ${buttonVariants({ variant: "secondary" })}`}
             >
-              <GitHubLogoIcon className="mr-2 w-5 h-5" />
-              Github
             </a>
             <ModeToggle />

   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { buttonVariants } from "./ui/button";
 import { Menu } from "lucide-react";
     label: "Features",
   },
   {
+    href: "#upload",
+    label: "Upload",
   },
 ];
               className="ml-2 font-bold text-xl flex"
             >
               <LogoIcon />
+              DocVerifyRAG
             </a>
           </NavigationMenuItem>
               <SheetContent side={"left"}>
                 <SheetHeader>
                   <SheetTitle className="font-bold text-xl">
+                    DocVerifyRAG
                   </SheetTitle>
                 </SheetHeader>
                 <nav className="flex flex-col justify-center items-center gap-2 mt-4">
                     </a>
                   ))}
                   <a
+                    href="#"
                     target="_blank"
                     className={`w-[110px] border ${buttonVariants({
                       variant: "secondary",
                     })}`}
                   >
+                    <GitHubLogoIcon className="mr-0 w-14 h-5" />
+                    Join Waitlist
                   </a>
                 </nav>
               </SheetContent>
               target="_blank"
               className={`border ${buttonVariants({ variant: "secondary" })}`}
             >
+              <GitHubLogoIcon className="mr-0 w-8 h-5" />
+              Join Waitlist
             </a>
             <ModeToggle />

frontend/src/components/Statistics.tsx ADDED Viewed

	@@ -0,0 +1,41 @@

+export const Statistics = () => {
+  interface statsProps {
+    quantity: string;
+    description: string;
+  }
+  const stats: statsProps[] = [
+    {
+      quantity: "2.7K+",
+      description: "Users",
+    },
+    {
+      quantity: "1.8K+",
+      description: "Subscribers",
+    },
+    {
+      quantity: "112",
+      description: "Downloads",
+    },
+    {
+      quantity: "4",
+      description: "Products",
+    },
+  ];
+  return (
+    <section id="statistics">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+        {stats.map(({ quantity, description }: statsProps) => (
+          <div
+            key={description}
+            className="space-y-2 text-center"
+          >
+            <h2 className="text-3xl sm:text-4xl font-bold ">{quantity}</h2>
+            <p className="text-xl text-muted-foreground">{description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};

frontend/src/components/theme-provider.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ const initialState: ThemeProviderState = {
   setTheme: () => null,
 };
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 export function ThemeProvider({

   setTheme: () => null,
 };
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 export function ThemeProvider({