Better.com Clone - Next.js Project

By Swastik Shetty

This project is a multi-page web application built with React and Next.js, designed to replicate the design and core functionality of several key pages from the Better.com website. It serves as a demonstration of front-end development skills, including responsive design, component-based architecture, and interactive UI implementation.

---

🌐 Live Demo

Check out the live version of the project here: better-clone-swastik.netlify.app

---

🚀 Features

• Pixel‑Perfect Replication: A faithful visual clone of four main pages from Better.com.
• Interactive Mortgage Calculator: Computes monthly payments in real time based on user input.
• Responsive Design: Optimized for desktops, tablets, and mobile devices.
• Component‑Based Architecture: Built using reusable React components for maintainability.
• Modern Tech Stack: Utilizes Next.js for SSR and routing, and Tailwind CSS for styling.

---

🛠️ Tech Stack

• Framework: Next.js
• Library: React
• Styling: Tailwind CSS
• Video Embedding: react-youtube

---

📂 Project Structure

/
├── app/
│   ├── page.js                     # Home Page
│   ├── about-us/page.js            # About Us Page
│   ├── mortgage-calculator/page.js # Mortgage Calculator Page
│   ├── start/page.js               # Start Page
│   ├── layout.js                   # Main App Layout
│   └── globals.css                 # Global CSS Styles
├── components/
│   ├── Header.js                   # Reusable Header Component
│   ├── Footer.js                   # Reusable Footer Component
│   └── MortgageCalculator.js       # Interactive Calculator Component
├── public/
│   └── ...                         # Static assets
└── package.json

---

⚙️ Getting Started

Prerequisites

• Node.js (v18.x or later recommended)
• npm (or yarn)

Installation

git clone <your-repository-url>
cd better-clone
npm install

Running the Development Server

npm run dev

Visit http://localhost:3000 in your browser.
The application reloads automatically as you make changes.

---

📑 Pages Implemented

• Home (/): Features hero section, introduction, AI-powered mortgage copy, FAQ.
• About Us (/about-us): Highlights vision, mission, history (timeline).
• Mortgage Calculator (/mortgage-calculator): Lets users estimate monthly mortgage payments interactively.
• Start (/start): A simple onboarding page for beginning the mortgage application process.

---

📜 License / Legal

This project is a demonstration only. All Better.com branding and content are used for educational purposes. Trademark and usage rights belong to their respective owners.

---

📬 Contact

For questions or feedback, you can reach out to:
Swastik Shetty