diff --git a/src/components/Feedback.tsx b/src/components/Feedback.tsx new file mode 100644 index 0000000..874e5c1 --- /dev/null +++ b/src/components/Feedback.tsx @@ -0,0 +1,121 @@ +import { useState } from "react"; +import Button from "../ui/Button"; +import Input from "../ui/Input"; +import { Link } from "react-router"; + +const INTERESTS = ["Retail", "Office", "Residential"] as const; + +function Feedback() { + const [interests, setInterests] = useState<(typeof INTERESTS)[number][]>([]); + + function handleInterestClick(interest: (typeof INTERESTS)[number]) { + if (interests.includes(interest)) { + setInterests((prev) => prev.filter((i) => i !== interest)); + } else { + setInterests((prev) => [...prev, interest]); + } + } + + return ( +
+

+ Enquire about joining this thriving community at the heart of Abu Hamour + by contacting a member of our sales team today +

+ +
+ +
+ + +
+
+

What are you interested in?

+
+ {INTERESTS.map((interest) => ( + + ))} +
+
+ + +
+ +
+
+

Address

+

Mesaimeer Street, Abu Hamour, Doha-Qata

+
+
+

Management Office

+

+ Sabah Al Ahmad Corridor, Abu Hamour, Doha, Qatar +

+
+
+

Email Address:

+ + info@barahatown.com + +
+
+

Leasing Department:

+ + +974 5025 4555 + +
+
+

Call Center:

+ + +974 4442 1073 + +
+
+
+ ); +} + +export default Feedback; diff --git a/src/components/Socials.tsx b/src/components/Socials.tsx new file mode 100644 index 0000000..0aca806 --- /dev/null +++ b/src/components/Socials.tsx @@ -0,0 +1,64 @@ +import { Link } from "react-router"; +import Button from "../ui/Button"; +import FacebookIcon from "./icons/FacebookIcon"; +import YoutubeIcon from "./icons/YoutubeIcon"; +import InstagramIcon from "./icons/InstagramIcon"; +import TwitterIcon from "./icons/TwitterIcon"; +import WhatsappIcon from "./icons/WhatsappIcon"; + +function Socials() { + return ( +
+
+ + + + + + + + + + + + + + + +
+
+ + Terms of Use + + + Privacy Policy + + + Copyrights © 2025 Baraha Town + +
+
+ ); +} + +export default Socials; diff --git a/src/components/about/ComunityCard.tsx b/src/components/about/ComunityCard.tsx index 81c81be..5de4bf8 100644 --- a/src/components/about/ComunityCard.tsx +++ b/src/components/about/ComunityCard.tsx @@ -25,13 +25,12 @@ export default function ComunityCard({ {icon}
- + {number} -

{text}

+

+ {text} +

); diff --git a/src/components/icons/ChevronDownIcon.tsx b/src/components/icons/ChevronDownIcon.tsx new file mode 100644 index 0000000..3daf638 --- /dev/null +++ b/src/components/icons/ChevronDownIcon.tsx @@ -0,0 +1,12 @@ +function ChevronDownIcon() { + return ( + + + + ); +} + +export default ChevronDownIcon; diff --git a/src/components/icons/FacebookIcon.tsx b/src/components/icons/FacebookIcon.tsx new file mode 100644 index 0000000..5717ee8 --- /dev/null +++ b/src/components/icons/FacebookIcon.tsx @@ -0,0 +1,55 @@ +function FacebookIcon() { + return ( + + + + + + + + + + + + + + + + + + + ); +} + +export default FacebookIcon; diff --git a/src/components/icons/InstagramIcon.tsx b/src/components/icons/InstagramIcon.tsx new file mode 100644 index 0000000..5a9d957 --- /dev/null +++ b/src/components/icons/InstagramIcon.tsx @@ -0,0 +1,12 @@ +function InstagramIcon() { + return ( + + + + ); +} + +export default InstagramIcon; diff --git a/src/components/icons/TwitterIcon.tsx b/src/components/icons/TwitterIcon.tsx new file mode 100644 index 0000000..5236044 --- /dev/null +++ b/src/components/icons/TwitterIcon.tsx @@ -0,0 +1,12 @@ +function TwitterIcon() { + return ( + + + + ); +} + +export default TwitterIcon; diff --git a/src/components/icons/WhatsappIcon.tsx b/src/components/icons/WhatsappIcon.tsx new file mode 100644 index 0000000..cb7f9ce --- /dev/null +++ b/src/components/icons/WhatsappIcon.tsx @@ -0,0 +1,12 @@ +function WhatsappIcon() { + return ( + + + + ); +} + +export default WhatsappIcon; diff --git a/src/components/icons/YoutubeIcon.tsx b/src/components/icons/YoutubeIcon.tsx new file mode 100644 index 0000000..7de8ad0 --- /dev/null +++ b/src/components/icons/YoutubeIcon.tsx @@ -0,0 +1,12 @@ +function YoutubeIcon() { + return ( + + + + ); +} + +export default YoutubeIcon; diff --git a/src/components/layouts/NavMenu.tsx b/src/components/layouts/NavMenu.tsx index f7c36d6..0b116ca 100644 --- a/src/components/layouts/NavMenu.tsx +++ b/src/components/layouts/NavMenu.tsx @@ -75,7 +75,7 @@ function NavMenu() { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - className="md:hidden p-1 space-y-1 rounded-2xl bg-[#F0EDE6] fixed left-1/2 -translate-x-1/2 bottom-[75px] w-[177px]" + className="md:hidden p-1 space-y-1 rounded-2xl bg-[#F0EDE6] fixed z-10 left-1/2 -translate-x-1/2 bottom-[75px] w-[177px]" > +
+ +
+ +
); } @@ -118,11 +125,11 @@ function BuildingCommunities() { } className="2xl:mb-0 md:mb-[4.167vw] mb-[8.889vw]" /> -
+
} number="356" - text="Text" + text="Retail / F & B stores" className="" /> ([]); - - function handleInterestClick(interest: (typeof INTERESTS)[number]) { - if (interests.includes(interest)) { - setInterests((prev) => prev.filter((i) => i !== interest)); - } else { - setInterests((prev) => [...prev, interest]); - } - } - return ( -
-
-

- Enquire about joining this thriving community at the heart - of Abu Hamour by contacting a member of our sales team today -

-
- -
- - -
-
-

What are you interested in?

-
- {INTERESTS.map((interest) => ( - - ))} -
-
- - -
-
+
+ +
+
); } diff --git a/src/index.css b/src/index.css index 959abe5..458a7ea 100644 --- a/src/index.css +++ b/src/index.css @@ -10,19 +10,19 @@ body { @layer utilities { .button-l { - @apply 2xl:text-[1.111vw] text-base leading-[115%] tracking-[-4%]; + @apply 2xl:text-[1.111vw] text-base leading-[115%]; } .button-m { - @apply 2xl:text-[0.972vw] text-sm leading-[115%] tracking-[-4%]; + @apply 2xl:text-[0.972vw] text-sm leading-[115%]; } .button-s { - @apply 2xl:text-[0.833vw] text-xs leading-[115%] tracking-[-4%]; + @apply 2xl:text-[0.833vw] text-xs leading-[115%]; } .h1 { - @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%] tracking-[-4%]; + @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%]; } .h2 { @@ -30,19 +30,19 @@ body { } .h3 { - @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%] tracking-[-4%]; + @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%]; } .number { - @apply 2xl:text-[4.444vw] md:text-[8.333vw] text-[8.889vw] md:leading-[100%] leading-[110%] tracking-[-4%]; + @apply 2xl:text-[4.444vw] text-[64px] md:leading-[100%] leading-[110%]; } .text-m { - @apply 2xl:text-[1.111vw] md:text-[2.083vw] text-[4.444vw] 2xl:leading-[120%] leading-[130%] tracking-[-4%]; + @apply 2xl:text-[1.111vw] text-base 2xl:leading-[120%] leading-[130%]; } .text-s { - @apply 2xl:text-[0.972vw] md:text-[1.823vw] text-[3.889vw] leading-[130%] tracking-[-4%]; + @apply 2xl:text-[0.972vw] text-sm leading-[130%]; } .caption { diff --git a/src/main.tsx b/src/main.tsx index 2eae740..f39909e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,7 @@ import { createRoot } from "react-dom/client"; import "./index.css"; import { createBrowserRouter, RouterProvider } from "react-router"; import DefaultLayout from "./components/layouts/DefaultLayout.tsx"; -import About from "./components/pages/AboutPage.tsx"; +import AboutPage from "./components/pages/AboutPage.tsx"; import ContactsPage from "./components/pages/ContactsPage.tsx"; const router = createBrowserRouter([ @@ -19,7 +19,7 @@ const router = createBrowserRouter([ }, { path: "/about", - element: , + element: , }, { path: "/contacts", diff --git a/src/ui/Input.tsx b/src/ui/Input.tsx index 69bc6a1..f7bc578 100644 --- a/src/ui/Input.tsx +++ b/src/ui/Input.tsx @@ -1,6 +1,23 @@ import InputMask from "@mona-health/react-input-mask"; import clsx from "clsx"; import { useState } from "react"; +import ChevronDownIcon from "../components/icons/ChevronDownIcon"; +import Button from "./Button"; +import { useClickAway } from "@uidotdev/usehooks"; + +interface CountryCode { + code: string; + mask: string; + flag: string; +} + +const COUNTRY_CODES: CountryCode[] = [ + { code: "+974", mask: "9999 9999", flag: "🇶🇦" }, + { code: "+971", mask: "99 999 9999", flag: "🇦🇪" }, + { code: "+1", mask: "999 999 99 99", flag: "🇺🇸" }, + { code: "+44", mask: "9999 999999", flag: "🇬🇧" }, + { code: "+7", mask: "999 999 99 99", flag: "🇷🇺" }, +]; interface InputProps extends React.InputHTMLAttributes { label: string; @@ -19,12 +36,20 @@ function Input({ mask, isTextArea = false, maxLength, + type, ...props }: InputProps) { const [textValue, setTextValue] = useState(""); + const [selectedCountry, setSelectedCountry] = useState(0); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + + const ref = useClickAway(() => setIsDropdownOpen(false)); + + const isPhoneInput = type === "tel"; + const currentMask = isPhoneInput ? COUNTRY_CODES[selectedCountry].mask : mask; return ( -
+
@@ -48,14 +73,68 @@ function Input({ )}
- ) : ( - - +
+ + {isDropdownOpen && ( +
+ {COUNTRY_CODES.map((country, index) => ( + + ))} +
+ )} +
+ +
+ ) : ( + +