12 | Discover Your Next Journey: Homes, Cars, and Bikes Await! 13 |
14 |20 | Awesome website to buy your cars, homes and bikes and best prices and 21 | with only few clicks! 22 |
23 | 24 | 32 | 33 |27 | See our {`${name}s`} 28 |
29 | 30 | ); 31 | }; 32 | export default ArticleCard; 33 | -------------------------------------------------------------------------------- /src/components/Comments/CommentCard.tsx: -------------------------------------------------------------------------------- 1 | import { twMerge as tm } from "tailwind-merge"; 2 | import type { User, DarkModeProps } from "../../types"; 3 | const CommentCard = ({ 4 | firstName, 5 | lastName, 6 | title, 7 | comment, 8 | image, 9 | dark, 10 | }: User & Omit
19 |
34 | );
35 | };
36 | export default CommentCard;
37 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Comments/CommentsCards.tsx:
--------------------------------------------------------------------------------
1 | import usersData from "./usersData";
2 | import type { User, DarkModeProps } from "../../types";
3 | import CommentCard from "./CommentCard";
4 | import { twMerge as tm } from "tailwind-merge";
5 |
6 | const CommentsCards = ({ dark }: DarkModeProps) => {
7 | const mappedData = usersData.map((user: User) => ({ ...user, dark }));
8 | return (
9 |
20 | 
25 |
32 |
26 |
31 | {`${firstName} ${lastName}`}
29 |{`${title}`}
30 |{comment}
33 | 16 | Our Users Opinion 17 |
18 |
19 | {mappedData.map(
20 | ({
21 | id,
22 | firstName,
23 | lastName,
24 | image,
25 | comment,
26 | title,
27 | dark,
28 | }: User & Omit) => (
29 |
42 | 35 | Articles 36 |
37 |
38 | {cardsElements.map(({ src, name, dark }: ArticleCardProps) => (
39 |
42 |
8 |
12 |
49 | );
50 | };
51 | export default HorizontalNavbar;
52 |
--------------------------------------------------------------------------------
/src/components/Vehicle/CarsData.tsx:
--------------------------------------------------------------------------------
1 | import Car1 from "../../assets/imgs/cars/c1.webp";
2 | import Car2 from "../../assets/imgs/cars/c2.webp";
3 | import Car3 from "../../assets/imgs/cars/c3.webp";
4 | import Car4 from "../../assets/imgs/cars/c4.webp";
5 | import Car5 from "../../assets/imgs/cars/c5.webp";
6 | import Car6 from "../../assets/imgs/cars/c6.webp";
7 | import Car7 from "../../assets/imgs/cars/c7.webp";
8 | import Car8 from "../../assets/imgs/cars/c8.webp";
9 | import Car9 from "../../assets/imgs/cars/c9.webp";
10 | import Car10 from "../../assets/imgs/cars/c10.webp";
11 | import Car11 from "../../assets/imgs/cars/c11.webp";
12 | import Car12 from "../../assets/imgs/cars/c12.webp";
13 | import Car13 from "../../assets/imgs/cars/c13.webp";
14 | import Car14 from "../../assets/imgs/cars/c14.webp";
15 | import Car15 from "../../assets/imgs/cars/c15.webp";
16 |
17 | const CarsData = [
18 | { id: 1, src: Car1, price: 300000, sold: false, name: "Aventador" },
19 | { id: 2, src: Car2, price: 250000, sold: false, name: "Urus" },
20 | { id: 3, src: Car3, price: 200000, sold: false, name: "Countach" },
21 | { id: 4, src: Car4, price: 215000, sold: false, name: "Gallardo" },
22 | { id: 5, src: Car5, price: 300000, sold: false, name: "Huracan" },
23 | { id: 6, src: Car6, price: 215000, sold: false, name: "Diablo" },
24 | { id: 7, src: Car7, price: 400000, sold: false, name: "Toyota" },
25 | { id: 8, src: Car8, price: 250000, sold: false, name: "Honda" },
26 | { id: 9, src: Car9, price: 240000, sold: false, name: "Hummer" },
27 | { id: 10, src: Car10, price: 275000, sold: false, name: "Nissan" },
28 | { id: 11, src: Car11, price: 400000, sold: false, name: "Bugatti" },
29 | { id: 12, src: Car12, price: 215000, sold: false, name: "Renault" },
30 | { id: 13, src: Car13, price: 250000, sold: false, name: "Ford" },
31 | { id: 14, src: Car14, price: 200000, sold: false, name: "Lexus" },
32 | { id: 15, src: Car15, price: 300000, sold: false, name: "Puma" },
33 | ];
34 | export default CarsData;
35 |
--------------------------------------------------------------------------------
/src/pages/HousesPage.tsx:
--------------------------------------------------------------------------------
1 | import Houses from "../components/House";
2 | import type { DarkModeProps } from "../types";
3 | import { twMerge as tm } from "tailwind-merge";
4 | import SearchDropDownMenu from "../components/Search/";
5 | import { useState } from "react";
6 | const HousesPage = ({ dark }: DarkModeProps) => {
7 | document.title = "Houses";
8 | const [priceSearch, setPriceSearch] = useState(0);
9 | const [citySearch, setCitySearch] = useState("");
10 | const [dropDownMenuVisibility, setDropDownMenuVisibility] = useState(false);
11 | const [searchParameter, setSearchParameter] = useState("none");
12 | const isVehicle = false;
13 | return (
14 | 14 | Friedrich Sell's 15 |
16 | 17 |-
23 |
- 29 | Houses 30 | 31 |
- 37 | Cars 38 | 39 |
- 45 | Motorbikes 46 | 47 |
22 | Houses 23 |
24 |26 | {`${vehicleSelected}s`} 27 |
28 |-
55 |
- { 61 | handlePerPriceSearchOptionClick(); 62 | }} 63 | > 64 | Per Price 65 | 66 | 67 | {!isVehicle && ( 68 |
- { 74 | handlePerCitySearchOptionClick(); 75 | }} 76 | > 77 | Per City 78 | 79 | )} 80 |
51 | 
56 |
94 |
95 | );
96 | };
97 |
98 | export default House;
99 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export type HouseProps = {
2 | src: string;
3 | id: number;
4 | price: number;
5 | location: string;
6 | sold: boolean;
7 | };
8 |
9 | export type DarkModeProps = {
10 | dark: boolean;
11 | setDark: React.Dispatch
57 |
72 | 69 | {location} 70 |
71 |
77 |
43 | {
91 | handleCloseButtonClick();
92 | }}
93 | title="Close"
94 | />
95 |
96 |
97 | );
98 | };
99 | export default SearchDropDownMenu;
100 |
--------------------------------------------------------------------------------
/src/components/Vehicle/Vehicle.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from "react";
2 | import { SlBadge } from "react-icons/sl";
3 | import { IoCarSport } from "react-icons/io5";
4 | import { FaMotorcycle } from "react-icons/fa";
5 | import { twMerge as tm } from "tailwind-merge";
6 | import type { Vehicle } from "../../types";
7 | const Vehicle = ({
8 | id,
9 | price,
10 | sold,
11 | src,
12 | dark,
13 | name,
14 | toggleModal,
15 | yesButtonDialog,
16 | setYesButtonDialog,
17 | vehicleSelected,
18 | }: Vehicle) => {
19 | const [vehicleSold, setVehicleSold] = useState(sold);
20 | const houseIdRef = useRef {
49 | searchParameter === "none" && handleSearchDropDownMenuClick();
50 | }}
51 | >
52 | {searchParameter === "none" ? (
53 |
74 | {dropDownMenuVisibility && searchParameter === "none" ? (
75 |
53 |
58 |
106 |
107 | );
108 | };
109 | export default Vehicle;
110 |
--------------------------------------------------------------------------------
/src/components/Description.tsx:
--------------------------------------------------------------------------------
1 | import HouseImg from "../assets/imgs/description-section/house.jpg";
2 | import LamboImg from "../assets/imgs/description-section/lambo1.jpg";
3 | import MotoImg from "../assets/imgs/description-section/moto.jpg";
4 | import type { DarkModeProps } from "../types";
5 | import { twMerge as tm } from "tailwind-merge";
6 | const Description = ({ dark }: DarkModeProps) => {
7 | return (
8 |
59 | {vehicleSelected === "Car" ? (
60 |
83 |
84 | 80 | {name} 81 |
82 |
89 |
13 |
50 |
14 |
31 | 20 | Who are Us ? 21 |
22 |28 | "The solution to buy Houses, Cars & Motorcycles" 29 |
30 |37 | Houses, Cars and Motorbikes are our speciality. Embark on an exciting 38 | journey with us as you explore our expansive marketplace, designed to 39 | cater to all your needs when it comes to acquiring new assets. Whether 40 | you're in search of your dream home, a reliable car for your daily 41 | commute, or an exhilarating motorbike for your adventures, we've got 42 | you covered. Our platform boasts a diverse selection of properties, 43 | vehicles, and bikes, ensuring there's something for everyone. With our 44 | intuitive interface and dedicated customer service, we strive to make 45 | your buying experience both convenient and enjoyable. Trust us to be 46 | your trusted partner in this exciting chapter of your life, as you 47 | find the perfect asset to complement your lifestyle! 48 |
49 |
51 | 
59 |
78 |
60 | 
68 | 
76 |
77 |
28 |
,
33 | );
34 | } else {
35 | setTempPrice(price);
36 | setOpenModal(true);
37 | dialogRef.current?.showModal();
38 | }
39 | };
40 | const vehicles = vehicleData.map(({ src, id, price, sold, name }) => (
41 |
29 | {vehicleSelected} successfully sold !
{price} $ have been
30 | taken from your account.
31 |
86 | {`No ${vehicleSelected.toLowerCase()}s found at ${priceSearch} $`} 87 |
88 | ) : ( 89 | <> 90 |91 | 92 | {filteredPerPriceVehicles.length} 93 | {" "} 94 | {filteredPerPriceVehicles.length === 1 95 | ? `${vehicleSelected.toLocaleLowerCase()} found at ${priceSearch}$` 96 | : `${vehicleSelected.toLocaleLowerCase()}s found at ${priceSearch}$`} 97 |
98 |
99 | {filteredPerPriceVehicles}
100 |
101 |
102 | )}
103 |
115 |
116 | );
117 | };
118 | export default Vehicles;
119 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from "react";
2 | import { MdDarkMode } from "react-icons/md";
3 | import { CiLight } from "react-icons/ci";
4 | import { FaGithub } from "react-icons/fa";
5 | import type { DarkModeProps } from "../../types";
6 | import { twMerge as tm } from "tailwind-merge";
7 | import HorizontalNavbar from "./HorizontalNavbar";
8 | import VerticalNavbar from "./VerticalNavbar";
9 | const Navbar = ({ dark, setDark }: DarkModeProps) => {
10 | const [dropDownList, setDropDownList] = useState(false);
11 | const darkModeButtonHandler = (previousState: boolean) => {
12 | setDropDownList(!previousState);
13 | };
14 | const darkHandler = (previousState: boolean) => {
15 | !previousState ? setDark(!previousState) : true;
16 | };
17 | const lightHandler = (previousState: boolean) => {
18 | previousState ? setDark(!previousState) : true;
19 | };
20 | // This part checks if the users click outside the dark mode dropdown menu to close it.
21 | const ref = useRef-
87 |
- {
93 | lightHandler(dark);
94 | }}
95 | >
96 |
97 | Light 98 |
99 | - {
105 | darkHandler(dark);
106 | }}
107 | >
108 |
109 | Dark 110 |
111 |
39 |
56 |
63 | {
45 | menuBurgerButtonHandler(openVerticalNavbar);
46 | }}
47 | >
48 |
55 |
69 |
124 |
125 |
126 | );
127 | };
128 | export default VerticalNavbar;
129 |
--------------------------------------------------------------------------------
/src/components/House/Houses.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef } from "react";
2 | import House from "./House";
3 | import HousesData from "./HousesData";
4 | import Dialog from "../Dialog";
5 | import { toast } from "react-toastify";
6 | import type { HousesListProps } from "../../types";
7 | import { twMerge as tm } from "tailwind-merge";
8 | const Houses = ({
9 | dark,
10 | priceSearch,
11 | citySearch,
12 | searchParameter,
13 | }: HousesListProps) => {
14 | const [tempPrice, setTempPrice] = useState
70 |
71 | {
92 | handleCloseButtonClick(openVerticalNavbar);
93 | }}
94 | />
95 |
96 |
97 |
72 |
84 |
85 | 81 | Friedrich Sell's 82 |
83 |-
98 |
- 104 | Houses 105 | 106 |
- 112 | Cars 113 | 114 |
- 120 | Motorbikes 121 | 122 |
27 |
,
32 | );
33 | } else {
34 | setTempPrice(price);
35 | setOpenModal(true);
36 | dialogRef.current?.showModal();
37 | }
38 | };
39 | const houses = HousesData.map(({ src, id, price, location, sold }) => (
40 |
28 | House successfully sold !
{price} $ have been taken from your
29 | account.
30 |
99 | No houses found at {priceSearch} $ 100 |
101 | ) : ( 102 | <> 103 |104 | 105 | {filteredPerPriceHouses.length} 106 | {" "} 107 | {filteredPerPriceHouses.length === 1 108 | ? `house found at ${priceSearch}$` 109 | : `houses found at ${priceSearch}$`} 110 |
111 |
112 | {filteredPerPriceHouses}
113 |
114 |
115 | )
116 | ) : citySearch === "" ? (
117 | houses
118 | ) : filteredPerCityHouses.length === 0 ? (
119 | 125 | No houses found at {citySearch} 126 |
127 | ) : ( 128 | <> 129 |130 | 131 | {filteredPerCityHouses.length} 132 | {" "} 133 | {filteredPerCityHouses.length === 1 134 | ? `house found at ${citySearch}` 135 | : `houses found at ${citySearch}`} 136 |
137 |
138 | {filteredPerCityHouses}
139 |
140 |
141 | )}
142 |
152 |
153 | );
154 | };
155 |
156 | export default Houses;
157 |
--------------------------------------------------------------------------------
/src/components/Comments/usersData.tsx:
--------------------------------------------------------------------------------
1 | const usersData = [
2 | {
3 | id: 1,
4 | firstName: "Terry",
5 | lastName: "Medhurst",
6 | image: "https://randomuser.me/api/portraits/men/64.jpg",
7 | title: "Help Desk Operator",
8 | comment:
9 | "I stumbled upon this app while looking for my dream home, and I couldn't be happier with the experience. The range of houses available is astounding, and the user-friendly interface made the whole process a breeze.",
10 | },
11 |
12 | {
13 | id: 2,
14 | firstName: "Sheldon",
15 | lastName: "Quigley",
16 | image: "https://randomuser.me/api/portraits/women/91.jpg",
17 | title: "Senior Cost Accountant",
18 | comment:
19 | "As a car enthusiast, I've used countless apps to browse through vehicle listings, but none have impressed me as much as this one. The attention to detail in the descriptions and the stunning photos really set it apart.",
20 | },
21 |
22 | {
23 | id: 3,
24 | firstName: "Terrill",
25 | lastName: "Hills",
26 | image: "https://randomuser.me/api/portraits/men/53.jpg",
27 | title: "Mechanical Systems Engineer",
28 | comment:
29 | "Finding the perfect motorcycle can be a daunting task, but thanks to this app, it was a seamless experience. The selection is extensive, and the filtering options helped me narrow down my choices quickly.",
30 | },
31 |
32 | {
33 | id: 4,
34 |
35 | firstName: "Miles",
36 |
37 | lastName: "Cummerata",
38 |
39 | image: "https://randomuser.me/api/portraits/men/37.jpg",
40 |
41 | title: "Paralegal",
42 | comment:
43 | "I've been on the hunt for a new home for months, and I finally found 'the one' on this app. The detailed listings and virtual tours gave me a real sense of what each property had to offer.",
44 | },
45 |
46 | {
47 | id: 5,
48 |
49 | firstName: "Mavis",
50 |
51 | lastName: "Schultz",
52 |
53 | image: "https://randomuser.me/api/portraits/men/65.jpg",
54 |
55 | title: "Web Developer I",
56 | comment:
57 | "This app has made my car shopping journey incredibly smooth. The interface is intuitive, and the search filters allowed me to find exactly what I was looking for in no time.",
58 | },
59 |
60 | {
61 | id: 6,
62 |
63 | firstName: "Alison",
64 |
65 | lastName: "Reichert",
66 |
67 | image: "https://randomuser.me/api/portraits/women/47.jpg",
68 |
69 | title: "Civil Engineer",
70 | comment:
71 | "I can't get enough of the motorcycle section on this app! The range of bikes available caters to every style and preference, and the detailed specs provided helped me make an informed decision.",
72 | },
73 |
74 | {
75 | id: 7,
76 |
77 | firstName: "Oleta",
78 |
79 | lastName: "Abbott",
80 |
81 | image: "https://randomuser.me/api/portraits/women/65.jpg",
82 |
83 | title: "Sales Associate",
84 | comment:
85 | "From cozy cottages to luxurious estates, this app has it all. I was blown away by the variety of houses available, and the ease of navigating through the listings made the whole process enjoyable.",
86 | },
87 |
88 | {
89 | id: 8,
90 |
91 | firstName: "Ewell",
92 |
93 | lastName: "Mueller",
94 |
95 | image: "https://randomuser.me/api/portraits/men/8.jpg",
96 |
97 | title: "Clinical Specialist",
98 | comment:
99 | "The transparency and honesty displayed in the car listings on this app are commendable. I felt confident in my decision-making knowing that I was getting accurate information about each vehicle.",
100 | },
101 |
102 | {
103 | id: 9,
104 |
105 | firstName: "Demetrius",
106 |
107 | lastName: "Corkery",
108 |
109 | image: "https://randomuser.me/api/portraits/men/67.jpg",
110 |
111 | title: "Community Outreach Specialist",
112 | comment:
113 | "My experience with this app has been nothing short of fantastic. The customer support team was responsive and helpful, and the seamless integration of features made browsing for motorcycles a pleasure",
114 | },
115 |
116 | {
117 | id: 10,
118 |
119 | firstName: "Eleanora",
120 |
121 | lastName: "Price",
122 |
123 | image: "https://randomuser.me/api/portraits/women/92.jpg",
124 |
125 | title: "Senior Sales Associate",
126 | comment:
127 | "I've recommended this app to all my friends and family who are in the market for a new home, car, or motorcycle. It truly is a one-stop-shop for all your asset-buying needs.",
128 | },
129 |
130 | {
131 | id: 11,
132 |
133 | firstName: "Marcel",
134 |
135 | lastName: "Jones",
136 |
137 | image: "https://randomuser.me/api/portraits/men/21.jpg",
138 |
139 | title: "Account Executive",
140 | comment:
141 | "I never thought finding my dream car could be so enjoyable until I started using this app. The interface is sleek, the listings are comprehensive, and the whole process feels effortless.",
142 | },
143 |
144 | {
145 | id: 12,
146 |
147 | firstName: "Assunta",
148 |
149 | lastName: "Rath",
150 |
151 | image: "https://randomuser.me/api/portraits/women/74.jpg",
152 |
153 | title: "Developer II",
154 | comment:
155 | "As a first-time homeBuyer, I was overwhelmed by the thought of navigating the real estate market. But this app made it simple and stress-free, thanks to its informative guides and easy-to-use search tools.",
156 | },
157 |
158 | {
159 | id: 13,
160 |
161 | firstName: "Trace",
162 |
163 | lastName: "Douglas",
164 |
165 | image: "https://randomuser.me/api/portraits/women/8.jpg",
166 |
167 | title: "Sales Associate",
168 | comment:
169 | "I've been a motorcycle enthusiast for years, and this app is a game-changer. Whether you're a seasoned rider or a beginner, you'll find everything you need to fuel your passion for two-wheeled adventures.",
170 | },
171 |
172 | {
173 | id: 14,
174 |
175 | firstName: "Enoch",
176 |
177 | lastName: "Lynch",
178 |
179 | image: "https://randomuser.me/api/portraits/men/58.jpg",
180 |
181 | title: "Professor",
182 | comment:
183 | "I'm impressed by the attention to detail in every listing on this app. From the high-quality photos to the in-depth descriptions, it's clear that the team behind this app is dedicated to providing the best possible experience for users.",
184 | },
185 |
186 | {
187 | id: 15,
188 |
189 | firstName: "Jeanne",
190 |
191 | lastName: "Halvorson",
192 |
193 | image: "https://randomuser.me/api/portraits/women/89.jpg",
194 |
195 | title: "Software Test Engineer IV",
196 | comment:
197 | "I love how this app caters to every budget and lifestyle. Whether you're looking for a budget-friendly starter home or a luxury vehicle, you'll find options that suit your needs and preferences.",
198 | },
199 |
200 | {
201 | id: 16,
202 |
203 | firstName: "Trycia",
204 |
205 | lastName: "Fadel",
206 |
207 | image: "https://randomuser.me/api/portraits/women/48.jpg",
208 |
209 | title: "Geological Engineer",
210 | comment:
211 | "The best part about this app is the community it fosters. From sharing tips and advice to connecting with fellow enthusiasts, it's more than just a marketplace—it's a hub for like-minded individuals to come together and share their passion for cars, motorcycles, and homes.",
212 | },
213 | ];
214 | export default usersData;
215 |
--------------------------------------------------------------------------------