Feat/pong

CLAUDE.md

@@ -0,0 +1,36 @@
+# MOM Project Guidelines
+
+## Development Commands
+- Build: `npm run build`
+- Dev server: `npm run dev` (with Turbopack)
+- Start: `npm run start`
+- Lint: `npm run lint`
+
+## Code Style
+
+### TypeScript
+- Strict type checking enabled
+- Use explicit return types (e.g., `function Component(): ReactNode`)
+- Import types with `import type` syntax
+- Use type annotations for all function parameters
+
+### Component Structure
+- React functional components with explicit return types
+- Export constants at the file level when appropriate
+- Props interfaces should be defined inline with component parameters
+
+### Formatting
+- Single quotes for strings, with values in JSX wrapped in curly braces
+- Tab width: 4 spaces
+- Line width: 120 characters
+- Use className objects with template strings for complex classnames
+- Use Tailwind for styling
+
+### Imports
+- Use absolute imports with @ alias (e.g., `@/components/common/Header`)
+- Group imports by: 1) external libraries, 2) internal components, 3) types
+
+### Naming
+- PascalCase for components and component files
+- camelCase for functions, variables, and non-component files
+- Use descriptive and specific names

app/page.tsx

@@ -1,16 +1,16 @@
-import GridBackground from '@/components/common/GridBackground';
+import PongGame from '@/components/common/PongGame';
 
 import type {ReactNode} from 'react';
 
 export default function Home(): ReactNode {
 	return (
 		<main className={'relative '}>
-			<GridBackground />
+			<PongGame />
 
 			<div className={'relative flex h-[calc(100vh-128px)] flex-1 items-start justify-center md:items-center'}>
 				<h1
 					className={
-						'mb-[128px] mt-8 text-center text-[clamp(48px,8vw,80px)] leading-[clamp(40px,7vw,72px)] md:mt-0'
+						'mb-[128px] mt-8 text-center text-[clamp(48px,8vw,64px)] leading-[clamp(40px,7vw,56px)] md:mt-0'
 					}>
 					<span className={'font-[Monument] font-extrabold'}>{'MOM GONNA'}</span> {'TAKE CARE'}
 					<br />