Merge pull request #8 from DorianNiemiecSVRJS/main
CSS bug fixes and accessibility improvements
This commit is contained in:
commit
2acb22d4e6
22 changed files with 96 additions and 44 deletions
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -6,12 +6,10 @@ html {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: "Poppins", sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: text;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
@ -30,7 +30,7 @@ export default function RootLayout({
|
|||
disableTransitionOnChange
|
||||
>
|
||||
<AuthProvider>
|
||||
<main>{children}</main>
|
||||
{children}
|
||||
<Toaster />
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -19,6 +19,7 @@ const MobileNav = () => {
|
|||
<ThemeToggle />
|
||||
<Sheet>
|
||||
<SheetTrigger>
|
||||
<span className="sr-only">Menu</span>
|
||||
<Menu className="w-5 h-5" />
|
||||
</SheetTrigger>
|
||||
<SheetContent>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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
45
package-lock.json
generated
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue