Skip to content

Add two professional client websites: Remontti Työrönkainen and LVI Kruunu#34516

Closed
WebWelho wants to merge 9 commits intoanthropics:mainfrom
WebWelho:claude/redesign-company-website-DWEDW
Closed

Add two professional client websites: Remontti Työrönkainen and LVI Kruunu#34516
WebWelho wants to merge 9 commits intoanthropics:mainfrom
WebWelho:claude/redesign-company-website-DWEDW

Conversation

@WebWelho
Copy link
Copy Markdown

Summary

This PR adds two complete, production-ready client websites for Finnish service businesses:

  1. Remontti Työrönkainen – A renovation/remodeling company website
  2. LVI Kruunu – A plumbing/HVAC services website

Both sites are fully self-contained with HTML, CSS, and JavaScript, optimized for conversion and mobile responsiveness. A GitHub Pages deployment workflow is included to automatically publish both sites.

Key Changes

Remontti Työrönkainen Website

  • index.html (1821 lines): Complete single-page website with:
    • Fixed navigation with scroll effects and mobile hamburger menu
    • Hero section with background image, animations, and CTA buttons
    • Trust bar with key credentials
    • Services grid showcasing renovation types (bathrooms, kitchens, flooring, painting)
    • "Why Us" section with two-column layout and floating badge
    • Portfolio/references section with masonry grid layout
    • Process timeline (4-step renovation workflow)
    • Testimonials carousel with star ratings
    • Contact form with validation
    • Footer with company info and links
  • Embedded CSS with:
    • Dark theme (gold accents) with sophisticated color palette
    • Smooth animations and transitions
    • Responsive grid layouts
    • Custom scrollbar styling
    • Mobile-first responsive design

LVI Kruunu Website

  • index.html (588 lines): Conversion-optimized single-page site with:
    • Sticky top bar with urgency messaging and phone number
    • Navigation with mobile menu support
    • Hero section with gradient background, trust badges, and animated card
    • Problem/solution cards
    • Services grid with featured service highlighting
    • Why choose us section with benefits
    • Pricing table with comparison
    • Testimonials section
    • FAQ accordion
    • Contact section with multiple CTAs
  • style.css (1240 lines): Modern light theme with:
    • Blue primary color (#1e40af) with accent orange
    • Comprehensive component library (buttons, cards, badges)
    • Animation utilities and scroll-triggered animations
    • Responsive grid system
    • Accessibility-focused design
  • script.js (128 lines): Interactive features including:
    • Intersection Observer for scroll animations
    • Navbar scroll effects
    • Mobile menu toggle
    • Smooth scroll behavior
    • Form validation

Deployment Infrastructure

  • .github/workflows/deploy-websites.yml: Automated GitHub Pages deployment workflow that:
    • Triggers on pushes to main/master branches and feature branches
    • Auto-discovers all -website folders
    • Builds a portfolio index page linking to all sites
    • Deploys to GitHub Pages with proper permissions

Notable Implementation Details

  • Remontti Työrönkainen uses a dark, luxury aesthetic with gold accents suitable for a premium renovation service
  • LVI Kruunu uses a bright, trustworthy blue theme with urgency elements (24/7 availability, same-day service messaging) optimized for service business conversions
  • Both sites include comprehensive SEO meta tags and semantic HTML
  • Mobile responsiveness achieved through CSS Grid, Flexbox, and media queries
  • Smooth scroll animations using CSS keyframes and Intersection Observer API
  • Form handling with client-side validation
  • Accessibility considerations (ARIA labels, semantic structure, color contrast)

https://claude.ai/code/session_0143QWro4dLJEa31VVicAZvG

claude and others added 9 commits March 9, 2026 11:53
Full-stack web application for professional building inspection reports
targeting the Finnish market.

## Features

**AI (Claude Opus 4.6 + adaptive thinking + streaming):**
- Voice dictation → professional Finnish text (transcription)
- Auto-add technical theory + Finnish building regulations (RT-cards, RakMK)
- Claude Vision auto-captions for inspection photos
- AI-generated findings summary table (urgency-sorted)
- AI-generated final report summary with condition rating

**Field data collection:**
- Web Speech API voice recorder (fi-FI locale)
- Camera integration per inspection category
- Auto-placement of photos under correct headings
- 13 standard inspection categories (foundations → yard)

**Report generation:**
- Professional jsPDF export with cover page, findings table, photos
- Urgency classification (Välitön / 1-2v / 3-5v / Seurattava)
- Auto-save to localStorage, no database needed

**Tech stack:** React 18 + TypeScript + Vite + Tailwind CSS + Express.js

https://claude.ai/code/session_01JDAjyyLLWsxD3ZgHGC8XYo
…-ai-app-1G4jF

feat: add KuntotarkastusAI – AI-powered building inspection app
Complete single-page website with premium dark/gold design:
- Hero section with fullscreen background, animated stats, dual CTAs
- Trust bar with certifications and value propositions
- Services grid (6 palvelua) with hover effects
- Why Us section with image + 4 key differentiators
- Portfolio gallery with 5 project references
- 4-step process section
- Testimonials (3 genuine-looking reviews)
- CTA banner
- Contact form with success state animation
- Fully responsive mobile layout with hamburger menu
- Scroll-reveal animations, sticky navbar, smooth scrolling

https://claude.ai/code/session_01HbXitLMKaK2Po399R55Ad9
- Scans all *-website/ folders and deploys them to GitHub Pages
- Generates a portfolio index page with live preview links + copy buttons
- Posts a PR comment with a table of live links after every push
- Supports all future client sites automatically (no config needed)

https://claude.ai/code/session_01HbXitLMKaK2Po399R55Ad9
…nspection-ai-app-1G4jF

Revert "feat: add KuntotarkastusAI – AI-powered building inspection app"
Complete redesign of lvikruunu.fi with focus on conversion optimization:
- Hero section with strong CTAs, trust signals, and urgency
- Problem/agitation section addressing customer pain points
- Services grid with featured card highlighting most popular service
- Transparent pricing cards with "best value" highlighting
- Real Google reviews as social proof (5.0 stars)
- FAQ accordion section for objection handling
- Floating mobile CTA for maximum conversion
- Smooth scroll animations and intersection observer
- Fully responsive mobile-first design
- Sticky navbar with scroll effects

https://claude.ai/code/session_0143QWro4dLJEa31VVicAZvG
- Express static file server for Railway hosting
- Move static files to public/ directory
- Add package.json with start script
- Add .gitignore for node_modules

https://claude.ai/code/session_0143QWro4dLJEa31VVicAZvG
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants