fix: Format code and update CSS to Tailwind v4 syntax

Signed-off-by: Mr Sumo <[email protected]>

Author: whatsupsumit

MIGRATION_SUMMARY.md

@@ -59,6 +59,7 @@ public/              → Static assets (images, fonts)
 ## What's Included
 
 ### Pages & Sections
+
 1. Hero Section (with CTA buttons)
 2. About Section
 3. Program Offerings (3 cards)
@@ -69,6 +70,7 @@ public/              → Static assets (images, fonts)
 8. Footer (newsletter + social links)
 
 ### Features
+
 - Smooth scrolling navigation
 - Mobile responsive menu
 - Custom scrollbar
@@ -107,6 +109,7 @@ public/              → Static assets (images, fonts)
 ## Deployment
 
 Ready to deploy on:
+
 - **Vercel** (recommended - one-click deploy)
 - Netlify
 - AWS Amplify
@@ -121,6 +124,7 @@ Ready to deploy on:
 ## Support
 
 For issues or questions:
+
 1. Check README-NEXTJS.md
 2. Review PR_DESCRIPTION.md
 3. Open a GitHub issue

PR_DESCRIPTION.md

@@ -9,12 +9,14 @@ This PR migrates the Keploy Writers Program website from static HTML/CSS/JavaScr
 ## 🎯 Changes Made
 
 ### Core Stack Migration
+
 - ✅ **Next.js 15**: Migrated to Next.js with App Router
 - ✅ **TypeScript**: Full TypeScript support throughout the codebase
 - ✅ **Tailwind CSS**: Utility-first CSS framework (v4)
 - ✅ **React Server Components**: Leveraging Next.js 15's server components
 
 ### Architecture & Structure
+
 - ✅ Created modern component-based architecture
 - ✅ Organized components into logical sections:
   - `components/sections/` - Page sections (Hero, About, Program, Process, Criteria, Community)
@@ -24,6 +26,7 @@ This PR migrates the Keploy Writers Program website from static HTML/CSS/JavaScr
 - ✅ Moved static assets to `public/` directory
 
 ### Features Implemented
+
 - ✅ **Responsive Design**: Mobile-first approach with Tailwind CSS
 - ✅ **SEO Optimization**: Proper metadata, OpenGraph tags, and sitemap
 - ✅ **Image Optimization**: Using Next.js Image component
@@ -33,13 +36,16 @@ This PR migrates the Keploy Writers Program website from static HTML/CSS/JavaScr
 - ✅ **Social Media Integration**: All social links maintained
 
 ### UI Components
+
 - ✅ Shadcn/ui inspired Button component with variants
 - ✅ Radix UI primitives for accessibility
 - ✅ Lucide React for modern icons
 - ✅ Custom utility functions (cn helper)
 
 ### Content Migration
+
 All sections migrated with content intact:
+
 1. **Hero Section**: Main landing with CTA buttons
 2. **About Section**: Company information
 3. **Program Section**: What the program offers (3 cards)
@@ -52,18 +58,21 @@ All sections migrated with content intact:
 ## 🚀 Technical Improvements
 
 ### Performance
+
 - Server-side rendering for faster initial loads
 - Automatic code splitting
 - Optimized images and fonts
 - Minimal JavaScript bundle size
 
 ### Developer Experience
+
 - Type safety with TypeScript
 - Hot module reloading
 - Better error messages
 - Modern tooling (ESLint, Prettier-ready)
 
 ### Maintainability
+
 - Component-based architecture
 - Reusable UI components
 - Clear folder structure
@@ -143,6 +152,7 @@ writers-program/
 ## 🌐 Deployment Ready
 
 The application is ready to be deployed on:
+
 - Vercel (recommended)
 - Netlify
 - AWS Amplify
@@ -151,6 +161,7 @@ The application is ready to be deployed on:
 ## 📸 Screenshots
 
 Development server running successfully:
+
 - ✅ Build: Compiled successfully
 - ✅ No TypeScript errors
 - ✅ No build warnings
@@ -169,6 +180,7 @@ Development server running successfully:
 ## 🔮 Future Enhancements (Not in this PR)
 
 Potential improvements for future PRs:
+
 - Add animation libraries (Framer Motion, Aceternity UI)
 - Implement dark mode
 - Add more shadcn/ui components

app/layout.tsx

@@ -23,8 +23,15 @@ const montserrat = Montserrat({
 
 export const metadata: Metadata = {
   title: "Keploy's Writers Program",
-  description: "Get into a community of Technical Writers where you get the right Recognition | Growth | Networking | Earning & Rewards. An Open-Source Program for Students, Professionals, and Freelancers",
-  keywords: ["Keploy", "Writers Program", "Technical Writing", "Open Source", "Developer Content"],
+  description:
+    "Get into a community of Technical Writers where you get the right Recognition | Growth | Networking | Earning & Rewards. An Open-Source Program for Students, Professionals, and Freelancers",
+  keywords: [
+    "Keploy",
+    "Writers Program",
+    "Technical Writing",
+    "Open Source",
+    "Developer Content",
+  ],
   authors: [{ name: "Keploy.io" }],
   openGraph: {
     title: "Keploy's Writers Program",

app/page.tsx

@@ -1,9 +1,9 @@
-import HeroSection from '@/components/sections/HeroSection';
-import AboutSection from '@/components/sections/AboutSection';
-import ProgramSection from '@/components/sections/ProgramSection';
-import ProcessSection from '@/components/sections/ProcessSection';
-import CriteriaSection from '@/components/sections/CriteriaSection';
-import CommunitySection from '@/components/sections/CommunitySection';
+import HeroSection from "@/components/sections/HeroSection";
+import AboutSection from "@/components/sections/AboutSection";
+import ProgramSection from "@/components/sections/ProgramSection";
+import ProcessSection from "@/components/sections/ProcessSection";
+import CriteriaSection from "@/components/sections/CriteriaSection";
+import CommunitySection from "@/components/sections/CommunitySection";
 
 export default function Home() {
   return (

next.config.ts

@@ -5,8 +5,8 @@ const nextConfig: NextConfig = {
     unoptimized: true,
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: '**',
+        protocol: "https",
+        hostname: "**",
       },
     ],
   },