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

faq compelte

Browse source
This commit is contained in:
Proxyy587 2024-06-15 22:11:36 +05:30
parent 11605759e6
commit 7436874738
9 changed files with 273 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/page.tsx
View file

@ -1,4 +1,5 @@
import About from "@/components/shared/About";
import Faq from "@/components/shared/FAQ";
import Hero from "@/components/shared/Hero";
import HowItWorks from "@/components/shared/HowItWorks";
import Navbar from "@/components/shared/Navbar";
@ -12,6 +13,7 @@ const RootPage = () => {
<HowItWorks />
<About />
<Newsletter />
<Faq />
</>
);
};

34
components/shared/FAQ.tsx
View file

@ -1,7 +1,39 @@
import { questions } from "@/constants";
import React from "react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../ui/accordion";
const Faq = () => {
return <div>Faq</div>;
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">
Frequently Asked Question
</h2>
<p className="textlg text-muted-foreground text-start mt-4 mb-8">
Find answers to common questions about SVRJS
</p>
<Accordion
type="single"
collapsible={true}
className="w-full AccordionRoot"
>
{questions.map(({ question, answer, key }) => (
<AccordionItem key={key} value={key} className="border-b">
<AccordionTrigger className="text-left text-lg">
{question}
</AccordionTrigger>
<AccordionContent className="text-[1rem] text-muted-foreground">
{answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</section>
);
};
export default Faq;

7
components/shared/Footer.tsx Normal file
View file

@ -0,0 +1,7 @@
import React from "react";
const Footer = () => {
return <div>Footer</div>;
};
export default Footer;

49
components/shared/Newsletter.tsx
View file

@ -1,6 +1,16 @@
"use client";
import { useState } from "react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import Image from "next/image";
import { Happy_Monkey } from "next/font/google";
const happyMonkey = Happy_Monkey({
preload: true,
weight: "400",
subsets: ["latin"],
});
const Newsletter = () => {
const [submission, setSubmission] = useState<
@ -15,21 +25,50 @@ 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 font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600">
<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">
Join The Newsletter!
</h3>
<p className="text-lg text-muted-foreground text-center mt-4 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. Website deployment is
a process of publishing a website into a production hosting
environment
and the resources required to run your website.
</p>
<form
className="relative flex flex-col w-full md:flex-row md:w-6/12 lg:w-4/12 mx-auto gap-4 md:gap-2"
onSubmit={handleSubmit}
></form>
>
<Input placeholder="example@subscribe.com"></Input>
<Button disabled={submission === "loading"}>Subscribe</Button>
<div className="pointer-events-none dark:invert -scale-x-100 absolute -bottom-14 right-1/2 md:right-14 inline-flex justify-center items-center gap-1">
<Image
src="/curly-arrow.png"
alt="see here"
width={35}
height={35}
/>
<span
className={`mt-10 font-bold text-black -scale-x-100 text-[15px] ${happyMonkey.className}`}
>
{submission === "idle" && "Subscribe Now"}
{submission === "loading" && (
<p className="text-sm text-center">Subscribing...</p>
)}
{submission === "success" && (
<p className="dark:invert text-sm text-center text-green-500">
🎉 Subscribed successfully...
</p>
)}
{submission === "error" && (
<p className="dark:invert text-sm text-center text-red-500">
😥 Something went wrong...
</p>
)}
</span>
</div>
</form>
</div>
<hr className="w-11/12 mx-auto" />
</section>
);
};

58
components/ui/accordion.tsx Normal file
View file

@ -0,0 +1,58 @@
"use client"
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"
const Accordion = AccordionPrimitive.Root
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

25
components/ui/input.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

39
constants/index.tsx
View file

@ -77,3 +77,42 @@ export const Features = [
"lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
},
];
export const questions = [
{
key: "item-1",
question: "What is a web server?",
answer:
"A web server is computer software that accepts HTTP requests and serves websites. Web servers can also be underlying hardware running web server software.",
},
{
key: "item-2",
question: "What is SVR.JS?",
answer:
"SVR.JS is web server software running on Node.JS that can host both static and dynamic content. With additional mods, SVR.JS can be used for different types of dynamic content and can even be used as a forward or reverse proxy. SVR.JS is licensed under a permissive MIT/X11 license",
},
{
key: "item-3",
question: "How was SVR.JS created?",
answer:
"Someone in 2018 wanted to create a website, but he didn't know about setting up popular web server software like Apache httpd, NGINX, or IIS... So he created his own web server in Node.JS to serve his website! And he saved it in a file called svr.js. Since then, this web server has been gradually turned from a web server intended for one website into a general-purpose web server, which is what SVR.JS is today!",
},
{
key: "item-4",
question: "How did SVR.JS get its name?",
answer:
"SVR.JS got its name from the original name of the server script: svr.js, one of many generic file names for a server written in JavaScript.",
},
{
key: "item-5",
question: "What is Node.JS?",
answer:
"Node.JS is an asynchronous event-driven JavaScript runtime built on Chromium's V8 engine. Node.JS is designed to build scalable network applications.",
},
{
key: "item-6",
question: "How can I use SVR.JS?",
answer:
"You can <a href='/docs' className='text-white'>read its documentation</a> to learn how to use the SVR.JS web server.",
},
];

64
package-lock.json generated
View file

@ -11,6 +11,7 @@
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-navigation-menu": "^1.1.4",
@ -550,6 +551,38 @@
}
}
},
"node_modules/@radix-ui/react-accordion": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
"integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-collapsible": "1.0.3",
"@radix-ui/react-collection": "1.0.3",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-alert-dialog": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz",
@ -680,6 +713,37 @@
}
}
},
"node_modules/@radix-ui/react-collapsible": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
"integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/react-use-layout-effect": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collection": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",

1
package.json
View file

@ -12,6 +12,7 @@
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-navigation-menu": "^1.1.4",