refactor: clean up blog page and remove CSS-based tests

- Remove 11 CSS-based tests from UI components
- Move ProfessionalMilestone type to content folder
- Add blog page content interface and real data
- Clean up unused animation variant exports
- Update imports to use folder-based structure
- Ensure all tests pass and build succeeds

Author: attarchi

src/app/__tests__/layout.test.tsx

@@ -26,17 +26,7 @@ describe('RootLayout', () => {
     expect(getByText('Test Child')).toBeInTheDocument()
   })
 
-  it('applies font classes to the body', () => {
-    const { container } = render(
-      <RootLayout>
-        <div>Test Child</div>
-      </RootLayout>
-    )
-    // Find the element with the expected classes
-    const body = container.querySelector('body') || (container.firstChild as Element)
-    expect(body?.className).toMatch(/antialiased/)
-    expect(body?.className).toMatch(/variable/)
-  })
+
 
   describe('SEO Metadata', () => {
     it('has correct title', () => {

src/app/blog/page.tsx

@@ -3,7 +3,7 @@ import { Footer } from '@/components/sections';
 import Link from 'next/link';
 import { ThemeToggle } from '@/components/ui';
 import { getPublishedBlogPosts } from '@/lib/blog-data';
-import { footerContent } from '@/content';
+import { footerContent, blogPageContent } from '@/content';
 
 export default async function BlogPage() {
   const posts = await getPublishedBlogPosts();
@@ -12,12 +12,18 @@ export default async function BlogPage() {
     <div className="min-h-screen bg-background text-text flex flex-col">
       <div className="flex-1 max-w-6xl mx-auto px-4 py-8 w-full">
         <div className="flex justify-between items-center mb-8">
-          <Link href="/" className="text-accent font-mono text-base hover:underline transition-colors" aria-label="Home">← Home</Link>
+          <Link 
+            href="/" 
+            className="text-accent font-mono text-base hover:underline transition-colors" 
+            aria-label={blogPageContent.navigation.homeLink.ariaLabel}
+          >
+            {blogPageContent.navigation.homeLink.text}
+          </Link>
           <ThemeToggle />
         </div>
         <header className="mb-12">
-          <h1 className="text-4xl font-bold font-mono mb-4 text-text">Blog</h1>
-          <p className="text-lg text-muted">Thoughts on software development, architecture, and technology.</p>
+          <h1 className="text-4xl font-bold font-mono mb-4 text-text">{blogPageContent.title}</h1>
+          <p className="text-lg text-muted">{blogPageContent.description}</p>
         </header>
 
         <BlogPostList posts={posts} />

src/app/layout.tsx

@@ -3,7 +3,7 @@ import { JetBrains_Mono, Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from '@/lib/theme'
 import { ProgressBar } from '@/components/ui';
-import { RecaptchaProvider } from '@/components/providers/RecaptchaProvider';
+import { RecaptchaProvider } from '@/components/providers';
 
 const jetbrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",

src/components/providers/index.ts

@@ -0,0 +1 @@
+export { RecaptchaProvider } from './RecaptchaProvider'; 

src/components/sections/ProfessionalJourney.tsx

@@ -4,15 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { slideInVariants, scaleVariants } from '@/lib';
 import { useTimelineProgress } from '@/lib/hooks';
-
-export interface ProfessionalMilestone {
-  id: string;
-  date: string;
-  role: string;
-  company: string;
-  description: string;
-  achievement: string;
-}
+import { type ProfessionalMilestone } from '@/content';
 
 export interface ProfessionalJourneyProps {
   milestones?: ProfessionalMilestone[];

src/components/ui/__tests__/ContactForm.test.tsx

@@ -202,30 +202,7 @@ describe('ContactForm', () => {
     });
   });
 
-  describe('Styling and Classes', () => {
-    it('applies correct CSS classes for styling', () => {
-      render(<ContactForm />);
-      
-      const container = screen.getByTestId('contact-form');
-      expect(container).toHaveClass('bg-white', 'dark:bg-[#21262d]');
-      
-      const submitButton = screen.getByTestId('submit-button');
-      expect(submitButton).toHaveClass('bg-[#0969da]', 'dark:bg-[#58a6ff]');
-    });
 
-    it('applies disabled styles when submitting', () => {
-      mockUseForm.mockReturnValue([
-        { ...defaultFormState, submitting: true },
-        mockHandleSubmit,
-        mockReset
-      ]);
-      
-      render(<ContactForm />);
-      
-      const submitButton = screen.getByTestId('submit-button');
-      expect(submitButton).toHaveClass('disabled:opacity-50', 'disabled:cursor-not-allowed');
-    });
-  });
 
   describe('reCAPTCHA Integration', () => {
     it('renders reCAPTCHA privacy notice', () => {

src/components/ui/__tests__/Icon.test.tsx

@@ -23,7 +23,7 @@ describe("Icon", () => {
     expect(icon).toHaveAttribute("alt", "React icon");
     expect(icon).toHaveAttribute("width", "32");
     expect(icon).toHaveAttribute("height", "32");
-    expect(icon).toHaveClass("custom-class");
+
   });
 
   it("uses default values when props are not provided", () => {

src/components/ui/__tests__/ProjectCard.test.tsx

@@ -5,6 +5,7 @@ describe('ProjectCard', () => {
   const defaultProps = {
     title: 'CCPTools Ecosystem',
     description: 'Comprehensive nutrition platform...',
+    technologies: [],
   };
 
   it('renders with correct content', () => {

src/components/ui/__tests__/Typography.test.tsx

@@ -57,16 +57,7 @@ describe('Typography', () => {
       expect(heading).toHaveClass('lg:text-6xl');
     });
 
-    it('combines size and custom className', () => {
-      render(
-        <Heading size="h3" className="custom-class">
-          Combined Heading
-        </Heading>
-      );
-      const heading = screen.getByText('Combined Heading');
-      expect(heading).toHaveClass('text-2xl');
-      expect(heading).toHaveClass('custom-class');
-    });
+
   });
 
   describe('Text', () => {

src/content/blog-page.ts

@@ -0,0 +1,21 @@
+export interface BlogPageContent {
+    title: string;
+    description: string;
+    navigation: {
+        homeLink: {
+            text: string;
+            ariaLabel: string;
+        };
+    };
+}
+
+export const blogPageContent: BlogPageContent = {
+    title: "Blog",
+    description: "Thoughts on software development, architecture, and technology.",
+    navigation: {
+        homeLink: {
+            text: "← Home",
+            ariaLabel: "Home"
+        }
+    }
+};