Add markup+components for landing page

src/App.tsx

@@ -1,8 +1,10 @@
+import { Layout } from "@/components";
+
 function App() {
 	return (
-		<main>
-			<h1 className="text-3xl font-bold underline">Hello world!</h1>
-		</main>
+		<Layout>
+			<h1>Hello world!</h1>
+		</Layout>
 	);
 }
 

src/assets/icons/icappsLogo.tsx

@@ -0,0 +1,22 @@
+import type { SvgIcon } from "./types";
+
+function icappsLogo({ title, width = 100, height = 16 }: SvgIcon) {
+	return (
+		<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
+			<title>{title}</title>
+
+			<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+				<g fill="#FFFFFF" fill-rule="nonzero">
+					<path d="M12.9980952,8.03809524 C12.9980952,3.76380952 16.2819048,0.601904762 20.7238095,0.601904762 C22.6935652,0.580644217 24.5985926,1.3045546 26.0571429,2.62857143 C26.1464689,2.69134335 26.1996326,2.7936809 26.1996326,2.90285714 C26.1996326,3.01203338 26.1464689,3.11437093 26.0571429,3.17714286 L24.3809524,4.75428571 C24.3114771,4.83835285 24.2081077,4.88702652 24.0990476,4.88702652 C23.9899876,4.88702652 23.8866181,4.83835285 23.8171429,4.75428571 C22.0210194,3.0717065 19.2095492,3.1328717 17.4883015,4.89197342 C15.7670539,6.65107513 15.7670539,9.46321058 17.4883015,11.2223123 C19.2095492,12.981414 22.0210194,13.0425792 23.8171429,11.36 C23.8866181,11.2759329 23.9899876,11.2272592 24.0990476,11.2272592 C24.2081077,11.2272592 24.3114771,11.2759329 24.3809524,11.36 L26.0647619,12.8838095 C26.247619,13.0666667 26.2780952,13.2571429 26.0647619,13.4171429 C24.5936544,14.7530551 22.6727938,15.4849411 20.6857143,15.4666667 C16.2819048,15.4819048 12.9980952,12.32 12.9980952,8.03809524 Z" />
+					<path d="M52.4952381,14.9028571 L52.4952381,1.18857143 C52.4828839,1.08220613 52.5198325,0.976028932 52.5955498,0.900311684 C52.671267,0.824594437 52.7774442,0.787645768 52.8838095,0.8 L58.887619,0.8 C60.1765552,0.729599398 61.4364083,1.20020968 62.3635314,2.09840533 C63.2906544,2.99660098 63.8009503,4.2409089 63.7714286,5.53142857 C63.7714286,8.19809524 61.8819048,10.1866667 58.887619,10.1866667 L56.0838095,10.1866667 C55.9774442,10.1743124 55.871267,10.2112611 55.7955498,10.2869784 C55.7198325,10.3626956 55.6828839,10.4688728 55.6952381,10.5752381 L55.6952381,14.9180952 C55.7102401,15.0236683 55.6752671,15.1302114 55.600616,15.2063555 C55.5259648,15.2824997 55.4201351,15.3195754 55.3142857,15.3066667 L52.8838095,15.3066667 C52.7736327,15.3235437 52.662128,15.2858094 52.5848425,15.205493 C52.5075569,15.1251767 52.4741375,15.0123036 52.4952381,14.9028571 Z M58.3771429,7.48952381 C59.9009524,7.48952381 60.6628571,6.72761905 60.6628571,5.47809524 C60.6628571,4.22857143 59.9009524,3.45904762 58.3771429,3.45904762 L56.0914286,3.45904762 C55.9850633,3.44669339 55.8788861,3.48364206 55.8031688,3.5593593 C55.7274516,3.63507655 55.6905029,3.74125375 55.7028571,3.84761905 L55.7028571,7.10857143 C55.6899484,7.21442083 55.7270241,7.32025054 55.8031683,7.39490169 C55.8793125,7.46955285 55.9858555,7.50452586 56.0914286,7.48952381 L58.3771429,7.48952381 Z" />
+					<path d="M70.4228571,14.9028571 L70.4228571,1.18857143 C70.4105029,1.08220613 70.4474516,0.976028932 70.5231688,0.900311684 C70.5988861,0.824594437 70.7050633,0.787645768 70.8114286,0.8 L76.8152381,0.8 C78.1041742,0.729599398 79.3640274,1.20020968 80.2911504,2.09840533 C81.2182735,2.99660098 81.7285694,4.2409089 81.6990476,5.53142857 C81.6990476,8.19809524 79.8095238,10.1866667 76.8152381,10.1866667 L74.0114286,10.1866667 C73.9050633,10.1743124 73.7988861,10.2112611 73.7231688,10.2869784 C73.6474516,10.3626956 73.6105029,10.4688728 73.6228571,10.5752381 L73.6228571,14.9180952 C73.6378592,15.0236683 73.6028862,15.1302114 73.528235,15.2063555 C73.4535839,15.2824997 73.3477542,15.3195754 73.2419048,15.3066667 L70.8114286,15.3066667 C70.7012517,15.3235437 70.5897471,15.2858094 70.5124615,15.205493 C70.435176,15.1251767 70.4017565,15.0123036 70.4228571,14.9028571 Z M76.3047619,7.48952381 C77.8285714,7.48952381 78.5904762,6.72761905 78.5904762,5.47809524 C78.5904762,4.22857143 77.8285714,3.45904762 76.3047619,3.45904762 L74.0190476,3.45904762 C73.9126823,3.44669339 73.8065051,3.48364206 73.7307879,3.5593593 C73.6550706,3.63507655 73.618122,3.74125375 73.6304762,3.84761905 L73.6304762,7.10857143 C73.6175674,7.21442083 73.6546431,7.32025054 73.7307873,7.39490169 C73.8069315,7.46955285 73.9134746,7.50452586 74.0190476,7.48952381 L76.3047619,7.48952381 Z" />
+					<path d="M8.51047619,0.761904762 L3.36761905,14.9180952 C3.29596034,15.1463734 3.08104625,15.2989935 2.84190476,15.2914286 L0,15.2914286 L5.14285714,1.17333333 C5.20887107,0.939004166 5.42518665,0.779118738 5.66857143,0.784761905 L8.51047619,0.761904762 Z" />
+					<path d="M90.2780952,4.72380952 C90.2780952,3.8552381 91.04,3.29142857 92.32,3.29142857 C93.8754527,3.27441614 95.3810419,3.83969151 96.5409524,4.87619048 L96.5409524,4.87619048 L97.4552381,2.24 C97.5083296,2.09612542 97.4545122,1.93467334 97.3257143,1.85142857 C95.9183819,0.951034508 94.2718222,0.496902726 92.6019048,0.548571429 C89.1885714,0.548571429 87.1009524,2.55238095 87.1009524,4.96 C87.1009524,10.4228571 95.4819048,8.66285714 95.4819048,11.1847619 C95.4819048,12.0304762 94.6742857,12.792381 92.96,12.792381 C91.349339,12.7938921 89.7987978,12.1807607 88.6247619,11.0780952 C88.5573569,11.0134179 88.4655476,10.9805908 88.3724152,10.9878668 C88.2792827,10.9951427 88.1936855,11.0418297 88.1371429,11.1161905 L86.8114286,12.9980952 C86.710418,13.1195165 86.710418,13.2957216 86.8114286,13.4171429 C88.4537389,14.8733958 90.5998404,15.6306826 92.792381,15.527619 C96.6857143,15.527619 98.5981005,13.5314286 98.5981005,10.88 C98.6057143,5.46285714 90.2780952,7.00952381 90.2780952,4.72380952 Z" />
+					<path d="M45.9657143,14.8495238 L40.96,1.08952381 C40.8999943,0.895218628 40.7131904,0.768571919 40.5104762,0.784761905 L37.3333333,0.784761905 C37.1325735,0.769352573 36.9483667,0.896391718 36.8914286,1.08952381 L31.8857143,14.8495238 C31.7790476,15.1161905 31.8857143,15.2914286 32.1904762,15.2914286 L34.4761905,15.2914286 C34.6790568,15.3118756 34.8653393,15.177883 34.9104762,14.9790476 L38.6819048,4.64761905 C38.8114286,4.29714286 39.0552381,4.29714286 39.1847619,4.64761905 L40.8838095,9.31809524 C40.9828571,9.5847619 40.8838095,9.76 40.5714286,9.76 L38.2857143,9.76 L37.287619,12.4190476 L41.6990476,12.4190476 C41.8982155,12.4058917 42.078096,12.5375899 42.1257143,12.7314286 L42.9409524,14.9790476 C42.9885707,15.1728863 43.1684512,15.3045845 43.367619,15.2914286 L45.6533333,15.2914286 C45.927619,15.2914286 46.0647619,15.1161905 45.9657143,14.8495238 Z" />
+				</g>
+			</g>
+		</svg>
+	);
+}
+
+export default icappsLogo;

src/assets/icons/index.ts

@@ -0,0 +1 @@
+export { default as IcappsLogo } from "./icappsLogo.tsx";

src/assets/icons/types.ts

@@ -0,0 +1,5 @@
+export type SvgIcon = {
+	title: string;
+	width?: number;
+	height?: number;
+};

src/components/Header.tsx

@@ -0,0 +1,86 @@
+import { IcappsLogo } from "@/assets/icons";
+import navigationItems from "@/navigation";
+import { cx } from "@/utils";
+import { useState } from "react";
+
+function Header() {
+	const [isNavOpen, setIsNavOpen] = useState(false);
+
+	const toggleNavigation = () => {
+		setIsNavOpen((prev) => !prev);
+	};
+
+	return (
+		<header className="mb-auto text-sm py-4">
+			<div className="w-full sm:flex sm:items-center sm:justify-between">
+				<div className="flex items-center justify-between">
+					<a
+						className="flex-none text-xl font-semibold text-white focus:outline-none focus:ring-1 focus:ring-gray-600"
+						href="#!"
+					>
+						<IcappsLogo title="Icapps logo" />
+					</a>
+					<div className="sm:hidden">
+						{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+						<button
+							onClick={toggleNavigation}
+							className="p-2 inline-flex justify-center items-center gap-2 rounded-lg border border-gray-700 hover:border-gray-600 font-medium text-gray-300 hover:text-white shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-blue-600 transition-all text-sm"
+						>
+							<svg
+								className="flex-shrink-0 size-4"
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								aria-hidden="true"
+							>
+								{isNavOpen ? (
+									<>
+										<path d="M18 6 6 18" />
+										<path d="m6 6 12 12" />
+									</>
+								) : (
+									<>
+										<line x1="3" x2="21" y1="6" y2="6" />
+										<line x1="3" x2="21" y1="12" y2="12" />
+										<line x1="3" x2="21" y1="18" y2="18" />
+									</>
+								)}
+							</svg>
+						</button>
+					</div>
+				</div>
+				<div
+					className={cx(
+						"overflow-hidden transition-all duration-300 basis-full grow sm:block",
+						isNavOpen ? "max-h-screen" : "max-h-0 sm:max-h-none",
+					)}
+				>
+					<div className="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
+						{navigationItems.map((item) => (
+							<a
+								key={item.title}
+								href={item.href}
+								className={cx(
+									"font-medium focus:outline-none focus:ring-1 focus:ring-gray-600",
+									item.isActive
+										? "text-white"
+										: "text-gray-400 hover:text-gray-500",
+								)}
+							>
+								{item.title}
+							</a>
+						))}
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+export default Header;

src/components/Layout.tsx

@@ -0,0 +1,15 @@
+import { Header } from "@/components";
+import type { PropsWithChildren } from "react";
+
+type Layout = PropsWithChildren;
+
+function Layout({ children }: Layout) {
+	return (
+		<div className="container mx-auto flex flex-col size-full px-4 sm:px-6 lg:px-8">
+			<Header />
+			{children}
+		</div>
+	);
+}
+
+export default Layout;

src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Layout } from "./Layout";
+export { default as Header } from "./Header";

src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    @apply min-h-screen bg-congress-blue-900 text-white font-sans;
+  }
+}

src/navigation.ts

@@ -0,0 +1,14 @@
+export type NavigationItem = {
+	title: string;
+	href: string;
+	isActive?: boolean;
+};
+
+const navigationItems: NavigationItem[] = [
+	{ title: "Home", href: "#!", isActive: true },
+	{ title: "Services", href: "#!" },
+	{ title: "About", href: "#!" },
+	{ title: "Contact", href: "#!" },
+];
+
+export default navigationItems;

src/utils/cx.ts

@@ -0,0 +1,5 @@
+function cx(...args: (string | undefined)[]): string {
+	return args.filter(Boolean).join(" ");
+}
+
+export default cx;

src/utils/index.ts

@@ -0,0 +1 @@
+export { default as cx } from "./cx";