Merge pull request #8 from DorianNiemiecSVRJS/main

CSS bug fixes and accessibility improvements

app/(root)/changelogs/page.tsx

@@ -54,7 +54,7 @@ const LogsPage: React.FC = () => {
 			id="logs"
 			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">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Server LOGS
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">

app/(root)/contribute/page.tsx

@@ -12,7 +12,7 @@ const Contribute = () => {
 			id="tos"
 			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">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Contributing to SVR.JS
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">

app/(root)/downloads/page.tsx

@@ -58,7 +58,7 @@ const DownloadPage: React.FC = () => {
       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">
+      <h1 className="text-3xl md:text-5xl md:pb-2 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">

app/(root)/layout.tsx

@@ -38,10 +38,10 @@ export default function PageLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<main className="flex flex-col min-h-screen">
+		<div className="flex flex-col min-h-screen">
 			<Navbar />
-			<div className="flex-grow flex-1">{children}</div>
+			<div className="flex-grow flex-1 overflow-x-hidden">{children}</div>
 			<Footer />
-		</main>
+		</div>
 	);
 }

app/(root)/mods/page.tsx

@@ -58,7 +58,7 @@ const ModsPage: React.FC = () => {
       id="mods"
       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">
+      <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
         SvrJS Mods
       </h1>
       <p className="text-lg text-muted-foreground text-start mb-4">

app/(root)/privacy-policy/page.tsx

@@ -14,7 +14,7 @@ const PrivacyPolicy = () => {
 			id="privacy-policy"
 			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">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Privacy Policy
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">

app/(root)/tos/page.tsx

@@ -12,7 +12,7 @@ const TermsOfService = () => {
 			id="tos"
 			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">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				Terms and Conditions
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">

app/(root)/vulnerabilities/page.tsx

@@ -12,7 +12,7 @@ const Vulnerabilities = () => {
 			id="tos"
 			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">
+			<h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				SVR.JS Vulnerabilities
 			</h1>
 			<p className="text-lg text-muted-foreground text-start mb-4">

app/globals.css

@@ -6,12 +6,10 @@ html {
 	height: 100%;
 	width: 100%;
 	font-family: "Poppins", sans-serif;
-	overflow-x: hidden;
 }
 
 body {
 	user-select: text;
-	overflow-x: clip;
 }
 
 * {

app/layout.tsx

@@ -30,7 +30,7 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<AuthProvider>
-						<main>{children}</main>
+						{children}
 						<Toaster />
 					</AuthProvider>
 				</ThemeProvider>

components/shared/About.tsx

@@ -12,7 +12,7 @@ const About = () => {
 						alt="aboutpicture"
 						width={300}
 						height={300}
-						className="w-[300px] object-contain rounded-lg"
+						className="w-[300px] object-contain rounded-lg flex-shrink-0"
 					/>
 
 					<div className="flex flex-col justify-between">

components/shared/FAQ.tsx

@@ -10,10 +10,10 @@ import {
 const Faq = () => {
   return (
     <section id="faq" className="wrapper container py-24 md:py-28">
-      <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">
+      <h2 className="text-3xl md:text-5xl font-bold mb-4 md:mb-2 md:pb-2 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="text-lg text-muted-foreground text-start mt-4 mb-8">
+      <p className="text-lg text-muted-foreground text-start mt-4 md:mt-2 mb-8">
         Find answers to common questions about SVRJS
       </p>
       <Accordion

components/shared/Footer.tsx

@@ -9,7 +9,7 @@ const Footer = () => {
 	const currentYear = new Date().getFullYear();
 	return (
 		<>
-			<footer className="flex flex-col w-full transition-all bg-zinc-100 text-black dark:bg-[#0308033b] border-t dark:text-white">
+			<footer className="flex flex-col w-full transition-all bg-zinc-50 text-black dark:bg-[#0308033b] border-t dark:text-white">
 				<div className="px-6 md:px-12 lg:px-24 py-10 w-full mx-auto max-w-screen-2xl">
 					<div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-md:items-center items-center mb-6 ">
 						<div className="flex items-center mb-6 lg:mb-0">

components/shared/Hero.tsx

@@ -65,7 +65,7 @@ const Hero = () => {
 				</AnimatedGradientText>
 				<main className="text-5xl md:text-6xl font-bold">
 					<h1 className="inline custom-title">
-						<span className="bg-primary bg-clip-text text-transparent bg-gradient-to-r from-green-300 to-primary">
+						<span className="text-transparent bg-gradient-to-r from-green-300 to-primary bg-clip-text">
 							Simplify
 						</span>{" "}
 						your server logic performance
@@ -120,6 +120,7 @@ const Hero = () => {
 						variant={"ghost"}
 						onClick={() => handleButtonClick("linux")}
 					>
+						<span className="sr-only">Linux</span>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width={200}
@@ -142,6 +143,7 @@ const Hero = () => {
 						variant={"ghost"}
 						onClick={() => handleButtonClick("docker")}
 					>
+						<span className="sr-only">Docker</span>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width={200}

components/shared/HowItWorks.tsx

@@ -11,7 +11,7 @@ const HowItWorks = () => {
 					development
 				</span>
 			</h2>
-			<p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
+			<p className="md:w-3/4 mx-auto mt-4 mb-8 text-lg md:text-xl text-muted-foreground">
 				Beautifully designed components that you can copy and paste into your
 				apps. Accessible. Customizable. Open Source.
 			</p>

components/shared/MobileNav.tsx

@@ -19,6 +19,7 @@ const MobileNav = () => {
 			<ThemeToggle />
 			<Sheet>
 				<SheetTrigger>
+					<span className="sr-only">Menu</span>
 					<Menu className="w-5 h-5" />
 				</SheetTrigger>
 				<SheetContent>

components/shared/Navbar.tsx

@@ -20,17 +20,21 @@ const Navbar = () => {
 		<header className="sticky border-b top-0 z-40 w-full shadow-md bg-white dark:border-b-slate-800 dark:bg-background">
 			{/* LOGO LEFT NAVBAR */}
 			<NavigationMenu className="mx-auto">
-				<NavigationMenuList className="container h-16 px-4 w-screen flex justify-between items-center">
+				<NavigationMenuList className="container h-16 px-4 w-full flex justify-between items-center">
 					<NavigationMenuItem className="font-bold flex items-center">
 						<Link href="/#" className="inline-flex items-center gap-2">
+							<span className="sr-only">SVR.JS</span>
 							<Logo width={120} height={40} />
 						</Link>
 					</NavigationMenuItem>
 
 					{/* Mobile view */}
+					<NavigationMenuItem className="flex md:hidden">
 						<MobileNav />
+					</NavigationMenuItem>
 
 					{/* Desktop Menu */}
+					<NavigationMenuItem className="hidden md:flex">
 						<nav className="hidden md:flex gap-4">
 							{NAVBAR.centerLinks?.map(({ href, label, target }) => (
 								<Link
@@ -47,8 +51,9 @@ const Navbar = () => {
 								</Link>
 							))}
 						</nav>
+					</NavigationMenuItem>
 
-					<div className="hidden md:flex gap-2 items-center">
+					<NavigationMenuItem className="hidden md:flex gap-2 items-center">
 						{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
 							<Link
 								key={label}
@@ -75,7 +80,7 @@ const Navbar = () => {
 							</Link>
 						))}
 						<ThemeToggle />
-					</div>
+					</NavigationMenuItem>
 				</NavigationMenuList>
 			</NavigationMenu>
 		</header>

components/shared/Newsletter.tsx

@@ -25,10 +25,10 @@ const Newsletter = () => {
     <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 text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+        <h3 className="text-center text-4xl md:text-5xl md:pb-2 text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
           Join The Newsletter!
         </h3>
-        <p className="text-lg text-muted-foreground text-center mt-4 mb-8">
+        <p className="text-lg text-muted-foreground text-center mt-4 md:mt-2 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.

components/shared/Partners.tsx

@@ -23,7 +23,7 @@ const Partners = () => {
 			</h2>
 			<div className="w-full flex-start flex-row">
 				<div className="flex max-md:flex-col items-center justify-start gap-4">
-					<h2 className="text-lg font-medium bg-accent/60 px-2 py-2 rounded-md">
+					<h2 className="text-md font-medium bg-accent/60 px-2 py-2 rounded-md">
 						Process of setting up a WordPress website running on SVR.JS.
 					</h2>
 					<Button

components/shared/Testimonials.tsx

@@ -86,7 +86,7 @@ const Testimonials = () => {
 				</span>
 			</h1>
 
-			<div className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6">
+			<ul className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6">
 				{testimonials.map((testimonial, idx) => (
 					<TestimonialCard
 						avatar={testimonial.avatar}
@@ -97,7 +97,7 @@ const Testimonials = () => {
 						key={idx}
 					/>
 				))}
-			</div>
+			</ul>
 		</section>
 	);
 };

components/ui/theme-toggle.tsx

@@ -30,6 +30,7 @@ const ThemeToggle = () => {
           className="md:border-input border-transparent"
           onClick={handleTheme}
         >
+          <span className="sr-only">Toggle theme</span>
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
         </Button>

package-lock.json

@@ -14,6 +14,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/themes": "^3.0.5",
@@ -2348,6 +2349,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",