Merge pull request 'Added new page - Landing Page' (#390) from landing_page_1 into Refactor_Directory

Reviewed-on: #390
Merged

public/img/icons/inventory.svg

@@ -0,0 +1 @@
+<svg idth="64" height="64"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M0 142.1L0 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-240c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32l0 240c0 17.7 14.3 32 32 32s32-14.3 32-32l0-337.9c0-27.5-17.6-52-43.8-60.7L303.2 5.1c-9.9-3.3-20.5-3.3-30.4 0L43.8 81.4C17.6 90.1 0 114.6 0 142.1zM464 256l-352 0 0 64 352 0 0-64zM112 416l352 0 0-64-352 0 0 64zm352 32l-352 0 0 64 352 0 0-64z"/></svg>

src/pages/Home/LandingPage.css

@@ -1,6 +1,10 @@
 .section-py {
   padding: 6.25rem 0;
 }
+
+.section-py .heading {
+  font-size: 1.625rem;
+}
 @media (max-width: 1199.98px) {
   .section-py {
     padding: 4rem 0;
@@ -53,6 +57,7 @@
 nav.layout-navbar {
   /* backdrop-filter: unset; */
   /* background-color: transparent !important; */
+  background-color: rgba(214, 36, 33, 0.88) !important;
 }
 
 nav.layout-navbar::before {
@@ -303,10 +308,10 @@ nav.layout-navbar.navbar-active::after {
   opacity: 1;
 }
 .landing-footer .footer-top {
-  padding-top: 3.3rem;
-  padding-bottom: 2.3rem;
-  border-top-left-radius: 3.75rem;
-  border-top-right-radius: 3.75rem;
+  padding-top: 1.3rem;
+  padding-bottom: 1.3rem;
+  border-top-left-radius: 1.75rem;
+  border-top-right-radius: 1.75rem;
 }
 @media (max-width: 767.98px) {
   .landing-footer .footer-top {
@@ -355,7 +360,7 @@ nav.layout-navbar.navbar-active::after {
 
 .landing-hero {
   border-radius: 0 0 3.5rem 3.5rem;
-  padding-top: 10.2rem;
+  padding-top: 8.2rem;
 }
 .landing-hero::after {
   content: "";
@@ -368,7 +373,8 @@ nav.layout-navbar.navbar-active::after {
 }
 @media (min-width: 992px) {
   .landing-hero .hero-text-box {
-    max-width: 34.375rem;
+    /* max-width: 34.375rem; */
+    max-width: 70%;
     margin: 0 auto;
   }
 }
@@ -628,12 +634,12 @@ nav.layout-navbar.navbar-active::after {
 .swiper {
   width: 100%;
   height: 100%;
+  border-radius: 10px;
 }
 
 .swiper-slide {
   text-align: center;
   font-size: 18px;
-  background: #444;
 
   /* Center slide text vertically */
   display: flex;

src/pages/Home/SwaperBlogContent.jsx

@@ -0,0 +1,47 @@
+const SwaperBlogContent = ({
+  ImageUrl = "",
+  Title = "",
+  Body = "",
+  ContentAlign = "right",
+}) => {
+  return (
+    <div class="swiper-slide">
+      <div class="card h-100">
+        <div class="card-body text-body d-flex flex-column justify-content-between h-100">
+          <div class="mb-4">
+            <img
+              src={ImageUrl}
+              alt="client logo"
+              class="client-logo img-fluid"
+              style={{ width: "580px", height: "100px" }}
+            />
+            <h5>{Title}</h5>
+          </div>
+          <p>{Body}</p>
+          <div class="text-warning mb-4">
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+            <i class="bx bxs-star"></i>
+          </div>
+          <div class="d-flex align-items-center">
+            <div class="avatar me-3 avatar-sm">
+              <img
+                src="../../assets/img/avatars/1.png"
+                alt="Avatar"
+                class="rounded-circle"
+              />
+            </div>
+            <div>
+              <h6 class="mb-0">Cecilia Payne</h6>
+              <p class="small text-muted mb-0">CEO of Airbnb</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SwaperBlogContent;

src/pages/Home/SwaperSlideContent.jsx

@@ -0,0 +1,59 @@
+const SwaperSlideContent = ({
+  ImageUrl = "",
+  Title = "",
+  Body = "",
+  ContentAlign = "right",
+}) => {
+  return (
+    <div className="container-fluid p-0">
+      <div
+        className="position-relative text-center text-white"
+        style={{
+          background: `url('${ImageUrl}') center center/cover no-repeat`,
+          height: "500px",
+        }}
+      >
+        {/* Overlay */}
+        <div
+          className="position-absolute top-0 start-0 w-100 h-100"
+          style={{
+            background:
+              "linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1))",
+          }}
+        ></div>
+
+        {/* Text Content */}
+        <div
+          className={
+            "position-absolute top-50  p-5 " +
+            (ContentAlign == "left"
+              ? "start-0  text-start ps-10 ms-10"
+              : "start-50  text-end pe-10 me-10")
+          }
+          style={{
+            borderRadius: "10px",
+            background:
+              "linear-gradient(to bottom, rgba(194, 216, 237,1), rgba(194, 216, 237,0.8))",
+            boxShadow: "10px 10px 15px rgba(0, 0, 0, 0.4)",
+          }}
+        >
+          <h1
+            className="fw-bold text-primary hero-title display-6 fw-extrabold"
+            style={{ color: "#fff" }}
+          >
+            {Title}
+          </h1>
+          <p className="lead fw-bold">{Body}</p>
+          {/* <a
+                                href="#services"
+                                className="btn btn-primary btn-lg mt-3"
+                              >
+                                Get Started
+                              </a> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SwaperSlideContent;

src/router/AppRoutes.jsx

@@ -53,7 +53,7 @@ const router = createBrowserRouter(
   [
     {
       path: "/",
-      element: <RootRedirect />,
+      element: <LandingPage />,
     },
     {
       element: <AuthLayout />,