Skip to content

Commit ff0e694

Browse files
MohamedBassemMohamedBassem
committed
feat(landing): dropping the feature grid
1 parent cc93284 commit ff0e694

7 files changed

Lines changed: 201 additions & 160 deletions

File tree

‎apps/landing/src/Homepage.tsx‎

Lines changed: 0 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,14 @@
1-
import {
2-
ArrowDownNarrowWide,
3-
Bookmark,
4-
BrainCircuit,
5-
CheckCheck,
6-
Highlighter,
7-
Plug,
8-
Rss,
9-
Server,
10-
SunMoon,
11-
TextSearch,
12-
Users,
13-
Workflow,
14-
} from "lucide-react";
15-
161
import ClosingCta from "./components/ClosingCta";
17-
import FeaturesGrid from "./components/FeaturesGrid";
182
import LlmReady from "./components/LlmReady";
193
import OpenSource from "./components/OpenSource";
204
import Platforms from "./components/Platforms";
215
import UseCases from "./components/UseCases";
226

23-
const featuresList = [
24-
{
25-
icon: Bookmark,
26-
title: "Bookmark",
27-
description: "Bookmark links, take simple notes and store images and PDFs.",
28-
},
29-
{
30-
icon: BrainCircuit,
31-
title: "AI Tagging",
32-
description:
33-
"Automatically tags your bookmarks using AI for faster retrieval.",
34-
},
35-
{
36-
icon: Users,
37-
title: "Collaborative Lists",
38-
description:
39-
"Collaborate with others on shared lists for team bookmarking.",
40-
},
41-
{
42-
icon: Rss,
43-
title: "RSS Feeds",
44-
description:
45-
"Auto-hoard content from RSS feeds to stay updated effortlessly.",
46-
},
47-
{
48-
icon: Workflow,
49-
title: "Rule Engine",
50-
description:
51-
"Customize bookmark management with powerful automation rules.",
52-
},
53-
{
54-
icon: Highlighter,
55-
title: "Highlights",
56-
description:
57-
"Highlight text on any saved page and keep your highlights organized for quick reference.",
58-
},
59-
{
60-
icon: Plug,
61-
title: "API & Webhooks",
62-
description: "Integrate with other services using REST API and webhooks.",
63-
},
64-
{
65-
icon: TextSearch,
66-
title: "Full Text Search",
67-
description:
68-
"Search through all your bookmarks using full text or semantic search.",
69-
},
70-
{
71-
icon: Server,
72-
title: "Self Hosting",
73-
description: "Easy self hosting with Docker for privacy and control.",
74-
},
75-
{
76-
icon: CheckCheck,
77-
title: "Bulk Actions",
78-
description: "Quickly manage your bookmarks with bulk actions.",
79-
},
80-
{
81-
icon: ArrowDownNarrowWide,
82-
title: "Auto Fetch",
83-
description:
84-
"Automatically fetches title, description and images for links.",
85-
},
86-
{
87-
icon: SunMoon,
88-
title: "Dark Mode",
89-
description: "Karakeep supports dark mode for better reading experience.",
90-
},
91-
];
92-
937
export default function Homepage() {
948
return (
959
<>
9610
<UseCases />
9711
<LlmReady />
98-
<FeaturesGrid features={featuresList} />
9912
<Platforms />
10013
<OpenSource />
10114
<ClosingCta />

‎apps/landing/src/components/FeatureShowcase.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,33 @@ export default function FeatureShowcase({
6363
</div>
6464
);
6565
}
66+
67+
interface FeatureShowcaseHalfProps {
68+
label: string;
69+
headline: string;
70+
description: string;
71+
children: ReactNode;
72+
}
73+
74+
/** Half-width showcase panel: text on top, visual below. */
75+
export function FeatureShowcaseHalf({
76+
label,
77+
headline,
78+
description,
79+
children,
80+
}: FeatureShowcaseHalfProps) {
81+
return (
82+
<div className="flex flex-col gap-[18px] rounded-3xl bg-neutral-50 px-6 py-10 sm:px-12 sm:py-12">
83+
<span className="text-xs font-bold tracking-[0.14em] text-neutral-500">
84+
{label}
85+
</span>
86+
<h3 className="font-display text-2xl font-bold tracking-[-0.02em] text-neutral-900 sm:text-[28px] sm:leading-[1.2]">
87+
{headline}
88+
</h3>
89+
<p className="text-base leading-[1.65] text-neutral-500">{description}</p>
90+
<div className="mt-2 flex w-full grow items-center justify-center">
91+
{children}
92+
</div>
93+
</div>
94+
);
95+
}

‎apps/landing/src/components/FeaturesGrid.tsx‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎apps/landing/src/components/Hero.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,13 @@ import iosHome from "../assets/ios-home.webp";
9595
</div>
9696
<!-- Phone overlay -->
9797
<div
98-
class="absolute -bottom-10 right-0 hidden w-[220px] rounded-[38px] bg-neutral-900 p-[9px] shadow-[0_2px_4px_rgba(15,23,42,0.12),0_32px_64px_-16px_rgba(15,23,42,0.38)] lg:block xl:-right-7"
98+
class="absolute -bottom-10 right-0 hidden w-[220px] rounded-[34px] bg-neutral-900 p-1.5 shadow-[0_2px_4px_rgba(15,23,42,0.12),0_32px_64px_-16px_rgba(15,23,42,0.38)] lg:block xl:-right-7"
9999
>
100-
<div class="overflow-hidden rounded-[30px] bg-white">
100+
<div class="relative overflow-hidden rounded-[28px] bg-[#f2f2f7] pt-[30px]">
101+
<div
102+
class="absolute left-1/2 top-1.5 h-[18px] w-16 -translate-x-1/2 rounded-full bg-neutral-900"
103+
>
104+
</div>
101105
<Image
102106
src={iosHome}
103107
alt="Karakeep iOS app"

‎apps/landing/src/components/UseCases.tsx‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import {
2-
ArrowDownNarrowWide,
2+
Archive,
33
BookOpen,
44
BrainCircuit,
55
FileText,
66
Highlighter,
77
Link2,
8+
ScanText,
89
Smartphone,
9-
Sparkles,
1010
Tag,
1111
Text,
1212
Workflow,
1313
Zap,
1414
} from "lucide-react";
1515

16-
import FeatureShowcase from "./FeatureShowcase";
16+
import FeatureShowcase, { FeatureShowcaseHalf } from "./FeatureShowcase";
17+
import CollabListCardMockup from "./showcase/CollabListCardMockup";
18+
import RssFeedsCardMockup from "./showcase/RssFeedsCardMockup";
1719
import RuleCardMockup from "./showcase/RuleCardMockup";
1820
import {
1921
BrowserScreenshotCard,
@@ -74,8 +76,8 @@ export default function UseCases() {
7476
{ icon: Link2, text: "Save any link with one click" },
7577
{ icon: FileText, text: "Store notes, images, and PDFs" },
7678
{
77-
icon: ArrowDownNarrowWide,
78-
text: "Auto-fetch metadata and thumbnails",
79+
icon: Archive,
80+
text: "Full-page archives protect against link rot",
7981
},
8082
]}
8183
>
@@ -87,6 +89,29 @@ export default function UseCases() {
8789
/>
8890
</FeatureShowcase>
8991

92+
<FeatureShowcase
93+
label="SEARCH"
94+
headline="Find it the way you remember it"
95+
description="Search the full text of everything you save — or switch to semantic search and find bookmarks by what they mean, not just the words they contain."
96+
bullets={[
97+
{
98+
icon: Zap,
99+
text: "Blazingly fast full-text search across everything you save",
100+
},
101+
{
102+
icon: SearchModesIcon,
103+
text: "Keyword, hybrid, and semantic modes in the search bar",
104+
},
105+
{
106+
icon: ScanText,
107+
text: "OCR makes text inside images and screenshots searchable",
108+
},
109+
]}
110+
reverse
111+
>
112+
<SearchCardMockup />
113+
</FeatureShowcase>
114+
90115
<FeatureShowcase
91116
label="ORGANIZATION"
92117
headline="Let AI organize your bookmarks"
@@ -96,7 +121,6 @@ export default function UseCases() {
96121
{ icon: Text, text: "AI-generated summaries" },
97122
{ icon: Zap, text: "Instant organization as you save" },
98123
]}
99-
reverse
100124
>
101125
<TagsCardMockup />
102126
</FeatureShowcase>
@@ -113,6 +137,7 @@ export default function UseCases() {
113137
{ icon: Highlighter, text: "Highlight text on any saved page" },
114138
{ icon: Smartphone, text: "Read offline in the mobile apps" },
115139
]}
140+
reverse
116141
>
117142
<PaperScreenshotCard
118143
src={readerVignette}
@@ -131,32 +156,26 @@ export default function UseCases() {
131156
{ icon: Zap, text: "Trigger actions on new bookmarks" },
132157
{ icon: Tag, text: "Auto-tag based on URL patterns or content" },
133158
]}
134-
reverse
135159
>
136160
<RuleCardMockup />
137161
</FeatureShowcase>
138162

139-
<FeatureShowcase
140-
label="SEARCH"
141-
headline="Find it the way you remember it"
142-
description="Search the full text of everything you save — or switch to semantic search and find bookmarks by what they mean, not just the words they contain."
143-
bullets={[
144-
{
145-
icon: Zap,
146-
text: "Blazingly fast full-text search across everything you save",
147-
},
148-
{
149-
icon: Sparkles,
150-
text: "Semantic mode finds conceptually similar bookmarks",
151-
},
152-
{
153-
icon: SearchModesIcon,
154-
text: "Keyword, hybrid, and semantic modes in the search bar",
155-
},
156-
]}
157-
>
158-
<SearchCardMockup />
159-
</FeatureShowcase>
163+
<div className="grid gap-10 lg:grid-cols-2">
164+
<FeatureShowcaseHalf
165+
label="RSS FEEDS"
166+
headline="Your feeds, on autopilot"
167+
description="Subscribe to blogs and news sites and Karakeep saves new posts automatically — tagged, indexed, and searchable like everything else. Any list can be published back out as an RSS feed, too."
168+
>
169+
<RssFeedsCardMockup />
170+
</FeatureShowcaseHalf>
171+
<FeatureShowcaseHalf
172+
label="COLLABORATION"
173+
headline="Curate lists together"
174+
description="Invite friends or teammates into any list as editors or viewers. Plan a trip, run a book club, or build a team reading list — everyone sees the same collection."
175+
>
176+
<CollabListCardMockup />
177+
</FeatureShowcaseHalf>
178+
</div>
160179
</div>
161180
</section>
162181
);

‎apps/landing/src/components/showcase/CollabListCardMockup.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Plus } from "lucide-react";
2+
3+
import { MockupCard } from "./MockupCard";
4+
5+
const collaborators = [
6+
{
7+
initial: "Y",
8+
name: "You",
9+
role: "Owner",
10+
color: "bg-violet-100 text-violet-700",
11+
},
12+
{
13+
initial: "L",
14+
name: "Layla",
15+
role: "Editor",
16+
color: "bg-pink-100 text-pink-700",
17+
},
18+
{
19+
initial: "T",
20+
name: "Tom",
21+
role: "Viewer",
22+
color: "bg-amber-100 text-amber-700",
23+
},
24+
];
25+
26+
/** Shared-list mockup: a list with collaborators and their roles. */
27+
export default function CollabListCardMockup() {
28+
return (
29+
<MockupCard className="max-w-[420px] bg-white p-5">
30+
<div className="flex flex-col gap-0.5">
31+
<span className="text-[15px] font-semibold text-neutral-900">
32+
📚 Book Club Picks
33+
</span>
34+
<span className="text-xs text-neutral-500">
35+
Shared list · 24 bookmarks
36+
</span>
37+
</div>
38+
<div className="mt-2 flex flex-col divide-y divide-neutral-100">
39+
{collaborators.map((person) => (
40+
<div key={person.name} className="flex items-center gap-3 py-3">
41+
<div
42+
className={`flex size-8 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ${person.color}`}
43+
>
44+
{person.initial}
45+
</div>
46+
<span className="grow text-[13.5px] font-medium text-neutral-900">
47+
{person.name}
48+
</span>
49+
<span className="rounded-full border border-neutral-200 bg-neutral-50 px-2.5 py-0.5 text-[11px] font-medium text-neutral-600">
50+
{person.role}
51+
</span>
52+
</div>
53+
))}
54+
</div>
55+
<div className="flex items-center justify-center gap-2 rounded-[10px] border border-dashed border-neutral-200 py-2.5">
56+
<Plus className="size-3.5 text-neutral-400" />
57+
<span className="text-[13px] text-neutral-400">
58+
Invite collaborator
59+
</span>
60+
</div>
61+
</MockupCard>
62+
);
63+
}

0 commit comments

Comments
 (0)