style: Fix styling in some components on the home page.

Author: a6iyyu

README.md

@@ -3,7 +3,7 @@
 <br />
 
 <div align="center">
-  <img src="static/logo.png" />
+  <img src="static/icon.png" height="60" />
 </div>
 
 <br />

src/docs/getting-started/introduction.svx

@@ -7,7 +7,7 @@ authorUrl: https://github.com/polinema-ui
 lastUpdated: 20/8/2026
 ---
 
-## Siapa Kitaaaaaaaaaaaaa ?
+## Siapa Kitaaaaaaaaaaaaa?
 
 Polinema UI adalah kumpulan komponen UI open-source yang gabungin kesederhanaan Bootstrap 5 sama kekuatan utility class-nya Tailwind CSS v4. Terinspirasi dari model komponen shadcn di mana lo punya kepemilikan penuh atas kode, bukan cuma nempel dependency NPM yang kaku Polinema UI ngasih developer kontrol 100% buat kustomisasi desain, cocok banget buat portal akademik, admin dashboard, sampe platform enterprise.
 

src/routes/(app)/(home)/components/cta.svelte

@@ -2,7 +2,6 @@
 	import { Github01Icon } from "@hugeicons/core-free-icons";
 	import { HugeiconsIcon } from "@hugeicons/svelte";
 	import { Button } from "$lib/components/button";
-	import { ROUTES } from "$lib/constants/routes";
 </script>
 
 <section class="relative w-full scroll-mt-28 overflow-hidden bg-blue-600 px-6 py-20 sm:py-24">
@@ -17,12 +16,13 @@
 		>
 			Zaman sekarang masih nulis component dari nol?
 		</h2>
-		<p class="max-w-xl font-sans text-base leading-relaxed font-normal text-neutral-600 md:text-[17px]">
+		<p class="max-w-xl font-sans text-base leading-relaxed font-medium text-neutral-600 md:text-[17px]">
 			Copy perintahnya, paste di terminal, langsung pakai. Nggak ada setup ribet, nggak ada konfigurasi panjang.
 		</p>
 		<div class="mt-2 flex flex-col items-center gap-3 sm:flex-row sm:gap-4">
 			<Button
-				href={ROUTES.DOCS}
+				href="https://github.com/polinema-ui/polinema-ui"
+				target="_blank"
 				class="flex cursor-pointer items-center gap-2 rounded-lg border-none bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-[0_1px_0_rgba(255,255,255,0.2)_inset,0_8px_20px_rgba(37,99,235,0.35)] transition-all duration-200 hover:bg-blue-700 hover:shadow-[0_1px_0_rgba(255,255,255,0.2)_inset,0_12px_24px_rgba(37,99,235,0.4)] active:scale-95 sm:px-7 sm:py-3.5 sm:text-[15px]"
 			>
 				<span>Star on GitHub</span>

src/routes/(app)/(home)/components/hero.svelte

@@ -10,11 +10,11 @@
 </script>
 
 <section
-	class="relative flex min-h-screen w-full flex-col items-center justify-center gap-8 overflow-hidden bg-[linear-gradient(180deg,rgba(253,253,252,1)_0%,rgba(244,246,242,1)_100%)] px-4 pt-28 pb-12 sm:px-6 sm:pt-36 sm:pb-16 md:pt-40"
+	class="relative flex w-full flex-col items-center justify-center gap-8 overflow-hidden bg-[linear-gradient(180deg,rgba(253,253,252,1)_0%,rgba(244,246,242,1)_100%)] px-4 pt-32 pb-20 sm:px-6 sm:pt-40 sm:pb-28"
 >
 	<figure
 		aria-hidden="true"
-		class="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-96 w-full mask-[linear-gradient(180deg,transparent_0%,black_15%,black_65%,transparent_98%)] bg-cover bg-position-[center_top] opacity-80 sm:h-120 sm:opacity-90 md:h-135 lg:h-145"
+		class="pointer-events-none absolute inset-0 top-20 z-0 h-full w-full mask-[linear-gradient(180deg,transparent_0%,black_10%,black_80%,transparent_100%)] bg-cover bg-position-[center_bottom] opacity-80 sm:opacity-90"
 		style="background-image: url('/elon-musk-migren.webp')"
 	></figure>
 	<div
@@ -30,7 +30,7 @@
 			</span>
 		</h1>
 		<p
-			class="max-w-md font-sans text-sm leading-relaxed font-normal text-balance text-neutral-900 sm:max-w-lg sm:text-base md:text-lg md:text-white"
+			class="max-w-md font-sans text-sm leading-relaxed font-medium text-balance text-white sm:max-w-lg sm:text-base md:text-lg"
 		>
 			Nggak perlu bikin semuanya dari nol. Cari component yang kamu butuhin, lihat contohnya, dan tinggal pakai sesuai
 			kebutuhan 😉

src/routes/(app)/+layout.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import {
+		ArrowRight01Icon,
+		ArrowUpRight01Icon,
 		BootstrapIcon,
 		Cancel01Icon,
 		ChevronDownIcon,
 		GithubIcon,
+		Linkedin01Icon,
 		Menu01Icon,
 		TailwindcssIcon,
-		ArrowRight01Icon,
-		Linkedin01Icon,
-		ArrowUpRight01Icon,
 	} from "@hugeicons/core-free-icons";
 	import { HugeiconsIcon } from "@hugeicons/svelte";
 	import type { Snippet } from "svelte";
@@ -41,7 +41,7 @@
 
 	const footerLinks = ["Home", "Features", "About", "FAQ", "Docs"];
 
-	const socials = [
+	const socials: Array<{ label: string; icon: typeof GithubIcon | typeof Linkedin01Icon; href: string }> = [
 		{ label: "Github", icon: GithubIcon, href: "https://github.com/polinema-ui/website" },
 		{ label: "LinkedIn", icon: Linkedin01Icon, href: "#" },
 	];
@@ -50,7 +50,6 @@
 		fetchGithubStars("polinema-ui/website").then((count) => (githubStars = count));
 
 		const onScroll = () => (scrolled = window.scrollY > 20);
-
 		window.addEventListener("scroll", onScroll, { passive: true });
 
 		return () => window.removeEventListener("scroll", onScroll);
@@ -66,12 +65,10 @@
 	<a href={localizeHref("#home")} aria-label="Polinema UI home" class="flex shrink-0 items-center">
 		<img src="/logo.png" alt="Polinema UI Logo" class="h-4.5 w-auto object-contain sm:h-5" />
 	</a>
-
 	<nav aria-label="Primary navigation" class="hidden md:flex">
 		<ul class="flex items-center gap-1">
 			{#each MENUS as item (item.label)}
 				{@const isActive = activeItem === item.label}
-
 				<li>
 					<a
 						href={localizeHref(item.href)}
@@ -87,7 +84,6 @@
 			{/each}
 		</ul>
 	</nav>
-
 	<aside class="hidden items-center gap-1.5 sm:gap-2 md:flex">
 		<Button
 			href={localizeHref("https://github.com/polinema-ui/website")}
@@ -99,7 +95,6 @@
 			<HugeiconsIcon icon={GithubIcon} size={14} color="#1a1a1a" />
 			<span class="font-medium">{githubStars}</span>
 		</Button>
-
 		<Root bind:open={dropdownOpen}>
 			<Trigger
 				class="flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200/80 bg-white px-2.5 text-xs font-medium text-neutral-800 transition-all hover:bg-gray-100 active:scale-95 sm:h-9 sm:gap-2 sm:px-3 sm:text-[13px]"
@@ -111,12 +106,10 @@
 					<HugeiconsIcon icon={BootstrapIcon} size={15} color="#7952b3" />
 					<span class="hidden sm:inline">Bootstrap 5</span>
 				{/if}
-
 				<span class="transition-transform duration-200 {dropdownOpen ? 'rotate-180' : ''}">
 					<HugeiconsIcon icon={ChevronDownIcon} size={13} color="#1c1c1c" />
 				</span>
 			</Trigger>
-
 			<Content class="z-50 min-w-36 rounded-xl border border-neutral-200/80 bg-white p-1 shadow-xl">
 				<Item
 					onclick={() => (selectedFramework = "Tailwind 4")}
@@ -125,7 +118,6 @@
 					<HugeiconsIcon icon={TailwindcssIcon} size={15} color="#06b6d4" />
 					<span>Tailwind 4</span>
 				</Item>
-
 				<Item
 					onclick={() => (selectedFramework = "Bootstrap 5")}
 					class="flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs font-medium text-neutral-800 transition-colors select-none hover:bg-[#f4f4f0]"
@@ -136,7 +128,6 @@
 			</Content>
 		</Root>
 	</aside>
-
 	<button
 		type="button"
 		onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
@@ -160,7 +151,6 @@
 			<ul class="flex flex-col divide-y divide-neutral-100">
 				{#each MENUS as item (item.label)}
 					{@const isActive = activeItem === item.label}
-
 					<li>
 						<a
 							class="flex items-center justify-between py-4 text-lg font-semibold tracking-tight transition-colors {isActive
@@ -172,8 +162,7 @@
 								mobileMenuOpen = false;
 							}}
 						>
-							<span>{item.label}</span>
-
+							<h5>{item.label}</h5>
 							{#if isActive}
 								<span class="h-2 w-2 rounded-full bg-blue-600"></span>
 							{/if}
@@ -182,8 +171,7 @@
 				{/each}
 			</ul>
 		</nav>
-
-		<footer class="flex flex-col gap-3 border-t border-neutral-200/80 pt-5">
+		<section class="flex flex-col gap-3 border-t border-neutral-200/80 pt-5">
 			<Button
 				href={localizeHref("https://github.com/polinema-ui/website")}
 				target="_blank"
@@ -195,12 +183,10 @@
 					<HugeiconsIcon icon={GithubIcon} size={18} color="#1a1a1a" />
 					<span>GitHub Repository</span>
 				</span>
-
 				<span class="rounded-lg bg-neutral-100 px-2 py-0.5 text-xs font-bold text-neutral-800">
 					{githubStars} ★
 				</span>
 			</Button>
-
 			<div class="grid grid-cols-2 gap-1.5 rounded-xl bg-neutral-100 p-1.5">
 				<button
 					class="flex items-center justify-center gap-2 rounded-lg py-2.5 text-xs font-medium transition-all {selectedFramework ===
@@ -216,7 +202,6 @@
 					<HugeiconsIcon icon={TailwindcssIcon} size={16} color="#06b6d4" />
 					<span>Tailwind 4</span>
 				</button>
-
 				<button
 					class="flex items-center justify-center gap-2 rounded-lg py-2.5 text-xs font-medium transition-all {selectedFramework ===
 					'Bootstrap 5'
@@ -232,13 +217,12 @@
 					<span>Bootstrap 5</span>
 				</button>
 			</div>
-		</footer>
+		</section>
 	</aside>
 {/if}
 
 {@render children()}
 
-<!-- Footer -->
 <footer class="bg-white px-5 pt-12 pb-6 text-black sm:px-10 sm:pt-20 lg:px-18">
 	<div class="mx-auto grid max-w-295 gap-10 md:grid-cols-[1.5fr_.65fr_.85fr] md:gap-20 lg:gap-32">
 		<section>
@@ -248,84 +232,75 @@
 			>
 				Sign up for our newsletter to get latest insights and updates
 			</h2>
-
 			<form class="max-w-75.75" action="#">
 				<label class="sr-only" for="footer-email">Email address</label>
-
 				<input
-					id="footer-email"
 					type="email"
 					placeholder="Enter email address"
 					required
 					class="text-blackbg-black focus:border-blackbg-black w-full border-0 border-b border-[#686868] bg-transparent px-0 py-3 text-[15px] outline-none placeholder:text-[#a0a0a0]"
 				/>
-
 				<Button
-					class="mt-5 flex cursor-pointer items-center gap-2 rounded-lg border-none bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-[0_1px_0_rgba(255,255,255,0.2)_inset,0_8px_20px_rgba(37,99,235,0.35)] transition-all duration-200 hover:bg-blue-700 hover:shadow-[0_1px_0_rgba(255,255,255,0.2)_inset,0_12px_24px_rgba(37,99,235,0.4)] active:scale-95 sm:px-7 sm:py-3.5 sm:text-[15px]"
+					class="mt-5 flex cursor-pointer items-center gap-2 rounded-lg border-none bg-blue-600 px-6 py-2! text-xs font-medium text-white shadow-[0_1px_0_rgba(255,255,255,0.2)_inset,0_8px_20px_rgba(37,99,235,0.35)] transition-all duration-200 hover:bg-blue-700 hover:shadow-[0_1px_0_rgba(255,255,255,0.2)_inset,0_12px_24px_rgba(37,99,235,0.4)] active:scale-95 sm:px-7! sm:py-3.5! sm:text-sm"
 				>
-					<span>Subscribe Now</span>
+					Subscribe Now
 					<HugeiconsIcon icon={ArrowRight01Icon} size={16} color="currentColor" />
 				</Button>
 			</form>
 		</section>
-
 		<nav aria-label="Footer links">
-			<p class="mb-2 text-xs text-[#a0a0a0]">Links</p>
-
+			<p class="mb-1 text-xs text-[#a0a0a0] lg:mb-2">Links</p>
 			{#each footerLinks as link (link)}
 				<a
 					href={localizeHref(`#${link.toLowerCase()}`)}
-					class="block text-[17px] leading-[1.6] transition-opacity hover:opacity-50"
+					class="block text-sm leading-[1.6] transition-opacity hover:opacity-50 lg:text-base"
 				>
 					{link}
 				</a>
 			{/each}
 		</nav>
-
 		<section aria-label="Contact information">
-			<p class="mb-2 text-xs text-[#a0a0a0]">Get In Touch</p>
-
-			<a class="block text-lg leading-[1.6] transition-opacity hover:opacity-50" href="mailto:polinemaui@gmail.com">
+			<p class="mb-1 text-xs text-[#a0a0a0] lg:mb-2">Get In Touch</p>
+			<a
+				class="block text-sm leading-[1.6] transition-opacity hover:opacity-50 lg:text-lg"
+				target="_blank"
+				href="mailto:polinemaui@gmail.com"
+			>
 				polinemaui@gmail.com
 			</a>
-
-			<p class="mt-8 mb-2 text-xs text-[#a0a0a0]">Offline</p>
-
-			<address class="max-w-53.75 text-lg leading-[1.45] not-italic">
+			<p class="mt-6 mb-1 text-xs text-[#a0a0a0] lg:mt-8 lg:mb-2">Offline</p>
+			<address class="text-sm leading-[1.45] not-italic lg:text-lg">
 				Politeknik Negeri Malang<br />
 				Indonesia
 			</address>
 		</section>
 	</div>
-
-	<!-- Socials + Brand -->
 	<div class="mx-auto mt-14 grid max-w-295 items-end gap-10 md:grid-cols-[245px_1fr] md:gap-20 lg:gap-32">
-		<div class="border-t border-black/10">
+		<ul class="border-t border-black/10">
 			{#each socials as social (social.label)}
-				<a
-					href={social.href}
-					target={social.label === "Github" ? "_blank" : undefined}
-					rel={social.label === "Github" ? "noopener noreferrer" : undefined}
-					class="flex justify-between border-b border-black/10 py-3 text-sm transition-opacity hover:opacity-50"
-				>
-					<span class="flex items-center gap-2">
-						<HugeiconsIcon icon={social.icon} size={16} strokeWidth={1.8} aria-hidden="true" />
-						{social.label}
-					</span>
-
-					<HugeiconsIcon icon={ArrowUpRight01Icon} size={16} strokeWidth={1.8} aria-hidden="true" />
-				</a>
+				<li>
+					<a
+						href={social.href}
+						target={social.label === "Github" ? "_blank" : undefined}
+						rel={social.label === "Github" ? "noopener noreferrer" : undefined}
+						class="flex justify-between border-b border-black/10 py-3 text-sm transition-opacity hover:opacity-50"
+					>
+						<span class="flex items-center gap-2">
+							<HugeiconsIcon icon={social.icon} size={16} strokeWidth={1.8} aria-hidden="true" />
+							{social.label}
+						</span>
+						<HugeiconsIcon icon={ArrowUpRight01Icon} size={16} strokeWidth={1.8} aria-hidden="true" />
+					</a>
+				</li>
 			{/each}
-		</div>
-
-		<div
-			class="overflow-hidden bg-linear-to-b from-black via-black to-[#ffff] bg-clip-text text-[clamp(5rem,8vw,9rem)] leading-[.75] font-bold -tracking-widest text-transparent"
+		</ul>
+		<h2
+			class="overflow-hidden bg-linear-to-b from-black via-black to-[#ffff] bg-clip-text text-center text-[clamp(3.5rem,11.5vw,8rem)] leading-[.75] font-bold -tracking-widest whitespace-nowrap text-transparent"
 		>
 			POLINEMA UI
-		</div>
+		</h2>
 	</div>
-
-	<div class="mx-auto mt-12 max-w-295 border-t border-black/10 pt-4 text-center text-xs text-black">
+	<h6 class="mx-auto mt-12 max-w-295 border-t border-black/10 pt-4 text-center text-xs text-black">
 		Copyright © Polinema UI. All Rights Reserved
-	</div>
+	</h6>
 </footer>

src/routes/docs/+layout.svelte

@@ -103,6 +103,7 @@
 
 			return { id, title: heading.textContent ?? "", level: Number(heading.tagName.slice(1)) };
 		});
+
 		updateActiveHeading();
 	}
 
@@ -184,7 +185,6 @@
 			</nav>
 		</ScrollArea>
 	</aside>
-
 	<main class="mx-auto flex min-h-screen max-w-380 min-w-0 flex-1 flex-col">
 		<header
 			class="sticky top-0 z-30 flex items-center justify-between border-b border-neutral-100 bg-white/80 px-6 py-3.5 backdrop-blur-md md:hidden"
@@ -205,7 +205,6 @@
 				{/if}
 			</button>
 		</header>
-
 		<div
 			class="mx-auto grid w-full flex-1 grid-cols-1 gap-10 px-6 py-8 lg:grid-cols-[minmax(0,1fr)_15rem] lg:px-10 xl:grid-cols-[minmax(0,4xl)_17rem] xl:gap-12"
 		>
@@ -249,15 +248,13 @@
 						{/if}
 					</nav>
 				</div>
-
 				<article
 					bind:this={articleElement}
 					class="prose max-w-none min-w-0 flex-1 prose-slate prose-headings:scroll-mt-24 prose-h2:mt-8 prose-h2:mb-1 prose-h2:text-2xl prose-h2:font-semibold prose-a:text-blue-600"
 				>
 					{@render children()}
 				</article>
 			</div>
-
 			<aside class="hidden lg:block">
 				<div class="sticky top-8 space-y-8">
 					<nav aria-label="On this page" class="border-l border-neutral-200 pl-4 text-sm">
@@ -284,7 +281,6 @@
 							<p class="text-neutral-400">No sections.</p>
 						{/if}
 					</nav>
-
 					<section class="rounded-2xl bg-neutral-100 p-5">
 						<h2 class="text-lg leading-tight font-semibold text-neutral-950">
 							Gas kalo mau jadi contributor di open source ini