diff --git a/fullstack/.gitignore b/fullstack/.gitignore
new file mode 100644
index 00000000..5ef6a520
--- /dev/null
+++ b/fullstack/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/fullstack/AGENTS.md b/fullstack/AGENTS.md
new file mode 100644
index 00000000..8bd0e390
--- /dev/null
+++ b/fullstack/AGENTS.md
@@ -0,0 +1,5 @@
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+
diff --git a/fullstack/CLAUDE.md b/fullstack/CLAUDE.md
new file mode 100644
index 00000000..43c994c2
--- /dev/null
+++ b/fullstack/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/fullstack/README-1-2-YEARS.md b/fullstack/README-1-2-YEARS.md
deleted file mode 100644
index 3153a970..00000000
--- a/fullstack/README-1-2-YEARS.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# Fullstack Assessment (1-2 Years Experience)
-
-## Overview
-
-Welcome to the **1-2 Years** fullstack assessment! Your task is to create a simple blog application using Next.js. This assessment is designed to take **1-2 hours** of coding time, but you have **1-2 days** to complete it.
-
-## Task Summary
-
-1. Create a simple blog with Next.js
-2. Implement a page that lists blog posts
-3. Add a page that displays a single blog post
-4. Create a simple API route to serve the blog data
-5. Style the application with basic CSS or Tailwind
-
-## Steps to Complete
-
-### 1. Fork the Repository
-
-1. Go to [https://github.com/Zeff01/codebility-assessment](https://github.com/Zeff01/codebility-assessment)
-2. Click the "Fork" button in the upper right corner
-
-### 2. Clone Your Fork
-
-```bash
-git clone https://github.com/YOUR-USERNAME/codebility-assessment.git
-cd codebility-assessment
-```
-
-### 3. Create a Branch
-
-```bash
-git checkout -b firstname-lastname/fullstack-1-2
-```
-
-Replace `firstname-lastname` with your actual name.
-
-### 4. Setup the Project
-
-1. Create a new Next.js project in the `fullstack` directory:
-
- ```bash
- mkdir -p fullstack
- cd fullstack
- npx create-next-app@latest .
- ```
-
-2. Choose your preferred options during the setup (TypeScript is recommended but optional)
-
-### 5. Implementation
-
-#### Blog Data
-
-Create a simple data file with blog posts:
-
-```javascript
-// data/posts.js
-export const posts = [
- {
- id: 1,
- title: "Getting Started with Next.js",
- excerpt: "Learn the basics of Next.js and how to create your first app",
- content:
- "Next.js is a React framework that enables server-side rendering and generating static websites...",
- date: "2025-04-15",
- },
- {
- id: 2,
- title: "Styling in Next.js",
- excerpt: "Different ways to style your Next.js application",
- content:
- "There are multiple ways to style your Next.js application including CSS modules, Tailwind CSS...",
- date: "2025-04-16",
- },
- // Add 1-2 more posts
-];
-```
-
-#### Pages to Implement
-
-1. **Home Page** (`app/page.jsx` or `pages/index.jsx`):
-
- - Display a list of blog posts with titles and excerpts
- - Add links to individual blog post pages
- - Include basic styling
-
-2. **Blog Post Page** (`app/posts/[id]/page.jsx` or `pages/posts/[id].jsx`):
-
- - Display a single blog post with full content
- - Include a back button to return to the home page
- - Style the page appropriately
-
-3. **API Route** (`app/api/posts/route.js` or `pages/api/posts.js`):
- - Create an endpoint that returns all posts
- - Add another endpoint to get a specific post by ID
-
-### 6. Test Your Application
-
-1. Run your Next.js app:
- ```bash
- npm run dev
- ```
-2. Test the blog post list page
-3. Test the individual blog post pages
-4. Test the API endpoints (e.g., `/api/posts` and `/api/posts/1`)
-
-### 7. Submit Your Work
-
-1. Commit and push your changes:
-
- ```bash
- git add .
- git commit -m "Implement simple blog with Next.js"
- git push origin firstname-lastname/fullstack-1-2
- ```
-
-2. Create a Pull Request:
- - Go to your fork on GitHub
- - Click "Contribute" and "Open pull request"
- - Make sure the base repository is set to `Zeff01/codebility-assessment`
- - Include screenshots of your implementation
- - Add a brief description of your approach
-
-## What We're Looking For
-
-- Understanding of Next.js basics
-- Proper page routing and navigation
-- Basic API route implementation
-- Clean code organization
-- Simple, effective styling
-
-## Technology Choices
-
-- Next.js (App Router or Pages Router - your choice)
-- JavaScript or TypeScript (your preference)
-- CSS, Tailwind, or any styling solution you prefer
-- No database required (use the provided data array)
-
-## Time Allowance
-
-- **Expected coding time**: 1-2 hours
-- **Submission deadline**: 1-2 days
-
-This assessment is intentionally simple. We're looking for clean code and a basic understanding of fullstack Next.js development.
-
-**Good luck!**
diff --git a/fullstack/README-3-5-YEARS.md b/fullstack/README-3-5-YEARS.md
deleted file mode 100644
index 6972974e..00000000
--- a/fullstack/README-3-5-YEARS.md
+++ /dev/null
@@ -1,143 +0,0 @@
-# Fullstack Assessment (3-5 Years Experience)
-
-## Overview
-
-Welcome to the **3-5 Years** fullstack assessment! Your task is to create a simple todo application with Next.js, including data persistence and authentication. This assessment is designed to take **1-2 hours** of coding time, but you have **1-2 days** to complete it.
-
-## Task Summary
-
-1. Create a todo application with Next.js
-2. Implement user authentication (can be simplified)
-3. Create API routes for CRUD operations
-4. Add data persistence with a database or local storage
-5. Style the application for a clean user experience
-
-## Steps to Complete
-
-### 1. Fork the Repository
-
-1. Go to [https://github.com/Zeff01/codebility-assessment](https://github.com/Zeff01/codebility-assessment)
-2. Click the "Fork" button in the upper right corner
-
-### 2. Clone Your Fork
-
-```bash
-git clone https://github.com/YOUR-USERNAME/codebility-assessment.git
-cd codebility-assessment
-```
-
-### 3. Create a Branch
-
-```bash
-git checkout -b firstname-lastname/fullstack-3-5
-```
-
-Replace `firstname-lastname` with your actual name.
-
-### 4. Setup the Project
-
-1. Create a new Next.js project in the `fullstack` directory:
-
- ```bash
- mkdir -p fullstack
- cd fullstack
- npx create-next-app@latest .
- ```
-
-2. Choose your preferred options during the setup (TypeScript is recommended)
-
-3. Install additional dependencies as needed:
- ```bash
- # Example - choose what you need
- npm install next-auth prisma @prisma/client
- # Or simpler alternatives if you prefer
- ```
-
-### 5. Implementation
-
-#### Authentication
-
-Implement a simple authentication system:
-
-- You can use NextAuth.js, a custom solution, or even mock authentication
-- Create sign-in and sign-out functionality
-- Protect the todo list page from unauthenticated users
-
-#### Todo Application
-
-1. **Todo List Page**:
-
- - Display the current user's todos
- - Show each todo's title, status (complete/incomplete), and creation date
- - Add buttons to mark todos as complete or delete them
- - Include a form to create new todos
-
-2. **API Routes**:
-
- - Create an endpoint for fetching todos
- - Add endpoints for creating, updating, and deleting todos
- - Ensure routes are protected for authenticated users only
-
-3. **Data Persistence**:
-
- - Use any database you're comfortable with (Prisma + SQLite is a simple option)
- - Or use localStorage/JSON files if you prefer a simpler approach
- - Ensure data persists between page refreshes
-
-4. **Styling**:
- - Create a clean, user-friendly interface
- - Add loading and error states
- - Make the UI responsive
-
-### 6. Test Your Application
-
-1. Run your Next.js app:
- ```bash
- npm run dev
- ```
-2. Test the authentication flow
-3. Test all todo operations (create, read, update, delete)
-4. Verify data persistence
-
-### 7. Submit Your Work
-
-1. Commit and push your changes:
-
- ```bash
- git add .
- git commit -m "Implement todo application with authentication"
- git push origin firstname-lastname/fullstack-3-5
- ```
-
-2. Create a Pull Request:
- - Go to your fork on GitHub
- - Click "Contribute" and "Open pull request"
- - Make sure the base repository is set to `Zeff01/codebility-assessment`
- - Include screenshots of your implementation
- - Add a brief description of your approach and any trade-offs you made
-
-## What We're Looking For
-
-- Clean, well-organized code
-- Proper authentication implementation
-- Effective API route design
-- Data persistence approach
-- User experience and UI design
-- Error handling
-
-## Technology Choices
-
-- Next.js (App Router or Pages Router - your choice)
-- TypeScript preferred but JavaScript is acceptable
-- Any authentication library (NextAuth.js, custom JWT, etc.)
-- Any database solution or local storage approach
-- Any styling approach you prefer
-
-## Time Allowance
-
-- **Expected coding time**: 1-2 hours
-- **Submission deadline**: 1-2 days
-
-Focus on implementing a clean, working solution rather than adding many features. We're looking for quality code over quantity of features.
-
-**Good luck!**
diff --git a/fullstack/README-5-YEARS-Plus.md b/fullstack/README-5-YEARS-Plus.md
deleted file mode 100644
index a59689df..00000000
--- a/fullstack/README-5-YEARS-Plus.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# Fullstack Assessment (5+ Years Experience)
-
-## Overview
-
-Welcome to the **Senior** fullstack assessment! Your task is to create a small e-commerce product page with Next.js, focusing on architecture, performance, and user experience. This assessment is designed to take **1-2 hours** of coding time, but you have **1-2 days** to complete it.
-
-## Task Summary
-
-1. Create a product detail page with Next.js
-2. Implement server and client components appropriately
-3. Add a shopping cart with state management
-4. Create API routes for product data and cart operations
-5. Focus on performance, architecture, and code quality
-
-## Steps to Complete
-
-### 1. Fork the Repository
-
-1. Go to [https://github.com/Zeff01/codebility-assessment](https://github.com/Zeff01/codebility-assessment)
-2. Click the "Fork" button in the upper right corner
-
-### 2. Clone Your Fork
-
-```bash
-git clone https://github.com/YOUR-USERNAME/codebility-assessment.git
-cd codebility-assessment
-```
-
-### 3. Create a Branch
-
-```bash
-git checkout -b firstname-lastname/fullstack-5-plus
-```
-
-Replace `firstname-lastname` with your actual name.
-
-### 4. Setup the Project
-
-1. Create a new Next.js project in the `fullstack` directory:
-
- ```bash
- mkdir -p fullstack
- cd fullstack
- npx create-next-app@latest .
- ```
-
-2. Choose the following options:
- - TypeScript
- - ESLint
- - Tailwind CSS (or your preferred styling solution)
- - App Router
-
-### 5. Implementation
-
-#### Product Detail Page
-
-Create a product detail page that demonstrates:
-
-- Server components for initial data loading
-- Client components for interactive elements
-- Proper loading and error states
-- Optimized images
-- Performance considerations
-
-#### Shopping Cart
-
-Implement a cart system that:
-
-- Allows adding products to the cart
-- Shows cart summary (number of items, total price)
-- Persists cart state (localStorage, cookies, or server-side)
-- Uses appropriate state management
-
-#### Data Handling
-
-1. **Product Data**:
-
- - Create mock product data or use a simple API
- - Implement proper data fetching with caching
- - Handle loading and error states
-
-2. **API Routes**:
-
- - Create endpoints for product data
- - Implement cart operations (add, remove, update)
- - Add proper error handling
-
-3. **Architecture**:
- - Organize code with clear separation of concerns
- - Use appropriate patterns for state management
- - Create reusable components
-
-### 6. Test Your Application
-
-1. Run your Next.js app:
- ```bash
- npm run dev
- ```
-2. Test the product detail page
-3. Verify cart functionality
-4. Check performance using browser dev tools
-
-### 7. Submit Your Work
-
-1. Commit and push your changes:
-
- ```bash
- git add .
- git commit -m "Implement product page with cart functionality"
- git push origin firstname-lastname/fullstack-5-plus
- ```
-
-2. Create a Pull Request:
- - Go to your fork on GitHub
- - Click "Contribute" and "Open pull request"
- - Make sure the base repository is set to `Zeff01/codebility-assessment`
- - Include screenshots of your implementation
- - Add a detailed explanation of your architecture decisions, performance optimizations, and any trade-offs
-
-## What We're Looking For
-
-- Clean architecture and component design
-- Proper use of server and client components
-- Effective state management
-- Performance optimization
-- Error handling and edge cases
-- Code quality and organization
-- UX considerations
-
-## Technology Choices
-
-- Next.js with App Router
-- TypeScript
-- Any state management solution you prefer
-- Any styling approach (Tailwind recommended)
-- Any data fetching library if needed
-
-## Time Allowance
-
-- **Expected coding time**: 1-2 hours
-- **Submission deadline**: 1-2 days
-
-Focus on demonstrating your architectural thinking and attention to performance rather than implementing many features. Quality over quantity is key.
-
-**Good luck!**
diff --git a/fullstack/README.md b/fullstack/README.md
new file mode 100644
index 00000000..e215bc4c
--- /dev/null
+++ b/fullstack/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/fullstack/app/api/posts/[id]/route.ts b/fullstack/app/api/posts/[id]/route.ts
new file mode 100644
index 00000000..a9ea5a3e
--- /dev/null
+++ b/fullstack/app/api/posts/[id]/route.ts
@@ -0,0 +1,12 @@
+import { posts } from "../../../../data/posts";
+import { NextResponse } from "next/server";
+
+export async function GET(
+ _req: Request,
+ { params }: { params: Promise<{ id: string }> }
+) {
+ const { id } = await params;
+ const post = posts.find((p) => p.id === Number(id));
+ if (!post) return NextResponse.json({ error: "Post not found" }, { status: 404 });
+ return NextResponse.json(post);
+}
\ No newline at end of file
diff --git a/fullstack/app/api/posts/route.ts b/fullstack/app/api/posts/route.ts
new file mode 100644
index 00000000..549f657e
--- /dev/null
+++ b/fullstack/app/api/posts/route.ts
@@ -0,0 +1,6 @@
+import { posts } from "../../../data/posts";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+ return NextResponse.json(posts);
+}
\ No newline at end of file
diff --git a/fullstack/app/favicon.ico b/fullstack/app/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/fullstack/app/favicon.ico differ
diff --git a/fullstack/app/globals.css b/fullstack/app/globals.css
new file mode 100644
index 00000000..98eb73d1
--- /dev/null
+++ b/fullstack/app/globals.css
@@ -0,0 +1,338 @@
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');
+
+*, *::before, *::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --bg: #080b12;
+ --bg-card: #0f1320;
+ --bg-card-hover: #131828;
+ --border: rgba(255, 255, 255, 0.06);
+ --text-primary: #f0f4f8;
+ --text-secondary: #94a3b8;
+ --text-muted: #4a5568;
+ --accent: #22d3ee;
+ --font-display: 'Syne', sans-serif;
+ --font-mono: 'DM Mono', monospace;
+}
+
+body {
+ background-color: var(--bg);
+ color: var(--text-primary);
+ font-family: var(--font-display);
+ min-height: 100vh;
+ overflow-x: hidden;
+ cursor: none;
+}
+
+.cursor {
+ position: fixed;
+ top: 0; left: 0;
+ width: 10px; height: 10px;
+ background: var(--accent);
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 9999;
+ transform: translate(-50%, -50%);
+ mix-blend-mode: screen;
+}
+
+.cursor-ring {
+ position: fixed;
+ top: 0; left: 0;
+ width: 36px; height: 36px;
+ border: 1px solid rgba(34, 211, 238, 0.5);
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 9998;
+ transform: translate(-50%, -50%);
+}
+
+#particle-canvas {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.page-wrapper {
+ position: relative;
+ z-index: 1;
+ min-height: 100vh;
+}
+
+.container {
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+.nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.75rem 2rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.nav-logo {
+ font-family: var(--font-display);
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--text-primary);
+ text-decoration: none;
+ letter-spacing: -0.02em;
+}
+
+.nav-logo span { color: var(--accent); }
+
+.nav-mono {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--text-muted);
+ letter-spacing: 0.1em;
+}
+
+.hero {
+ padding: 5rem 2rem 3rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.hero-label {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--accent);
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ margin-bottom: 1.25rem;
+ display: block;
+}
+
+.hero h1 {
+ font-size: clamp(2.5rem, 5vw, 4rem);
+ font-weight: 800;
+ line-height: 1.05;
+ letter-spacing: -0.03em;
+ color: var(--text-primary);
+ margin-bottom: 1rem;
+}
+
+.hero h1 em {
+ font-style: normal;
+ color: var(--accent);
+}
+
+.hero-sub {
+ font-family: var(--font-mono);
+ font-size: 13px;
+ color: var(--text-muted);
+ letter-spacing: 0.04em;
+}
+
+.posts-section {
+ padding: 2rem 2rem 5rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.section-label {
+ font-family: var(--font-mono);
+ font-size: 10px;
+ color: var(--text-muted);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ margin-bottom: 1.5rem;
+ display: block;
+}
+
+.posts-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1px;
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ overflow: hidden;
+}
+
+.post-card {
+ position: relative;
+ background: var(--bg-card);
+ padding: 1.75rem;
+ text-decoration: none;
+ display: block;
+ overflow: hidden;
+ transition: background 0.2s ease;
+ border-right: 1px solid var(--border);
+ border-bottom: 1px solid var(--border);
+}
+
+.post-card:hover { background: var(--bg-card-hover); }
+
+.post-card::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ background: radial-gradient(
+ 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+ rgba(34, 211, 238, 0.08),
+ transparent 60%
+ );
+ pointer-events: none;
+}
+
+.post-card:hover::before { opacity: 1; }
+
+.post-card-date {
+ font-family: var(--font-mono);
+ font-size: 10px;
+ color: var(--text-muted);
+ letter-spacing: 0.08em;
+ margin-bottom: 0.85rem;
+}
+
+.post-card h2 {
+ font-size: 17px;
+ font-weight: 700;
+ color: var(--text-primary);
+ line-height: 1.3;
+ margin-bottom: 0.6rem;
+ letter-spacing: -0.01em;
+ transition: color 0.2s ease;
+}
+
+.post-card:hover h2 { color: var(--accent); }
+
+.post-card p {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--text-secondary);
+ line-height: 1.7;
+ margin-bottom: 1.25rem;
+ font-weight: 300;
+}
+
+.post-card-link {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--accent);
+ letter-spacing: 0.06em;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ opacity: 0;
+ transform: translateX(-6px);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.post-card:hover .post-card-link {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.post-page {
+ max-width: 720px;
+ margin: 0 auto;
+ padding: 3rem 2rem 6rem;
+}
+
+.back-link {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--accent);
+ text-decoration: none;
+ letter-spacing: 0.06em;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 3rem;
+ transition: gap 0.2s ease;
+}
+
+.back-link:hover { gap: 12px; }
+
+.post-page-date {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--text-muted);
+ letter-spacing: 0.1em;
+ margin-bottom: 1rem;
+ display: block;
+}
+
+.post-page h1 {
+ font-size: clamp(2rem, 4vw, 3rem);
+ font-weight: 800;
+ letter-spacing: -0.03em;
+ line-height: 1.1;
+ color: var(--text-primary);
+ margin-bottom: 2.5rem;
+}
+
+.post-divider {
+ width: 40px;
+ height: 2px;
+ background: var(--accent);
+ margin-bottom: 2rem;
+}
+
+.post-content {
+ font-family: var(--font-mono);
+ font-size: 14px;
+ font-weight: 300;
+ line-height: 1.9;
+ color: var(--text-secondary);
+ border-left: 2px solid rgba(34, 211, 238, 0.25);
+ padding-left: 1.5rem;
+}
+
+.footer {
+ border-top: 1px solid var(--border);
+ padding: 1.5rem 2rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.footer-text {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--text-muted);
+ letter-spacing: 0.06em;
+}
+
+.not-found {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 60vh;
+ text-align: center;
+ gap: 1rem;
+}
+
+.not-found-code {
+ font-family: var(--font-mono);
+ font-size: 80px;
+ font-weight: 300;
+ color: var(--text-muted);
+ line-height: 1;
+}
+
+.not-found h2 {
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.not-found p {
+ font-family: var(--font-mono);
+ font-size: 13px;
+ color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/fullstack/app/layout.tsx b/fullstack/app/layout.tsx
new file mode 100644
index 00000000..823f82b0
--- /dev/null
+++ b/fullstack/app/layout.tsx
@@ -0,0 +1,98 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "Dev Blog",
+ description: "Articles on modern web development",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+ {children}
+
+