From 72bcd414b65cf8fe75d57a6f51a542b1dab69b56 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mouhamadalyasen3555@gmail.com>
Date: Thu, 15 May 2025 00:18:10 +0300
Subject: [PATCH] Refactor index.html to modularize sections and add
 advertisement banners for hero, about, featured, projects, services, and
 contact sections. Enhance JavaScript to load components dynamically and
 improve CSS styles for ad banners.

---
 components/ad-placements.html            |   1 +
 components/ads.html                      |  37 ++++
 css/templatemo-first-portfolio-style.css | 241 +++++++++++++++++++++++
 index.html                               | 120 ++++++++---
 4 files changed, 374 insertions(+), 25 deletions(-)
 create mode 100644 components/ad-placements.html
 create mode 100644 components/ads.html

diff --git a/components/ad-placements.html b/components/ad-placements.html
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/components/ad-placements.html
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/components/ads.html b/components/ads.html
new file mode 100644
index 0000000..4576d19
--- /dev/null
+++ b/components/ads.html
@@ -0,0 +1,37 @@
+<!-- Vertical Ad Banner -->
+<div class="vertical-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-rocket-takeoff"></i>
+    </div>
+    <h4>Company</h4>
+    <p>Transform Your Business with Our Solutions</p>
+    <a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Horizontal Ad Banner -->
+<div class="horizontal-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-graph-up-arrow"></i>
+    </div>
+    <div class="ad-text">
+      <h4>Boost Your Growth</h4>
+      <p>Partner with Company for Digital Excellence</p>
+    </div>
+    <a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Feature Ad Banner -->
+<div class="feature-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-shield-check"></i>
+    </div>
+    <h4>Secure Solutions</h4>
+    <p>Trusted by Industry Leaders</p>
+    <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css
index eea4b55..37cce96 100644
--- a/css/templatemo-first-portfolio-style.css
+++ b/css/templatemo-first-portfolio-style.css
@@ -1962,3 +1962,244 @@ img[src*="happy-bearded-young-man.jpg"]:hover {
   }
 }
 
+/* Ad Banners */
+.vertical-ad-banner {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  border-radius: var(--border-radius-medium);
+  padding: 30px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.vertical-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.05), rgba(83, 93, 161, 0.05));
+  z-index: 1;
+}
+
+.vertical-ad-banner:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.horizontal-ad-banner {
+  background: linear-gradient(135deg, rgba(83, 93, 161, 0.1), rgba(20, 183, 137, 0.1));
+  border-radius: var(--border-radius-medium);
+  padding: 20px 30px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.horizontal-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(83, 93, 161, 0.05), rgba(20, 183, 137, 0.05));
+  z-index: 1;
+}
+
+.horizontal-ad-banner:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.feature-ad-banner {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.15), rgba(83, 93, 161, 0.15));
+  border-radius: var(--border-radius-medium);
+  padding: 25px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  text-align: center;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.feature-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  z-index: 1;
+}
+
+.feature-ad-banner:hover {
+  transform: scale(1.02);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.ad-content {
+  position: relative;
+  z-index: 2;
+}
+
+.horizontal-ad-banner .ad-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.ad-icon {
+  width: 50px;
+  height: 50px;
+  background: var(--white-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--primary-color);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.vertical-ad-banner:hover .ad-icon,
+.horizontal-ad-banner:hover .ad-icon,
+.feature-ad-banner:hover .ad-icon {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  transform: rotate(360deg);
+}
+
+.ad-text {
+  flex-grow: 1;
+}
+
+.ad-content h4 {
+  color: var(--primary-color);
+  font-size: 18px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.ad-content p {
+  color: var(--p-color);
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
+.horizontal-ad-banner .ad-content p {
+  margin-bottom: 0;
+}
+
+.ad-link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.3s ease;
+  padding: 8px 20px;
+  border: 2px solid rgba(20, 183, 137, 0.2);
+  border-radius: var(--border-radius-small);
+}
+
+.ad-link i {
+  transition: transform 0.3s ease;
+}
+
+.ad-link:hover {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  border-color: var(--secondary-color);
+}
+
+.ad-link:hover i {
+  transform: translateX(5px);
+}
+
+/* Ad Placement Styles */
+.hero .container {
+  position: relative;
+}
+
+.hero-ad {
+  position: absolute;
+  right: -200px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 180px;
+}
+
+.about-ad {
+  margin-top: 30px;
+}
+
+.services-ad {
+  margin: 30px 0;
+}
+
+.projects-ad {
+  margin: 30px 0;
+}
+
+@media (max-width: 1400px) {
+  .hero-ad {
+    display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  .horizontal-ad-banner {
+    flex-direction: column;
+    text-align: center;
+    padding: 25px;
+  }
+  
+  .horizontal-ad-banner .ad-content {
+    flex-direction: column;
+  }
+  
+  .ad-text {
+    margin: 15px 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .vertical-ad-banner,
+  .horizontal-ad-banner,
+  .feature-ad-banner {
+    padding: 20px;
+  }
+  
+  .ad-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 20px;
+  }
+  
+  .ad-content h4 {
+    font-size: 16px;
+  }
+  
+  .ad-content p {
+    font-size: 13px;
+  }
+}
+
diff --git a/index.html b/index.html
index b19dac4..6f0550f 100644
--- a/index.html
+++ b/index.html
@@ -23,31 +23,95 @@
   </head>
 
   <body>
-    <!-- Include Header -->
+    <!-- Header -->
     <div id="header"></div>
 
     <main>
-      <!-- Include Hero Section -->
-      <div id="hero"></div>
+      <!-- Hero Section -->
+      <section id="hero"></section>
+      <aside class="hero-ad">
+        <div class="vertical-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-rocket-takeoff"></i>
+            </div>
+            <h4>Company</h4>
+            <p>Transform Your Business with Our Solutions</p>
+            <a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include About Section -->
-      <div id="about"></div>
+      <!-- About Section -->
+      <section id="about"></section>
+      <aside class="about-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-graph-up-arrow"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Boost Your Growth</h4>
+              <p>Partner with Company for Digital Excellence</p>
+            </div>
+            <a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Featured Section -->
-      <div id="featured"></div>
+      <!-- Featured Section -->
+      <section id="featured"></section>
+      <aside class="featured-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-shield-check"></i>
+            </div>
+            <h4>Secure Solutions</h4>
+            <p>Trusted by Industry Leaders</p>
+            <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Projects Section -->
-      <div id="projects"></div>
+      <!-- Projects Section -->
+      <section id="projects"></section>
+      <aside class="projects-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-lightning-charge"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Fast Development</h4>
+              <p>Accelerate Your Project Timeline</p>
+            </div>
+            <a href="#" class="ad-link">Start Now <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Services Section -->
-      <div id="services"></div>
+      <!-- Services Section -->
+      <section id="services"></section>
+      <aside class="services-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-gear"></i>
+            </div>
+            <h4>Premium Services</h4>
+            <p>Expert Solutions for Your Business</p>
+            <a href="#" class="ad-link">Discover More <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Contact Section -->
-      <div id="contact"></div>
+      <!-- Contact Section -->
+      <section id="contact"></section>
     </main>
 
-    <!-- Include Footer -->
-    <div id="footer"></div>
+    <!-- Footer -->
+    <footer id="footer"></footer>
 
     <!-- JAVASCRIPT FILES -->
     <script src="js/jquery.min.js"></script>
@@ -60,16 +124,22 @@
 
     <!-- Load Components -->
     <script>
-      $(document).ready(function () {
-        // Load components
-        $("#header").load("components/header.html");
-        $("#hero").load("components/hero.html");
-        $("#about").load("components/about.html");
-        $("#featured").load("components/featured.html");
-        $("#services").load("components/services.html");
-        $("#projects").load("components/projects.html");
-        $("#contact").load("components/contact.html");
-        $("#footer").load("components/footer.html");
+      $(document).ready(function() {
+        const components = {
+          header: "components/header.html",
+          hero: "components/hero.html",
+          about: "components/about.html",
+          featured: "components/featured.html",
+          services: "components/services.html",
+          projects: "components/projects.html",
+          contact: "components/contact.html",
+          footer: "components/footer.html"
+        };
+
+        // Load all components
+        Object.entries(components).forEach(([id, path]) => {
+          $(`#${id}`).load(path);
+        });
       });
     </script>
   </body>