Skip to content

Commit 97e7191

Browse files
DawitliorDawitlior
committed
landing page
1 parent 5106f8c commit 97e7191

File tree

7 files changed

+207
-17
lines changed

7 files changed

+207
-17
lines changed

‎app/(landing)/layout.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const LandingLayout = ({
2+
children
3+
}: {
4+
children: React.ReactNode;
5+
}) => {
6+
return (
7+
<main className="h-full bg-[#111827] overflow-auto">
8+
<div className="mx-auto max-w-screen-xl h-full w-full">
9+
{children}
10+
</div>
11+
</main>
12+
);
13+
}
14+
15+
export default LandingLayout;

‎app/(landing)/page.tsx

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
1+
import { LandingNavbar } from "@/components/Landing-navbar"
2+
import { LandingContent } from "@/components/landing-content"
3+
import { LandingHero } from "@/components/landing-hero"
14
import { Button } from "@/components/ui/button"
25
import Link from "next/link"
36

47
const LandingPage = () => {
5-
return <div>
6-
landing page (Unprotected)
7-
<div>
8-
<Link href="/sign-in">
9-
<Button>
10-
Login
11-
</Button>
12-
</Link>
13-
14-
<Link href="/sign-up">
15-
<Button>
16-
Register
17-
</Button>
18-
</Link>
19-
20-
</div>
21-
</div>
8+
return (
9+
<div className="h-full">
10+
<LandingNavbar />
11+
<LandingHero />
12+
<LandingContent />
13+
</div>
14+
)
2215
}
2316

2417
export default LandingPage

‎components/Landing-navbar.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use client";
2+
3+
import { Montserrat } from "next/font/google";
4+
import Image from "next/image";
5+
import Link from "next/link";
6+
import { useAuth } from "@clerk/nextjs";
7+
8+
import { cn } from "@/lib/utils";
9+
import { Button } from "@/components/ui/button";
10+
11+
const font = Montserrat({ weight: "600", subsets: ["latin"] });
12+
13+
export const LandingNavbar = () => {
14+
const { isSignedIn } = useAuth();
15+
16+
return (
17+
<nav className="p-4 bg-transparent flex items-center justify-between">
18+
<Link href="/" className="flex items-center">
19+
<div className="relative h-8 w-8 mr-4">
20+
<Image fill alt="Logo" src="/logo.png" />
21+
</div>
22+
<h1 className={cn("text-2xl font-bold text-white", font.className)}>
23+
Genius
24+
</h1>
25+
</Link>
26+
27+
<div className="flex items-center gap-x-2">
28+
<Link href={isSignedIn ? "/dashboard" : "/sign-up"}>
29+
<Button variant="outline" className="rounded-full">
30+
Get Started
31+
</Button>
32+
</Link>
33+
</div>
34+
</nav>
35+
);
36+
};

‎components/landing-content.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
"use client";
2+
3+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4+
5+
const testimonials = [
6+
{
7+
name: "Solomon Avraham",
8+
avatar: "J",
9+
title: "Software Engineer",
10+
description: "This is the best application I've ever used!",
11+
},
12+
{
13+
name: "Lior Aytegev",
14+
avatar: "A",
15+
title: "Full-stack Developer",
16+
description: "I use this daily for generating new photos!",
17+
},
18+
{
19+
name: "Abaynech Asaye",
20+
avatar: "M",
21+
title: "Front-End Developer",
22+
description:
23+
"This app has changed my life, cannot imagine working without it!",
24+
},
25+
{
26+
name: "Daniel Malada",
27+
avatar: "M",
28+
title: "Backend Engineer",
29+
description:
30+
"The best in class, definitely worth the premium subscription!",
31+
},
32+
{
33+
name: "Eldad Brhano",
34+
avatar: "M",
35+
title: "Backend Engineer",
36+
description:
37+
"The best in class, definitely worth the premium subscription!",
38+
},
39+
];
40+
41+
export const LandingContent = () => {
42+
return (
43+
<div className="px-10 pb-20">
44+
<h2 className="text-center text-4xl text-white font-extrabold mb-10">
45+
Testimonials
46+
</h2>
47+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
48+
{testimonials.map((item) => (
49+
<Card
50+
key={item.description}
51+
className="bg-[#192339] border-none text-white"
52+
>
53+
<CardHeader>
54+
<CardTitle className="flex items-center gap-x-2">
55+
<div>
56+
<p className="text-lg">{item.name}</p>
57+
<p className="text-zinc-400 text-sm">{item.title}</p>
58+
</div>
59+
</CardTitle>
60+
<CardContent className="pt-4 px-0">
61+
{item.description}
62+
</CardContent>
63+
</CardHeader>
64+
</Card>
65+
))}
66+
</div>
67+
</div>
68+
);
69+
};

‎components/landing-hero.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client";
2+
3+
import TypewriterComponent from "typewriter-effect";
4+
import Link from "next/link";
5+
import { useAuth } from "@clerk/nextjs";
6+
7+
import { Button } from "@/components/ui/button";
8+
9+
export const LandingHero = () => {
10+
const { isSignedIn } = useAuth();
11+
12+
return (
13+
<div className="text-white font-bold py-36 text-center space-y-5">
14+
<div className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl space-y-5 font-extrabold">
15+
<h1>The Best AI Tool for</h1>
16+
<div className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
17+
<TypewriterComponent
18+
options={{
19+
strings: [
20+
"Chatbot.",
21+
"Photo Generation.",
22+
"Blog Writing.",
23+
"Mail Writing.",
24+
],
25+
autoStart: true,
26+
loop: true,
27+
}}
28+
/>
29+
</div>
30+
</div>
31+
<div className="text-sm md:text-xl font-light text-zinc-400">
32+
Create content using AI 10x faster.
33+
</div>
34+
<div>
35+
<Link href={isSignedIn ? "/dashboard" : "/sign-up"}>
36+
<Button
37+
variant="premium"
38+
className="md:text-lg p-4 md:p-6 rounded-full font-semibold"
39+
>
40+
Start Generating For Free
41+
</Button>
42+
</Link>
43+
</div>
44+
<div className="text-zinc-400 text-xs md:text-sm font-normal">
45+
No credit card required.
46+
</div>
47+
</div>
48+
);
49+
};

‎package-lock.json

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"tailwindcss": "3.3.3",
4444
"tailwindcss-animate": "^1.0.6",
4545
"typescript": "5.1.6",
46+
"typewriter-effect": "^2.20.1",
4647
"zod": "^3.21.4",
4748
"zustand": "^4.3.9"
4849
},

0 commit comments

Comments
 (0)