You are an AI assistant tasked with generating a single-page Server-Side Rendered (SSR) React application using Next.js and Tailwind CSS. The application will be named 'Fiber Opportunity' (or 'Fiber Fırsat' in Turkish context, but the codebase will use English identifiers). It aims to solve the problem of uneven internet infrastructure distribution, particularly the disparity between countries like Switzerland and the US in terms of internet speed, price, and availability. The application will help users discover and compare high-speed internet providers in their area, check infrastructure availability, and access information about global internet infrastructure trends.
PROJECT OVERVIEW:
The core problem addressed is the significant gap in residential internet speeds and pricing between technologically advanced regions (like Switzerland with 25 Gbit fiber) and lagging regions (like the US). Many users are stuck with slow, expensive, or asymmetrical internet connections due to market failures, regulatory issues, or lack of competitive infrastructure. 'Fiber Opportunity' provides a centralized platform where users can easily find the best available internet services for their specific location, compare providers based on crucial metrics (speed, price, fiber vs. cable, symmetry, dedicated vs. shared), and understand the factors influencing these disparities. The value proposition is to empower consumers with information to access faster, more affordable, and reliable internet, thereby bridging the digital divide.
TECH STACK:
- **Framework**: Next.js (for SSR, routing, and API routes if needed)
- **UI Library**: Tailwind CSS (for rapid, utility-first styling)
- **State Management**: React Context API (for global state like user location, theme) and local component state.
- **Data Fetching**: Next.js built-in `fetch` or libraries like `axios` for external APIs if needed.
- **Icons**: React Icons library (e.g., `react-icons/fa` or `react-icons/io`)
- **Forms**: React Hook Form (for efficient form handling and validation)
- **Deployment**: Vercel (recommended for Next.js)
CORE FEATURES:
1. **Provider Discovery & Comparison**:
* **User Flow**: User lands on the homepage. They are prompted to enter their location (zip code/address). Upon submission, the app displays a list of available internet providers for that location. Each provider card shows key details: Provider Name, Plan Name, Download Speed (Gbit/s), Upload Speed (Gbit/s), Price ($/month), Connection Type (Fiber, Cable, DSL), Symmetry (Symmetric/Asymmetric), and whether it's Dedicated or Shared. Advanced filters (e.g., minimum speed, max price, provider name) and sorting options (price low-high, speed high-low) are available. A 'Compare' button allows users to select multiple providers for a side-by-side detailed comparison.
* **Details**: Each provider listing might link to a detailed view with more information, including user reviews, contract terms (if available), and provider contact info.
2. **Availability Checker**:
* **User Flow**: Integrated within the discovery feature. After a location is entered, the system attempts to verify if fiber infrastructure (or other desired tech) is actually available at the specific address. This could involve a mock API call or a placeholder for future integration with ISP databases.
* **Details**: Provides a clear "Available" or "Not Available" status, potentially with information on why (e.g., "Fiber not yet deployed in your neighborhood").
3. **Information Hub / 'The Paradox' Section**:
* **User Flow**: A dedicated section or page explaining the "Why Switzerland has 25 Gbit internet and America doesn't" phenomenon. It will feature articles, infographics, and potentially video summaries (placeholder for future embedding) discussing regulatory environments, market structures, government investments, and technological choices in different countries. Content will be structured for easy reading, potentially using accordions for detailed sections.
* **Details**: Explains concepts like open-access networks, municipal broadband, government subsidies, and the impact of deregulation vs. regulation on infrastructure development.
4. **User Reviews & Ratings**:
* **User Flow**: On each provider's detailed page or within the comparison view, users can submit reviews and ratings (e.g., 1-5 stars for Speed, Reliability, Customer Service, Price). Existing reviews are displayed chronologically or sorted by helpfulness.
* **Details**: Requires basic form validation for review submission.
UI/UX DESIGN:
- **Layout**: Single Page Application (SPA) feel using Next.js routing. Clean, modern, and intuitive interface. A prominent hero section on the homepage for location search. Navigation bar at the top with links to 'Home', 'Compare', 'Info Hub', and potentially 'Login/Profile' (for future saved searches/reviews). Footer with basic links (About, Contact, Privacy Policy).
- **Color Palette**: Primary: Deep Blue (#0A2540) for trust and professionalism. Secondary: Teal/Cyan (#20C997) for calls to action and highlights. Accent: Light Gray (#F8F9FA) for backgrounds and subtle UI elements. Text: Dark Gray/Black (#212529) for readability.
- **Typography**: Sans-serif font like Inter or Poppins for a clean, modern look. Headings: Bold, larger sizes. Body text: Readable size, good line spacing.
- **Responsive Design**: Mobile-first approach. Layouts will adapt seamlessly to various screen sizes (smartphones, tablets, desktops). Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:). Ensure touch targets are adequately sized on mobile.
COMPONENT BREAKDOWN:
- **`Layout.js`**: Main layout component. Wraps all pages, includes Navbar and Footer. Handles global styling and responsiveness.
- **`Navbar.js`**: Contains site logo, navigation links ('Home', 'Compare', 'Info Hub'). Potentially includes a theme switcher (light/dark mode).
- **`Footer.js`**: Contains copyright information, links to Privacy Policy, Terms of Service.
- **`HeroSection.js`**: The main entry point. Features a compelling headline, a brief description, and the location search input/button.
- **`LocationSearch.js`**: Input field for location (zip code/address) and a submit button. Manages local input state and triggers search action.
- **`ProviderList.js`**: Displays a list of `ProviderCard` components based on search results. Includes filtering and sorting controls.
- **`ProviderCard.js`**: Renders summary information for a single internet provider (Name, Speed, Price, Type). Includes a button to view details or add to comparison.
- **`ComparisonTable.js`**: Displays a side-by-side comparison of selected providers, highlighting key differences.
- **`AvailabilityStatus.js`**: Component to display the infrastructure availability result for a given location.
- **`InfoHubArticle.js`**: Component to display content within the 'Information Hub', potentially using markdown rendering or structured text.
- **`ReviewForm.js`**: Form for users to submit reviews and ratings.
- **`ReviewList.js`**: Displays existing user reviews for a provider.
- **`Spinner.js`**: A loading indicator component.
- **`ErrorMessage.js`**: Component to display error messages to the user.
DATA MODEL:
- **User Location**: `{ zipCode: string, city: string, state: string, country: string }`
- **Provider Data**: `[{ id: string, name: string, planName: string, downloadSpeedGbit: number, uploadSpeedGbit: number, priceUsd: number, connectionType: 'Fiber' | 'Cable' | 'DSL', symmetry: 'Symmetric' | 'Asymmetric', isDedicated: boolean, availabilityStatus: 'Available' | 'Unavailable' | 'Unknown', details: string, reviews: Review[] }]`
- **Review Data**: `[{ id: string, providerId: string, rating: number (1-5), speedRating: number, reliabilityRating: number, serviceRating: number, priceRating: number, comment: string, author: string, date: string }]`
- **State Structure**: Global state (Context API) for user location, comparison list, theme. Local state for form inputs, loading indicators, error messages, search results.
- **Mock Data**: Will be implemented using local JSON files or simple arrays within components for MVP. Future integration would involve a backend API.
ANIMATIONS & INTERACTIONS:
- **Loading States**: Use `Spinner.js` component when fetching provider data or checking availability. Provide visual feedback during these operations.
- **Hover Effects**: Subtle hover effects on `ProviderCard` components (e.g., slight scale-up, shadow change) and buttons.
- **Transitions**: Smooth transitions for elements appearing/disappearing (e.g., filters, comparison view), using Tailwind's transition utilities.
- **Micro-interactions**: Visual feedback on button clicks, form submissions (e.g., success checkmark). Smooth scrolling to different sections.
EDGE CASES:
- **No Providers Found**: Display a friendly message like "No providers found for your location. Try a different zip code or check our Info Hub for reasons why."
- **API Errors**: Gracefully handle errors during data fetching. Display user-friendly messages using `ErrorMessage.js`.
- **Invalid Location Input**: Implement input validation using React Hook Form. Show clear error messages next to the input field.
- **Empty State**: Ensure all lists (providers, reviews) have clear empty state representations.
- **Accessibility (a11y)**: Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. Keyboard navigation support. Sufficient color contrast.
- **Data Inconsistencies**: Handle cases where speed or price data might be missing or in unexpected formats (e.g., display as 'N/A').
SAMPLE DATA:
(Mock data will be represented as JSON-like structures within the codebase for MVP)
* **Provider 1 (Fiber)**:
```json
{
"id": "prov101",
"name": "ConnectFast Fiber",
"planName": "Gigabit Ultra",
"downloadSpeedGbit": 1.0,
"uploadSpeedGbit": 1.0,
"priceUsd": 75.00,
"connectionType": "Fiber",
"symmetry": "Symmetric",
"isDedicated": true,
"availabilityStatus": "Available",
"details": "100% Fiber optic network offering symmetrical speeds for seamless uploads and downloads. Ideal for heavy streaming, gaming, and large file transfers.",
"reviews": []
}
```
* **Provider 2 (Cable)**:
```json
{
"id": "prov102",
"name": "Speedy CableNet",
"planName": "Ultra Blast",
"downloadSpeedGbit": 0.5,
"uploadSpeedGbit": 0.05,
"priceUsd": 65.00,
"connectionType": "Cable",
"symmetry": "Asymmetric",
"isDedicated": false,
"availabilityStatus": "Available",
"details": "High-speed cable internet with impressive download speeds. Upload speeds are shared within the neighborhood.",
"reviews": []
}
```
* **Provider 3 (DSL - Limited Availability)**:
```json
{
"id": "prov103",
"name": "Legacy DSL",
"planName": "Standard Connect",
"downloadSpeedGbit": 0.025,
"uploadSpeedGbit": 0.005,
"priceUsd": 50.00,
"connectionType": "DSL",
"symmetry": "Asymmetric",
"isDedicated": true,
"availabilityStatus": "Unknown",
"details": "Basic internet service available in areas where fiber or cable is not yet deployed.",
"reviews": []
}
```
* **Provider 4 (High-End Fiber Example - Switzerland Context)**:
```json
{
"id": "prov104",
"name": "SwissGigabit Pro",
"planName": "25 Gbit Dedicated",
"downloadSpeedGbit": 25.0,
"uploadSpeedGbit": 25.0,
"priceUsd": 150.00, // Hypothetical US price for comparison context
"connectionType": "Fiber",
"symmetry": "Symmetric",
"isDedicated": true,
"availabilityStatus": "Unavailable", // Assuming unavailable in US context for demo
"details": "State-of-the-art 25 Gbit/s symmetrical dedicated fiber connection. The pinnacle of residential internet speed.",
"reviews": []
}
```
* **Unavailable Provider Example**:
```json
{
"id": "prov105",
"name": "FutureNet Fiber",
"planName": "Fiber 1 Gbit",
"downloadSpeedGbit": 1.0,
"uploadSpeedGbit": 1.0,
"priceUsd": 80.00,
"connectionType": "Fiber",
"symmetry": "Symmetric",
"isDedicated": true,
"availabilityStatus": "Unavailable",
"details": "Fiber optic service planned for rollout in your area within the next 12-18 months.",
"reviews": []
}
```
* **Mock Review Data**:
```json
[
{
"id": "rev001",
"providerId": "prov101",
"rating": 4.5,
"speedRating": 5,
"reliabilityRating": 4,
"serviceRating": 4,
"priceRating": 4,
"comment": "Very fast and reliable fiber. Uploads are amazing! Price is a bit high but worth it.",
"author": "TechGuru88",
"date": "2024-07-26"
}
]
```
DEPLOYMENT NOTES:
- **Build Command**: `npm run build` (or `yarn build`)
- **Start Command**: `npm run start` (or `yarn start`)
- **Environment Variables**: Use `.env.local` for local development. For Vercel deployment, configure environment variables in the Vercel dashboard. Primarily needed for API keys if integrating with third-party services in the future.
- **Performance Optimizations**: Leverage Next.js features like image optimization (`next/image`), code splitting, and SSR for fast initial page loads. Optimize Tailwind CSS build output. Consider a CDN for static assets.
- **Routing**: Utilize Next.js file-based routing (`pages/` directory). E.g., `pages/index.js` for homepage, `pages/compare.js` for comparison page, `pages/info/[slug].js` for individual articles in the Info Hub.
- **SSR Strategy**: Fetch provider data on the server-side using `getServerSideProps` in Next.js to ensure the initial HTML contains the search results, improving SEO and perceived performance.