⚖️ Law Office Multi-Page Portfolio Website

A modern and responsive law firm website built with React, TypeScript, Vite, and Tailwind CSS. The project presents legal services, firm information, attorney profiles, and practice areas through a clean and professional user interface.

Live Preview: https://lawoffice-ten.vercel.app/

---

📌 Project Overview

This website was developed to represent a professional law office online. It includes dedicated pages for:

• Home
• About Us
• Services
• Testimonials

The design focuses on credibility, professionalism, and user-friendly navigation.

---

🚀 Technologies Used

• React
• TypeScript
• Vite
• Tailwind CSS
• React Router DOM

---

🎨 Icons

The project uses the following icon libraries:

• Lucide React
• Remix Icons

---

📂 Project Structure

src/
│
├── assets/
│   ├── Images
│
├── components/
│   ├── AboutUs.tsx
│   ├── CaseStudies.tsx
│   ├── Contact.tsx
│   ├── Counter.tsx
│   ├── Footer.tsx
│   ├── Header.tsx
│   ├── Hero.tsx
│   ├── PracticeAreas.tsx
│   ├── Price.tsx
│   ├── ScrollToTop.tsx
│   └── Testimonial.tsx
│
├── pages/
│   ├── AboutPage.tsx
│   ├── Home.tsx
│   ├── ServicePage.tsx
│   └── TestimonialPage.tsx
│
├── App.tsx
├── main.tsx
└── index.css

---

🧩 Main Components

Hero

Landing section introducing the firm.

About Us

Company story, values, and background.

Practice Areas

Highlights the firm's legal specialties and services.

Case Studies

Showcases previous legal successes and notable cases.

Testimonials

Client reviews and feedback.

Contact

Allows visitors to get in touch with the firm.

Counter

Displays key statistics and achievements.

Price

Displays legal service pricing information.

Footer

Contains navigation links and firm information.

---

📄 Pages

Home

Main landing page containing all major sections.

About Page

Dedicated page describing the firm's story, mission, values, and team.

Service Page

Detailed overview of legal services and practice areas.

Testimonial Page

Collection of client experiences and feedback.

---

🧭 Navigation

Page navigation is implemented using React Router DOM.

Available routes:

/
├── Home
├── About
├── Services
└── Testimonials

Navigation provides a smooth browsing experience between all major sections of the website.

---

✨ Features

• Fully Responsive Design
• Modern Law Firm UI
• Dedicated Service Pages
• Attorney Team Showcase
• Client Testimonials
• Practice Area Cards
• Smooth Navigation
• Reusable Components
• TypeScript Support
• Fast Development with Vite

---

🛠 Installation

Clone the repository:

git clone https://github.com/torufa/lawoffice

Install dependencies:

npm install

Run development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

---

👩‍💻 Author

Torufa Toma

Developed using React, TypeScript, Vite, Tailwind CSS, Lucide React, and Remix Icons to create a modern, responsive, and professional law office website.

Connect

• GitHub: https://github.com/torufa
• LinkedIn: https://linkedin.com/in/torufa