Skip to content

Commit fb5cc8b

Browse files
codebestiacodebestia
authored
Merge pull request #5 from codebestia/dev
feat(web): landing page for Clicked
2 parents acadddc + 455cd78 commit fb5cc8b

15 files changed

Lines changed: 390 additions & 154 deletions

File tree

‎apps/web/src/app/globals.css‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
@import "tailwindcss";
22

33
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
4+
--background: #0a0a0f;
5+
--foreground: #f0f0f5;
6+
--accent: #7c5cfc;
7+
--accent-light: #a78bfa;
8+
--muted: #3f3f50;
9+
--card: #13131f;
10+
--border: #1e1e2e;
611
}
712

813
@theme inline {
914
--color-background: var(--background);
1015
--color-foreground: var(--foreground);
16+
--color-accent: var(--accent);
17+
--color-accent-light: var(--accent-light);
18+
--color-muted: var(--muted);
19+
--color-card: var(--card);
20+
--color-border: var(--border);
1121
--font-sans: var(--font-geist-sans);
1222
--font-mono: var(--font-geist-mono);
1323
}
1424

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
20-
}
21-
2225
body {
2326
background: var(--background);
2427
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
28+
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
29+
}
30+
31+
/* Smooth scrolling */
32+
html {
33+
scroll-behavior: smooth;
2634
}

‎apps/web/src/app/layout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
1313
});
1414

1515
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
16+
title: "Clicked — Web3 Social Messaging",
17+
description:
18+
"Chat, send tokens, and fund ideas — all in one place. A decentralized messaging platform built on Stellar.",
1819
};
1920

2021
export default function RootLayout({

‎apps/web/src/app/page.tsx‎

Lines changed: 18 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,23 @@
1-
import Image from "next/image";
1+
import { Navbar } from "@/components/landing/Navbar";
2+
import { Hero } from "@/components/landing/Hero";
3+
import { Features } from "@/components/landing/Features";
4+
import { HowItWorks } from "@/components/landing/HowItWorks";
5+
import { TechStack } from "@/components/landing/TechStack";
6+
import { CTA } from "@/components/landing/CTA";
7+
import { Footer } from "@/components/landing/Footer";
28

3-
export default function Home() {
9+
export default function LandingPage() {
410
return (
5-
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6-
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={100}
12-
height={20}
13-
priority
14-
/>
15-
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16-
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
17-
To get started, edit the page.tsx file.
18-
</h1>
19-
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
20-
Looking for a starting point or more instructions? Head over to{" "}
21-
<a
22-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
23-
className="font-medium text-zinc-950 dark:text-zinc-50"
24-
>
25-
Templates
26-
</a>{" "}
27-
or the{" "}
28-
<a
29-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
className="font-medium text-zinc-950 dark:text-zinc-50"
31-
>
32-
Learning
33-
</a>{" "}
34-
center.
35-
</p>
36-
</div>
37-
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
38-
<a
39-
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
40-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
>
44-
<Image
45-
className="dark:invert"
46-
src="/vercel.svg"
47-
alt="Vercel logomark"
48-
width={16}
49-
height={16}
50-
/>
51-
Deploy Now
52-
</a>
53-
<a
54-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
55-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
Documentation
60-
</a>
61-
</div>
11+
<>
12+
<Navbar />
13+
<main>
14+
<Hero />
15+
<Features />
16+
<HowItWorks />
17+
<TechStack />
18+
<CTA />
6219
</main>
63-
</div>
20+
<Footer />
21+
</>
6422
);
6523
}

‎apps/web/src/components/landing/CTA.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export function CTA() {
2+
return (
3+
<section className="border-t border-[var(--border)]">
4+
<div className="relative mx-auto max-w-6xl overflow-hidden px-6 py-32 text-center">
5+
<div
6+
aria-hidden
7+
className="pointer-events-none absolute inset-0 flex items-center justify-center"
8+
>
9+
<div className="h-[400px] w-[400px] rounded-full bg-[var(--accent)]/10 blur-[100px]" />
10+
</div>
11+
<div className="relative z-10">
12+
<h2 className="text-3xl font-bold tracking-tight text-[var(--foreground)] sm:text-4xl">
13+
Ready to coordinate on-chain?
14+
</h2>
15+
<p className="mt-4 text-[var(--foreground)]/50">
16+
Connect your Stellar wallet and start building with your community.
17+
</p>
18+
<a
19+
href="/app"
20+
className="mt-8 inline-flex rounded-full bg-[var(--accent)] px-10 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[var(--accent)]/20 transition-opacity hover:opacity-90"
21+
>
22+
Launch App
23+
</a>
24+
</div>
25+
</div>
26+
</section>
27+
);
28+
}

‎apps/web/src/components/landing/Features.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const FEATURES = [
2+
{
3+
icon: "💬",
4+
title: "Wallet-to-Wallet Messaging",
5+
description:
6+
"Chat directly with any Stellar wallet address. No email, no username — just your public key.",
7+
},
8+
{
9+
icon: "💸",
10+
title: "Send Tokens in Chat",
11+
description:
12+
"Transfer XLM or any Soroban token inside a conversation. Payments feel as natural as sending a message.",
13+
},
14+
{
15+
icon: "🏦",
16+
title: "Group Treasuries",
17+
description:
18+
"Communities pool funds into a shared on-chain treasury. Transparent, permissionless, always auditable.",
19+
},
20+
{
21+
icon: "📋",
22+
title: "Community Proposals",
23+
description:
24+
"Submit funding ideas and let the group decide. Proposals live on-chain — no back-room decisions.",
25+
},
26+
{
27+
icon: "🗳️",
28+
title: "DAO-style Voting",
29+
description:
30+
"Lightweight on-chain voting tied to your wallet stake. One address, one voice — or weighted by contribution.",
31+
},
32+
{
33+
icon: "🤖",
34+
title: "AI-powered Insights",
35+
description:
36+
"Fraud detection, proposal summarisation, and smart assistants baked into the conversation layer.",
37+
},
38+
];
39+
40+
export function Features() {
41+
return (
42+
<section id="features" className="mx-auto max-w-6xl px-6 py-32">
43+
<div className="mb-16 text-center">
44+
<h2 className="text-3xl font-bold tracking-tight text-[var(--foreground)] sm:text-4xl">
45+
Everything in one place
46+
</h2>
47+
<p className="mt-4 text-[var(--foreground)]/50">
48+
No more switching between Telegram, Gnosis Safe, and Snapshot.
49+
</p>
50+
</div>
51+
52+
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
53+
{FEATURES.map((f) => (
54+
<div
55+
key={f.title}
56+
className="group rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 transition-colors hover:border-[var(--muted)]"
57+
>
58+
<span className="text-3xl">{f.icon}</span>
59+
<h3 className="mt-4 text-base font-semibold text-[var(--foreground)]">{f.title}</h3>
60+
<p className="mt-2 text-sm leading-relaxed text-[var(--foreground)]/50">{f.description}</p>
61+
</div>
62+
))}
63+
</div>
64+
</section>
65+
);
66+
}

‎apps/web/src/components/landing/Footer.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export function Footer() {
2+
return (
3+
<footer className="border-t border-[var(--border)] px-6 py-10">
4+
<div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 text-sm text-[var(--foreground)]/40 sm:flex-row">
5+
<span>
6+
clicked<span className="text-[var(--accent)]">.</span> — Web3 Social Messaging
7+
</span>
8+
<div className="flex items-center gap-6">
9+
<a
10+
href="https://github.com/codebestia/clicked"
11+
target="_blank"
12+
rel="noopener noreferrer"
13+
className="hover:text-[var(--foreground)] transition-colors"
14+
>
15+
GitHub
16+
</a>
17+
<a
18+
href="https://stellar.org"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
className="hover:text-[var(--foreground)] transition-colors"
22+
>
23+
Stellar
24+
</a>
25+
<span>MIT License</span>
26+
</div>
27+
</div>
28+
</footer>
29+
);
30+
}

‎apps/web/src/components/landing/Hero.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
export function Hero() {
2+
return (
3+
<section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6 pt-24 text-center">
4+
{/* Background glow */}
5+
<div
6+
aria-hidden
7+
className="pointer-events-none absolute inset-0 flex items-center justify-center"
8+
>
9+
<div className="h-[600px] w-[600px] rounded-full bg-[var(--accent)]/10 blur-[120px]" />
10+
</div>
11+
12+
<div className="relative z-10 flex max-w-3xl flex-col items-center gap-6">
13+
<span className="inline-flex items-center gap-2 rounded-full border border-[var(--accent)]/30 bg-[var(--accent)]/10 px-4 py-1.5 text-xs font-medium text-[var(--accent-light)]">
14+
<span className="h-1.5 w-1.5 rounded-full bg-[var(--accent-light)]" />
15+
Built on Stellar · Powered by Soroban
16+
</span>
17+
18+
<h1 className="text-5xl font-bold leading-tight tracking-tight text-[var(--foreground)] sm:text-6xl lg:text-7xl">
19+
Chat. Pay.{" "}
20+
<span className="bg-gradient-to-r from-[var(--accent)] to-[var(--accent-light)] bg-clip-text text-transparent">
21+
Build together.
22+
</span>
23+
</h1>
24+
25+
<p className="max-w-xl text-lg leading-relaxed text-[var(--foreground)]/60">
26+
Clicked is a decentralized messaging platform where you can send tokens
27+
as easily as messages, fund community ideas, and govern shared
28+
treasuries — all in one place.
29+
</p>
30+
31+
<div className="flex flex-col gap-3 sm:flex-row">
32+
<a
33+
href="/app"
34+
className="rounded-full bg-[var(--accent)] px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-[var(--accent)]/20 transition-opacity hover:opacity-90"
35+
>
36+
Launch App
37+
</a>
38+
<a
39+
href="https://github.com/codebestia/clicked"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="rounded-full border border-[var(--border)] px-8 py-3 text-sm font-semibold text-[var(--foreground)]/70 transition-colors hover:border-[var(--muted)] hover:text-[var(--foreground)]"
43+
>
44+
View on GitHub
45+
</a>
46+
</div>
47+
</div>
48+
49+
{/* Mock chat preview */}
50+
<div className="relative z-10 mt-20 w-full max-w-2xl">
51+
<div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl shadow-black/40">
52+
<div className="mb-4 flex items-center gap-3 border-b border-[var(--border)] pb-4">
53+
<div className="h-8 w-8 rounded-full bg-[var(--accent)]/30" />
54+
<div>
55+
<p className="text-sm font-medium text-[var(--foreground)]">builders-dao</p>
56+
<p className="text-xs text-[var(--foreground)]/40">4 members</p>
57+
</div>
58+
</div>
59+
<div className="flex flex-col gap-3 text-sm">
60+
<ChatBubble align="left" name="alice.xlm" message="Should we fund the new UI sprint? 🎨" />
61+
<ChatBubble align="right" name="You" message="Sent 50 XLM to the treasury ✓" highlight />
62+
<ChatBubble align="left" name="bob.xlm" message="Proposal live — 3/4 votes so far 🗳️" />
63+
</div>
64+
</div>
65+
</div>
66+
</section>
67+
);
68+
}
69+
70+
function ChatBubble({
71+
align,
72+
name,
73+
message,
74+
highlight,
75+
}: {
76+
align: "left" | "right";
77+
name: string;
78+
message: string;
79+
highlight?: boolean;
80+
}) {
81+
return (
82+
<div className={`flex gap-2 ${align === "right" ? "flex-row-reverse" : ""}`}>
83+
<div className="mt-1 h-6 w-6 shrink-0 rounded-full bg-[var(--muted)]" />
84+
<div className={`max-w-xs ${align === "right" ? "items-end" : "items-start"} flex flex-col gap-0.5`}>
85+
<span className="px-1 text-xs text-[var(--foreground)]/40">{name}</span>
86+
<div
87+
className={`rounded-2xl px-4 py-2 text-sm ${
88+
highlight
89+
? "bg-[var(--accent)] text-white"
90+
: "bg-[var(--border)] text-[var(--foreground)]/80"
91+
}`}
92+
>
93+
{message}
94+
</div>
95+
</div>
96+
</div>
97+
);
98+
}

0 commit comments

Comments
 (0)