diff --git a/Mystical-fantaies.html b/Mystical-fantaies.html
new file mode 100644
index 000000000..db912346a
--- /dev/null
+++ b/Mystical-fantaies.html
@@ -0,0 +1,1129 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>SwapReads</title>
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_package_v0.16/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_package_v0.16/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
+  <link rel="manifest" href="./assets/favicon_package_v0.16/site.webmanifest">
+  <link rel="mask-icon" href="./assets/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+  <link rel="stylesheet" href="./assets/css/MenuClick.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
+    rel="stylesheet">
+
+  <link rel="preload" as="image" href="./assets/images/hero-banner.png">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.27/bundled/lenis.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+
+
+  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
+
+  <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./assets/css/style.css">
+  <link rel="stylesheet" href="./assets/css/styles.css">
+  <link rel="stylesheet" href="./assets/css/Available.css">
+
+  <script src="./assets/js/rateUsModal.js" defer></script>
+
+</head>
+<script src="https://unpkg.com/scrollreveal"></script>
+<script src="./assets/js/faq.js"></script>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+<!-- Swiper CSS -->
+<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
+
+<!-- Custom CSS -->
+<link rel="stylesheet" href="assets/css/test-style.css">
+
+<body>
+
+
+  <header class="header header-anim" data-header>
+
+    <div class="container" style="padding-left: 0;">
+
+      <nav class="navbar nav_activated" data-navbar>
+        <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
+          <img src="./assets/images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
+        </a>
+
+        <ul class="navbar-list">
+          <img src="./assets/images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
+
+          <li class="navbar-item">
+            <a href="index.html#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
+                class="ri-home-fill"></i> Home</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
+                class="ri-bar-chart-fill"></i> Benefits</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
+                class="ri-bar-chart-fill"></i> Genre</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+                class="ri-customer-service-2-fill"></i> Contact</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+          </li>
+          <li class="navbar-item" id="login-signup-link">
+            <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
+          </li>
+
+
+          <li class="navbar-item dropdown" id="more-dropdown">
+            <a href="#" class="navbar-link" id="more-link">More
+              <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
+                viewBox="0 0 24 24">
+                <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
+              </svg></a>
+            <div class="dropdown-menu" id="dropdown-menu">
+
+              <ul class="dropdown-menu-list">
+                <li class="dropdown-menu-item">
+                  <a href="index.html#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
+                      class="ri-medal-fill"></i> Literary Realms</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="index.html#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
+                      class="ri-price-tag-3-fill"></i> Pricing</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
+                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
+                  </a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
+                    data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="././read_later.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/about.html" class="navbar-link">About</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+
+          <!-- Google Translate Element -->
+          <li class="navbar-item">
+            <div id="google_element"></div>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+    <script>
+      function loadGoogleTranslate() {
+        new google.translate.TranslateElement({
+          pageLanguage: 'en'
+        }, 'google_element');
+      }
+    </script>
+    <div class="switch-container" style="top: 15px;">
+      <input type="checkbox" id="switch" class="switch-checkbox">
+      <label for="switch" class="switch-label">
+        <div class="switch-button">
+          <span class="material-icons sun-icon">wb_sunny</span>
+          <span class="material-icons moon-icon">brightness_2</span>
+        </div>
+      </label>
+    </div>
+
+    </li>
+    </ul>
+    </nav>
+    <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
+      <ion-icon name="menu-outline" aria-hidden="true" class="md hydrated open"></ion-icon>
+
+      <ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
+    </button>
+
+    </div>
+  </header>
+
+
+
+
+  <main>
+
+
+
+<style>
+    .work-sans {
+        font-family: 'Work Sans', sans-serif;
+    }
+
+    #menu-toggle:checked + #menu {
+        display: block;
+    }
+
+    .hover\:grow {
+        transition: all 0.3s;
+        transform: scale(1);
+    }
+
+    .hover\:grow:hover {
+        transform: scale(1.02);
+    }
+
+
+
+</style>
+
+<style>
+  #chaps {
+      margin-top: 150px; /* Adjust the margin-top value as needed */
+  }
+  </style>
+
+<section class="section chapters" id="chapters">
+    <div class="container" id="chaps">
+
+      <p class="section-subtitle"></p>
+
+      <h2 class="h2 section-title has-underline">
+        Explore New Worlds
+        <span class="span has-before"></span>
+      </h2>
+
+      <ul class="grid-list">
+
+        <li>
+          <a href="books.html" class="chapter-card">
+
+            <p class="card-subtitle"></p>
+
+            <h3 class="h3 card-title"> "Fall in love on every page"</h3>
+
+            <p class="card-text">
+            </p>
+
+          </a>
+        </li>
+
+        <li>
+            <a href="books.html" class="chapter-card">
+
+              <p class="card-subtitle"></p>
+
+              <h3 class="h3 card-title">"Heartfelt tales of happiness and"</h3>
+
+              <p class="card-text">
+              </p>
+
+            </a>
+          </li>
+
+        <li>
+          <div class="chapter-card">
+
+            <p class="card-subtitle"></p>
+
+            <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
+
+            <p class="card-text">
+            </p>
+
+          </div>
+        </li>
+    </ul>
+    </div>
+    </section>
+
+<!--THE BOOKS-->
+<h2 class="h2 section-title has-underline" data-sr-id="11" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0.1s;">
+  Mystical Fantasies
+  <span class="span has-before"></span>
+</h2>
+<div class="book-list">
+  
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/646/pg646.cover.medium.jpg" alt="The Coral Island" class="book-cover">
+        <h3 class="book_title">The Coral Island</h3>
+        <a href="https://www.gutenberg.org/ebooks/646" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(1)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/24252/pg24252.cover.medium.jpg" alt="Four Young Explorers" class="book-cover">
+        <h3 class="book_title">Four Young Explorers</h3>
+        <a href="https://www.gutenberg.org/ebooks/24252" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(2)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/18019/pg18019.cover.medium.jpg" alt="The Luckiest Girl in the School" class="book-cover">
+        <h3 class="book_title">The Luckiest Girl in the School</h3>
+        <a href="https://www.gutenberg.org/ebooks/18019" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(3)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/15343/pg15343.cover.medium.jpg" alt="A Little Book for Christmas" class="book-cover">
+        <h3 class="book_title"> A Little Book for Christmas</h3>
+        <a href="https://www.gutenberg.org/ebooks/15343" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(4)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/53386/pg53386.cover.medium.jpg" alt="The Flying Girl" class="book-cover">
+        <h3 class="book_title">The Flying Girl</h3>
+        <a href="https://www.gutenberg.org/ebooks/53386" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(5)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/18505/pg18505.cover.medium.jpg" alt="A Popular Schoolgirl" class="book-cover">
+        <h3 class="book_title">A Popular Schoolgirl</h3>
+        <a href="https://www.gutenberg.org/ebooks/18505" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(6)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/15839/pg15839.cover.medium.jpg" alt="The Rebel of the School" class="book-cover">
+        <h3 class="book_title">The Rebel of the School</h3>
+        <a href="https://www.gutenberg.org/ebooks/15839" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(7)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/20163/pg20163.cover.medium.jpg" alt="The Jolliest School of All" class="book-cover">
+        <h3 class="book_title">The Jolliest School of All</h3>
+        <a href="https://www.gutenberg.org/ebooks/20163" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(8)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/21687/pg21687.cover.medium.jpg" alt="The Youngest Girl in the Fifth" class="book-cover">
+        <h3 class="book_title">The Youngest Girl in the Fifth</h3>
+        <a href="https://www.gutenberg.org/ebooks/21687" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(9)" class="read_later_button">Add to Read Later</button>
+    </div>
+    <div class="book-item">
+        <img src="https://www.gutenberg.org/cache/epub/21656/pg21656.cover.medium.jpg" alt="The Princess of the School" class="book-cover">
+        <h3 class="book_title">The Princess of the School</h3>
+        <a href="https://www.gutenberg.org/ebooks/21656" class="btn btn-secondary">Download</a>
+        <button onclick="addToReadLater(10)" class="read_later_button">Add to Read Later</button>
+    </div>
+    
+</div>
+
+
+
+              <!-- <li>
+                <p class="social-list-title h3">Connect SwapReads socials</p>
+
+                <ul class="social-list">
+
+                  <li>
+                    <a href="https://www.facebook.com/" class="social-link">
+                      <ion-icon name="logo-facebook"></ion-icon>
+                    </a>
+                  </li>
+
+                  <li>
+                    <a href="https://twitter.com/?lang=en" class="social-link">
+                      <ion-icon name="logo-twitter"></ion-icon>
+                    </a>
+                  </li>
+
+                  <li>
+                    <a href="https://www.linkedin.com/" class="social-link">
+                      <ion-icon name="logo-linkedin"></ion-icon>
+                    </a>
+                  </li>
+
+                  <li>
+                    <a href="https://www.youtube.com/" class="social-link">
+                      <ion-icon name="logo-youtube"></ion-icon>
+                    </a>
+                  </li> -->
+
+              <!-- <li>
+                    <a href="tel:+1234567890" class="social-link">
+                      <ion-icon name="logo-whatsapp"></ion-icon>
+                    </a>
+                  </li> -->
+
+            </ul>
+            </li>
+
+            </ul>
+
+          </div>
+
+        </div>
+      </section>
+
+    </article>
+  </main>
+
+  <!-- --Testimonials -->
+
+  <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
+    Acclaimed Authors
+    <span class="span has-before"></span>
+  </h2>
+  <p class="section-subtitle">The Incredible Voices of Today</p>
+
+<div class="slide-container swiper" style="margin-bottom: 15px;">
+<div class="slide-content">
+<div class="card-wrapper swiper-wrapper">
+    <div class="card swiper-slide">
+        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+        <div class="image-content" >
+            <div class="card-image">
+                <img src="assets\images\genres\auth1.jpg" alt="" class="card-img">
+            </div>
+            <h2 style="font-size: 20px;">Nicholas Sparks</h2>
+        </div>
+
+        <div class="rating" >
+            <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+        </div>
+        </div>
+        <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">
+
+          SwapReads has completely transformed my reading experience! Not only have I discovered new books I never would have picked up otherwise, but I've also connected with fellow book lovers who share my passion. It's like having a personalized library with endless possibilities. Highly recommend! </div>
+
+    </div>
+    <div class="card swiper-slide">
+        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+
+          <div class="image-content" >
+                <div class="card-image">
+                    <img src="assets\images\genres\auth2.jpg" alt="" class="card-img">
+                </div>
+                <h2 style="font-size: 20px;">John Green</h2>
+            </div>
+            <div class="rating" >
+                <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+            </div>
+            </div>
+            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads has transformed my reading habits. Beyond swapping books, it's about fostering a community of passionate readers. I've made friends, broadened my literary horizons, and unearthed hidden gems. Thank you, SwapReads! </div>
+    </div>
+    <div class="card swiper-slide">
+        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+            <div class="image-content" >
+                <div class="card-image">
+                    <img src="assets\images\genres\auth3.jpg" alt="" class="card-img">
+                </div>
+                <h2 style="font-size: 20px;">Rainbow Rowell</h2>
+            </div>
+            <div class="rating" >
+                <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+            </div>
+            </div>
+            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads is a bookworm's paradise! With its user-friendly interface, welcoming community, and vast variety of books for swapping, I've embarked on countless new literary adventures. It's like an ever-active book club where I've connected with fellow literature lovers. I'm completely hooked!</div>
+    </div>
+    <div class="card swiper-slide">
+        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+            <div class="image-content" >
+                <div class="card-image">
+                    <img src="assets/images/testimonials-4.jpg" alt="" class="card-img">
+                </div>
+                <h2 style="font-size: 20px;">Sonal K</h2>
+            </div>
+            <div class="rating" >
+                <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+            </div>
+            </div>
+            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads revolutionized my reading life! I've decluttered my shelf, discovered hidden gems, and connected with a passionate community. Thank you, SwapReads, for stealing my heart! </div>
+    </div>
+</div>
+</div>
+<div class="swiper-button-next swiper-navBtn"></div>
+<div class="swiper-button-prev swiper-navBtn"></div>
+<div class="swiper-pagination"></div>
+</div>
+
+</br>
+
+
+<!-- Testimonials -->
+
+
+  <div class="faq-section">
+    <h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
+  </br>
+    <div class="faq-container">
+      <div class="question">
+        <h4>How does SwapReads work ?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answers">
+        <p>SwapReads is a global book exchange platform where users can create profiles,
+          list the books they're willing to swap, and can find other users collections.
+          When you find a book you're interested in, you can find suitable offers and can read that book. It's that
+          easy!</p>
+      </div>
+    </div>
+
+    <div class="faq-container">
+      <div class="question">
+        <h4>How does SwapReads contribute to sustainability?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answers">
+        <p>
+          By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
+          reducing the demand for new book production. This helps minimize the environmental impact
+          associated with book manufacturing, including paper usage and carbon emissions.
+        </p>
+      </div>
+    </div>
+
+    <div class="faq-container">
+      <div class="question">
+        <h4>How do I join the SwapReads community?</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answers">
+        <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
+          books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
+      </div>
+    </div>
+
+    <div class="faq-container">
+      <div class="question">
+        <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
+        <i class="icon fa-solid fa-caret-down"></i>
+      </div>
+      <div class="answers">
+        <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
+          our servers. </p>
+      </div>
+    </div>
+  </div>
+  <br /><br />
+
+  <!--
+    - #FOOTER
+  -->
+
+  <!-- <footer>
+    <div class="foot-top">
+      <div class="foot-left">
+        <div class="desc">
+          <a href="#" class="logo">SwapReads</a>
+          <p style="text-align: justify;">SwapReads.com is the ultimate destination for book lovers seeking to swap and
+            discover new literary gems.
+            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
+            world of literature—all on one convenient platform. Join us and dive into a universe of endless
+            possibilities!
+          </p>
+        </div>
+      </div>
+      <div class="foot-middle">
+        <h2>Quick Links</h2>
+        <ul>
+          <li class="foot-quick"><a href="#home">Home</a></li>
+          <li class="foot-quick"><a href="#benefits">Benefits</a></li>
+          <li class="foot-quick"><a href="#chapters">Literary Realms</a></li>
+          <li class="foot-quick"><a href="#pricing">Pricing</a></li>
+          <li class="foot-quick"><a href="#contact">Contact Us</a></li>
+          <li class="foot-quick"><a href="#faqq">Faq</a></li>
+        </ul>
+      </div>
+      <div class="social-icons">
+        <h5>SUBSCRIBE TO OUR NEWSLETTER</h5>
+        <div class="input-newletter">
+          <input placeholder="EMAIL ADDRESS" type="email" class="in-css"></input> <br>
+          <button class="btn-signup">Subscribe</button> <br>
+        </div>
+        <div class="icons">
+          <a href=""><img class="icon-set" src="./assets/images/FB icon.png" alt=""></a>
+          <a href=""><img class="icon-set" src="./assets/images/insta icon.png" alt=""></a>
+          <a href=""><i class="fa-brands fa-x-twitter fa-2xl" style="color: #deb887;"></i></a>
+          <a href=""><img class="icon-set" src="./assets/images/YT icon.png" alt=""></a>
+        </div>
+      </div>
+
+    </div>
+    <div class="footer-bottom">
+      <p class="copyright" style="text-align: center">
+        &copy;
+        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+      </p>
+    </div>
+  </footer> -->
+  <!-- Footer ended-->
+   <footer>
+    <div class="foot-top">
+      <div class="foot-left">
+
+        <div class="desc">
+<!--google translate-->
+          <div id="google_translate_element"></div>
+
+          <script type="text/javascript">
+              function googleTranslateElementInit() {
+                  new google.translate.TranslateElement(
+                      {pageLanguage: 'en'},
+                      'google_translate_element'
+                  );
+              }
+          </script>
+
+          <script type="text/javascript"
+                  src=
+      "https://translate.google.com/translate_a/element.js?
+      cb=googleTranslateElementInit">
+          </script>
+          <div><a href="#" class="logo">SwapReads</a></div>
+          <div>
+            <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+              lovers
+              seeking to swap and
+
+              discover new literary gems.
+              Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
+              the
+              world of literature—all on one convenient platform. Join us and dive into a universe of endless
+              possibilities!
+            </p>
+          </div>
+
+        </div>
+      </div>
+      <div class="foot-middle">
+        <h2>Quick Links</h2>
+        <div id="quicklinks">
+          <div>
+          <ul>
+            <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
+            <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
+            <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
+            <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
+            <li class="foot-quick"><a href="./assets/html/bookrecommend.html"
+              onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
+          </ul>
+        </div>
+        <div>
+          <ul>
+            <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
+                BookList</a></li>
+            <li class="foot-quick"><a href="./assets/html/freeBooks.html"
+                onclick="lenis.scrollTo('#contact')">E-Book</a></li>
+            <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
+            </li>
+            <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
+            <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
+          </ul>
+        </div>
+        </div>
+      </div>
+      <div class="social-icons">
+
+        <style>
+          input[type="email"] {
+              border: 2px solid #ccc; /* Gray border */
+              border-radius: 4px; /* Rounded corners */
+              padding: 10px; /* Inner padding */
+              font-size: 16px; /* Font size */
+          }
+        </style>
+
+        <form type="newsletter">
+          <label for="newsletter-email" class="newsletter-form">Subscribe to our Newsletter</label>
+          <div class="row-flex">
+              <!-- Email input -->
+              <input type="email" id="newsletter-email" name="email" placeholder="E mail address" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$" 
+              title="Please enter a valid email address that ends with '.com'" required>
+              <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
+          </div>
+      </form>
+      <div id="confirmationMessage" style="display: none;">Thank you for subscribing!</div>
+
+
+        <div class="icons">
+          <a href="https://www.linkedin.com/in/anurag-verma-b91417253/">
+            <div class="icon">
+              <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+            </div>
+          </a>
+
+          <a href="https://x.com/anuragverma_108">
+            <div class="icon">
+              <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+            </div>
+          </a>
+
+          <a href="#">
+            <div class="icon">
+              <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+            </div>
+          </a>
+
+
+          <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
+            <div class="icon">
+              <i class="fab fa-youtube" style="cursor: pointer;"></i>
+            </div>
+          </a>
+
+        </div>
+
+
+        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
+          <div class="circle1">
+            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
+              class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+              <path
+                d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+            </svg>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+
+
+    <!-- adding privacy policy and copyright popup-->
+    <div style="text-align: center; align-items: center;">
+      <p style="text-align: center">
+        &copy;
+        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+      </p>
+      <div class="row-copy">
+
+
+      <a href="#" id="copyrightPolicyLink">Copyright Policy</a> |
+      <a href="#" id="privacyNoticeLink">Privacy Notice</a>
+    </div>
+    </div>
+
+    <!-- Copyright Policy Modal -->
+    <div id="copyrightPolicyModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closeCopyright">&times;</span>
+        <h1>Copyright Policy</h1>
+        <p>Welcome to SwapReads. Here is our copyright policy:</p>
+        <ul>
+          <li>All content on this website is owned by SwapReads unless otherwise stated.</li>
+          <li>You may not reproduce, distribute, or use the content without prior written permission.</li>
+          <li>Users may download and print content for personal use only.</li>
+          <li>Unauthorized use of any content may violate copyright, trademark, and other laws.</li>
+          <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Privacy Notice Modal -->
+    <div id="privacyNoticeModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closePrivacy">&times;</span>
+        <h1>Privacy Notice</h1>
+        <p>Welcome to SwapReads. Here is our privacy notice:</p>
+        <ul>
+          <li>We collect personal information when you register, buy, or sell books.</li>
+          <li>We use this information to provide and improve our services.</li>
+          <li>We do not share your personal information with third parties without your consent.</li>
+          <li>We take reasonable measures to protect your data from unauthorized access.</li>
+          <li>You can contact us to update or delete your personal information.</li>
+          <li>By using our site, you consent to our privacy practices.</li>
+        </ul>
+      </div>
+    </div>
+
+    <script>
+      // Get the modal elements
+      var copyrightModal = document.getElementById("copyrightPolicyModal");
+      var privacyModal = document.getElementById("privacyNoticeModal");
+
+      // Get the link elements
+      var copyrightLink = document.getElementById("copyrightPolicyLink");
+      var privacyLink = document.getElementById("privacyNoticeLink");
+
+      // Get the <span> elements that close the modals
+      var closeCopyright = document.getElementById("closeCopyright");
+      var closePrivacy = document.getElementById("closePrivacy");
+
+      // When the user clicks the link, open the modal 
+      copyrightLink.onclick = function() {
+        copyrightModal.style.display = "block";
+      }
+      privacyLink.onclick = function() {
+        privacyModal.style.display = "block";
+      }
+
+      // When the user clicks on <span> (x), close the modal
+      closeCopyright.onclick = function() {
+        copyrightModal.style.display = "none";
+      }
+      closePrivacy.onclick = function() {
+        privacyModal.style.display = "none";
+      }
+
+      // When the user clicks anywhere outside of the modal, close it
+      window.onclick = function(event) {
+        if (event.target == copyrightModal) {
+          copyrightModal.style.display = "none";
+        }
+        if (event.target == privacyModal) {
+          privacyModal.style.display = "none";
+        }
+      }
+    </script>
+
+
+
+</footer>
+
+  <!-- <footer class="footer">
+    <div class="container">
+
+      <div class="footer-top">
+
+        <a href="#" class="logo">SwapReads</a>
+
+        <ul class="footer-list">
+
+          <li>
+            <a href="#home" class="footer-link">Home</a>
+          </li>
+
+          <li>
+            <a href="#benefits" class="footer-link">Benefits</a>
+          </li>
+
+          <li>
+            <a href="#chapters" class="footer-link">Literary Realms</a>
+          </li>
+
+          <li>
+            <a href="#pricing" class="footer-link">Pricing</a>
+          </li>
+
+
+          <li>
+            <a href="#reviews" class="footer-link">Reviews</a>
+          </li>
+
+          <li>
+            <a href="#contact" class="footer-link">Contact</a>
+          </li>
+
+        </ul>
+
+      </div>
+
+      <div class="footer-bottom">
+        <p class="copyright">
+          &copy; 2024 All rights reserved. Made with ❤ by Guardian Hackers.
+        </p>
+      </div>
+
+    </div>
+  </footer> -->
+
+
+  <!--Dark Mode-->
+
+  <script>
+    //function to toggle the like button
+    document.addEventListener("DOMContentLoaded", ()=>{
+      let hearts= document.querySelectorAll(".heart-icon");
+      hearts.forEach((heart)=>{
+        heart.addEventListener("click", ()=>{
+          heart.classList.toggle("text-blue-500");
+        })
+      })
+    });
+
+    // Function to toggle dark mode
+    function toggleDarkMode() {
+      const isDarkMode = isDarkModePreferred();
+      setDarkModePreference(!isDarkMode);
+      applyDarkModePreference();
+    }
+
+    // Function to apply dark mode preference
+    function applyDarkModePreference() {
+      const isDarkMode = isDarkModePreferred();
+      if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        document.getElementById('theme-icon').src = 'assets/images/icons8-sun.svg';
+      } else {
+        document.body.classList.remove('dark-mode');
+        document.getElementById('theme-icon').src = 'assets/images/moon_solid.svg';
+      }
+    }
+
+    // Function to set dark mode preference
+    document.addEventListener('DOMContentLoaded', () => {
+      const currentTheme = localStorage.getItem('theme');
+      const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
+
+      if (switchCheckbox) { // Check if switchCheckbox is not null
+        function applyDarkModeStyles() {
+          document.body.classList.remove('light-mode');
+          document.body.classList.add('dark-mode');
+        }
+
+        function applyLightModeStyles() {
+          document.body.classList.remove('dark-mode');
+          document.body.classList.add('light-mode');
+        }
+
+        if (currentTheme) {
+          if (currentTheme === 'dark-mode') {
+            applyDarkModeStyles();
+            switchCheckbox.checked = true;
+          } else {
+            applyLightModeStyles();
+          }
+        }
+
+        switchCheckbox.addEventListener('change', () => {
+          if (switchCheckbox.checked) {
+            applyDarkModeStyles();
+            localStorage.setItem('theme', 'dark-mode');
+          } else {
+            applyLightModeStyles();
+            localStorage.setItem('theme', 'light-mode');
+          }
+        });
+      } else {
+      console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
+    }
+  });
+  </script>
+
+
+
+  <!--
+    - custom js link
+  -->
+  <script src="./assets/js/script.js" defer></script>
+
+  <!--
+    - ionicon link
+  -->
+  <script src="./assets/js/scroll-reveal.js"></script>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+
+  <!-- Lenis smooth scrolling -->
+  <script>
+    document.addEventListener("scroll", function () {
+      var scrollPosition = window.scrollY;
+
+      // Get the top position of each section on the page
+      var homeSection = document.getElementById("home").offsetTop;
+      var benefitsSection = document.getElementById("benefits").offsetTop;
+      var chaptersSection = document.getElementById("chapters").offsetTop;
+      var pricingSection = document.getElementById("pricing").offsetTop;
+      var contactSection = document.getElementById("contact").offsetTop;
+
+      // Check which section the user has scrolled to and add the active class accordingly
+      if (scrollPosition < benefitsSection) {
+        setActiveLink("home");
+      } else if (scrollPosition >= benefitsSection && scrollPosition < chaptersSection) {
+        setActiveLink("benefits");
+      } else if (scrollPosition >= chaptersSection && scrollPosition < pricingSection) {
+        setActiveLink("chapters");
+      } else if (scrollPosition >= pricingSection && scrollPosition < contactSection) {
+        setActiveLink("pricing");
+      } else {
+        setActiveLink("contact");
+      }
+    });
+
+    function setActiveLink(sectionId) {
+      // Remove active class from all navbar links
+      var navbarLinks = document.querySelectorAll(".navbar-link");
+      navbarLinks.forEach(function (link) {
+        link.classList.remove("active");
+      });
+
+      // Add active class to the navbar link corresponding to the current section
+      var activeLink = document.querySelector('a[href="#' + sectionId + '"]');
+      if (activeLink) {
+        activeLink.classList.add("active");
+      }
+    }
+
+    const lenis = new Lenis({
+      duration: 1.8,
+      easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+      direction: "vertical",
+      gestureDirection: "vertical",
+      smooth: true,
+      smoothTouch: false,
+      touchMultiplier: 2,
+    });
+
+    function raf(time) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+    // JavaScript function to load more content when user scrolls to bottom
+    function loadMoreContent() {
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      var windowHeight = window.innerHeight;
+      var documentHeight = document.documentElement.scrollHeight;
+
+      // Check if user has scrolled to the bottom of the page
+      if (scrollTop + windowHeight >= documentHeight) {
+        // Make an AJAX request to fetch more content
+        // Replace 'more-content-url' with the actual URL to fetch more content
+        fetch('/index.html')
+          .then(response => response.text())
+          .then(data => {
+            // Append the fetched content to the page
+            document.getElementById('content-container').insertAdjacentHTML('beforeend', data);
+          })
+          .catch(error => console.error('Error fetching more content:', error));
+      }
+    }
+
+    // Event listener to trigger loadMoreContent function when user scrolls
+    window.addEventListener('scroll', loadMoreContent);
+
+
+
+  </script>
+  <script type="module">
+    import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
+
+    // Your web app's Firebase configuration
+    const firebaseConfig = {
+      apiKey: "AIzaSyCu2WXknNce_49J5BLuR1DyHm319hu6dWc",
+      authDomain: "login-13127.firebaseapp.com",
+      projectId: "login-13127",
+      storageBucket: "login-13127.appspot.com",
+      messagingSenderId: "151656578300",
+      appId: "1:151656578300:web:c67208ab6ec437c844ab79",
+      measurementId: "G-L3PPD58MZ8",
+    };
+
+    // Initialize Firebase
+    const app = initializeApp(firebaseConfig);
+    const auth = getAuth();
+
+    // Check authentication state and update navbar
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        document.getElementById("login-signup-link").style.display = "none";
+        document.getElementById("logout-link").style.display = "block";
+      } else {
+        document.getElementById("login-signup-link").style.display = "block";
+        document.getElementById("logout-link").style.display = "none";
+      }
+    });
+
+    // Logout function
+    document.getElementById("logout").addEventListener("click", (e) => {
+      e.preventDefault();
+      signOut(auth).then(() => {
+        alert("Logged out successfully.");
+      }).catch((error) => {
+        console.error("Logout error:", error);
+      });
+    });
+  </script>
+
+  <script src="vanilla-tilt.js"></script>
+  <script type="text/javascript">
+    (function (d, t) {
+      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
+      v.onload = function () {
+        window.voiceflow.chat.load({
+          verify: { projectID: '66448ea9c63c08981233b8f1' },
+          url: 'https://general-runtime.voiceflow.com',
+          versionID: 'production'
+        });
+      }
+      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
+    })(document, 'script');
+
+
+
+  </script>
+  <!-- Swiper JS -->
+<script src="assets/js/swiper-bundle.min.js"></script>
+<!-- Custom JavaScript -->
+
+<script src="assets/js/test-script.js"></script>
+<script src="scroll.js"></script>
+<script>
+const navbar=document.querySelector('.navbar'),
+NavButton=document.querySelector('.nav-toggle-btn'),
+open=document.querySelector('.open'),
+close=document.querySelector('.close');
+let count=0
+NavButton.addEventListener('click',()=>{
+      
+if(count===0){
+navbar.classList.remove('nav_activated')
+open.classList.add('close')
+close.classList.add('open')
+open.classList.remove('open')
+close.classList.remove('close')
+count++
+}
+else{
+navbar.classList.add('nav_activated')
+open.classList.add('open')
+close.classList.add('close')
+open.classList.remove('close')
+close.classList.remove('open')
+count=0
+}
+})
+</script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
index 036c0d244..b163839db 100644
--- a/index.html
+++ b/index.html
@@ -1074,7 +1074,7 @@ <h3 class="lithead">03. &nbsp;Mindful Living</h3>
 
             <li>
 
-              <a class="cardo" href="#">
+              <a class="cardo" href="Mystical-fantaies.html">
                 <h3 class="lithead">04. &nbsp;Mystical Fantasies</h3>
                 <p class="small"> Embark on fantastical journeys to magical realms with our captivating fantasy fiction
                   picks.</p>
