Landing Page Upgrade — Design Spec

Date: 2026-04-02 Status: Approved Scope: 3 new homepage sections + 1 DB-backed testimonial system + FAQ update + component cleanup

---

1. Comparison Table (NEW — replaces PricingComparisonTable)

Overview

Feature + Price Hybrid comparison section. Two visual zones: bar chart (cost shock) + feature table (what you get).

Structure

Bar Chart Zone:

• 3 vertical bars: SaaS Platforms (€3,564+ / 3yr), Agency Solutions (€8,000+ / 3yr), ECU Tuning Portal (€499 total)
• Bar height proportional to cost — Portal bar is tiny vs others
• Inner labels: SaaS “€99/mo × 36 months”, Agency “€4K setup + €100/mo + updates”, Portal (no inner label needed)
• Savings banner below: “SAVE UP TO €7,500+ OVER 3 YEARS”

Feature Table Zone (9 rows):

Feature	SaaS Platforms	ECU Tuning Portal	Agency Solutions
Pricing Model	€99–149/month (locked in)	€499 ONE-TIME (no recurring)	€4,000+ setup + retainer
Source Code	✗ no access	✓ full ownership	✗ agency owns it
White-Label	~ limited branding	✓ 100% your brand	✓ custom built
Vehicle Database	~ basic models	✓ 66,000+ vehicles	~ varies
Payment Integration	1–2 methods	Stripe, PayPal, SEPA, Bank	custom quote
Multi-Language	2–5 languages	24 Languages	extra cost per lang
Credit & Subscription	~ basic only	✓ credits + subscriptions	custom quote
Updates	included while subscribed	€99/year optional	€500+ per update
Vendor Lock-in	HIGH (stop = lose access)	NONE (your code, your server)	HIGH (agency dependency)

Visual Details

• Portal column header: ecu.svg logo instead of text
• Portal column: subtle teal background + teal top border glow
• Row icons: Lucide SVGs (DollarSign, Code, Layers, Database, CreditCard, Globe, Wallet, RefreshCw, Lock)
• Check/cross: circular badges (teal=yes, dark=no, amber=partial)
• CTA at bottom: “Get Your Portal — €499” (brand-red btn-industrial)
• Disclaimer: “Prices based on industry averages…”

Files

• Delete: components/PricingComparisonTable.tsx (old, unused)
• Delete: components/MoneyBackGuarantee.tsx (dangerous, unused)
• Create: components/ComparisonTable.tsx
• i18n: Add ComparisonTable namespace to all 24 language files

---

2. Testimonial System (NEW — DB-backed)

Database Model (Prisma)

model Testimonial {
  id        Int      @id @default(autoincrement())
  name      String   // "Marco R."
  company   String?  // "AutoTune Milano"
  country   String   // "IT" (ISO 3166-1 alpha-2)
  rating    Int      @default(5) // 1-5
  text      String   // Review text
  photoUrl  String?  // Optional photo URL
  approved  Boolean  @default(false)
  featured  Boolean  @default(false)
  locale    String   @default("en") // Original language
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Admin Panel — /admin/testimonials

• List view: Table with columns: Name, Company, Country (flag), Rating (stars), Status (approved/pending badge), Featured toggle, Actions
• Filters: Status (all/approved/pending), Featured (all/yes/no)
• Actions: Approve/reject toggle, edit, delete
• Add form: All fields from model, admin can manually add testimonials
• Bulk actions: Approve selected, delete selected

Customer Review Form — /review

• Public page (no auth required)
• Fields: Name (required), Company (optional), Country (dropdown with flags), Rating (1-5 star picker), Review text (required, min 20 chars, max 500 chars)
• No photo upload — admin can add photos later
• Submit: Creates testimonial with approved: false
• Success message: “Thank you! Your review will be published after approval.”
• Rate limiting: Max 3 submissions per IP per day
• Honeypot field for basic spam prevention

Landing Page Section — components/Testimonials.tsx (rewrite)

• Data source: API route /api/testimonials → SELECT * FROM Testimonial WHERE approved=true ORDER BY featured DESC, createdAt DESC LIMIT 6
• Desktop: 3 cards in a row
• Mobile: Horizontal swiper with dots
• Card design: Industrial clip-path cut corners, country flag emoji, star rating, quote text, name + company
• Section header: // TESTIMONIALS badge + “Trusted by Resellers Worldwide” title

Seed Data (6 entries)

Name	Company	Country	Review Focus
Marco R.	AutoTune Milano	IT	ROI / paid for itself
Stefan K.	ChipPower GmbH	DE	Switched from SaaS, saved money
James T.	RevoRemap UK	GB	Vehicle DB + multi-language
Aleksander W.	TurboChip	PL	Credit system + white-label
Carlos M.	SpeedTune	ES	Easy setup, professional look
Ahmed H.	ProRemap	AE	24 language support, international clients

All seeded as approved: true, featured: true.

---

3. Trust & Experience Guarantee (NEW — replaces MoneyBackGuarantee)

Section Design

• Badge: // ZERO RISK
• Title: “Try Before You Buy”
• Subtitle: “Request a demo, explore every module, then decide.”
• 3 trust cards (horizontal):
  1. Live Demo — Monitor icon — “Full portal walkthrough before purchase”
  2. Source Code — Code icon — “Full ownership — no vendor lock-in”
  3. Transparent Pricing — Shield icon — “€499 one-time — no hidden fees”
• Cards: industrial clip-path, teal border accent

Files

• Create: components/TrustGuarantee.tsx
• i18n: Add TrustGuarantee namespace to all 24 language files

---

4. FAQ Addition

New FAQ Item

• Q: “What is your refund policy?”
• A: “As a digital product with full source code delivery, refunds are not available after purchase. However, we offer a comprehensive live demo before purchase so you can explore every feature and make an informed decision. We want you to be 100% confident before you buy.”
• Add to FAQ translations in all 24 languages
• Add to Prisma Faq table (DB-backed, model exists in schema) with translations JSON field containing all 24 locales

---

5. Homepage Section Order

Updated order in app/[locale]/page.tsx:

1.  Hero (static)
2.  Brands
3.  PricingSection
4.  ComparisonTable          ← NEW
5.  HowItWorks
6.  Features
7.  WhiteLabelCustomization
8.  BeforeAfter
9.  VehicleDatabaseSection
10. LanguageSupport
11. Testimonials             ← NEW (rewritten, DB-backed)
12. Stats
13. TrustGuarantee           ← NEW
14. About
15. Founder
16. SecurityEnterprise
17. FAQ (+refund policy)
18. Contact
19. SocialProofPopup

---

6. Cleanup

• Delete: components/MoneyBackGuarantee.tsx — dangerous for source code sales, never used
• Delete: components/PricingComparisonTable.tsx — replaced by new ComparisonTable
• Remove: Commented-out <PricingComparisonTable /> reference in components/Pricing.tsx

---

7. i18n Strategy

• English (en.json) written first as source of truth
• Run scripts/smart-translate.ts for remaining 23 languages
• New namespaces: ComparisonTable, TrustGuarantee (Testimonials namespace already exists, will be updated)

---

8. API Routes

Route	Method	Auth	Purpose
/api/testimonials	GET	None	Fetch approved testimonials for landing page
/api/testimonials	POST	None	Customer submits review (rate-limited)
/api/admin/testimonials	GET	Admin	List all testimonials (with filters)
/api/admin/testimonials	POST	Admin	Create testimonial
/api/admin/testimonials/[id]	PUT	Admin	Update testimonial (edit, approve/reject, feature)
/api/admin/testimonials/[id]	DELETE	Admin	Delete testimonial

---

Out of Scope

• Google Reviews integration (planned for future)
• Photo upload for customer reviews (admin can add manually)
• Real customer data migration (placeholder seed for now)
• Mobile app changes
• Blog/SEO changes