Skip to content

Commit fc4590d

Browse files
gdorsigdorsi
authored
Merge pull request #3475 from garden-co/add-alkalye-hifz-to-showcase
Add Alkalye & Hifz Garden to showcase, redesign layout
2 parents c7ce375 + 829e4da commit fc4590d

File tree

5 files changed

+103
-45
lines changed

5 files changed

+103
-45
lines changed

‎homepage/homepage/app/(others)/showcase/page.tsx‎

Lines changed: 15 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { products } from "@/content/showcase";
2-
import { HeroHeader } from "@garden-co/design-system/src/components/molecules/HeroHeader";
2+
import { H1 } from "@garden-co/design-system/src/components/atoms/Headings";
3+
import { Button } from "@garden-co/design-system/src/components/atoms/Button";
34
import { ContactForm } from "@/components/ContactForm";
5+
import { ShowcaseGrid } from "@/components/ShowcaseGrid";
46
import type { Metadata } from "next";
5-
import Image from "next/image";
6-
import Link from "next/link";
7-
import { H2 } from "@garden-co/design-system/src/components/atoms/Headings";
87

98
const metaTags = {
109
title: "Built with Jazz",
@@ -31,45 +30,21 @@ export const metadata: Metadata = {
3130
export default function Page() {
3231
return (
3332
<div className="container flex flex-col gap-6 pb-10 lg:pb-20">
34-
<HeroHeader
35-
title="Built with Jazz"
36-
slogan="Successful apps and systems across diverse industries."
37-
/>
33+
<hgroup className="pt-12 md:pt-20 mb-10 grid gap-2">
34+
<H1>Built with Jazz</H1>
35+
<p className="text-lg text-pretty leading-relaxed max-w-3xl dark:text-stone-200 md:text-xl">
36+
Successful apps and systems across diverse industries.
37+
</p>
38+
<Button href="#submit" className="mt-2" intent="primary">
39+
Submit your app &rarr;
40+
</Button>
41+
</hgroup>
3842

39-
<div className="flex flex-col gap-8 divide-y">
40-
{products.map((product) => (
41-
<div
42-
key={product.url}
43-
className="group flex flex-col gap-3 rounded-lg rounded-b-none pb-8 dark:bg-stone-950 md:flex-row md:gap-4"
44-
>
45-
<Link href={product.url} className="">
46-
<Image
47-
className="max-w-[calc(min(100%,32rem))] flex-1 rounded-md border dark:border-0"
48-
src={product.imageUrl}
49-
width="900"
50-
height="675"
51-
alt=""
52-
/>
53-
</Link>
43+
<ShowcaseGrid products={products} />
5444

55-
<div className="flex-2 flex min-w-[calc(min(100%,32rem))] flex-col gap-2">
56-
<H2 className="font-medium leading-none text-highlight">
57-
{product.name}
58-
</H2>
59-
<Link
60-
href={product.url}
61-
className="text-lg text-stone-500 underline dark:text-stone-400"
62-
>
63-
{product.url.replace("https://", "")}
64-
</Link>
65-
<p className="text-sm">{product.description}</p>
66-
</div>
67-
</div>
68-
))}
45+
<div id="submit" className="scroll-mt-24">
46+
<ContactForm />
6947
</div>
70-
71-
{/* Contact Form Section */}
72-
<ContactForm />
7348
</div>
7449
);
7550
}

‎homepage/homepage/components/ShowcaseGrid.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import { useEffect, useState } from "react";
6+
7+
type Product = {
8+
name: string;
9+
imageUrl: string;
10+
url: string;
11+
description: string;
12+
};
13+
14+
function shuffle<T>(array: T[]): T[] {
15+
const shuffled = [...array];
16+
for (let i = shuffled.length - 1; i > 0; i--) {
17+
const j = Math.floor(Math.random() * (i + 1));
18+
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
19+
}
20+
return shuffled;
21+
}
22+
23+
export function ShowcaseGrid({ products }: { products: Product[] }) {
24+
const [items, setItems] = useState(products);
25+
26+
useEffect(() => {
27+
setItems(shuffle(products));
28+
}, [products]);
29+
30+
return (
31+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
32+
{items.map((product) => (
33+
<Link
34+
key={product.url}
35+
href={product.url}
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
className="group flex flex-col overflow-hidden rounded-lg border border-stone-200 bg-stone-50 transition-colors hover:border-stone-300 hover:bg-stone-100 dark:border-stone-800 dark:bg-stone-900 dark:hover:border-stone-700 dark:hover:bg-stone-850"
39+
>
40+
<div className="aspect-[4/3] overflow-hidden">
41+
<Image
42+
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
43+
src={product.imageUrl}
44+
width="600"
45+
height="450"
46+
alt={product.name}
47+
/>
48+
</div>
49+
<div className="flex flex-1 flex-col gap-1 p-3">
50+
<div className="flex items-baseline justify-between gap-2">
51+
<h3 className="font-medium text-stone-900 dark:text-stone-100">
52+
{product.name}
53+
</h3>
54+
<span className="shrink-0 text-xs text-stone-400 dark:text-stone-500">
55+
{product.url.replace("https://", "").replace(/\/$/, "")}
56+
</span>
57+
</div>
58+
<p className="text-sm text-stone-500 dark:text-stone-400">
59+
{product.description}
60+
</p>
61+
</div>
62+
</Link>
63+
))}
64+
</div>
65+
);
66+
}

‎homepage/homepage/content/showcase.ts‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import mtorImage from "./showcase/images/mtor.png";
99
import hendImage from "./showcase/images/hend.png";
1010
import motleyImage from "./showcase/images/motley.png";
1111
import spicyGolfImage from "./showcase/images/spicy-golf.png";
12+
import alkalyeImage from "./showcase/images/alkalye.png";
13+
import hifzImage from "./showcase/images/hifz-garden.png";
1214

1315
export const products = [
1416
{
@@ -37,8 +39,7 @@ export const products = [
3739
},
3840
{
3941
name: "Tilly",
40-
description:
41-
"A relationship journal so simple that you actually use it.",
42+
description: "A relationship journal so simple that you actually use it.",
4243
url: "https://tilly.social",
4344
imageUrl: tillyScreenImage.src,
4445
},
@@ -53,7 +54,8 @@ export const products = [
5354
name: "Cuppl",
5455
imageUrl: cupplImage.src,
5556
url: "https://www.getcuppl.com",
56-
description: "An all-in-one app for couples to manage tasks, schedules, and shopping lists.",
57+
description:
58+
"An all-in-one app for couples to manage tasks, schedules, and shopping lists.",
5759
},
5860
{
5961
name: "MTOR",
@@ -72,12 +74,27 @@ export const products = [
7274
name: "Motley",
7375
imageUrl: motleyImage.src,
7476
url: "https://trymotley.com",
75-
description: "Collect and connect anything - a mix between Are.na, mymind, and a regular read-later app.",
77+
description:
78+
"Collect and connect anything - a mix between Are.na, mymind, and a regular read-later app.",
7679
},
7780
{
7881
name: "Spicy Golf",
7982
imageUrl: spicyGolfImage.src,
8083
url: "https://spicy.golf",
8184
description: "Golf Games Kicked up a Notch.",
82-
}
85+
},
86+
{
87+
name: "Alkalye",
88+
imageUrl: alkalyeImage.src,
89+
url: "https://alkalye.com",
90+
description:
91+
"A platform for sharing and discovering knowledge.A beautiful markdown editor that works offline, syncs across all your devices, and keeps your words encrypted. From first thought to final presentation — one document, infinite possibilities.",
92+
},
93+
{
94+
name: "Hifz Garden",
95+
imageUrl: hifzImage.src,
96+
url: "https://hifzgarden.com/",
97+
description:
98+
"A private, offline-first companion for your hifz journey. Log every session, know what needs review, and build lasting consistency.",
99+
},
83100
];

‎homepage/homepage/content/showcase/images/alkalye.png‎

161 KB
Loading

‎homepage/homepage/content/showcase/images/hifz-garden.png‎

279 KB
Loading

0 commit comments

Comments
 (0)