new changes for the adaptations menu

.env

@@ -1,4 +1,10 @@
 NEXT_PUBLIC_RW_MAPBOX_API_TOKEN=pk.eyJ1IjoicmVzb3VyY2V3YXRjaCIsImEiOiJja3l0dDBwc3YxaDN1Mm5waGlmOHhvZDVjIn0.WXsHcQLFZb49na4pT8AA_Q
 NEXT_PUBLIC_WRI_API_URL=https://api.resourcewatch.org/
 NEXT_PUBLIC_APPLICATIONS=crt
-NEXT_PUBLIC_MAPBOX_GEOCODE_API_URL=https://api.mapbox.com/geocoding/v5/mapbox.places/
+NEXT_PUBLIC_MAPBOX_GEOCODE_API_URL=https://api.mapbox.com/geocoding/v5/mapbox.places/
+
+
+
+# NEXT_PUBLIC_base_api_url = http://terra-web.irepo.in:5058/api
+# NEXT_PUBLIC_base_image_url= http://terra-web.irepo.in:5058/uploads
+# NEXT_PUBLIC_image_domain= http://terra-web.irepo.in:5058

css/_base.scss

@@ -1,7 +1,12 @@
 @use 'sass:math';
 
+html {
+  scroll-behavior: auto !important;
+}
+
 html,
 body {
+
   &.-no-scroll,
   &.no-scroll {
     width: 100%;
@@ -22,6 +27,7 @@ hr {
 a {
   color: $charcoal-grey;
   text-decoration: none;
+
   &:hover {
     text-decoration: underline;
   }
@@ -52,7 +58,7 @@ h4 {
   margin-top: 0;
   color: $primary-green;
 
-  & > a {
+  &>a {
     color: $primary-green;
   }
 }
@@ -89,15 +95,15 @@ h4 {
   margin-bottom: 1rem;
   line-height: 1.3;
 
-  & > a {
+  &>a {
     color: $charcoal-grey;
   }
 }
 
 p {
   margin-top: 0;
 
-  > a {
+  >a {
     color: $sea-blue;
     text-decoration: underline;
   }
@@ -158,15 +164,81 @@ textarea {
   }
 
   h2 {
-    font-size: $font-size-h2;
+    font-size: $font-size-h2;font-weight: 500;
+    @media screen and (max-width:767px){font-size: 28px;margin-bottom:18px;font-weight:500;font-family:Lato;}
   }
 
   h3 {
     font-size: $font-size-h3;
-    font-weight: 300;
+    font-weight: 500;
   }
 
   h4 {
     font-size: $font-size-medium;
   }
 }
+
+
+.c-intro-header {
+  .visual-container {
+    .image-container {
+      span {
+        height: 88vh !important;
+        @media screen and (max-width:767px){height: 55vh !important;}
+      }
+    }
+
+    .blob-container {
+      span {
+        height: 95vh !important;
+        @media screen and (max-width:767px){  height: 60vh !important;}
+      }
+    }
+  }
+  p{font-family: Lato;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;opacity: 0.7;color: rgba(51, 51, 51, 1);}
+}
+
+.c-intro-header{position: relative;
+  .chevron_btn{left: 50%;position: absolute;cursor: pointer;transition: opacity 0.3s ease-in-out;transform: translateX(-50%);bottom: 20px;z-index: 100;
+    @media screen and (max-width:767px){bottom: -57px;}
+    .scroll_btn{position: relative;font-family: Lato;background: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;color:rgba(0, 0, 0, 1);border: 1px solid rgba(51, 51, 51, 0.1);box-shadow: 0px 25px 60px -15px rgba(16, 24, 40, 0.1); padding: 10px 43px 10px 18px;border-radius:10px;
+    &::after{ background-image: url(../public/images/chevron_down.svg);
+      position: absolute;width: 24px;
+      height: 24px;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      right: 0px;
+      transform: translateX(-50%);bottom: 9px;z-index: 1;content: "";}
+    }
+ }
+
+}
+.l-home{
+    .chevron_btn{bottom: 45px;}
+}
+
+
+
+.chevron_btn.scrolled {
+  opacity: 0;
+  pointer-events: none; 
+}
+
+
+.breadcrumb{
+  .breadcrumb-item{font-family: Lato;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;color: rgba(51, 51, 51, 1);
+    opacity: 0.7;
+    &.active{
+      font-weight: 700;
+    }
+}
+}

css/components/ui/compound_menu.scss

@@ -18,7 +18,7 @@
     // }
   }
 
-  .submenu {
+  .subMenu {
     padding: 0;
     margin: 0 0 $margin-size 0;
     list-style: none;
@@ -32,6 +32,7 @@
       line-height: 35px;
       letter-spacing: -0.46428561210632324px;
       text-align: left;
+      h3{margin-bottom: 24px;font-weight: 700;}
     }
 
     .item {

css/index.scss

@@ -308,3 +308,13 @@
     vertical-align: initial;
   }
 }
+
+
+@import '/layout/adaptation/style';
+@import '/layout/adaptation/methodology/style';
+@import '/layout/adaptation/howToUse/style';
+@import '/layout/adaptation/exploreAdapt/style';
+@import 'bootstrap/dist/css/bootstrap.min.css';
+
+// @import '/layout/inputAndProduction/style';
+@import '/layout/adaptation/2025update/styles'

css/layouts/_page.scss

@@ -12,6 +12,7 @@
 .l-page {
   background-color: $white;
   width: 100%;
+  overflow-x: hidden;
 
   @media screen and (min-width: map-get($breakpoints, medium)) {
     overflow: hidden;

layout/about/_styles.scss

@@ -1,6 +1,7 @@
 .l-about {
   @media screen and (min-width: map-get($breakpoints, small)) {
     margin: 0 $margin-size-small 172px;
+    @media screen and (max-width:767px){padding-bottom: 64px;margin:0;}
 
     .c-intro-header {
       margin: 0 $margin-size-small * -1;

layout/about/component.tsx

@@ -12,7 +12,7 @@ const LayoutAbout = () => {
 
   return (
     <Layout>
-      <div className="l-about">
+      <div className="l-about chevron_next_div">
         <IntroHeader {...ABOUT} />
         <div className="c-about-body">
           <div className="l-container">

layout/adaptation/2025update/_styles.scss

@@ -0,0 +1,13 @@
+.update2025{padding-bottom: 73px;
+  @media screen and (max-width:767px){padding-bottom: 56px;}
+  h2{font-family: Lato;
+    font-size: 36px;
+    font-weight: 500;
+    line-height: 43.2px;color: #266510; 
+    @media screen and (max-width:767px){font-size:24px;line-height:28.8px;}
+  }
+    p{font-family: Lato;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;width: 100%;}
+}

layout/adaptation/2025update/component.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import Image from 'next/image';
+import axios from 'axios';
+
+const update = ({ data, error }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t } = useTranslation(['adaptation']);
+
+  if (error) {
+    return <div>{t('Failed to load data')}</div>; // Show an error message if something went wrong
+  }
+
+
+
+  return (
+    <div className="update2025">
+      <div className="adapt_container">
+        <h2>{t(data.Year_update.Title)}</h2>
+
+            <p className="explore_p" dangerouslySetInnerHTML={{ __html: t(data.Year_update.Description).replace(/\n/g, '<br>') }}></p>
+
+
+      </div>
+    </div>
+  );
+};
+
+
+
+export default update;

layout/adaptation/_style.scss

@@ -0,0 +1,8 @@
+.adaptation_intro{
+  .image-container{
+         .image{mask: unset;}
+    } 
+}
+
+.adapt_container{max-width: 1051px;width: 100%;padding: 0 10px;margin: 0 auto;
+  @media screen and (max-width:767px){padding: 0 20px;}}

layout/adaptation/component.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import Layout from 'layout/layout/layout-app';
+import MethodologyLayout from './methodology/component';
+import HowToUseLayout from './howToUse/component';
+import ExploreAdapt from './exploreAdapt/component';
+import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
+import Update from './2025update/component';
+import adaptBlob from 'public/images/adaptation/adapt-vector.png';
+import adaptImage from 'public/images/adaptation/banner_images/banner_adapt.png';
+
+
+const LayoutAdapt = ({ data, error }) => {
+   const { t } = useTranslation(['adaptation']);
+   const [isScrolled, setIsScrolled] = useState(false);
+
+   const handleScroll = () => {
+     const bannerDiv = document.querySelector('.chevron_next_div');
+     if (bannerDiv) {
+       const nextSection = bannerDiv.nextElementSibling;
+       if (nextSection) {
+         nextSection.scrollIntoView({ behavior: 'smooth' });
+       }
+     }
+   };
+
+   useEffect(() => {
+     const handleWindowScroll = () => {
+       const scrolled = window.scrollY > 100;  // Change this value to adjust when the class is added
+       setIsScrolled(scrolled);
+     };
+
+     window.addEventListener('scroll', handleWindowScroll);
+
+     return () => {
+       window.removeEventListener('scroll', handleWindowScroll);
+     };
+   }, []);
+
+   return (
+     <Layout>
+       <div className="adaptation_intro chevron_next_div ">
+         <div className="l-about">
+           <div className="c-intro-header">
+             <div className={`chevron_btn ${isScrolled ? 'scrolled' : ''}`} onClick={handleScroll}>
+              <div className='scroll_btn'>Scroll down</div>
+             </div>
+             <div className="visual-container -right">
+               <div className="image-container -adaptation">
+                 <Image
+                   alt="banner"
+                   loader={({ src }) => src}
+                   src={adaptImage}
+                   width={590}
+                   height={723}
+                   className="image"
+                 />
+               </div>
+               <div className="blob-container">
+                 <Image
+                   alt="blob"
+                   loader={({ src }) => src}
+                   src={adaptBlob} 
+                   width={800}
+                   height={790}
+                   className="image"
+                 />
+               </div>
+             </div>
+             <div className="c-content">
+               <div className="l-container">
+                 <div className="row">
+                   <div className="column small-12">
+                     <div className="info-container -adaptation">
+                       <h2>{t(data.Seo_details.Meta_title)} </h2>
+                       <p className="description">{t(data.Seo_details.Meta_description)} </p>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+
+       <MethodologyLayout data={data} />
+       <HowToUseLayout data={data} />
+       <ExploreAdapt data={data} error={error} />
+       <Update data={data} error={error} />
+
+     </Layout>
+   );
+};
+
+
+
+export default LayoutAdapt;