Skip to content

Commit 42716aa

Browse files
SivaramPgSivaramPg
committed
feat: Enhance Star Wars themed styles and layout with new color palette, starfield background, and updated typography in Tailwind configuration
1 parent b6c2820 commit 42716aa

File tree

11 files changed

+126
-57
lines changed

11 files changed

+126
-57
lines changed

‎bun.lockb‎

0 Bytes
Binary file not shown.

‎src/app/_components/HeroSection.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import ApiEndpointElement from "@/components/ApiEndpointElement"
2-
import { cn } from "@/utils/cn"
31
import Link from "next/link"
42
import type { JSX } from "react"
3+
import ApiEndpointElement from "@/components/ApiEndpointElement"
4+
import { cn } from "@/utils/cn"
55

66
interface HeroSectionProps {
77
className?: string
88
}
99

1010
const HeroSection = ({ className }: HeroSectionProps): JSX.Element => {
1111
return (
12-
<section
13-
className={cn(
14-
"w-full bg-[url('/bg-watermark.png')] bg-center bg-origin-content",
15-
className,
16-
)}
17-
>
18-
<div className="flex flex-col items-center justify-center w-full max-w-(--breakpoint-md) gap-2 sm:gap-4 py-6 sm:py-10 md:py-12 mx-auto">
19-
<h1 className="font-bold text-center text-3xl lg:text-5xl text-[#FFE81F]">
12+
<section className={cn("w-full starfield", className)}>
13+
<div className="flex flex-col items-center justify-center w-full max-w-(--breakpoint-md) gap-2 sm:gap-4 py-10 sm:py-14 md:py-20 mx-auto relative z-10">
14+
<h1 className="font-bold text-center text-4xl sm:text-5xl lg:text-6xl text-[#FFE81F] title-glow tracking-tight">
2015
SWAPI Reborn!
2116
</h1>
22-
<h2 className="-mt-2 mb-4 text-lg font-medium text-center md:text-xl lg:text-2xl text-[#FFE81Fbb]">
17+
<h2 className="-mt-1 mb-4 text-lg font-medium text-center md:text-xl lg:text-2xl text-[#FFE81F]/70 subtitle-glow">
2318
Star Wars APIs & Explorer
2419
</h2>
2520
<h3 className="max-w-(--breakpoint-sm) mx-5 mt-2 mb-6 text-center text-md sm:text-xl md:text-xl">
@@ -32,32 +27,33 @@ const HeroSection = ({ className }: HeroSectionProps): JSX.Element => {
3227
</span>
3328
</h3>
3429

35-
<div className="flex flex-wrap items-center justify-center gap-4 mb-4">
30+
<div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mb-6">
3631
<Link
3732
href="/playground"
38-
className="px-6 py-2 font-semibold text-black bg-[#FFE81F] rounded-md hover:bg-[#FFE81F]/90 transition-colors"
33+
className="px-5 sm:px-6 py-2.5 font-semibold text-black bg-[#FFE81F] rounded-lg hover:bg-[#fff176] hover:scale-105 transition-all duration-200 shadow-lg shadow-[#FFE81F]/20"
3934
>
4035
Playground
4136
</Link>
4237
<Link
4338
href="/about"
44-
className="px-6 py-2 font-semibold text-black bg-[#FFE81F] rounded-md hover:bg-[#FFE81F]/90 transition-colors"
39+
className="px-5 sm:px-6 py-2.5 font-semibold text-[#FFE81F] bg-transparent border-2 border-[#FFE81F]/50 rounded-lg hover:border-[#FFE81F] hover:bg-[#FFE81F]/10 transition-all duration-200"
4540
>
4641
About
4742
</Link>
4843
<Link
4944
href="/documentation"
50-
className="px-6 py-2 font-semibold text-black bg-[#FFE81F] rounded-md hover:bg-[#FFE81F]/90 transition-colors"
45+
className="px-5 sm:px-6 py-2.5 font-semibold text-[#FFE81F] bg-transparent border-2 border-[#FFE81F]/50 rounded-lg hover:border-[#FFE81F] hover:bg-[#FFE81F]/10 transition-all duration-200"
5146
>
5247
Documentation
5348
</Link>
5449
</div>
5550

56-
<h4 className="text-lg font-medium text-center text-white md:text-xl animate-bounce">
57-
🎉🎉&nbsp;&nbsp;Over{" "}
58-
<span className="text-[#FFE81F]">1,000,000+</span> API Requests served
59-
daily!&nbsp;&nbsp;🎉🎉
60-
</h4>
51+
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#FFE81F]/10 border border-[#FFE81F]/20">
52+
<span className="text-sm sm:text-base font-medium text-white/80">
53+
Over <span className="text-[#FFE81F] font-bold">1,000,000+</span>{" "}
54+
API requests served daily
55+
</span>
56+
</div>
6157

6258
<div className="w-full max-w-(--breakpoint-lg) px-2">
6359
<ApiEndpointElement hideLabel text={"https://swapi.info/api/"} />

‎src/app/_components/all-systems-normal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function AllSystemsNormal({ className }: AllSystemsNormalProps) {
1111
target="_blank"
1212
rel="noopener noreferrer"
1313
className={cn(
14-
"border rounded-md border-white px-3 py-2 inline-flex items-center justify-center gap-2 text-xs font-medium dark:bg-[#FFE81F25] hover:border-[#FFE81F] backdrop-blur-3xl",
14+
"border rounded-md border-white/20 px-3 py-2 inline-flex items-center justify-center gap-2 text-xs font-medium bg-[#FFE81F15] hover:border-[#FFE81F] backdrop-blur-3xl",
1515
"group",
1616
"min-h-10",
1717
className,

‎src/app/_components/new-navbar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import SpriteIcon, { Icons } from "@/components/SpriteIcon"
21
import Link from "next/link"
2+
import SpriteIcon, { Icons } from "@/components/SpriteIcon"
33
import { SwapiLogo } from "./swapi-logo"
44

55
const links = [
@@ -35,7 +35,7 @@ export default function NewNavbar() {
3535
<nav className="flex items-center justify-between h-full gap-4 px-4 mx-auto">
3636
<Link href="/" className="inline-flex items-center gap-2">
3737
<SwapiLogo className="w-10 h-10" />
38-
<div className="text-2xl font-black md:text-3xl text-[#FFE81F] dark:text=[#ffe81f] lowercase">
38+
<div className="text-2xl font-black md:text-3xl text-[#FFE81F] lowercase">
3939
swapi
4040
</div>
4141
</Link>
@@ -45,7 +45,7 @@ export default function NewNavbar() {
4545
key={link.href}
4646
prefetch={true}
4747
href={link.href}
48-
className="inline-flex gap-1 items-center font-medium px-2 py-2 dark:hover:bg-[#FFE81F25] rounded-md duration-100"
48+
className="inline-flex gap-1 items-center font-medium px-2 py-2 hover:bg-[#FFE81F25] rounded-md duration-100"
4949
>
5050
{link.name}
5151
</Link>

‎src/app/globals.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,88 @@
33
:root {
44
--font-sans: "var(--font-bricolage)", sans-serif;
55
--font-mono: "var(--font-martian-mono)", monospace;
6+
--swapi-yellow: #FFE81F;
7+
--swapi-bg: #0a0a0f;
8+
--swapi-surface: #12121a;
69
}
710

811
body {
912
overscroll-behavior-y: none;
1013
font-family: var(--font-bricolage);
1114
}
1215

16+
/* Star field background */
17+
.starfield {
18+
position: relative;
19+
background:
20+
radial-gradient(ellipse at 50% 0%, rgba(25, 33, 54, 0.6) 0%, transparent 60%),
21+
linear-gradient(to bottom, #0a0a0f 0%, #0d0d14 50%, #0a0a0f 100%);
22+
overflow: hidden;
23+
}
24+
25+
.starfield::before,
26+
.starfield::after {
27+
content: '';
28+
position: absolute;
29+
inset: 0;
30+
pointer-events: none;
31+
}
32+
33+
/* Small stars layer */
34+
.starfield::before {
35+
background-image:
36+
radial-gradient(1px 1px at 20px 30px, white, transparent),
37+
radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.8), transparent),
38+
radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.6), transparent),
39+
radial-gradient(1px 1px at 90px 40px, white, transparent),
40+
radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.7), transparent),
41+
radial-gradient(1.5px 1.5px at 160px 120px, white, transparent),
42+
radial-gradient(1px 1px at 200px 50px, rgba(255,255,255,0.5), transparent),
43+
radial-gradient(1.5px 1.5px at 220px 140px, white, transparent),
44+
radial-gradient(1px 1px at 260px 90px, rgba(255,255,255,0.8), transparent),
45+
radial-gradient(1px 1px at 300px 20px, white, transparent),
46+
radial-gradient(1px 1px at 340px 160px, rgba(255,255,255,0.6), transparent),
47+
radial-gradient(1.5px 1.5px at 380px 60px, white, transparent),
48+
radial-gradient(1px 1px at 420px 130px, rgba(255,255,255,0.7), transparent),
49+
radial-gradient(1px 1px at 460px 40px, white, transparent),
50+
radial-gradient(1px 1px at 500px 100px, rgba(255,255,255,0.5), transparent);
51+
background-size: 520px 180px;
52+
animation: twinkle 8s ease-in-out infinite alternate;
53+
}
54+
55+
/* Larger stars layer */
56+
.starfield::after {
57+
background-image:
58+
radial-gradient(2px 2px at 100px 50px, #FFE81F, transparent),
59+
radial-gradient(2px 2px at 250px 120px, rgba(255,232,31,0.6), transparent),
60+
radial-gradient(1.5px 1.5px at 400px 80px, white, transparent),
61+
radial-gradient(2px 2px at 180px 150px, rgba(255,255,255,0.9), transparent),
62+
radial-gradient(2.5px 2.5px at 320px 30px, #FFE81F, transparent),
63+
radial-gradient(1.5px 1.5px at 450px 140px, white, transparent);
64+
background-size: 500px 200px;
65+
animation: twinkle 12s ease-in-out infinite alternate-reverse;
66+
}
67+
68+
@keyframes twinkle {
69+
0% { opacity: 0.5; }
70+
50% { opacity: 1; }
71+
100% { opacity: 0.7; }
72+
}
73+
74+
/* Title glow effect */
75+
.title-glow {
76+
text-shadow:
77+
0 0 10px rgba(255, 232, 31, 0.5),
78+
0 0 20px rgba(255, 232, 31, 0.3),
79+
0 0 40px rgba(255, 232, 31, 0.2);
80+
}
81+
82+
.subtitle-glow {
83+
text-shadow:
84+
0 0 10px rgba(255, 232, 31, 0.3),
85+
0 0 20px rgba(255, 232, 31, 0.15);
86+
}
87+
1388
html .shiki {
1489
@apply w-full;
1590
@apply !overflow-x-auto;

‎src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function RootLayout({
7676
return (
7777
<html lang="en" suppressHydrationWarning>
7878
<body
79-
className={`${bricolage.variable} ${martianMono.variable} bg-[#f5f5f5] text-[#121212] dark:bg-[#121212] dark:text-[#f5f5f5]`}
79+
className={`${bricolage.variable} ${martianMono.variable} bg-[#0a0a0f] text-[#f5f5f5]`}
8080
>
8181
<Providers>
8282
<Image

‎src/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import fsPromises from "node:fs/promises"
22
import path from "node:path"
3+
import clsx from "clsx"
4+
import Link from "next/link"
35
import RequestDisplayElement from "@/components/RequestDisplayElement"
46
import ResponseDisplayElement from "@/components/ResponseDisplayElement"
57
import SpriteIcon, { Icons } from "@/components/SpriteIcon"
6-
import clsx from "clsx"
7-
import Link from "next/link"
88
import { AboutTheProject } from "./_components/AboutTheProject"
99
import HeroSection from "./_components/HeroSection"
1010

@@ -44,7 +44,7 @@ export default async function Home() {
4444
prefetch={false}
4545
key={key}
4646
href={(value as string).replace("/api", "")}
47-
className="w-1/4 bg-black border hover:border-[#FFE81F] duration-100 rounded-lg shadow-sm grow dark:bg-white/10"
47+
className="w-1/4 bg-white/10 border border-white/10 hover:border-[#FFE81F] duration-100 rounded-lg shadow-sm grow"
4848
>
4949
<div className="flex items-center justify-between w-full gap-1 p-2 h-fit sm:p-4 md:gap-2">
5050
<h2 className="font-bold capitalize text-md md:text-lg">

‎src/components/Breadcrumbs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { cn } from "@/utils/cn"
21
import Link from "next/link"
32
import { Fragment, type JSX } from "react"
3+
import { cn } from "@/utils/cn"
44
import SpriteIcon, { Icons } from "./SpriteIcon"
55

66
interface BreadcrumbsProps {
@@ -16,7 +16,7 @@ const Breadcrumbs = ({
1616
<div className="w-full max-w-(--breakpoint-lg)">
1717
<div
1818
className={cn(
19-
"flex gap-4 w-fit bg-black/20 dark:bg-white/20 px-4 py-2 rounded-lg",
19+
"flex gap-4 w-fit bg-white/20 px-4 py-2 rounded-lg",
2020
className,
2121
)}
2222
>

‎src/components/SpriteIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { cn } from "@/utils/cn"
21
import type { SVGProps } from "react"
2+
import { cn } from "@/utils/cn"
33

44
// keep a list of the icon ids we put in the symbol
55
export enum Icons {
@@ -29,7 +29,7 @@ export default function SpriteIcon({
2929
...props
3030
}: Omit<SVGProps<SVGSVGElement>, "id"> & { id: Icons }) {
3131
return (
32-
<svg {...props} className={cn("invert-0 dark:invert", props.className)}>
32+
<svg {...props} className={cn("invert", props.className)}>
3333
<title>{id}</title>
3434
<use href={`/icons/sprite.svg#${id}`} />
3535
</svg>

‎src/components/link-pill.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { cn } from "@/utils/cn"
21
import Link from "next/link"
2+
import { cn } from "@/utils/cn"
33
import SpriteIcon, { Icons } from "./SpriteIcon"
44

55
type LinkPillProps = {
@@ -14,7 +14,7 @@ export function LinkPill({ className, text, href }: LinkPillProps) {
1414
prefetch={false}
1515
href={href}
1616
className={cn(
17-
"w-1/4 bg-black/10 border hover:border-[#FFE81F] duration-100 rounded-lg shadow-sm grow dark:bg-white/10",
17+
"w-1/4 bg-white/10 border hover:border-[#FFE81F] duration-100 rounded-lg shadow-sm grow",
1818
className,
1919
)}
2020
>

0 commit comments

Comments
 (0)