[FE-28] Public Landing Page: Hero, Features, How-It-Works & Pricing Sections

[mftee]

Overview

The platform's landing page (/) is placeholder content. It has no hero section that explains the value proposition, no feature breakdown, no how-it-works flow, no social proof, and no pricing section. This issue builds the full marketing landing page.

Technical Details

1. Landing Page (frontend/app/(public)/page.tsx or frontend/app/page.tsx)

Build the following sections in order:

Hero Section:

• Headline: "Connect Shippers & Carriers on the Blockchain"
• Subheadline: "FreightFlow is a decentralized freight marketplace. Post shipments, receive competitive bids, and settle payments in USDC on Stellar — securely and transparently."
• Two CTAs: "Get Started (Free)" → /register and "See How It Works" → anchors to #how-it-works section
• Hero illustration: truck route map SVG or a Lottie animation placeholder
• Trust bar below hero: "Verified Carriers" | "On-Chain Escrow" | "Real-Time Tracking" with icons

Features Section (#features):
Three-column grid (two-column on tablet, one-column on mobile):

Feature	Icon	Description
Competitive Bidding	gavel	Carriers compete on price. Shippers choose the best offer.
Blockchain Escrow	lock	Payments held in Soroban smart contracts until delivery is confirmed.
Real-Time Tracking	satellite	Live GPS updates at every step of your shipment.
Verified Carriers	shield	Background-checked and document-verified carriers only.
Instant Quotes	calculator	Get a price estimate before you post.
Dispute Protection	balance-scale	Neutral admin mediation for any delivery disputes.

How It Works (#how-it-works):
Numbered step flow (horizontal on desktop, vertical on mobile):

1. Post Your Shipment — Fill in cargo details, route, and price (or request for quote)
2. Receive Bids — Verified carriers submit competitive bids within hours
3. Choose & Pay — Accept the best bid and fund the smart contract escrow
4. Track Delivery — Live updates as the carrier picks up and delivers your cargo
5. Confirm & Complete — Confirm delivery to release payment to the carrier

Testimonials / Social Proof (#testimonials):
3 placeholder testimonial cards (can use fictional names initially — contributors may replace with real ones):

• Quote, name, role ("Logistics Manager, Lagos"), star rating

Pricing Section (#pricing):
Three tier cards (Free / Starter / Business) matching the planTier enum from [BE-24]:

Plan	Price	Members	Key features
Free	$0/mo	1 user	5 shipments/mo, Basic tracking
Starter	$49/mo	5 users	Unlimited shipments, Priority support
Business	$149/mo	25 users	All features, Custom reports, API access
"Enterprise" card: "Contact us" button

Footer:
Links: About, Blog (placeholder), Careers (placeholder), Contact, Privacy Policy, Terms of Service
Social icons: Twitter/X, GitHub (link to the actual repo), LinkedIn

2. Navigation Bar (Public)

Update frontend/app/(public)/layout.tsx or create a PublicNavbar component:

• Logo, Nav links: Features / How It Works / Pricing / Careers (placeholder)
• Right: "Log In" → /login and "Get Started" → /register buttons
• Sticky on scroll with a slight shadow on scroll

3. Performance

• All images: use next/image with appropriate sizes
• Sections below the fold: use dynamic imports with loading="lazy"
• Target Lighthouse score ≥ 90 for Performance on the landing page

Acceptance Criteria

• Landing page renders all 6 sections: Hero, Features, How It Works, Testimonials, Pricing, Footer
• "Get Started" and "Log In" buttons in the navbar navigate to the correct pages
• "See How It Works" smooth-scrolls to the #how-it-works section
• Pricing tiers are visible with the correct feature bullets and CTAs
• Page is fully responsive (mobile, tablet, desktop)
• All images use next/image
• Lighthouse Performance score is ≥ 90 when audited (test with npx lighthouse)

[mubking]

please i would like to work on this issue

[Senorespecial]

I would love to work on this issue, please assign the issues to me so i Can work on it ASAP