2 files changed, 133 insertions, 0 deletions
diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..bd6d597
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..3e3f97e
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,72 @@
+---
+
+---
+<header>
+    <nav>
+      <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/contact">Contact</a></li>
+      </ul>
+    </nav>
+</header>
+<style>
+
+    header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 2rem;
+    }
+
+    nav ul {
+        display: flex;
+        flex-direction: row;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    nav li {
+        margin-right: 1.5rem;
+        position: relative;
+    }
+
+    nav li:last-child {
+        margin-right: 0;
+    }
+
+    nav a {
+        color: #fff;
+        text-decoration: none;
+        font-weight: 500;
+        padding: 5px 10px;
+        border-radius: 5px;
+        transition: all 0.3s ease; /* Adding transition */
+    }
+
+    nav a:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    /* Active link state example (you may need to adjust this based on your routing) */
+    nav a.active {
+        background: linear-gradient(to right, #4CAF50, #8BC34A);
+        color: #000;
+    }
+</style>
+<script>
+const currentPage = window.location.pathname;
+const homeLink = document.querySelector("#home-link");
+const aboutLink = document.querySelector("#about-link");
+const contactLink = document.querySelector("#contact-link");
+
+if (currentPage === "/") {
+  homeLink.classList.add("active");
+} else if (currentPage === "/about") {
+  aboutLink.classList.add("active");
+} else if (currentPage === "/contact") {
+  contactLink.classList.add("active");
+}
+</script>