added newsletter and some other stuffs
This commit is contained in:
Proxyy587
parent
aab9288adb
commit
e6b7dc7cb9
10 changed files with 152 additions and 7 deletions
|
|
@ -2,14 +2,16 @@ import About from "@/components/shared/About";
|
|||
import Hero from "@/components/shared/Hero";
|
||||
import HowItWorks from "@/components/shared/HowItWorks";
|
||||
import Navbar from "@/components/shared/Navbar";
|
||||
import Newsletter from "@/components/shared/Newsletter";
|
||||
|
||||
const RootPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<About />
|
||||
<HowItWorks />
|
||||
<About />
|
||||
<Newsletter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
7
components/shared/FAQ.tsx
Normal file
7
components/shared/FAQ.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import React from "react";
|
||||
|
||||
const Faq = () => {
|
||||
return <div>Faq</div>;
|
||||
};
|
||||
|
||||
export default Faq;
|
||||
|
|
@ -95,7 +95,7 @@ const Hero = () => {
|
|||
) : (
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{command.slice(0, 40)}
|
||||
{command.slice(0, 39)}...
|
||||
</Button>
|
||||
<p className="hidden lg:block">|</p>
|
||||
<p className="block lg:hidden">or</p>
|
||||
|
|
|
|||
|
|
@ -115,7 +115,34 @@ const HeroCards = () => {
|
|||
})}
|
||||
>
|
||||
<span className="sr-only">X icon</span>
|
||||
<Twitter />
|
||||
<div className="hidden dark:block">
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 25 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19.0039 2.34375H22.4512L14.9219 10.9473L23.7793 22.6562H16.8457L11.4111 15.5566L5.2002 22.6562H1.74805L9.7998 13.4521L1.30859 2.34375H8.41797L13.3252 8.83301L19.0039 2.34375ZM17.793 20.5957H19.7021L7.37793 4.29688H5.32715L17.793 20.5957Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="dark:hidden block">
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 25 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19.0039 2.34375H22.4512L14.9219 10.9473L23.7793 22.6562H16.8457L11.4111 15.5566L5.2002 22.6562H1.74805L9.7998 13.4521L1.30859 2.34375H8.41797L13.3252 8.83301L19.0039 2.34375ZM17.793 20.5957H19.7021L7.37793 4.29688H5.32715L17.793 20.5957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={cards.aboutCard.socialLinks.Mastodon}
|
||||
|
|
@ -320,6 +347,7 @@ const HeroCards = () => {
|
|||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Service */}
|
||||
<Card className="absolute w-[350px] -right-[10px] bottom-[75px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
|
||||
<CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Features } from "@/constants";
|
||||
import React from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
||||
|
||||
const HowItWorks = () => {
|
||||
return (
|
||||
|
|
@ -9,6 +11,23 @@ const HowItWorks = () => {
|
|||
development
|
||||
</span>
|
||||
</h2>
|
||||
<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
|
||||
apps. Accessible. Customizable. Open Source.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{Features.map(({ icon, title, description }) => (
|
||||
<Card key={title} className="bg-muted/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="grid gap-4 place-items-center">
|
||||
{icon}
|
||||
{title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>{description}</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -53,15 +53,31 @@ const MobileNav = () => {
|
|||
{label}
|
||||
</Link>
|
||||
))}
|
||||
{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
|
||||
{NAVBAR.rightLinks?.map(({ href, label, target }) => (
|
||||
<Link
|
||||
key={label}
|
||||
href={href}
|
||||
target={target}
|
||||
className={`w-[110px] ${buttonVariants({
|
||||
className={`w-[110px] gap-2 ${buttonVariants({
|
||||
variant: "secondary",
|
||||
})}`}
|
||||
></Link>
|
||||
>
|
||||
<Image
|
||||
src="/next.svg"
|
||||
alt="git"
|
||||
width={23}
|
||||
height={23}
|
||||
className="hidden dark:block"
|
||||
/>
|
||||
<Image
|
||||
src="/nextdark.svg"
|
||||
alt="git"
|
||||
width={23}
|
||||
height={23}
|
||||
className="block dark:hidden"
|
||||
/>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</SheetContent>
|
||||
|
|
|
|||
37
components/shared/Newsletter.tsx
Normal file
37
components/shared/Newsletter.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const Newsletter = () => {
|
||||
const [submission, setSubmission] = useState<
|
||||
"idle" | "loading" | "success" | "error"
|
||||
>("idle");
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log("Done");
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
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
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Newsletter;
|
||||
7
components/shared/Partners.tsx
Normal file
7
components/shared/Partners.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import React from "react";
|
||||
|
||||
const Partners = () => {
|
||||
return <div>Partners</div>;
|
||||
};
|
||||
|
||||
export default Partners;
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { BadgeAlert, BarChart4, Cog, ShieldCheck } from "lucide-react";
|
||||
|
||||
export const NAVBAR = {
|
||||
centerLinks: [
|
||||
{
|
||||
|
|
@ -48,3 +50,30 @@ export const stats = [
|
|||
count: 2,
|
||||
},
|
||||
];
|
||||
|
||||
export const Features = [
|
||||
{
|
||||
icon: <ShieldCheck className="w-10 h-10 text-primary" />,
|
||||
title: "Complete Secured ",
|
||||
description:
|
||||
"lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
|
||||
},
|
||||
{
|
||||
icon: <BadgeAlert className="w-10 h-10 text-primary" />,
|
||||
title: "Best Support",
|
||||
description:
|
||||
"lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
|
||||
},
|
||||
{
|
||||
icon: <BarChart4 className="w-10 h-10 text-primary" />,
|
||||
title: "Most Scalable ",
|
||||
description:
|
||||
"lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
|
||||
},
|
||||
{
|
||||
icon: <Cog className="w-10 h-10 text-primary" />,
|
||||
title: "Fully Configurable ",
|
||||
description:
|
||||
"lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 629 B After Width: | Height: | Size: 236 B |
Loading…
Reference in a new issue