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/AboutSectionHeading.tsx b/src/components/about/AboutSectionHeading.tsx index 6ab97e2..738b68c 100644 --- a/src/components/about/AboutSectionHeading.tsx +++ b/src/components/about/AboutSectionHeading.tsx @@ -14,7 +14,7 @@ export default function AboutSectionHeading({
{title}
-

{description}

+

{description}

); } diff --git a/src/components/about/ComunityCard.tsx b/src/components/about/ComunityCard.tsx index a080b61..fbe2d1a 100644 --- a/src/components/about/ComunityCard.tsx +++ b/src/components/about/ComunityCard.tsx @@ -23,7 +23,7 @@ export default function ComunityCard({ > {icon}
- {number} + {number}

{text}

diff --git a/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx b/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx index e2b7598..de7a973 100644 --- a/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx +++ b/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx @@ -12,7 +12,7 @@ export default function ShopInStyleAccordeonContent() {
Featuring more than
-
229
+
229
retail stores

Baraha Town, with its numerous stores will be the ultimate fashion 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]" > ([]); - - 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 1333d9c..f6f8db8 100644 --- a/src/index.css +++ b/src/index.css @@ -10,42 +10,42 @@ 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%]; } - .web-h1 { - @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%] tracking-[-4%]; + .h1 { + @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%]; } - .web-h2 { + .h2 { @apply 2xl:text-[3.333vw] md:text-[6.25vw] text-[13.333vw] leading-[110%]; } - .web-h3 { - @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%] tracking-[-4%]; + .h3 { + @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%]; } - .web-number { - @apply 2xl:text-[4.444vw] md:text-[8.333vw] text-[8.889vw] md:leading-[100%] leading-[110%] tracking-[-4%]; + .number { + @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%]; } - .web-caption { + .caption { @apply 2xl:text-[0.833vw] text-xs leading-[130%]; } } diff --git a/src/pages/About.tsx b/src/pages/About.tsx index b891cb8..dbb209c 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -9,6 +9,8 @@ import ShopIcon from "../icons/ShopIcon"; import Accordeon from "../ui/Accordeon"; import { useState } from "react"; import ShopInStyleAccordeonContent from "../components/about/accordeons/ShopInStyleAccordeonContent"; +import Socials from "../components/Socials"; +import Feedback from "../components/Feedback"; export default function About() { return ( @@ -17,6 +19,11 @@ export default function About() { +
+ +
+ +
); } @@ -26,7 +33,7 @@ function AboutHero() {
-

+

Your Journey to a Perfect Life
Begins in Baraha Town.

@@ -69,7 +76,7 @@ function AboutBaraha() {
-
+

Baraha Town is more
than a destination;
it’s a journey. @@ -143,7 +150,7 @@ function Accordeons() { return (

-

Your World, Reimagined

+

Your World, Reimagined

Step into Baraha Town, where every aspect
of your daily life is designed for inspiration
and convenience. diff --git a/src/ui/Accordeon.tsx b/src/ui/Accordeon.tsx index f5287e5..109611a 100644 --- a/src/ui/Accordeon.tsx +++ b/src/ui/Accordeon.tsx @@ -36,7 +36,7 @@ export default function Accordeon({

{subtitle}

-

{label}

+

{label}

{ 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) => ( + + ))} +
+ )} +
+ +
+ ) : ( + +