Skip to content

Commit 8a917e9

Browse files
LeadcodeDevLeadcodeDev
committed
feat: improve the UI of the home page
Improve the UI of the home page and add a thumbnail.
1 parent cf6a6d6 commit 8a917e9

File tree

7 files changed

+36
-34
lines changed

7 files changed

+36
-34
lines changed

‎.astro/data-store.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎explainer.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default defineExplainerConfig({
66
description:
77
"Mineral is a Discord framework for designing discord bots in Dart",
88
favicon: {
9-
href: "/favicon.ico",
9+
href: "/favicon.svg",
1010
type: "image/svg+xml",
1111
},
1212
thumbnail: "/thumbnail.jpg",
@@ -60,7 +60,7 @@ export default defineExplainerConfig({
6060
},
6161
authors: {
6262
leadcode_dev: {
63-
name: "LeadcodeDev",
63+
name: "Baptiste Parmantier",
6464
avatar: "https://avatars.githubusercontent.com/u/8946317?v=4",
6565
href: "https://github.com/LeadcodeDev",
6666
},

‎public/beautifull_api_thumbnail.png‎

24.7 KB
Loading

‎public/beautifull_api_thumbnail_2.png‎

222 KB
Loading

‎src/lib/components/elements/blog-card.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import type { CollectionEntry } from 'astro:content';
2-
import config from '../../../../explainer.config';
3-
import { Badge } from '../ui/badge';
1+
import type { CollectionEntry } from "astro:content";
2+
import config from "../../../../explainer.config";
3+
import { Badge } from "../ui/badge";
44

55
type Props = {
6-
post: CollectionEntry<"blog">
7-
}
6+
post: CollectionEntry<"blog">;
7+
};
88

99
export default function BlogCard(props: Props) {
1010
return (
@@ -14,9 +14,7 @@ export default function BlogCard(props: Props) {
1414
>
1515
{import.meta.env.DEV && !props.post.data.publishedAt && (
1616
<div className="absolute z-50 top-1 right-2">
17-
<Badge variant="default">
18-
Invisible in production mode
19-
</Badge>
17+
<Badge variant="default">Invisible in production mode</Badge>
2018
</div>
2119
)}
2220
<div className="overflow-hidden rounded-lg">
@@ -76,5 +74,5 @@ export default function BlogCard(props: Props) {
7674
</div>
7775
</div>
7876
</a>
79-
)
77+
);
8078
}

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

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import clsx from 'clsx';
1+
import clsx from "clsx";
22

33
export type BentoGridProps = {
44
title: string;
@@ -10,7 +10,7 @@ export type BentoGridProps = {
1010
subtitle: string;
1111
image: string;
1212
}[];
13-
}
13+
};
1414

1515
export function HomeBentogrid(props: BentoGridProps) {
1616
const firstLine = props.items.slice(0, 2);
@@ -34,25 +34,28 @@ export function HomeBentogrid(props: BentoGridProps) {
3434
<div className="absolute inset-px rounded-lg bg-background max-lg:rounded-t-[2rem]" />
3535
<div
3636
className={clsx(
37-
'absolute inset-px rounded-lg bg-background max-lg:rounded-t-[2rem]',
38-
index === 0 && 'lg:rounded-tl-[2rem]',
39-
index === firstLine.length - 1 && 'lg:rounded-tr-[2rem]',
37+
"absolute inset-px rounded-lg bg-background max-lg:rounded-t-[2rem]",
38+
index === 0 && "lg:rounded-tl-[2rem]",
39+
index === firstLine.length - 1 && "lg:rounded-tr-[2rem]",
4040
)}
4141
/>
4242
<div
4343
className={clsx(
44-
'relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]',
45-
index === 0 && 'lg:rounded-tl-[calc(2rem+1px)]',
46-
index === firstLine.length - 1 && 'lg:rounded-tr-[calc(2rem+1px)]',
44+
"relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]",
45+
index === 0 && "lg:rounded-tl-[calc(2rem+1px)]",
46+
index === firstLine.length - 1 &&
47+
"lg:rounded-tr-[calc(2rem+1px)]",
4748
)}
4849
>
4950
<img
5051
alt={item.subtitle}
5152
src={item.image}
5253
className="h-80 object-cover object-left"
5354
/>
54-
<div className="p-10 pt-4">
55-
<h3 className="text-sm/4 font-semibold text-primary">{item.title}</h3>
55+
<div className="px-8 pt-6">
56+
<h3 className="text-sm/4 font-semibold text-primary">
57+
{item.title}
58+
</h3>
5659
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">
5760
{item.subtitle}
5861
</p>
@@ -63,9 +66,9 @@ export function HomeBentogrid(props: BentoGridProps) {
6366
</div>
6467
<div
6568
className={clsx(
66-
'pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5',
67-
index === 0 && 'lg:rounded-tl-[2rem]',
68-
index === firstLine.length - 1 && 'lg:rounded-tr-[2rem]',
69+
"pointer-events-none absolute inset-px dark:border rounded-lg shadow ring-1 ring-black/5",
70+
index === 0 && "lg:rounded-tl-[2rem]",
71+
index === firstLine.length - 1 && "lg:rounded-tr-[2rem]",
6972
)}
7073
/>
7174
</div>
@@ -80,8 +83,10 @@ export function HomeBentogrid(props: BentoGridProps) {
8083
src={item.image}
8184
className="h-80 object-cover object-left"
8285
/>
83-
<div className="p-10 pt-4">
84-
<h3 className="text-sm/4 font-semibold text-primary">{item.title}</h3>
86+
<div className="px-8 py-4">
87+
<h3 className="text-sm/4 font-semibold text-primary">
88+
{item.title}
89+
</h3>
8590
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 dark:text-accent-foreground">
8691
{item.subtitle}
8792
</p>
@@ -92,15 +97,15 @@ export function HomeBentogrid(props: BentoGridProps) {
9297
</div>
9398
<div
9499
className={clsx(
95-
'pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5',
96-
index === 0 && 'lg:rounded-bl-[2rem]',
97-
index === secondLine.length - 1 && 'lg:rounded-br-[2rem]',
100+
"pointer-events-none absolute inset-px dark:border rounded-lg shadow ring-1 ring-black/5",
101+
index === 0 && "lg:rounded-bl-[2rem]",
102+
index === secondLine.length - 1 && "lg:rounded-br-[2rem]",
98103
)}
99104
/>
100105
</div>
101106
))}
102107
</div>
103108
</div>
104109
</div>
105-
)
106-
}
110+
);
111+
}

‎src/pages/index.astro‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,7 @@ const bentogrid: BentoGridProps = {
148148
subtitle: "Clean and lightweight API",
149149
description:
150150
"Mineral provides a clean and lightweight API, allowing you to build your bot with ease. It's designed to be easy to use and understand.",
151-
image:
152-
"https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png",
151+
image: "/beautifull_api_thumbnail_2.png",
153152
},
154153
{
155154
title: "Built-in tools",

0 commit comments

Comments
 (0)