Generic Service Business Website Template (Next.js + Tailwind CSS + Hero UI)

This is a template for building a modern, performant website for a local service-based business using Next.js (App Router), Tailwind CSS, and the Hero UI component library.

It provides a solid foundation including:

• Responsive design
• Core pages (Homepage, About, Services, Locations, Blog, Contact, Testimonials)
• Basic SEO setup (Metadata API)
• Contact form integration (client-side validation)
• Service area check functionality
• Generic placeholder content and images

Getting Started

1. Clone the repository:

   git clone <your-repo-url>
   cd <repo-name>

2. Install dependencies: This project uses pnpm as the package manager.

   pnpm install

3. Configure Environment Variables:
   • Copy e-n-v local example to .env.local.
   • Fill in the required values:
     • NEXT_PUBLIC_RECAPTCHA_SITE_KEY: Your Google reCAPTCHA v2 Site Key (optional, needed for contact form captcha).
     • RECAPTCHA_SECRET_KEY: Your Google reCAPTCHA v2 Secret Key (optional, needed for server-side validation - Note: Server-side validation logic is not implemented in this template).
     • NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY: If using Supabase for backend/database features (currently only used for potential form submission logging in emailService.ts, can be removed if not needed).
     • RESEND_API_KEY: If using Resend for contact form email delivery via emailService.ts (replace with your preferred email service if desired).
4. Run the development server:

   pnpm run dev

   Open http://localhost:3000 with your browser.

Customization (Manual Steps Required)

This template uses generic placeholders. You MUST replace them with your specific business information:

1. Business Information (src/lib/config.ts):
   • Update siteConfig with your business name, description, URL.
2. Logo (public/images/logos/generic-logo.svg):
   • Replace the placeholder SVG with your actual logo file.
   • Update the reference in src/components/Header.tsx if the filename changes.
3. Content & Text:
   • Search for bracketed placeholders like [Your Company Name], [Your Service Area], [Your Service Category], [Location Name], Service A, contact@[yourdomain].com, (555) 123-4567 etc., throughout the codebase (src/app, src/components, src/lib).
   • Replace them with your actual content (services, locations, about text, mission, values, contact details).
   • Update placeholder data in src/lib/blog.ts (blog posts), src/app/core-site/testimonials/TestimonialsPageClient.tsx (testimonials), src/app/core-site/about/page.tsx (team members), src/app/core-site/locations/LocationsPageClient.tsx (locations).
4. Images:
   • Replace placeholder images in public/images/services/, public/images/team/, etc., with your own relevant images.
   • Update alt text accordingly.
   • Review background placeholders (styled div elements replacing previous next/image backgrounds) in various pages (HeroSection.tsx, page.tsx, locations/LocationsPageClient.tsx, etc.) and replace with actual images or desired background styles.
5. Contact Form (src/app/core-site/contact/ContactPageClient.tsx, src/lib/emailService.ts):
   • Update recipient email address in emailService.ts (to: 'your-email@example.com',).
   • If using reCAPTCHA, ensure keys are in .env.local.
   • Implement server-side reCAPTCHA validation in src/app/api/submit-form/route.ts if required.
   • Configure your chosen email sending service (default is Resend via emailService.ts).
6. Map (src/app/core-site/locations/LocationsPageClient.tsx, src/app/core-site/contact/ContactPageClient.tsx):
   • Update default coordinates and zoom levels in the Leaflet map components to center on your service area.
   • Update location markers with correct coordinates.
7. Favicons (public/):
   • Replace favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png with your own icons.
   • Update site.webmanifest.
8. Final Review: Manually browse the entire site to catch any remaining placeholders or inconsistencies.

Tech Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS
• UI Components: Hero UI (@heroui/react)
• Forms: Formik & Zod (for validation)
• Maps: Leaflet & React Leaflet
• Icons: Heroicons
• Email: Resend (example integration in src/lib/emailService.ts)
• Linting/Formatting: ESLint, Prettier
• Package Manager: pnpm

Hero UI Configuration

• Provider: Setup in src/app/layout.tsx.
• Tailwind Plugin: Configured in tailwind.config.ts.
• Theme: Uses semantic colors (primary: Slate, focus: Teal). Modify colors in tailwind.config.ts under heroPlugin({ ... }).

Deployment

Deploy the application using platforms like Vercel (recommended), Netlify, or your own server.

pnpm run build

Contributing

This is a template, feel free to fork and modify.

License

MIT License (You should add a LICENSE file).