Skip to content

Commit c9e3d97

Browse files
KayvanShah1KayvanShah1
committed
landing page
1 parent 3d379b7 commit c9e3d97

File tree

18 files changed

+1324
-550
lines changed

18 files changed

+1324
-550
lines changed

‎frontend/src/app/(root)/layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1+
import MarketingNavbar from "@/components/layout/marketing-navbar";
2+
import MarketingFooter from "@/components/layout/marketing-footer";
13
import React from "react";
24

35
const Layout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
4-
return <main>{children}</main>;
6+
return (
7+
<div className="flex min-h-screen flex-col">
8+
<MarketingNavbar />
9+
<main className="flex-1">{children}</main>
10+
<MarketingFooter />
11+
</div>
12+
);
513
};
614

715
export default Layout;

‎frontend/src/app/(root)/page.tsx‎

Lines changed: 10 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,15 @@
1-
import ThemeToggle from "@/components/theme-toggle";
2-
import Image from "next/image";
1+
"use client";
2+
3+
import Hero from "@/components/blocks/hero";
4+
import Features from "@/components/blocks/features";
5+
import FAQ from "@/components/blocks/faq";
36

47
export default function Home() {
58
return (
6-
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
7-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
8-
<Image
9-
className="dark:invert"
10-
src="/next.svg"
11-
alt="Next.js logo"
12-
width={180}
13-
height={38}
14-
priority
15-
/>
16-
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
17-
<li className="mb-2 tracking-[-.01em]">
18-
Get started by editing{" "}
19-
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
20-
src/app/page.tsx
21-
</code>
22-
.
23-
</li>
24-
<li className="tracking-[-.01em]">
25-
Save and see your changes instantly.
26-
</li>
27-
</ol>
28-
29-
<div className="flex gap-4 items-center flex-col sm:flex-row">
30-
<a
31-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
32-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
33-
target="_blank"
34-
rel="noopener noreferrer"
35-
>
36-
<Image
37-
className="dark:invert"
38-
src="/vercel.svg"
39-
alt="Vercel logomark"
40-
width={20}
41-
height={20}
42-
/>
43-
Deploy now
44-
</a>
45-
<a
46-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
47-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
>
51-
Read our docs
52-
</a>
53-
<ThemeToggle />
54-
</div>
55-
</main>
56-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
57-
<a
58-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
59-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
60-
target="_blank"
61-
rel="noopener noreferrer"
62-
>
63-
<Image
64-
aria-hidden
65-
src="/file.svg"
66-
alt="File icon"
67-
width={16}
68-
height={16}
69-
/>
70-
Learn
71-
</a>
72-
<a
73-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
74-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
75-
target="_blank"
76-
rel="noopener noreferrer"
77-
>
78-
<Image
79-
aria-hidden
80-
src="/window.svg"
81-
alt="Window icon"
82-
width={16}
83-
height={16}
84-
/>
85-
Examples
86-
</a>
87-
<a
88-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
89-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
90-
target="_blank"
91-
rel="noopener noreferrer"
92-
>
93-
<Image
94-
aria-hidden
95-
src="/globe.svg"
96-
alt="Globe icon"
97-
width={16}
98-
height={16}
99-
/>
100-
Go to nextjs.org →
101-
</a>
102-
</footer>
103-
</div>
9+
<>
10+
<Hero />
11+
<Features />
12+
<FAQ />
13+
</>
10414
);
10515
}

‎frontend/src/app/globals.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,7 @@
119119
body {
120120
@apply bg-background text-foreground;
121121
}
122+
section {
123+
@apply scroll-mt-24;
124+
}
122125
}

‎frontend/src/components/blocks/about.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { motion } from "motion/react";
2+
3+
export function About() {
4+
return (
5+
<section
6+
id="about"
7+
className="container mx-auto px-4 py-24 text-center"
8+
>
9+
<motion.div
10+
initial={{ opacity: 0, y: 20 }}
11+
whileInView={{ opacity: 1, y: 0 }}
12+
viewport={{ once: true }}
13+
className="mx-auto max-w-3xl space-y-4"
14+
>
15+
<h2 className="text-3xl font-bold tracking-tight">
16+
About Taskaza
17+
</h2>
18+
<p className="text-muted-foreground">
19+
Taskaza is a lightweight task manager enhanced with AI to
20+
automate your workflow and keep you focused on what matters.
21+
</p>
22+
</motion.div>
23+
</section>
24+
);
25+
}
26+
27+
export default About;

‎frontend/src/components/blocks/faq.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
"use client";
2+
3+
import { faqs } from "@/data/faqs";
4+
5+
export default function FAQ() {
6+
return (
7+
<section className="scroll-py-16 py-16 md:scroll-py-32 md:py-32" id="faqs">
8+
<div className="mx-auto max-w-5xl px-6">
9+
<div className="grid gap-y-12 px-2 lg:[grid-template-columns:1fr_auto]">
10+
<div className="text-center lg:text-left">
11+
<h2 className="mb-4 text-3xl font-semibold md:text-4xl">
12+
Frequently <br className="hidden lg:block" /> Asked <br className="hidden lg:block" />
13+
Questions
14+
</h2>
15+
<p>Quick answers about Taskaza’s AI, API, and dashboard.</p>
16+
</div>
17+
<div className="divide-y divide-dashed sm:mx-auto sm:max-w-lg lg:mx-0">
18+
{faqs.map((f, i) => (
19+
<div className={i === 0 ? "pb-6" : "py-6"} key={i}>
20+
<h3 className="text-base font-medium">{f.question}</h3>
21+
<p className="text-muted-foreground mt-4 text-base">{f.answer}</p>
22+
</div>
23+
))}
24+
</div>
25+
</div>
26+
</div>
27+
</section>
28+
);
29+
}

‎frontend/src/components/blocks/features.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { features } from "@/data/features";
2+
3+
import { Cloud, Cpu, Fingerprint, Pencil, Settings2, Sparkles, Zap } from "lucide-react";
4+
5+
const iconFor = (title: string) => {
6+
switch (title) {
7+
case "AI assistance":
8+
return Sparkles;
9+
case "Fast dashboard":
10+
return Zap;
11+
case "Security first":
12+
return Fingerprint;
13+
case "REST API":
14+
return Settings2;
15+
case "Customizable tasks":
16+
return Pencil;
17+
case "Deployed live":
18+
return Cloud;
19+
default:
20+
return Cpu;
21+
}
22+
};
23+
24+
export default function Features() {
25+
return (
26+
<section className="py-12 md:py-20" id="features">
27+
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
28+
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
29+
<h2 className="text-4xl font-medium text-balance lg:text-5xl">
30+
Built for fast, secure task management
31+
</h2>
32+
<p>
33+
Taskaza blends an AI agent, a clean dashboard, and secure APIs so you can create, organize, and
34+
manage your work with ease.
35+
</p>
36+
</div>
37+
38+
<div className="relative mx-auto grid max-w-4xl divide-x divide-y rounded-2xl border *:p-12 sm:grid-cols-2 lg:grid-cols-3">
39+
{features.map((f) => {
40+
const Icon = iconFor(f.title);
41+
return (
42+
<div key={f.title} className="space-y-2">
43+
<div className="flex items-center gap-2">
44+
<Icon className="size-4" aria-hidden />
45+
<h3 className="text-sm font-medium">{f.title}</h3>
46+
</div>
47+
<p className="text-sm">{f.description}</p>
48+
</div>
49+
);
50+
})}
51+
</div>
52+
</div>
53+
</section>
54+
);
55+
}

0 commit comments

Comments
 (0)