+
+
+
+ Documentation
+
+ (opens in a new window)
+
diff --git a/app/globals.css b/app/globals.css
index 98341c1..dd15226 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -107,4 +107,12 @@
.focus-ring {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
}
+
+ .btn-primary {
+ @apply focus-ring inline-flex items-center justify-center gap-2 rounded-xl bg-primary text-primary-foreground px-8 py-3 text-sm font-medium shadow-sm transition-all hover:bg-primary/90 hover:shadow;
+ }
+
+ .btn-secondary {
+ @apply focus-ring inline-flex items-center justify-center gap-2 rounded-xl border border-border bg-background px-8 py-3 text-sm font-medium transition-colors hover:bg-secondary;
+ }
}
diff --git a/tests/unit/components/Hero/index.test.tsx b/tests/unit/components/Hero/index.test.tsx
index 18a6bd3..3b3ecff 100644
--- a/tests/unit/components/Hero/index.test.tsx
+++ b/tests/unit/components/Hero/index.test.tsx
@@ -36,6 +36,22 @@ describe("Hero Component", () => {
expect(externalLinkIcon).toHaveAttribute("aria-hidden", "true");
});
+ it("renders the Documentation link with open book icon and correct attributes", () => {
+ render();
+ const docLink = screen.getByRole("link", { name: /documentation/i });
+ expect(docLink).toHaveAttribute("href", "https://cur8d.dev/typescript");
+ expect(docLink).toHaveAttribute("target", "_blank");
+ expect(docLink).toHaveAttribute("rel", "noopener noreferrer");
+
+ const bookIcon = docLink.querySelector("svg.lucide-book-open");
+ expect(bookIcon).toBeInTheDocument();
+ expect(bookIcon).toHaveAttribute("aria-hidden", "true");
+
+ const externalIcon = docLink.querySelector("svg.lucide-external-link");
+ expect(externalIcon).toBeInTheDocument();
+ expect(externalIcon).toHaveAttribute("aria-hidden", "true");
+ });
+
it("renders the code snippet", () => {
render();
expect(screen.getByTestId("code-snippet")).toBeInTheDocument();