From 7e542597d08723b5c26a4a5d2995463fc47d093a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 18 May 2026 14:15:25 +0300
Subject: [PATCH] feat: Footer widget with email link and CV download, added to
 root layout

---
 app/layout.tsx                               |  6 ++-
 src/widgets/Footer/index.ts                  |  1 +
 src/widgets/Footer/ui/Footer/Footer.test.tsx | 47 ++++++++++++++++++++
 src/widgets/Footer/ui/Footer/Footer.tsx      | 23 ++++++++++
 src/widgets/index.ts                         |  1 +
 5 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/widgets/Footer/index.ts
 create mode 100644 src/widgets/Footer/ui/Footer/Footer.test.tsx
 create mode 100644 src/widgets/Footer/ui/Footer/Footer.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
index 6ae4ca5..f3b78ea 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { fraunces, publicSans } from '$shared/lib';
+import { Footer } from '$widgets/Footer';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -13,7 +14,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={`${fraunces.variable} ${publicSans.variable}`}>{children}</body>
+      <body className={`${fraunces.variable} ${publicSans.variable}`}>
+        {children}
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/src/widgets/Footer/index.ts b/src/widgets/Footer/index.ts
new file mode 100644
index 0000000..8094bd1
--- /dev/null
+++ b/src/widgets/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './ui/Footer/Footer';
diff --git a/src/widgets/Footer/ui/Footer/Footer.test.tsx b/src/widgets/Footer/ui/Footer/Footer.test.tsx
new file mode 100644
index 0000000..b7afc0f
--- /dev/null
+++ b/src/widgets/Footer/ui/Footer/Footer.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { Footer } from './Footer';
+
+describe('Footer', () => {
+  describe('structure', () => {
+    it('renders a footer element', () => {
+      const { container } = render(<Footer />);
+      expect(container.querySelector('footer')).toBeInTheDocument();
+    });
+
+    it('has brutal-border-top separator', () => {
+      const { container } = render(<Footer />);
+      expect(container.querySelector('footer')).toHaveClass('brutal-border-top');
+    });
+  });
+
+  describe('email link', () => {
+    it('renders the contact email as a mailto link', () => {
+      render(<Footer />);
+      const link = screen.getByRole('link', { name: /hello@allmy\.work/i });
+      expect(link).toHaveAttribute('href', 'mailto:hello@allmy.work');
+    });
+  });
+
+  describe('CV download', () => {
+    it('renders a CV download link', () => {
+      render(<Footer />);
+      expect(screen.getByRole('link', { name: /download cv/i })).toBeInTheDocument();
+    });
+
+    it('CV link points to the cv file', () => {
+      render(<Footer />);
+      expect(screen.getByRole('link', { name: /download cv/i })).toHaveAttribute('href', '/cv.pdf');
+    });
+
+    it('CV link has download attribute', () => {
+      render(<Footer />);
+      expect(screen.getByRole('link', { name: /download cv/i })).toHaveAttribute('download');
+    });
+
+    it('CV link has button styling', () => {
+      render(<Footer />);
+      const link = screen.getByRole('link', { name: /download cv/i });
+      expect(link).toHaveClass('brutal-border', 'uppercase');
+    });
+  });
+});
diff --git a/src/widgets/Footer/ui/Footer/Footer.tsx b/src/widgets/Footer/ui/Footer/Footer.tsx
new file mode 100644
index 0000000..d823cfd
--- /dev/null
+++ b/src/widgets/Footer/ui/Footer/Footer.tsx
@@ -0,0 +1,23 @@
+import { CONTACT_LINKS } from '$shared/lib';
+
+/**
+ * Site-wide footer with contact email and CV download link.
+ */
+export function Footer() {
+  return (
+    <footer className="brutal-border-top px-8 py-6 lg:px-16 lg:py-8">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <a href={`mailto:${CONTACT_LINKS.email}`} className="text-sm opacity-60 hover:opacity-100 transition-opacity">
+          {CONTACT_LINKS.email}
+        </a>
+        <a
+          href="/cv.pdf"
+          download
+          className="brutal-border px-4 py-2 bg-blue text-cream text-sm uppercase tracking-wider btn-transition self-start sm:self-auto"
+        >
+          Download CV
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
index 95e14a9..71ffc2e 100644
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -1 +1,2 @@
+export * from './Footer';
 export * from './Navigation';
