Skip to content

Commit 5d5a13c

Browse files
LeadcodeDevLeadcodeDev
committed
feat: enhance HomeBentogrid and HomeMarquee components with props for dynamic content; update index.astro to utilize new props structure
1 parent 4798264 commit 5d5a13c

File tree

4 files changed

+266
-209
lines changed

4 files changed

+266
-209
lines changed

‎.astro/content-modules.mjs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11

22
export default new Map([
33
["src/content/docs/framework/blog.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fblog.mdx&astroContentModuleFlag=true")],
4+
["src/content/docs/framework/configuration.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fconfiguration.mdx&astroContentModuleFlag=true")],
45
["src/content/docs/framework/getting-started.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fgetting-started.mdx&astroContentModuleFlag=true")],
6+
["src/content/docs/framework/project-structure.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fproject-structure.mdx&astroContentModuleFlag=true")],
57
["src/content/docs/framework/docs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fdocs.mdx&astroContentModuleFlag=true")],
6-
["src/content/docs/framework/configuration.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fconfiguration.mdx&astroContentModuleFlag=true")],
7-
["src/content/blog/welcome.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fblog%2Fwelcome.mdx&astroContentModuleFlag=true")],
88
["src/content/docs/framework/installation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Finstallation.mdx&astroContentModuleFlag=true")],
9-
["src/content/docs/framework/project-structure.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fproject-structure.mdx&astroContentModuleFlag=true")],
10-
["src/content/docs/syntax/code-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fcode-block.mdx&astroContentModuleFlag=true")],
9+
["src/content/blog/welcome.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fblog%2Fwelcome.mdx&astroContentModuleFlag=true")],
1110
["src/content/docs/syntax/alert.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Falert.mdx&astroContentModuleFlag=true")],
12-
["src/content/docs/syntax/text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Ftext.mdx&astroContentModuleFlag=true")],
13-
["src/content/docs/syntax/markdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fmarkdown.mdx&astroContentModuleFlag=true")]]);
11+
["src/content/docs/syntax/code-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fcode-block.mdx&astroContentModuleFlag=true")],
12+
["src/content/docs/syntax/markdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fmarkdown.mdx&astroContentModuleFlag=true")],
13+
["src/content/docs/syntax/text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Ftext.mdx&astroContentModuleFlag=true")]]);
1414

‎src/lib/components/elements/home-bentogrid.tsx‎

Lines changed: 82 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,100 @@
1-
export default function HomeBentogrid() {
1+
import clsx from 'clsx';
2+
3+
export type BentoGridProps = {
4+
title: string;
5+
description: string;
6+
items: {
7+
title: string;
8+
description: string;
9+
subtitle: string;
10+
image: string;
11+
}[];
12+
}
13+
14+
export function HomeBentogrid(props: BentoGridProps) {
15+
const firstLine = props.items.slice(0, 2);
16+
const secondLine = props.items.slice(2, 5);
17+
218
return (
319
<div className="bg-background py-24 sm:py-32">
420
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
521
<h2 className="text-base/7 font-semibold text-primary">
6-
What we offer
22+
{props.title}
723
</h2>
824
<p className="mt-2 max-w-lg text-pretty text-4xl font-semibold tracking-tight text-gray-950 dark:text-accent-foreground sm:text-5xl">
9-
Discover all features that we provide
25+
{props.description}
1026
</p>
1127
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
12-
<div className="relative lg:col-span-3">
13-
<div className="absolute inset-px rounded-lg bg-background max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]" />
14-
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
15-
<img
16-
alt=""
17-
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-performance.png"
18-
className="h-80 object-cover object-left"
28+
{firstLine.map((item, index) => (
29+
<div className="relative lg:col-span-3">
30+
<div className="absolute inset-px rounded-lg bg-background max-lg:rounded-t-[2rem]" />
31+
<div
32+
className={clsx(
33+
'absolute inset-px rounded-lg bg-background max-lg:rounded-t-[2rem]',
34+
index === 0 && 'lg:rounded-tl-[2rem]',
35+
index === firstLine.length - 1 && 'lg:rounded-tr-[2rem]',
36+
)}
1937
/>
20-
<div className="p-10 pt-4">
21-
<h3 className="text-sm/4 font-semibold text-primary">Performance</h3>
22-
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">Lightning-fast builds</p>
23-
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
24-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida justo et nulla efficitur, maximus
25-
egestas sem pellentesque.
26-
</p>
38+
<div
39+
className={clsx(
40+
'relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]',
41+
index === 0 && 'lg:rounded-tl-[calc(2rem+1px)]',
42+
index === firstLine.length - 1 && 'lg:rounded-tr-[calc(2rem+1px)]',
43+
)}
44+
>
45+
<img
46+
alt={item.subtitle}
47+
src={item.image}
48+
className="h-80 object-cover object-left"
49+
/>
50+
<div className="p-10 pt-4">
51+
<h3 className="text-sm/4 font-semibold text-primary">{item.title}</h3>
52+
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">
53+
{item.subtitle}
54+
</p>
55+
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
56+
{item.description}
57+
</p>
58+
</div>
2759
</div>
28-
</div>
29-
<div className="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]" />
30-
</div>
31-
<div className="relative lg:col-span-3">
32-
<div className="absolute inset-px rounded-lg bg-background lg:rounded-tr-[2rem]" />
33-
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
34-
<img
35-
alt=""
36-
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
37-
className="h-80 object-cover object-left lg:object-right"
38-
/>
39-
<div className="p-10 pt-4">
40-
<h3 className="text-sm/4 font-semibold text-primary">Releases</h3>
41-
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">Push to deploy</p>
42-
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
43-
Curabitur auctor, ex quis auctor venenatis, eros arcu rhoncus massa, laoreet dapibus ex elit vitae
44-
odio.
45-
</p>
46-
</div>
47-
</div>
48-
<div className="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 lg:rounded-tr-[2rem]" />
49-
</div>
50-
<div className="relative lg:col-span-2">
51-
<div className="absolute inset-px rounded-lg bg-background lg:rounded-bl-[2rem]" />
52-
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
53-
<img
54-
alt=""
55-
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png"
56-
className="h-80 object-cover object-left"
60+
<div
61+
className={clsx(
62+
'pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5',
63+
index === 0 && 'lg:rounded-tl-[2rem]',
64+
index === firstLine.length - 1 && 'lg:rounded-tr-[2rem]',
65+
)}
5766
/>
58-
<div className="p-10 pt-4">
59-
<h3 className="text-sm/4 font-semibold text-primary">Speed</h3>
60-
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">Built for power users</p>
61-
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
62-
Sed congue eros non finibus molestie. Vestibulum euismod augue.
63-
</p>
64-
</div>
6567
</div>
66-
<div className="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 lg:rounded-bl-[2rem]" />
67-
</div>
68-
<div className="relative lg:col-span-2">
69-
<div className="absolute inset-px rounded-lg bg-background" />
70-
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)]">
71-
<img
72-
alt=""
73-
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png"
74-
className="h-80 object-cover"
75-
/>
76-
<div className="p-10 pt-4">
77-
<h3 className="text-sm/4 font-semibold text-primary">Integrations</h3>
78-
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">Connect your favorite tools</p>
79-
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
80-
Maecenas at augue sed elit dictum vulputate, in nisi aliquam maximus arcu.
81-
</p>
68+
))}
69+
70+
{secondLine.map((item, index) => (
71+
<div className="relative lg:col-span-2">
72+
<div className="absolute inset-px rounded-lg bg-background" />
73+
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
74+
<img
75+
alt={item.subtitle}
76+
src={item.image}
77+
className="h-80 object-cover object-left"
78+
/>
79+
<div className="p-10 pt-4">
80+
<h3 className="text-sm/4 font-semibold text-primary">{item.title}</h3>
81+
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">
82+
{item.subtitle}
83+
</p>
84+
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
85+
{item.description}
86+
</p>
87+
</div>
8288
</div>
83-
</div>
84-
<div className="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5" />
85-
</div>
86-
<div className="relative lg:col-span-2">
87-
<div className="absolute inset-px rounded-lg bg-background max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]" />
88-
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
89-
<img
90-
alt=""
91-
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png"
92-
className="h-80 object-cover"
89+
<div
90+
className={clsx(
91+
'pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5',
92+
index === 0 && 'lg:rounded-bl-[2rem]',
93+
index === secondLine.length - 1 && 'lg:rounded-br-[2rem]',
94+
)}
9395
/>
94-
<div className="p-10 pt-4">
95-
<h3 className="text-sm/4 font-semibold text-primary">Network</h3>
96-
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">Globally distributed CDN</p>
97-
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
98-
Aenean vulputate justo commodo auctor vehicula in malesuada semper.
99-
</p>
100-
</div>
10196
</div>
102-
<div className="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]" />
103-
</div>
97+
))}
10498
</div>
10599
</div>
106100
</div>

‎src/lib/components/elements/home-marquee.tsx‎

Lines changed: 15 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,21 @@ import { cn } from "@/utils";
22
import { GridPattern } from '../ui/grid-pattern';
33
import { Marquee } from "../ui/marquee";
44

5-
const reviews = [
6-
{
7-
name: "Jack",
8-
username: "@jack",
9-
body: "I've never seen anything like this before. It's amazing. I love it.",
10-
img: "https://avatar.vercel.sh/jack",
11-
},
12-
{
13-
name: "Jill",
14-
username: "@jill",
15-
body: "I don't know what to say. I'm speechless. This is amazing.",
16-
img: "https://avatar.vercel.sh/jill",
17-
},
18-
{
19-
name: "John",
20-
username: "@john",
21-
body: "I'm at a loss for words. This is amazing. I love it.",
22-
img: "https://avatar.vercel.sh/john",
23-
},
24-
{
25-
name: "Jane",
26-
username: "@jane",
27-
body: "I'm at a loss for words. This is amazing. I love it.",
28-
img: "https://avatar.vercel.sh/jane",
29-
},
30-
{
31-
name: "Jenny",
32-
username: "@jenny",
33-
body: "I'm at a loss for words. This is amazing. I love it.",
34-
img: "https://avatar.vercel.sh/jenny",
35-
},
36-
{
37-
name: "James",
38-
username: "@james",
39-
body: "I'm at a loss for words. This is amazing. I love it.",
40-
img: "https://avatar.vercel.sh/james",
41-
},
42-
];
43-
44-
const firstRow = reviews.slice(0, reviews.length / 2);
45-
const secondRow = reviews.slice(reviews.length / 2);
5+
export type MarqueeProps = {
6+
title: string;
7+
description: string;
8+
reviewers: {
9+
name: string;
10+
username: string;
11+
body: string;
12+
img: string;
13+
}[];
14+
}
4615

16+
export function HomeMarquee(props: MarqueeProps) {
17+
const firstRow = props.reviewers.slice(0, props.reviewers.length / 2);
18+
const secondRow = props.reviewers.slice(props.reviewers.length / 2);
4719

48-
export function HomeMarquee() {
4920
return (
5021
<div className="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-20">
5122
<GridPattern
@@ -60,10 +31,10 @@ export function HomeMarquee() {
6031
/>
6132
<div className="relative z-10">
6233
<h2 className="text-base/7 font-semibold text-primary">
63-
What our users are saying
34+
{props.title}
6435
</h2>
6536
<p className="mt-2 max-w-lg text-pretty text-4xl font-semibold tracking-tight text-gray-950 dark:text-accent-foreground sm:text-5xl">
66-
Because our users are the best people
37+
{props.description}
6738
</p>
6839

6940
<div className="mt-10 relative flex w-full flex-col items-center justify-center overflow-hidden">
@@ -99,10 +70,6 @@ function ReviewCard(props: ReviewCardProps) {
9970
<figure
10071
className={cn(
10172
"relative h-full w-64 bg-background cursor-pointer overflow-hidden rounded-xl border p-4",
102-
// light styles
103-
"border-gray-950/[.1] hover:bg-gray-950/[.05]",
104-
// dark styles
105-
"dark:border-gray-50/[.1] dark:hover:bg-gray-50/[.15]",
10673
)}
10774
>
10875
<div className="flex flex-row items-center gap-2">

0 commit comments

Comments
 (0)