services

app/components/atoms/Logo.jsx

@@ -4,8 +4,11 @@ import "../styles/Header.css";
 const Logo = () => {
     return (
         <div className="logo">
-            <img src="assets/images/home/logo.png" alt="HA GROUP Logo" className="logo-image" />
+        <a href="/">
+            <img src="/assets/images/home/logo.png" alt="HA GROUP Logo" className="logo-image" />
+        </a>
         </div>
+
     );
 };
 

app/components/molecules/NavMenu.jsx

@@ -4,7 +4,7 @@ import NavLink from "../atoms/NavLink";
 const NavMenu = () => {
     const links = [
         { label: "Business", href: "#" },
-        { label: "Services", href: "#" },
+        { label: "Services", href: "/services" },
         { label: "Blog", href: "#" },
         { label: "About us", href: "/about" },
         { label: "Contact us", href: "#" },

app/components/molecules/ServicesSection/ServicesSection.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import "./ServicesSection.css";
 
 const services = [
@@ -33,19 +34,19 @@ const ServicesSection = () => {
             <div className="services-container">
                 {services.map((service, index) => {
                     // Split the title into words and insert a line break
-                    const words = service.title.split(' ');
+                    const words = service.title.split(" ");
                     const formattedTitle = (
                         <>
                             {words[0]}<br />{words[1]}
                         </>
                     );
 
                     return (
-                        <a key={index} href={service.link} className="service-card">
+                        <Link key={index} to={service.link} className="service-card">
                             <img src={service.image} alt={service.title} />
                             <div className="overlay"></div>
                             <p>{formattedTitle}</p>
-                        </a>
+                        </Link>
                     );
                 })}
             </div>

app/components/molecules/ServicesSection/bank-account.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import Footer from '../../organisms/Footer';
+import Header from '../../organisms/Header';
+import './business-setup.css';
+import BlueEmpty3WhiteFilledRightFace from "../../atoms/Triangles/1BlueEmpty3WhiteFilledRightFace";
+import BlueEmpty3WhiteFilledLeftFace from "../../atoms/Triangles/1BlueEmpty3WhiteFilledLeftFace";
+
+const BankAccount = () => {
+    return (
+        <>
+    <Header />
+    <div className="service-container">
+      <div className="service-row">
+        <div className="triangle-design"><BlueEmpty3WhiteFilledRightFace /></div> {/* Triangle Design */}
+        <div className="service-text">
+          <h2>
+            Bank <span className="highlight">Account</span>
+          </h2>
+          <p>
+          The Free Zone is a new idea located in the heart of the United Arab Emirates. It represents not only a geographical place but it is a land where you can prosper and enjoy at the same time.
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/business-setup.png" alt="Business Setup" />
+        </div>
+        <div className="triangle-design right"><BlueEmpty3WhiteFilledLeftFace /></div> {/* Right Triangle */}
+      </div>
+      <div className="service-row">{/* Triangle Design */}{/* Triangle Design */}
+        <div className="service-text">
+          <h2>
+            Corporate <span className="highlight">BA</span>
+          </h2>
+          <p>
+          Everybody dreams of visiting Dubai, but not everyone gets there. Why? The visa procedures can be quite complex. Don't worry, we're the experts, and we'll take care of it for you. We provide a variety of visa services in Dubai, helping individuals and businesses across the Emirates with documentation and issuance. Our commitment is to provide guidance and support during the visa and documentation process, prioritizing your convenience and peace of mind. Explore our services for a hassle-free visa experience.  Constant not Update
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/free-zone.png" alt="Free Zone" />
+        </div>
+        <div className="triangle-design right"><BlueEmpty3WhiteFilledLeftFace /></div> {/* Right Triangle */}
+      </div>
+      <div className="service-row reverse">{/* Triangle Design */}
+      <div className="triangle-design"><BlueEmpty3WhiteFilledRightFace /></div>  
+        <div className="service-text">
+          <h2>
+            Personal <span className="highlight">BA</span>
+          </h2>
+          <p>
+          Everybody dreams of visiting Dubai, but not everyone gets there. Why? The visa procedures can be quite complex. Don't worry, we're the experts, and we'll take care of it for you. We provide a variety of visa services in Dubai, helping individuals and businesses across the Emirates with documentation and issuance. Our commitment is to provide guidance and support during the visa and documentation process, prioritizing your convenience and peace of mind. Explore our services for a hassle-free visa experience.  Constant not Update
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/free-zone.png" alt="Free Zone" />
+        </div>
+      </div>
+    </div>
+    <Footer />
+    </>
+    );
+}
+
+export default BankAccount

app/components/molecules/ServicesSection/business-setup.css

@@ -0,0 +1,144 @@
+.service-container {
+    width: 100%;
+  }
+
+  .service-row {
+    display: flex;
+    align-items: center;
+    justify-content:right;
+    margin-bottom: 40px;
+    position: relative;
+    z-index: -1;
+  }
+
+  .service-row:first-child {
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Subtle black shadow */
+    padding-bottom: 10px; /* Space to prevent overlap */
+}
+
+  /* Reverse the order for alternating rows */
+  .reverse {
+    flex-direction: row-reverse;
+  }
+
+
+  /* Text Section */
+  .service-text {
+    width: 40%;
+  }
+
+  .service-text h2 {
+    font-size: 2rem;
+    font-weight: bold;
+  }
+
+  .highlight {
+    color: #1e90ff;
+  }
+
+  .service-text p {
+    font-size: 1rem;
+    color: #666;
+  }
+
+  /* Image Section */
+  .service-image {
+    width: 40%;
+    min-width: 600px;
+    margin-right: 0;
+  }
+
+  .service-image img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+  }
+
+  .calculator{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 80px;
+  }
+
+  .btn{
+    background-color: #e90303;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 1rem;
+    cursor: pointer;
+    margin-top: 20px;
+  }
+
+  /* Responsive Styles */
+@media (max-width: 1024px) {  /* Tablet View */
+    .service-container {
+      width: 100%;
+    }
+
+    .service-text {
+        margin: 0px 0px 40px 40px;
+      width: 45%;
+    }
+
+    .service-image {
+      width: 45%;
+    }
+
+    .triangle-design {
+        display: none; /* Hide triangles on mobile */
+      }
+
+    .service-text h2 {
+      font-size: 1.8rem;
+    }
+
+    .service-text p {
+      font-size: 0.9rem;
+    }
+  }
+
+  @media (max-width: 768px) {  /* Mobile View */
+    .service-container{
+        width: 100%;
+    }
+    .service-row {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+
+    .service-text, .service-image {
+      width: 100%;
+    }
+
+    .service-text {
+      margin-bottom: 20px;
+    }
+
+    .triangle-design {
+      display: none; /* Hide triangles on mobile */
+    }
+
+    .service-text h2 {
+      font-size: 1.5rem;
+    }
+
+    .service-text p {
+      font-size: 0.85rem;
+    }
+    .service-image img{
+        width: 80%;
+    }
+
+    /* First row image specific changes */
+    .service-row:first-child .service-image img {
+      width: 70%;
+      height: 200px; /* Adjust height for rectangle crop */
+      object-fit: cover; /* Ensures cropping instead of stretching */
+      border-radius: 0; /* Remove rounded corners */
+    }
+  }
+

app/components/molecules/ServicesSection/business-setup.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import Header from '../../organisms/Header';
+import Footer from '../../organisms/Footer';
+import './business-setup.css';
+import BlueEmpty3WhiteFilledRightFace from "../../atoms/Triangles/1BlueEmpty3WhiteFilledRightFace";
+import BlueEmpty3WhiteFilledLeftFace from "../../atoms/Triangles/1BlueEmpty3WhiteFilledLeftFace";
+
+const BusinessSetup = () => {
+  return (
+    <>
+    <Header />
+    <div className="service-container">
+      <div className="service-row">
+        <div className="triangle-design"><BlueEmpty3WhiteFilledRightFace /></div> {/* Triangle Design */}
+        <div className="service-text">
+          <h2>
+            Business <span className="highlight">Setup</span>
+          </h2>
+          <p>
+            Whether you're looking to establish your venture on the mainland,
+            leverage the advantages of Freezones, or explore the benefits of an
+            offshore jurisdiction, we have you covered.
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/business-setup.png" alt="Business Setup" />
+        </div>
+        <div className="triangle-design right"><BlueEmpty3WhiteFilledLeftFace /></div> {/* Right Triangle */}
+      </div>
+      <div>
+        <div className="calculator">
+          <h2>How Much Does Business Setup In Dubai Cost?</h2>
+          <p>
+          That depends. What is your business activity? Free zone or mainland? How many visas or shareholders? 
+          From our experience with business setup in Dubai for over 80,000 entrepreneurs, we have created the 
+          Business Setup Cost Calculator to give you the answer.
+          </p>
+          <button className="btn" onClick={() => window.location.href = "/cost-calculator"}>
+            Calculate Now
+          </button>
+        </div>
+      </div>
+      <div className="service-row">{/* Triangle Design */}{/* Triangle Design */}
+        <div className="service-text">
+          <h2>
+            Free <span className="highlight">Zone</span>
+          </h2>
+          <p>
+          The Free Zone is a new idea located in the heart of the United Arab Emirates. It represents not only a geographical place but it is a land where you can prosper and enjoy at the same time. This dynamic platform has become a lighthouse for global visionaries, offering them a canvas on which to paint their ambitions free from all the potential hurdles. By starting a business setup in a Free Zone you can have an experience that is the fusion of creativity and entrepreneurial spirit
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/free-zone.png" alt="Free Zone" />
+        </div>
+        <div className="triangle-design right"><BlueEmpty3WhiteFilledLeftFace /></div> {/* Right Triangle */}
+      </div>
+      <div className="service-row reverse">{/* Triangle Design */}
+      <div className="triangle-design"><BlueEmpty3WhiteFilledRightFace /></div>  
+        <div className="service-text">
+          <h2>
+            Visa <span className="highlight">Services</span>
+          </h2>
+          <p>
+          Everybody dreams of visiting Dubai, but not everyone gets there. Why? The visa procedures can be quite complex. Don't worry, we're the experts, and we'll take care of it for you. We provide a variety of visa services in Dubai, helping individuals and businesses across the Emirates with documentation and issuance. Our commitment is to provide guidance and support during the visa and documentation process, prioritizing your convenience and peace of mind. Explore our services for a hassle-free visa experience.
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/free-zone.png" alt="Free Zone" />
+        </div>
+      </div>
+      <div className="service-row">
+        <div className="service-text">
+          <h2>
+            Off <span className="highlight">Shore</span>
+          </h2>
+          <p>
+          Are you thinking about forming an offshore company? Then you have landed at the right place. Dive into the complexities of Offshore Company Formation in Dubai, a decision that opens unlimited opportunities. HA Group reveals the distinctive characteristics of UAE Offshore Companies, with a focus on Dubai's effectiveness as a worldwide commercial hub. We will guide you and clear your doubts by providing all the information.
+          </p>
+        </div>
+        <div className="service-image">
+          <img src="/assets/images/services/free-zone.png" alt="Free Zone" />
+        </div>
+        <div className="triangle-design right"><BlueEmpty3WhiteFilledLeftFace /></div> {/* Right Triangle */}
+      </div>
+    </div>
+    <Footer />
+    </>
+  )
+}
+
+export default BusinessSetup