added downloads

app/(root)/downloads/page.tsx

@@ -0,0 +1,93 @@
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Download } from "lucide-react";
+import Link from "next/link";
+
+const downloads = [
+  {
+    date: "2024-06-01",
+    fileName: "SVRJS_v1.0.0.zip",
+    version: "1.0.0",
+    fileSize: "15MB",
+    downloadLink: "/downloads/SVRJS_v1.0.0.zip",
+  },
+  {
+    date: "2024-06-10",
+    fileName: "SVRJS_v1.1.0.zip",
+    version: "1.1.0",
+    fileSize: "18MB",
+    downloadLink: "/downloads/SVRJS_v1.1.0.zip",
+  },
+  {
+    date: "2024-06-15",
+    fileName: "SVRJS_v1.2.0.zip",
+    version: "1.2.0",
+    fileSize: "20MB",
+    downloadLink: "/downloads/SVRJS_v1.2.0.zip",
+  },
+  {
+    date: "2024-06-20",
+    fileName: "SVRJS_v1.3.0.zip",
+    version: "1.3.0",
+    fileSize: "22MB",
+    downloadLink: "/downloads/SVRJS_v1.3.0.zip",
+  },
+];
+
+const DownloadPage = () => {
+  return (
+    <section
+      id="download"
+      className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
+    >
+      <h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+        Downloads
+      </h1>
+      <p className="text-lg text-muted-foreground text-start mb-4">
+        Get all the latest version of SVRJS download and compiled Files here!
+      </p>
+      <Table>
+        <TableCaption>A list of available downloads.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[150px]">Date</TableHead>
+            <TableHead>File Name</TableHead>
+            <TableHead>Version</TableHead>
+            <TableHead>Download Link</TableHead>
+            <TableHead className="text-right">File Size</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {downloads.map((download) => (
+            <TableRow key={download.fileName}>
+              <TableCell className="font-medium">{download.date}</TableCell>
+              <TableCell>{download.fileName}</TableCell>
+              <TableCell>{download.version}</TableCell>
+              <TableCell>
+                <Link href={download.downloadLink}>
+                  <Button variant={"outline"}>
+                    {" "}
+                    <Download className="w-4 h-4 mr-2" />
+                    Download
+                  </Button>
+                </Link>
+              </TableCell>
+              <TableCell className="text-right">{download.fileSize}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </section>
+  );
+};
+
+export default DownloadPage;

app/globals.css

@@ -60,10 +60,14 @@
   scroll-behavior: smooth;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 body {
   font-family: var(--font-poppins);
   user-select: text;
-  overflow-x: hidden;
+  overflow-x: clip;
 }
 
 @layer base {
@@ -71,7 +75,7 @@ body {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground w-full h-full;
   }
 }
 

components/shared/FAQ.tsx

@@ -13,7 +13,7 @@ const Faq = () => {
       <h2 className="text-3xl md:text-5xl font-bold mb-4 text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
         Frequently Asked Question
       </h2>
-      <p className="textlg text-muted-foreground text-start mt-4 mb-8">
+      <p className="text-lg text-muted-foreground text-start mt-4 mb-8">
         Find answers to common questions about SVRJS
       </p>
       <Accordion

components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}