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"
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">

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

@ -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">

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

@ -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">

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

@ -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>
);
}

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

@ -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">

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

@ -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">

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

@ -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">

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

@ -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">

2
app/globals.css
View file

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

2
app/layout.tsx
View file

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

2
components/shared/About.tsx
View file

@ -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">

4
components/shared/FAQ.tsx
View file

@ -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

2
components/shared/Footer.tsx
View file

@ -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">

4
components/shared/Hero.tsx
View file

@ -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}

2
components/shared/HowItWorks.tsx
View file

@ -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>

1
components/shared/MobileNav.tsx
View file

@ -19,6 +19,7 @@ const MobileNav = () => {
<ThemeToggle />
<Sheet>
<SheetTrigger>
<span className="sr-only">Menu</span>
<Menu className="w-5 h-5" />
</SheetTrigger>
<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">
{/* 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 */}
<MobileNav />
<NavigationMenuItem className="flex md:hidden">
<MobileNav />
</NavigationMenuItem>
{/* Desktop Menu */}
<nav className="hidden md:flex gap-4">
{NAVBAR.centerLinks?.map(({ href, label, target }) => (
<Link
key={label}
href={href}
target={target}
className={`text-[17px] tracking-tight ${
pathname == href ? "bg-muted-foreground/20" : ""
} ${buttonVariants({
variant: "ghost",
})}`}
>
{label}
</Link>
))}
</nav>
<NavigationMenuItem className="hidden md:flex">
<nav className="hidden md:flex gap-4">
{NAVBAR.centerLinks?.map(({ href, label, target }) => (
<Link
key={label}
href={href}
target={target}
className={`text-[17px] tracking-tight ${
pathname == href ? "bg-muted-foreground/20" : ""
} ${buttonVariants({
variant: "ghost",
})}`}
>
{label}
</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>

4
components/shared/Newsletter.tsx
View file

@ -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.

2
components/shared/Partners.tsx
View file

@ -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

4
components/shared/Testimonials.tsx
View file

@ -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>
);
};

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

@ -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>

45
package-lock.json generated
View file

@ -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",