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

minor design changes

Browse source
This commit is contained in:
Cypro Freelance 2024-07-26 00:53:26 +05:30
parent abd8179815
commit 5b1400e14b
5 changed files with 99 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
components/shared/About.tsx
View file

@ -3,40 +3,40 @@ import React from "react";
import Statistics from "./Statistics"; import Statistics from "./Statistics";
const About = () => { const About = () => {
return ( return (
<section id="about" className="container py-2 sm:py-9"> <section id="about" className="container py-2 sm:py-9">
<div className="bg-accent/50 border rounded-lg py-12"> <div className="bg-accent/50 border rounded-lg py-12">
<div className="px-6 flex flex-col-reverse md:flex-row gap-8 md:gap-12"> <div className="px-6 flex flex-col-reverse md:flex-row gap-8 md:gap-12">
<Image <Image
src="/about.svg" src="/about.svg"
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"
/> />
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<div className="pb-6"> <div className="pb-6">
<h2 className="text-3xl md:text-5xl font-bold"> <h2 className="text-3xl md:text-5xl font-bold">
About{" "} About{" "}
<span className="bg-gradient-to-b from-green-200 to-primary text-transparent bg-clip-text"> <span className="bg-gradient-to-b from-green-300 to-primary text-transparent bg-clip-text">
SVRJS! SVRJS!
</span> </span>
</h2> </h2>
<p className="text-lg text-muted-foreground mt-4"> <p className="text-lg text-muted-foreground mt-4">
Host a webpage, run server-side JavaScript, use mods to expand Host a webpage, run server-side JavaScript, use mods to expand
server functionality, or use it as a forward or reverse proxy. server functionality, or use it as a forward or reverse proxy.
SVRJS is a web server that runs on top of Node.JS, enabling SVRJS is a web server that runs on top of Node.JS, enabling
server-side JS on webpages. SVRJS also has an integrated log server-side JS on webpages. SVRJS also has an integrated log
viewer, log highlighter, and user management tool. viewer, log highlighter, and user management tool.
</p> </p>
</div> </div>
<Statistics /> <Statistics />
</div> </div>
</div> </div>
</div> </div>
</section> </section>
); );
}; };
export default About; export default About;

54
components/shared/HowItWorks.tsx
View file

@ -3,33 +3,33 @@ import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
const HowItWorks = () => { const HowItWorks = () => {
return ( return (
<section className="container text-center py-12 sm:py-24"> <section className="container text-center py-12 sm:py-24">
<h2 className="text-3xl md:text-5xl font-bold"> <h2 className="text-3xl md:text-5xl font-bold">
Accelerate your{" "} Accelerate your{" "}
<span className="bg-gradient-to-b from-green-200 to-primary text-transparent bg-clip-text"> <span className="bg-gradient-to-b from-green-300 to-primary text-transparent bg-clip-text">
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-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>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{Features.map(({ icon, title, description }) => ( {Features.map(({ icon, title, description }) => (
<Card key={title} className="bg-muted/50"> <Card key={title} className="bg-muted/50">
<CardHeader> <CardHeader>
<CardTitle className="grid gap-4 place-items-center"> <CardTitle className="grid gap-4 place-items-center">
{icon} {icon}
{title} {title}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent>{description}</CardContent> <CardContent>{description}</CardContent>
</Card> </Card>
))} ))}
</div> </div>
</section> </section>
); );
}; };
export default HowItWorks; export default HowItWorks;

2
components/shared/Navbar.tsx
View file

@ -38,7 +38,7 @@ const Navbar = () => {
href={href} href={href}
target={target} target={target}
className={`text-[17px] tracking-tight ${ className={`text-[17px] tracking-tight ${
pathname == href ? "bg-accent/40" : "" pathname == href ? "bg-muted-foreground/20" : ""
} ${buttonVariants({ } ${buttonVariants({
variant: "ghost", variant: "ghost",
})}`} })}`}

71
components/shared/Partners.tsx
View file

@ -6,41 +6,44 @@ import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
const Partners = () => { const Partners = () => {
const router = useRouter(); const router = useRouter();
const handleClick = () => { const handleClick = () => {
router.push("/docs"); router.push("/docs");
}; };
return ( return (
<section <section
id="partners" id="partners"
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"
> >
<h2 className="text-3xl md:text-5xl font-bold mb-6 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 text-start">
SVRJS in action <span className="bg-gradient-to-b from-green-300 to-primary text-transparent bg-clip-text">
</h2> SVRJS
<div className="w-full flex-start flex-row"> </span>{" "}
<div className="flex max-md:flex-col items-center justify-start gap-4"> in action
<h2 className="text-lg font-medium bg-accent/60 px-2 py-2 rounded-md"> </h2>
Process of setting up a WordPress website running on SVR.JS. <div className="w-full flex-start flex-row">
</h2> <div className="flex max-md:flex-col items-center justify-start gap-4">
<Button <h2 className="text-lg font-medium bg-accent/60 px-2 py-2 rounded-md">
onClick={handleClick} Process of setting up a WordPress website running on SVR.JS.
className="flex-center font-bold max-md:w-full max-w-xl" </h2>
> <Button
Docs <ArrowUpRight /> onClick={handleClick}
</Button> className="flex-center font-bold max-md:w-full max-w-xl"
</div> >
</div> Docs <ArrowUpRight />
</Button>
</div>
</div>
<video <video
src="/svgaction.mp4" src="/svgaction.mp4"
className="rounded-xl aspect-video bg-[#09090b]" className="rounded-xl aspect-video bg-[#09090b]"
controls controls
poster="/poster.svg" poster="/poster.svg"
></video> ></video>
<hr className="w-full h-1" /> <hr className="w-full h-1" />
</section> </section>
); );
}; };
export default Partners; export default Partners;

2
components/shared/Testimonials.tsx
View file

@ -81,7 +81,7 @@ const Testimonials = () => {
</div> </div>
<h1 className="text-3xl md:text-5xl font-bold text-center"> <h1 className="text-3xl md:text-5xl font-bold text-center">
Hear it from{" "} Hear it from{" "}
<span className="bg-gradient-to-b from-green-200 to-primary text-transparent bg-clip-text"> <span className="bg-gradient-to-b from-green-300 to-primary text-transparent bg-clip-text">
our users our users
</span> </span>
</h1> </h1>