diff --git a/public/img/about/about_1.png b/public/img/about/about_1.png index 79a7f1e..c74a138 100644 Binary files a/public/img/about/about_1.png and b/public/img/about/about_1.png differ diff --git a/public/img/about/about_2.png b/public/img/about/about_2.png index 77d61dc..f803c0c 100644 Binary files a/public/img/about/about_2.png and b/public/img/about/about_2.png differ diff --git a/src/components/about/AboutSectionHeading.tsx b/src/components/about/AboutSectionHeading.tsx index efe2cc2..756a626 100644 --- a/src/components/about/AboutSectionHeading.tsx +++ b/src/components/about/AboutSectionHeading.tsx @@ -1,20 +1,23 @@ import React from "react"; +import clsx from "clsx"; interface AboutSectionHeadingProps { title: string; - description: string; + description: React.ReactNode; + className?: string; } export default function AboutSectionHeading({ title, description, + className, }: AboutSectionHeadingProps) { return ( -
-
+
+
{title}
-

{description}

+

{description}

); } diff --git a/src/components/about/ComunityCard.tsx b/src/components/about/ComunityCard.tsx index a080b61..ae28d59 100644 --- a/src/components/about/ComunityCard.tsx +++ b/src/components/about/ComunityCard.tsx @@ -17,14 +17,16 @@ export default function ComunityCard({ return (
- {icon} -
- {number} -

{text}

+ + {icon} + +
+ {number} +

{text}

); diff --git a/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx b/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx index e2b7598..e194d07 100644 --- a/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx +++ b/src/components/about/accordeons/ShopInStyleAccordeonContent.tsx @@ -1,20 +1,24 @@ -import React from "react"; - export default function ShopInStyleAccordeonContent() { return ( -
-
-

+

+
+

A world class shopping experience including a wide mix of multinational, local brands, anchor stores and traditional souks serving as a one stop destination.

-
-
-
Featuring more than
-
229
-
retail stores
-

+

+
+
+ Featuring more than +
+
+ 229 +
+
+ retail stores +
+

Baraha Town, with its numerous stores will be the ultimate fashion capital to its shoppers.

@@ -22,7 +26,7 @@ export default function ShopInStyleAccordeonContent() {
diff --git a/src/components/pages/AboutPage.tsx b/src/components/pages/AboutPage.tsx new file mode 100644 index 0000000..095dd3e --- /dev/null +++ b/src/components/pages/AboutPage.tsx @@ -0,0 +1,195 @@ +import AboutSectionHeading from "../about/AboutSectionHeading"; +import ComunityCard from "../about/ComunityCard"; +import LayoutIcon from "../../icons/LayoutIcon"; +import BedIcon from "../../icons/BedIcon"; +import LampIcon from "../../icons/LampIcon"; +import CarIcon from "../../icons/CarIcon"; +import ParkingIcon from "../../icons/ParkingIcon"; +import ShopIcon from "../../icons/ShopIcon"; +import Accordeon from "../../ui/Accordeon"; +import ShopInStyleAccordeonContent from "../about/accordeons/ShopInStyleAccordeonContent"; + +export default function About() { + return ( +
+ + + + +
+ ); +} + +function AboutHero() { + return ( +
+ +
+

+ Your Journey to a Perfect Life
{" "} + Begins in Baraha Town. +

+ + Live, Shop, Work & Dine in the Vibrant Heart
of Abu Hamour. + +
+
+ ); +} + +function AboutBaraha() { + return ( +
+ + Baraha Town is mixed-use development that + has been designed to bring retail, residential and + commercial offices into one easily accessible location with + fantastic transport links to the surrounding area. + + } + className="2xl:mb-0 md:mb-[4.167vw] mb-[6.667vw]" + /> +
+
+

+ A state-of-the-art town offering an aspirational journey to its + visitors. With its vibrant, colorful buildings, Baraha Town offers + the biggest retail, residential, and office spaces in a 3km radius. +

+

+ Baraha Town will be home to various local and international brand + names. +

+
+ +
+ + +
+ +
+

+ Baraha Town is more
than a destination;
+ it’s a journey. +

+
+
+
+ ); +} + +function BuildingCommunities() { + return ( +
+ + Baraha Town, with its collection of Retail Stores,
+ Restaurants, Cafes, Hypermarket, Fitness Club, +
Medical Clinic, Offices and Residential Apartments, will be + an ideal destination for those seeking a new journey. + + } + className="2xl:mb-0 md:mb-[4.167vw] mb-[8.889vw]" + /> +
+ } + number="356" + text="Text" + className="" + /> + } + number="61" + text="Studio Apartments" + /> + } + number="91" + text="1 Bedroom Apartments" + /> + } + number="68" + text="Commercial Offices" + /> + } + number="475" + text="Above-Ground Parking Spaces" + className="2xl:col-start-2 2xl:col-end-3 2xl:row-start-2 2xl:row-end-3" + /> + } + number="1,470" + text="Basement Parking Spaces" + className="2xl:col-start-3 2xl:col-end-4 2xl:row-start-3 2xl:row-end-4" + /> +
+
+ ); +} + +function Accordeons() { + return ( +
+
+

+ Your World, Reimagined +

+

+ Step into Baraha Town, where every aspect
of your daily life is + designed for inspiration
and convenience. +

+
+ + } + open + /> + } + className="translate-y-[-1px]" + /> + } + className="translate-y-[-2px]" + /> + } + className="translate-y-[-3px]" + /> + } + className="translate-y-[-4px]" + /> +
+ ); +} diff --git a/src/components/pages/ContactsPage.tsx b/src/components/pages/ContactsPage.tsx index 1e2fc59..6c2466d 100644 --- a/src/components/pages/ContactsPage.tsx +++ b/src/components/pages/ContactsPage.tsx @@ -18,7 +18,7 @@ function ContactsPage() { return (
-

+

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

diff --git a/src/index.css b/src/index.css index 1333d9c..f9b7cc3 100644 --- a/src/index.css +++ b/src/index.css @@ -21,19 +21,19 @@ body { @apply 2xl:text-[0.833vw] text-xs leading-[115%] tracking-[-4%]; } - .web-h1 { + .h1 { @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%] tracking-[-4%]; } - .web-h2 { + .h2 { @apply 2xl:text-[3.333vw] md:text-[6.25vw] text-[13.333vw] leading-[110%]; } - .web-h3 { + .h3 { @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%] tracking-[-4%]; } - .web-number { + .number { @apply 2xl:text-[4.444vw] md:text-[8.333vw] text-[8.889vw] md:leading-[100%] leading-[110%] tracking-[-4%]; } @@ -45,7 +45,11 @@ body { @apply 2xl:text-[0.972vw] md:text-[1.823vw] text-[3.889vw] leading-[130%] tracking-[-4%]; } - .web-caption { + .caption { @apply 2xl:text-[0.833vw] text-xs leading-[130%]; } + + .subheadline-m { + @apply 2xl:text-[1.667vw] md:text-[3.125vw] text-[6.667vw] 2xl:leading-[120%] leading-[125%] tracking-[-4%]; + } } diff --git a/src/main.tsx b/src/main.tsx index 19794c0..2eae740 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 "./pages/About.tsx"; +import About from "./components/pages/AboutPage.tsx"; import ContactsPage from "./components/pages/ContactsPage.tsx"; const router = createBrowserRouter([ diff --git a/src/pages/About.tsx b/src/pages/About.tsx deleted file mode 100644 index b891cb8..0000000 --- a/src/pages/About.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import AboutSectionHeading from "../components/about/AboutSectionHeading"; -import ComunityCard from "../components/about/ComunityCard"; -import LayoutIcon from "../icons/LayoutIcon"; -import BedIcon from "../icons/BedIcon"; -import LampIcon from "../icons/LampIcon"; -import CarIcon from "../icons/CarIcon"; -import ParkingIcon from "../icons/ParkingIcon"; -import ShopIcon from "../icons/ShopIcon"; -import Accordeon from "../ui/Accordeon"; -import { useState } from "react"; -import ShopInStyleAccordeonContent from "../components/about/accordeons/ShopInStyleAccordeonContent"; - -export default function About() { - return ( -
- - - - -
- ); -} - -function AboutHero() { - return ( -
- -
-

- Your Journey to a Perfect Life
Begins in Baraha Town. -

- - Live, Shop, Work & Dine in the Vibrant Heart
of Abu Hamour. - -
-
- ); -} - -function AboutBaraha() { - return ( -
- -
-
-

- A state-of-the-art town offering an aspirational journey to its - visitors. With its vibrant, colorful buildings, Baraha Town offers - the biggest retail, residential, and office spaces in a 3km radius. -

-

- Baraha Town will be home to various local and international brand - names. -

-
- -
- - -
- -
-

- Baraha Town is more
than a destination;
- it’s a journey. -

-
-
-
- ); -} - -function BuildingCommunities() { - return ( -
- -
- } - number="356" - text="Text" - className="" - /> - } - number="61" - text="Studio Apartments" - /> - } - number="91" - text="1 Bedroom Apartments" - /> - } - number="68" - text="Commercial Offices" - /> - } - number="475" - text="Above-Ground Parking Spaces" - className="col-start-2 col-end-3 row-start-2 row-end-3" - /> - } - number="1,470" - text="Basement Parking Spaces" - className="col-start-3 col-end-4 row-start-3 row-end-4" - /> -
-
- ); -} - -function Accordeons() { - const [activeAccordeon, setActiveAccordeon] = useState(0); - - function handleAccordeonClick(index: number) { - if (activeAccordeon === index) { - setActiveAccordeon(null); - } else { - setActiveAccordeon(index); - } - } - - return ( -
-
-

Your World, Reimagined

-

- Step into Baraha Town, where every aspect
of your daily life is - designed for inspiration
and convenience. -

-
- - } - open={activeAccordeon === 0} - onClick={() => handleAccordeonClick(0)} - /> - } - className="translate-y-[-1px]" - open={activeAccordeon === 1} - onClick={() => handleAccordeonClick(1)} - /> - } - className="translate-y-[-2px]" - open={activeAccordeon === 2} - onClick={() => handleAccordeonClick(2)} - /> - } - className="translate-y-[-3px]" - open={activeAccordeon === 3} - onClick={() => handleAccordeonClick(3)} - /> - } - className="translate-y-[-4px]" - open={activeAccordeon === 4} - onClick={() => handleAccordeonClick(4)} - /> -
- ); -} diff --git a/src/ui/Accordeon.tsx b/src/ui/Accordeon.tsx index f5287e5..69862d4 100644 --- a/src/ui/Accordeon.tsx +++ b/src/ui/Accordeon.tsx @@ -1,5 +1,5 @@ import clsx from "clsx"; -import React from "react"; +import React, { useState } from "react"; import ArrowUp from "../icons/ArrowUp"; import { motion } from "framer-motion"; @@ -20,28 +20,36 @@ export default function Accordeon({ open, onClick, }: AccordeonProps) { - function onAccordeonClick() { + const [isOpen, setIsOpen] = useState(open || false); + + function handleAccordeonClick() { + setIsOpen(!isOpen); onClick?.(); } return (
-
-

+

+

{subtitle}

-

{label}

-
+

+ {label} +

+
@@ -50,13 +58,15 @@ export default function Accordeon({ -
{content}
+
+ {content} +
);