svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS bug fixes and accessibility improvements #8

Merged
DorianNiemiecSVRJS merged 16 commits from main into main 2024-07-29 22:20:35 +02:00
Conversation 2 Commits 16 Files changed 22 +96 -44
22 changed files with 96 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/(root)/changelogs/page.tsx
View file

@ -54,7 +54,7 @@ const LogsPage: React.FC = () => {
id="logs" id="logs"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 Server LOGS
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

2
app/(root)/contribute/page.tsx
View file

@ -12,7 +12,7 @@ const Contribute = () => {
id="tos" id="tos"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 Contributing to SVR.JS
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

2
app/(root)/downloads/page.tsx
View file

@ -58,7 +58,7 @@ const DownloadPage: React.FC = () => {
id="download" id="download"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 Downloads
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

6
app/(root)/layout.tsx
View file

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

2
app/(root)/mods/page.tsx
View file

@ -58,7 +58,7 @@ const ModsPage: React.FC = () => {
id="mods" id="mods"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 SvrJS Mods
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

2
app/(root)/privacy-policy/page.tsx
View file

@ -14,7 +14,7 @@ const PrivacyPolicy = () => {
id="privacy-policy" id="privacy-policy"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 Privacy Policy
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

2
app/(root)/tos/page.tsx
View file

@ -12,7 +12,7 @@ const TermsOfService = () => {
id="tos" id="tos"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 Terms and Conditions
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

2
app/(root)/vulnerabilities/page.tsx
View file

@ -12,7 +12,7 @@ const Vulnerabilities = () => {
id="tos" id="tos"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" 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 SVR.JS Vulnerabilities
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

2
app/globals.css
View file

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

2
app/layout.tsx
View file

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

2
components/shared/About.tsx
View file

@ -12,7 +12,7 @@ const About = () => {
alt="aboutpicture" alt="aboutpicture"
width={300} width={300}
height={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"> <div className="flex flex-col justify-between">

4
components/shared/FAQ.tsx
View file

@ -10,10 +10,10 @@ import {
const Faq = () => { const Faq = () => {
return ( return (
<section id="faq" className="wrapper container py-24 md:py-28"> <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 Frequently Asked Question
</h2> </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 Find answers to common questions about SVRJS
</p> </p>
<Accordion <Accordion

2
components/shared/Footer.tsx
View file

@ -9,7 +9,7 @@ const Footer = () => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( 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="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 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"> <div className="flex items-center mb-6 lg:mb-0">

4
components/shared/Hero.tsx
View file

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

2
components/shared/HowItWorks.tsx
View file

@ -11,7 +11,7 @@ const HowItWorks = () => {
development development
</span> </span>
</h2> </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 Beautifully designed components that you can copy and paste into your
apps. Accessible. Customizable. Open Source. apps. Accessible. Customizable. Open Source.
</p> </p>

1
components/shared/MobileNav.tsx
View file

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

45
components/shared/Navbar.tsx
View file

@ -20,35 +20,40 @@ 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"> <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 */} {/* LOGO LEFT NAVBAR */}
<NavigationMenu className="mx-auto"> <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"> <NavigationMenuItem className="font-bold flex items-center">
<Link href="/#" className="inline-flex items-center gap-2"> <Link href="/#" className="inline-flex items-center gap-2">
<span className="sr-only">SVR.JS</span>
<Logo width={120} height={40} /> <Logo width={120} height={40} />
</Link> </Link>
</NavigationMenuItem> </NavigationMenuItem>
{/* Mobile view */} {/* Mobile view */}
<MobileNav /> <NavigationMenuItem className="flex md:hidden">
<MobileNav />
</NavigationMenuItem>
{/* Desktop Menu */} {/* Desktop Menu */}
<nav className="hidden md:flex gap-4"> <NavigationMenuItem className="hidden md:flex">
{NAVBAR.centerLinks?.map(({ href, label, target }) => ( <nav className="hidden md:flex gap-4">
<Link {NAVBAR.centerLinks?.map(({ href, label, target }) => (
key={label} <Link
href={href} key={label}
target={target} href={href}
className={`text-[17px] tracking-tight ${ target={target}
pathname == href ? "bg-muted-foreground/20" : "" className={`text-[17px] tracking-tight ${
} ${buttonVariants({ pathname == href ? "bg-muted-foreground/20" : ""
variant: "ghost", } ${buttonVariants({
})}`} variant: "ghost",
> })}`}
{label} >
</Link> {label}
))} </Link>
</nav> ))}
</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 }) => ( {NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
<Link <Link
key={label} key={label}
@ -75,7 +80,7 @@ const Navbar = () => {
</Link> </Link>
))} ))}
<ThemeToggle /> <ThemeToggle />
</div> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
</header> </header>

4
components/shared/Newsletter.tsx
View file

@ -25,10 +25,10 @@ const Newsletter = () => {
<section id="newsletter"> <section id="newsletter">
<hr className="w-11/12 mx-auto" /> <hr className="w-11/12 mx-auto" />
<div className="container py-24 md:py-32"> <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! Join The Newsletter!
</h3> </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 Choosing the right website deployment option is important when
creating a website, because it directly impacts the user experience creating a website, because it directly impacts the user experience
and the resources required to run your website. and the resources required to run your website.

2
components/shared/Partners.tsx
View file

@ -23,7 +23,7 @@ const Partners = () => {
</h2> </h2>
<div className="w-full flex-start flex-row"> <div className="w-full flex-start flex-row">
<div className="flex max-md:flex-col items-center justify-start gap-4"> <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. Process of setting up a WordPress website running on SVR.JS.
</h2> </h2>
<Button <Button

4
components/shared/Testimonials.tsx
View file

@ -86,7 +86,7 @@ const Testimonials = () => {
</span> </span>
</h1> </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) => ( {testimonials.map((testimonial, idx) => (
<TestimonialCard <TestimonialCard
avatar={testimonial.avatar} avatar={testimonial.avatar}
@ -97,7 +97,7 @@ const Testimonials = () => {
key={idx} key={idx}
/> />
))} ))}
</div> </ul>
</section> </section>
); );
}; };

1
components/ui/theme-toggle.tsx
View file

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

45
package-lock.json generated
View file

@ -14,6 +14,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.1.0", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.1.4", "@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-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/themes": "^3.0.5", "@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": { "node_modules/@radix-ui/react-slider": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",