Skip to content

Commit 6ec3268

Browse files
MeherabHossain007MeherabHossain007
committed
Refactor TopNav component to use a div for RetroUI logo
Update global.css to add dark mode custom variant Update global.css to add background image for dark mode Add new images: remix_white.png, astro_white.png, next_white.png
1 parent 330884f commit 6ec3268

File tree

14 files changed

+178
-85
lines changed

14 files changed

+178
-85
lines changed

‎app/(marketing)/page.tsx‎

Lines changed: 164 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default async function Home() {
5757

5858
return (
5959
<main>
60-
<div className="bg-[url('/images/banner_void_2.svg')] bg-cover bg-no-repeat bg-center flex flex-col items-center h-[1900px] lg:h-[1400px]">
60+
<div className="bg-image bg-cover bg-no-repeat bg-center flex flex-col items-center h-[1900px] lg:h-[1400px]">
6161
<section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 xl:gap-32 my-28">
6262
<div className="text-center lg:text-left w-full lg:w-2/3">
6363
<Link href="/docs" className="mb-6 inline-block">
@@ -67,7 +67,7 @@ export default async function Home() {
6767
</Badge>
6868
</Link>
6969

70-
<Text as="h1" className="text-5xl lg:text-6xl">
70+
<Text as="h1" className="text-5xl text-foreground lg:text-6xl">
7171
Make your projects
7272
<br />
7373
<span className="text-outlined">stand out!</span>
@@ -90,7 +90,7 @@ export default async function Home() {
9090
</Link>
9191
<Link href="https://pro.retroui.dev/blocks" passHref>
9292
<Button
93-
className="w-full"
93+
className="w-full border-foreground text-foreground bg-background"
9494
variant="outline"
9595
aria-label="Get Started with RetroUI"
9696
>
@@ -100,9 +100,12 @@ export default async function Home() {
100100
</div>
101101
</div>
102102
<div className="hidden lg:block lg:w-1/3">
103-
<img
103+
<Image
104104
alt="orange cool cat"
105105
src="/images/tv_radio.png"
106+
layout="responsive"
107+
width={500}
108+
height={500}
106109
className="h-full w-full"
107110
/>
108111
</div>
@@ -112,7 +115,7 @@ export default async function Home() {
112115
Old school with modern twist! ✨
113116
</Text> */}
114117
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 mb-8">
115-
<Card className="w-full bg-white shadow-none">
118+
<Card className="w-full bg-background shadow-none">
116119
<Card.Header>
117120
<Card.Title>Button</Card.Title>
118121
</Card.Header>
@@ -123,42 +126,42 @@ export default async function Home() {
123126
</div>
124127
</Card.Content>
125128
</Card>
126-
<Card className="w-full bg-white shadow-none">
129+
<Card className="w-full bg-background shadow-none">
127130
<Card.Header>
128131
<Card.Title>Badge</Card.Title>
129132
</Card.Header>
130133
<Card.Content>
131134
<BadgeStyleVariants />
132135
</Card.Content>
133136
</Card>
134-
<Card className="w-full bg-white shadow-none">
137+
<Card className="w-full bg-background shadow-none">
135138
<Card.Header>
136139
<Card.Title>Avatar</Card.Title>
137140
</Card.Header>
138141
<Card.Content>
139142
<AvatarStyleCircle />
140143
</Card.Content>
141144
</Card>
142-
<Card className="w-full bg-white shadow-none">
145+
<Card className="w-full bg-background shadow-none">
143146
<Card.Header>
144147
<Card.Title>Accordion</Card.Title>
145148
</Card.Header>
146149
<Card.Content>
147150
<AccordionStyleDefault />
148151
</Card.Content>
149152
</Card>
150-
<Card className="w-full bg-white shadow-none">
153+
<Card className="w-full bg-background shadow-none">
151154
<Card.Header>
152155
<Card.Title>Input & Textarea</Card.Title>
153156
</Card.Header>
154157
<Card.Content>
155158
<Input />
156159
<div className="h-4"></div>
157-
<Textarea />
160+
<Textarea className="border-foreground" />
158161
</Card.Content>
159162
</Card>
160163

161-
<Card className="w-full bg-white shadow-none">
164+
<Card className="w-full bg-background shadow-none">
162165
<Card.Header>
163166
<Card.Title>Alert</Card.Title>
164167
</Card.Header>
@@ -247,45 +250,104 @@ export default async function Home() {
247250
<span className="text-outlined">SPA</span> Applications.
248251
</Text>
249252

250-
<div className="grid grid-cols-5 lg:grid-cols-5 gap-8 lg:gap-6 max-w-2xl mx-auto items-center">
251-
<Image
252-
src="/images/logos/vite.png"
253-
alt="vite"
254-
width={60}
255-
height={60}
256-
/>
257-
<Image
258-
src="/images/logos/nextjs.png"
259-
alt="nextjs"
260-
width={60}
261-
height={60}
262-
/>
263-
<Image
264-
src="/images/logos/remix.png"
265-
alt="remix"
266-
width={55}
267-
height={55}
268-
/>
269-
<Image
270-
src="/images/logos/astro.png"
271-
alt="astro"
272-
width={55}
273-
height={55}
274-
/>
275-
<Image
276-
src="/images/logos/gatsby.png"
277-
alt="gatsby"
278-
width={60}
279-
height={60}
280-
/>
253+
<div className="grid grid-cols-5 gap-8 lg:gap-6 max-w-2xl mx-auto items-center">
254+
{/* Vite */}
255+
<div>
256+
<Image
257+
src="/images/logos/vite.png"
258+
alt="vite"
259+
width={60}
260+
height={60}
261+
className="block dark:hidden"
262+
/>
263+
<Image
264+
src="/images/logos/vite_white.png"
265+
alt="vite dark"
266+
width={60}
267+
height={60}
268+
className="hidden dark:block"
269+
/>
270+
</div>
271+
272+
{/* Next.js */}
273+
<div>
274+
<Image
275+
src="/images/logos/nextjs.png"
276+
alt="nextjs"
277+
width={60}
278+
height={60}
279+
className="block dark:hidden"
280+
/>
281+
<Image
282+
src="/images/logos/next_white.png"
283+
alt="nextjs dark"
284+
width={60}
285+
height={60}
286+
className="hidden dark:block"
287+
/>
288+
</div>
289+
290+
{/* Remix */}
291+
<div>
292+
<Image
293+
src="/images/logos/remix.png"
294+
alt="remix"
295+
width={55}
296+
height={55}
297+
className="block dark:hidden"
298+
/>
299+
<Image
300+
src="/images/logos/remix_white.png"
301+
alt="remix dark"
302+
width={55}
303+
height={55}
304+
className="hidden dark:block"
305+
/>
306+
</div>
307+
308+
{/* Astro */}
309+
<div>
310+
<Image
311+
src="/images/logos/astro.png"
312+
alt="astro"
313+
width={55}
314+
height={55}
315+
className="block dark:hidden"
316+
/>
317+
<Image
318+
src="/images/logos/astro_white.png"
319+
alt="astro dark"
320+
width={55}
321+
height={55}
322+
className="hidden dark:block"
323+
/>
324+
</div>
325+
326+
{/* Gatsby */}
327+
<div>
328+
<Image
329+
src="/images/logos/gatsby.png"
330+
alt="gatsby"
331+
width={60}
332+
height={60}
333+
className="block dark:hidden"
334+
/>
335+
<Image
336+
src="/images/logos/gatsby_white.png"
337+
alt="gatsby dark"
338+
width={60}
339+
height={60}
340+
className="hidden dark:block"
341+
/>
342+
</div>
281343
</div>
282344
</section>
283345

284346
<section className="container max-w-6xl mx-auto border-2 bg-primary border-black py-16 px-4 lg:p-16 my-36">
285-
<Text as="h2" className="text-center mb-2">
347+
<Text as="h2" className="text-center text-black mb-2">
286348
Community Contributors
287349
</Text>
288-
<Text className="text-xl text-center text-muted-foreground mb-8">
350+
<Text className="text-xl text-center text-black mb-8">
289351
RetroUI core is free and open-source, and it is made possible by our
290352
awesome contributors.
291353
</Text>
@@ -298,7 +360,7 @@ export default async function Home() {
298360
passHref
299361
className="flex flex-col items-center"
300362
>
301-
<Avatar className="h-12 w-12 lg:h-16 lg:w-16">
363+
<Avatar className="h-12 w-12 border-black lg:h-16 lg:w-16">
302364
<Avatar.Image
303365
src={contributor.avatar}
304366
alt={contributor.username}
@@ -313,57 +375,76 @@ export default async function Home() {
313375
target="_blank"
314376
passHref
315377
>
316-
<Button className="bg-white" variant="outline">
378+
<Button
379+
className="bg-white border-black shadow-black text-black"
380+
variant="outline"
381+
>
317382
<GithubIcon size="16" className="mr-2" />
318383
Star on Github
319384
</Button>
320385
</Link>
321386
<Link href="https://discord.gg/Jum3NJxK6Q" target="_blank" passHref>
322-
<Button className="bg-white" variant="outline">
387+
<Button
388+
className="bg-white border-black shadow-black text-black"
389+
variant="outline"
390+
>
323391
<MessageCircle size="16" className="mr-2" />
324392
Join Community
325393
</Button>
326394
</Link>
327395
</div>
328396
</section>
329397

330-
<section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center my-36">
331-
<div className="w-full">
332-
<Text as="h2">
333-
🚀 Ship <span className="text-outlined">Faster</span> With Pro
334-
Blocks and Templates!
335-
</Text>
336-
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
337-
<Text className="text-lg">
338-
- Based on the design foundation of RetroUI.
339-
</Text>
340-
<Text className="text-lg">
341-
- Over 50+ premium ready-to-use components.
342-
</Text>
343-
<Text className="text-lg">
344-
- Complete pre-built website templates.
345-
</Text>
346-
<Text className="text-lg">
347-
- Lifetime access to all future updates.
348-
</Text>
398+
<section className="min-h-[50rem] mx-auto px-4 bg-[url('/images/retro_pro_bg_w.jpeg')] dark:bg-[url('/images/retro_pro_bg.jpeg')] bg-cover bg-no-repeat bg-size-[80% auto]">
399+
<div className="container max-w-6xl h-full mx-auto py-16 flex flex-col justify-between gap-20">
400+
<div className="flex justify-between items-start mt-20">
401+
<div className="flex flex-col gap-10 items-start justify-start">
402+
<Text as="h2">
403+
Ship <span className="text-outlined">Faster</span> With Pro
404+
Blocks
405+
<br />
406+
and Templates 🚀
407+
</Text>
408+
<div className="flex flex-col space-y-1 text-muted-foreground">
409+
<Text className="text-lg">
410+
- Based on the design foundation of RetroUI.
411+
</Text>
412+
<Text className="text-lg">
413+
- Over 50+ premium ready-to-use components.
414+
</Text>
415+
<Text className="text-lg">
416+
- Complete pre-built website templates.
417+
</Text>
418+
<Text className="text-lg">
419+
- Lifetime access to all future updates.
420+
</Text>
421+
</div>
422+
</div>
423+
<Link
424+
id="checkout-figma-kit"
425+
data-umami-event="checkout-figma-kit"
426+
href="https://dub.sh/retroui-pro"
427+
target="_blank"
428+
>
429+
<Button>Explore Blocks</Button>
430+
</Link>
431+
</div>
432+
<div className="">
433+
<Image
434+
src="/images/retro_pro_blocks.png"
435+
width={1920}
436+
height={1080}
437+
alt="retroui code showcase"
438+
className="hidden dark:block"
439+
/>
440+
<Image
441+
src="/images/retro_pro_blocks_w.png"
442+
width={1920}
443+
height={1080}
444+
alt="retroui code showcase"
445+
className="block dark:hidden"
446+
/>
349447
</div>
350-
351-
<Link
352-
id="checkout-figma-kit"
353-
data-umami-event="checkout-figma-kit"
354-
href="https://dub.sh/retroui-pro"
355-
target="_blank"
356-
>
357-
<Button>Explore Blocks</Button>
358-
</Link>
359-
</div>
360-
<div className="w-full">
361-
<Image
362-
src="/images/figma-banner.png"
363-
width={800}
364-
height={800}
365-
alt="retroui code showcase"
366-
/>
367448
</div>
368449
</section>
369450
<footer className="bg-black py-8">

0 commit comments

Comments
 (0)