worked on the track_record

src/Training/v37_RBT_Bootstrap_next/src/app/components/affilite/Affilite.tsx

+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import Image from "next/image";
+import styles from "./affilite.module.scss";
+
+const flowCards = [
+  {
+    imgSrc: "/v37-1.png",
+    alt: "Leveraging groundbreaking",
+    text: "Leveraging groundbreaking Land O'Lakes technologies to deliver impact globally",
+  },
+  {
+    imgSrc: "/v37-2.png",
+    alt: "Partnering with Land O'Lakes",
+    text: "Partnering with Land O'Lakes to scale solutions worldwide",
+  },
+  {
+    imgSrc: "/v37-3.png",
+    alt: "Leveraging world-class",
+    text: "Leveraging world-class expertise to enhance agricultural productivity",
+  },
+  {
+    imgSrc: "/v37-4.png",
+    alt: "Access to cutting-edge agricultural",
+    text: "Access to cutting-edge agricultural innovations for sustainable growth",
+  },
+];
+
+const Affilite: React.FC = () => {
+  return (
+    <section className={`${styles.affilite} sec-pad`}>
+      <Container>
+        <div className="text-center">
+          <h2 className="text-uppercase">WE ARE AN AFFILIATE OF</h2>
+          <Image src="/lol_logo.png" alt="logo" width={218} height={32} className="img-fluid" />
+        </div>
+        <h6 className={`${styles.sub_title} text-center`}>
+          THROUGH OUR STRATEGIC PARTNERSHIP WITH LAND O’ LAKES, INC. WE ARE:
+        </h6>
+        <Row className="flow-cards">
+          {flowCards.map((card, index) => (
+            <Col key={index} md={6} lg={3} className={styles.flow_card}>
+              <Image
+                src={card.imgSrc}
+                alt={card.alt}
+                width={200}
+                height={200}
+                className={styles.flow_card__img}
+              />
+              <p>{card.text}</p>
+            </Col>
+          ))}
+        </Row>
+      </Container>
+    </section>
+  );
+};
+
+export default Affilite;

src/Training/v37_RBT_Bootstrap_next/src/app/components/affilite/affilite.module.scss

+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import "../../scss/helpers/variables";
+@import "../../scss/helpers/mixins";
+
+.affilite {   
+    &:global(.sec-pad){
+        padding-bottom: 0;
+        padding-top: em-calc(72);
+        @include media-breakpoint-up(md) {
+            padding-top: em-calc(80);
+        }
+    
+        @include media-breakpoint-up(xl) {
+            padding-top: em-calc(180);
+        }
+    }
+
+    .sub_title {
+        font-size: em-calc(16);
+        line-height: em-calc(20);
+        font-weight: 900;
+        margin-top: em-calc(60);
+        margin-bottom: em-calc(73);
+
+        @include media-breakpoint-up(md) {
+            margin-top: em-calc(80);
+            font-weight: 500;
+            margin-top: em-calc(55);
+            margin-bottom: em-calc(77);
+        }
+
+        @include media-breakpoint-up(xl) {
+            margin-top: em-calc(100);
+            margin-bottom: em-calc(50);
+        }
+    }
+    .flow_card {
+        text-align: center;
+        font-weight: 800;
+        color: $secondary;
+        padding: 0 1.5rem;
+        margin-bottom: em-calc(56);
+        &:last-child {
+            margin-bottom: em-calc(103);        
+        }
+        @include media-breakpoint-up(xl) {
+            margin-bottom: em-calc(103);
+        }
+    
+    
+        &__img {
+            max-width: 200px;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            margin-bottom: em-calc(20);
+        }
+    
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+}

src/Training/v37_RBT_Bootstrap_next/src/app/components/by_the_numbers/ByTheNumbers.tsx

+"use client";
+import React, { useEffect, useRef } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import gsap from "gsap";
+import styles from "./by_the-numbers.module.scss"
+
+const ByTheNumbers: React.FC = () => {
+  const countRefs = useRef<(HTMLSpanElement | null)[]>([]);
+
+  useEffect(() => {
+    countRefs.current.forEach((el) => {
+      if (el) {
+        gsap.fromTo(
+          el,
+          { innerText: 0 },
+          {
+            innerText: el.getAttribute("data-count"),
+            duration: 2,
+            ease: "power1.out",
+            snap: { innerText: 1 }, // Ensures numbers update smoothly
+          }
+        );
+      }
+    });
+  }, []);
+
+  return (
+    <section className={`${styles.count_section} gray-bg sec-pad`}>
+      {/* Background Pattern */}
+      <div
+        className={`${styles.bg_pattren} bg-pattren`}
+        style={{
+          backgroundImage: `url('/dots-pattern-tan.webp')`,
+        }}
+      ></div>
+
+      <Container>
+        <h3 className={`${styles.title} text-center`}>2023 BY THE NUMBERS</h3>
+        <Row className="justify-content-center">
+          <Col md={11}>
+            <Row className="g-4">
+            {[{ count: "400", label: "People Assisted", suffix: "M" },
+                { count: "700", label: "Jobs Created", suffix: "+" },
+                { count: "1200", label: "Enterprises Supported", suffix: "+" }]
+                .map((item, index) => (
+                  <Col md={4} key={index}>
+                    <div className={styles.count_item}>
+                      <div className={styles.count}>
+                      <div className={styles.count__number}>
+                        <span
+                          ref={(el) => {
+                            countRefs.current[index] = el;
+                          }}
+                          data-count={item.count}
+                        >
+                          0
+                        </span>
+                        {item.suffix}
+                      </div>
+                      <div className={styles.count__label}>{item.label}</div>
+                      </div>
+                    </div>
+                  </Col>
+              ))}
+            </Row>
+          </Col>
+        </Row>
+      </Container>
+    </section>
+  );
+};
+
+export default ByTheNumbers;

src/Training/v37_RBT_Bootstrap_next/src/app/components/by_the_numbers/by_the-numbers.module.scss

+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/mixins";
+@import "../../scss/helpers/variables";
+@import "../../scss/helpers/mixins";
+
+.count_section {
+  position: relative;
+  z-index: 2;
+
+  .title {
+    margin-bottom: 2rem;
+  }
+
+  .bg_pattren {
+    width: 100%;
+    height: 140%;
+    position: absolute;
+    z-index: -1;
+    top: -20%;
+    left: 0;
+    background-size: cover;
+    opacity: 0.2;
+    @include media-breakpoint-between(sm, md) {
+      height: 114%;
+      top: -8%;
+    }
+    @include media-breakpoint-down(sm) {
+      height: 110%;
+      top: -5%;
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    padding-top: em-calc(50);
+    padding-bottom: em-calc(100);
+  }
+
+  .count_item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+
+    @include media-breakpoint-down(sm) {
+      &:last-child {
+        .count {
+          margin-bottom: em-calc(60);
+        }
+      }
+    }
+  }
+
+  .count {
+    text-align: center;
+    font-weight: bold;
+    display: inline-block;
+    margin-bottom: em-calc(90);
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: em-calc(20);
+    }
+
+    &__number {
+      font-size: em-calc(50);
+      line-height: 1.2;
+
+      @include media-breakpoint-up(md) {
+        font-size: em-calc(44);
+      }
+
+      @include media-breakpoint-up(xl) {
+        font-size: em-calc(80);
+        line-height: 1.1;
+        letter-spacing: -2px;
+      }
+    }
+
+    &__label {
+      font-size: em-calc(18);
+      color: $warning;
+      position: relative;
+      z-index: 1;
+
+      @include media-breakpoint-up(xl) {
+        font-size: em-calc(24);
+      }
+
+      &.gray {
+        color: $dark-black;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        min-width: em-calc(130);
+        height: 5px;
+        z-index: 2;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        bottom: -20px;
+        background-color: $warning;
+        border-radius: 8px;
+      }
+    }
+  }
+}

src/Training/v37_RBT_Bootstrap_next/src/app/components/climate_smart/ClimateSmart.tsx

+"use client"
+import { useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import "./climate_smart.scss";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface AccordionItem {
+  title: string;
+  content: string;
+  bgColor: string;
+  color: string;
+}
+
+interface SlidesImg {
+  bgY: string;
+  halfCircle: string;
+  orbitFigure: string;
+}
+
+const ClimateSmartSection: React.FC = () => {
+  const accordionData: AccordionItem[] = [
+    { title: "Livestock Systems", content: "We strengthen livestock systems ...", bgColor: "#974513", color: "red_bg" },
+    { title: "Women, Children, and Families", content: "We take an integrated approach ...", bgColor: "#958D74", color: "gray_bg" },
+    { title: "Food Safety and Trade", content: "We work alongside governments ...", bgColor: "#DB6B27", color: "orange_bg" },
+    { title: "Sustainable Agriculture", content: "We align our work with country-level ...", bgColor: "#02AFAC", color: "teal_bg" },
+    { title: "Market Systems", content: "By advancing market systems ...", bgColor: "#1D7149", color: "green_bg" },
+  ];
+
+  const slides: SlidesImg[] = [
+    { bgY: "/v37-flower-pattern.png", halfCircle: "/homepage-technical-expertise-climatesmart-agriculture-background.png", orbitFigure: "/homepage-technical-expertise-livestock-systems_2.png" },
+    { bgY: "/v37-flower-pattern.png", halfCircle: "/homepage-technical-expertise-climatesmart-agriculture-background.png", orbitFigure: "/homepage-technical-expertise-gender-youth-and-social-inclusion_1.png" },
+    { bgY: "/v37-flower-pattern.png", halfCircle: "/homepage-technical-expertise-climatesmart-agriculture-background.png", orbitFigure: "/homepage-technical-expertise-food-safety-and-trade.png" },
+    { bgY: "/v37-flower-pattern.png", halfCircle: "/homepage-technical-expertise-climatesmart-agriculture-background.png", orbitFigure: "/homepage-technical-expertise-climatesmart-agriculture.png" },
+    { bgY: "/v37-flower-pattern.png", halfCircle: "/homepage-technical-expertise-climatesmart-agriculture-background.png", orbitFigure: "/homepage-technical-expertise-market-systems.png" },
+  ];
+
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      const section = document.querySelector(".climate_smart") as HTMLElement;
+      const sectionHeight = section.offsetHeight;
+      const sectionTop = section.offsetTop;
+
+      // Calculate the scroll ratio directly
+      const scrollRatio = Math.min(1, (scrollPosition - sectionTop) / sectionHeight);
+      const newIndex = Math.floor(scrollRatio * (accordionData.length - 1));
+
+      if (newIndex !== activeIndex) {
+        setActiveIndex(newIndex);
+        updateDataBg(newIndex);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [activeIndex, accordionData.length]);
+
+  const updateDataBg = (index: number) => {
+    const section = document.querySelector(".climate_smart") as HTMLElement;
+    if (section && accordionData[index]) {
+      section.setAttribute("data-bg", accordionData[index].color);
+    }
+  };
+
+  useEffect(() => {
+    // Fix the section to the screen when it reaches the viewport
+    ScrollTrigger.create({
+      trigger: ".process",
+      start: "top top",
+      end: "bottom+=100% bottom",
+      pin: true,
+      scrub: 0.5, // Smooth scroll effect as you move
+      onEnter: () => console.log("Entering section"),
+      onLeave: () => {
+        setActiveIndex(accordionData.length - 1); // Ensure last item is active when leaving
+        updateDataBg(accordionData.length - 1);
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  const handlePaginationClick = (index: number) => {
+    const targetElement = document.querySelector(`.accordion-item-${index}`);
+    if (targetElement) {
+      const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY - 100;
+      window.scrollTo({ top: offsetTop, behavior: "smooth" });
+    }
+    setActiveIndex(index);
+    updateDataBg(index);
+  };
+
+  return (
+    <section className="climate_smart">
+      <div className="bg_img_placeholder" style={{ backgroundImage: "url('/v37-green-pattern.jpg')" }}></div>
+      <Container fluid>
+        <div className="process">
+          <div className="process__item">
+            <div className="process__item__left sec-pad">
+              <div className="heading_label">OUR TECHNICAL EXPERTISE</div>
+              <nav className="pagination">
+                {accordionData.map((_, index) => (
+                  <a
+                    key={index}
+                    href={`#accordion-item-${index}`}
+                    className={`pagination_bullet ${activeIndex === index ? "active" : ""}`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handlePaginationClick(index);
+                    }}
+                  />
+                ))}
+              </nav>
+              <div className="d-flex align-center h-100">
+                <div className="technical_slider_left">
+                  {accordionData.map((data, index) => (
+                    <div
+                      key={index}
+                      id={`accordion-item-${index}`}
+                      className={`gsap_accordion_item accordion-item-${index} ${activeIndex === index ? "active" : ""}`}
+                      data-tea={data.color}
+                    >
+                      <h2>{data.title}</h2>
+                      <div className="hide_content">
+                        <p>{data.content}</p>
+                        <button className="hollow button white secondary">Learn More</button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="process__item__right">
+              <div className="technical_slider_right">
+                <div className="slider_imgs h-100">
+                  {slides.map((slide, index) => (
+                    <div key={index} className={`slider_img ${activeIndex === index ? "active" : ""}`}>
+                      <div className="bg_y_container">
+                        <div className="bg_pattern_y" style={{ backgroundImage: `url(${slide.bgY})` }} />
+                      </div>
+                      <div className="half_circle_img">
+                        <img src={slide.halfCircle} className="orbit_image" alt="Half Circle" />
+                      </div>
+                      <figure className="orbit_figure">
+                        <img src={slide.orbitFigure} className="orbit_image" alt="Orbit Circle" />
+                      </figure>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <div className="white-bg bg_patterns">
+        <div className="bg_img_placeholder" style={{ backgroundImage: "url('/v37-green-pattern.jpg')" }}></div>
+        <div className="bg_img_placeholder" style={{ backgroundImage: "url('/v37-green-pattern.jpg')" }}></div>
+      </div>
+    </section>
+  );
+};
+
+export default ClimateSmartSection;

src/Training/v37_RBT_Bootstrap_next/src/app/components/climate_smart/climate_smart.scss

+@import "../../scss/helpers/variables";
+@import "../../scss/helpers/mixins";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+.climate_smart {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  transition: background-color 1s ease-in-out;
+  color: #fff;
+
+  .bg_pattern_x {
+    background-size: cover;
+    height: em-calc(100);
+
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+
+  .process {
+    &__item {
+      // display: flex;
+      padding: em-calc(0 0);
+      max-width: 1640px;
+      margin: 0 auto;
+      width: 100%;
+      height: 100vh;
+      display: flex;
+      flex-flow: row nowrap;
+
+      &__left {
+        @include media-breakpoint-up(md) {
+          width: 60%;
+        }
+
+        .technical_slider_left {
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: flex-start;
+          justify-content: center;
+        }
+      }
+
+      &__right {
+        width: calc(40%);
+        // margin-right: em-calc();
+        position: relative;
+
+        @include media-breakpoint-up(lg) {
+          width: calc(40% + 180px);
+          margin-right: em-calc(-180);
+        }
+
+        @include media-breakpoint-up(xl) {
+          width: calc(40% + 130px);
+          margin-right: em-calc(-130);
+        }
+
+        @include media-breakpoint-up(xxl) {
+          width: calc(40%);
+          margin-right: 0;
+        }
+
+        .bg_y_container {
+          @include media-breakpoint-up(md) {
+            position: absolute;
+            top: -4%;
+            z-index: -1;
+            left: 20%;
+            width: 80%;
+            height: 110%;
+          }
+
+          @include media-breakpoint-up(lg) {
+            right: em-calc(0);
+            width: 100%;
+          }
+
+          .bg_pattern_y {
+            background-size: contain;
+            width: auto;
+            height: 100%;
+            background-position-x: right;
+            background-repeat: repeat-y;
+
+            // @include media-breakpoint-up(sm) {
+            //   background-image: none !important;
+            // }
+          }
+        }
+
+        .technical_slider_right {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+        }
+
+        .slider_img {
+          position: relative;
+          z-index: 1;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          height: 100%;
+
+          @include media-breakpoint-up(md) {
+            position: absolute;
+            left: 0;
+            opacity: 0;
+            width: 100%;
+
+            &.active {
+              opacity: 1;
+            }
+          }
+
+          // @include media-breakpoint-up(sm) {
+          //   display: none;
+          // }
+
+          @include media-breakpoint-up(md) {
+            position: absolute;
+            // width: em-calc(400);
+            height: 100%;
+            align-items: flex-end;
+            left: auto;
+            bottom: 0;
+          }
+
+          .orbit_figure {
+            // width: 100%;
+            @include media-breakpoint-up(md) {
+              width: auto;
+              height: 100%;
+              display: flex;
+              align-items: flex-end;
+            }
+
+            // @media(min-width: 1024px){
+
+            // }
+
+            .orbit_image {
+              // height: 100%;
+              // width: auto;
+              // height: auto;
+              // max-height: 100%;
+              @include media-breakpoint-up(md) {
+                width: auto;
+                max-width: inherit;
+                height: 70%;
+              }
+
+              @include media-breakpoint-up(lg) {
+                height: 100%;
+              }
+            }
+          }
+
+          .half_circle_img {
+            position: absolute;
+            left: 25%;
+            bottom: 0%;
+            max-width: em-calc(480);
+            width: 100%;
+            z-index: -1;
+            height: 60%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            @include media-breakpoint-up(lg) {
+              width: 50%;
+              height: 80%;
+            }
+
+            .orbit_image {
+              height: 100%;
+              width: auto;
+            }
+          }
+        }
+
+        .bg_img_placeholder {
+          position: relative;
+          z-index: 1;
+
+          @include media-breakpoint-up(lg) {
+            right: -176px;
+          }
+        }
+      }
+
+      .sec_pad {
+        padding: em-calc(40 16);
+      }
+
+      .gsap_accordion_item {
+        margin-bottom: em-calc(16) !important;
+
+        @include media-breakpoint-up(md) {
+          margin-bottom: em-calc(25) !important;
+        }
+
+        &:not(.active) {
+          h2 {
+            color: $primary;
+            margin-bottom: 0;
+          }
+
+          .hide_content {
+            height: 0;
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .heading_label {
+    margin-bottom: em-calc(16);
+  }
+
+  p,
+  .heading_label {    
+    color: inherit;
+    @include media-breakpoint-up(xl) {
+      font-size: em-calc(18);
+    }
+  }
+
+  h2 {
+    font-size: em-calc(26);
+    color: inherit;
+
+    @include media-breakpoint-up(md) {
+      font-size: em-calc(34);
+    }
+
+    @include media-breakpoint-up(xl) {
+      font-size: em-calc(54);
+    }
+
+    @media screen and (max-height: 500px) and (min-width: 1200px) {
+      font-size: em-calc(22);
+    }
+
+    @media screen and (max-height: 800px) and (min-width: 1200px) {
+      font-size: em-calc(40);
+    }
+
+    @media screen and (min-height: 801px) and (min-width: 1200px) {
+      font-size: em-calc(54);
+    }
+  }
+
+  .bg_patterns {
+    position: relative;
+    z-index: 1;
+  }
+
+  &[data-bg="teal_bg"] {
+    background-color: #02afac;
+
+    .gsap_accordion_item {
+      &:not(.active) {
+        .hide_content {
+          height: 0 !important;
+        }
+
+        h2 {
+          color: #0f4e56;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &[data-bg="orange_bg"] {
+    background-color: #db6b27;
+
+    .gsap_accordion_item {
+      &:not(.active) {
+        h2 {
+          color: #8f2f0e;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &[data-bg="gray_bg"] {
+    background-color: #958d74;
+
+    .gsap_accordion_item {
+      &:not(.active) {
+        h2 {
+          color: #616156;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &[data-bg="red_bg"] {
+    background-color: #974513;
+
+    .gsap_accordion_item {
+      &:not(.active) {
+        h2 {
+          color: #5a1403;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &[data-bg="green_bg"] {
+    background-color: #1d7149;
+
+    .gsap_accordion_item {
+      &:not(.active) {
+        h2 {
+          color: #0f4128;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  .pagination{
+    margin-left: 0;
+    margin-bottom: 1rem;
+    display: flex;
+    gap: 25px;
+    &_bullet {
+        display: block;
+        border-radius: 4em;
+        color: #0a0a0a;
+        width: 10px;
+        height: 10px;
+        border-radius: 10px;
+        background-color: #ffffff;
+        cursor: pointer;
+        padding: 0 ;
+        transition: width 0.5s ease;
+        &.active{
+            width: 50px;
+        }
+      }
+  }
+}

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/card/ProjectCard.tsx

+"use client";
+import React from "react";
+import { Card, Button } from "react-bootstrap";
+import Image from "next/image";
+// import styles from "./project_card.module.scss";
+import "./project_card.scss";
+
+// Define the type for a project
+interface Project {
+  id: number;
+  cardClass?:string;
+  image?: string;
+  title?: string;
+  tags?: string;
+  status?: string;
+  link?: string;
+  alignment?:string;
+}
+
+// Props type
+interface ProjectCardProps {
+  project: Project;
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
+  // If no valid project data is provided, do not render the card
+  if (!project || !project.id || !project.title || !project.image) {
+    return null;
+  }
+
+  return (
+    <Card className={project.cardClass}>
+      <div className="img-placeholder">
+        {project.status && (
+          <span className="badge">
+            {project.status}
+          </span>
+        )}
+        {project.image && (
+        <Image
+          src={project.image}
+          alt={project.title}
+          width={400}
+          height={250}
+          className="img-fluid"
+        />
+        )}
+      </div>
+      <Card.Body className={project.alignment}>
+        {project.tags && <h6 className="heading-label">{project.tags}</h6>}
+        {project.title && <h3>{project.title}</h3>}        
+        {project.link && (
+          <Button variant="primary" className="w-100" href={project.link}>
+            Read More
+          </Button>
+        )}
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default ProjectCard;

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/card/project_card.scss

+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import "../../../scss/helpers/variables";
+@import "../../../scss/helpers/mixins";
+
+.text-card {
+    padding: em-calc(55 40) !important;
+    flex-flow: column wrap;
+    font-size: 1rem;
+
+    &:not(:last-child) {
+        @include media-breakpoint-down(sm) {
+            padding-bottom: 0 !important;
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        padding: em-calc(40 25) !important;
+
+        &:first-child {
+            padding-left: em-calc(40) !important;
+        }
+
+        &:last-child {
+            padding-right: em-calc(40) !important;
+        }
+    }
+
+
+
+    .title {
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        @include media-breakpoint-up(md) {
+            margin-bottom: 1.25rem;
+        }
+
+        @include media-breakpoint-down(md) {
+            font-size: 1rem;
+        }
+    }
+
+    .dec {
+        @include media-breakpoint-up(md) {
+            margin-bottom: 2.5rem;
+        }
+    }
+
+    .button {
+        // @include breakpoint(small only) {
+        //     font-size: 0.875rem;
+        // }
+    }
+
+
+}
+
+.heading-card {
+    padding: em-calc(30 40);
+
+    @include media-breakpoint-up(md) {
+        padding: em-calc(36 40);
+    }
+
+    // @include media-breakpoint-up(lg) {
+    //     padding: em-calc(40 30);
+    // }
+
+    .main-title {
+        margin-bottom: 0;
+    }
+
+}
+
+.card {
+    .img-placeholder {
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            transition: all 0.5s;
+
+
+        }
+    }
+
+    &-section {
+        display: flex;
+        flex-flow: column nowrap;
+        padding: em-calc(20);
+
+
+        .button {
+            margin-top: auto;
+
+            &.expanded {
+                min-width: 100%;
+            }
+        }
+
+    }
+
+    &:hover {
+        .img-placeholder img {
+            transform: scale(1.1);
+        }
+    }
+}
+
+// map-card
+.map_card {
+
+    @include card($dark-black, $primary);
+
+    .heading-label {
+        margin-bottom: 0.4rem;
+    }
+
+    h3 {
+        line-height: 22px;
+        margin-bottom: 0.5rem;
+
+        @include media-breakpoint-between(sm,md) {
+            font-size: em-calc(18);
+            line-height: em-calc(20);
+        }
+
+        @include media-breakpoint-up(xl) {
+            font-size: em-calc(38);
+            line-height: em-calc(44);
+        }
+
+    }
+
+    .img-placeholder {
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+
+        .badge {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            border-radius: 1rem;
+            text-transform: uppercase;
+            font-weight: 700;
+            min-width: em-calc(70);
+            line-height: 1;
+            padding: em-calc(5 10);
+        }
+    }
+
+    .card-section {
+        padding: em-calc(24 30);
+
+        @include media-breakpoint-up(md) {
+            padding: em-calc(13 13);
+        }
+
+        .btn {
+
+            padding-top: em-calc(20);
+            padding-bottom: em-calc(20);
+
+            @include media-breakpoint-down(md) {
+                font-size: em-calc(12);
+            }
+        }
+    }
+
+    &:hover {
+        .img-placeholder img {
+            transform: scale(1.1);
+        }
+    }
+}
+
+//cards
+.card-list {
+    row-gap: 1rem;
+}
+
+
+
+
+
+
+.white-card {
+    background-color: $white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    min-height: em-calc(250);
+    font-family: $font-family-monospace;
+
+    // @include media-breakpoint-up(lg) {
+    //     min-height: em-calc(300);
+    // }
+
+    &.title {
+        color: $warning;
+        font-weight: 800;
+        font-size: em-calc(24);
+    }
+
+    .count {
+        margin-bottom: 0;
+
+        .count__number {
+            font-size: em-calc(80);
+
+            // @include media-breakpoint-up(md,lg) {
+            //     font-size: em-calc(100);
+            // }
+        }
+
+        .count__label {
+            font-size: 1.25rem;
+        }
+    }
+}
+
+.dark-blue-card {
+    background-color: $secondary;
+    color: white;
+    padding: 1.25rem;
+    overflow: visible;
+
+    @include media-breakpoint-up(md) {
+        padding: 1.65rem;
+    }
+}
\ No newline at end of file

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/footer/Footer.tsx

+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFacebook,
+  faLinkedin,
+  faYoutube,
+  faFlickr,
+} from "@fortawesome/free-brands-svg-icons";
+import Image from "next/image";
+import styles from "./footer.module.scss";
+import Link from "next/link";
+
+// Footer Data
+const footerData = {
+  logo: "/venture-37-white-logo.png",
+  creedLogo: "/creed_logo.svg",
+  creedText:
+    "We have signed the Pledge for Racial and Ethnic Equity: creedinaction.org",
+  menus: [
+    {
+      title: "Menu",
+      links: [
+        { name: "Home", url: "#" },
+        { name: "Who We Are", url: "#" },
+        { name: "What We Do", url: "#" },
+        { name: "Where We Work", url: "#" },
+        { name: "Insights Hub", url: "#" },
+      ],
+    },
+    {
+      title: "Legal",
+      links: [
+        { name: "Privacy Notice", url: "#" },
+        { name: "Your Privacy Choices", url: "#" },
+        { name: "Landolakesinc.com", url: "#" },
+      ],
+    },
+    {
+      title: "Partnership",
+      links: [
+        { name: "Contact Us", url: "#" },
+        { name: "Partnerships", url: "#" },
+        { name: "Career & Volunteer", url: "#" },
+        { name: "Solicitations", url: "#" },
+      ],
+    },
+  ],
+  socialLinks: [
+    { icon: faFacebook, url: "#" },
+    { icon: faLinkedin, url: "#" },
+    { icon: faYoutube, url: "#" },
+    { icon: faFlickr, url: "#" },
+  ],
+};
+
+const Footer: React.FC = () => {
+  return (
+    <footer className={styles.footer}>
+      {/* Primary Footer Section */}
+      <section className={styles.primary_footer}>
+        <Container>
+          <Row>
+            {/* Logo & About Section */}
+            <Col md={12} lg={3} className={styles.footer__intro}>
+              <div className={styles.footer__logo}>
+                <Image
+                  src={footerData.logo}
+                  alt="Land O’ Lakes Venture 37 logo"
+                  width={180}
+                  height={50}
+                />
+              </div>
+              <div className={`${styles.footer__content} d-none d-lg-block`}>
+                <div className={styles.creed_logo}>
+                  <Image
+                    src={footerData.creedLogo}
+                    alt="Creed Logo"
+                    width={120}
+                    height={30}
+                    className="img-fluid"
+                  />
+                </div>
+                <p>{footerData.creedText}</p>
+              </div>
+            </Col>
+
+            {/* Dynamic Footer Menus */}
+            {footerData.menus.map((menu, index) => (
+              <Col key={index} md={4} lg={3}>
+                <h4>{menu.title}</h4>
+                <ul className={`${styles.footer__links} list-unstyled`}>
+                  {menu.links.map((link, i) => (
+                    <li key={i}>
+                      <Link href={link.url}>
+                        {link.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </Col>
+            ))}
+
+            {/* Creed Info for Mobile */}
+            <Col
+              md={6}
+              className={`${styles.footer__content} d-lg-none show-tab-down`}
+            >
+              <div className={styles.creed_logo}>
+                <Image
+                  src={footerData.creedLogo}
+                  alt="Creed Logo"
+                  width={120}
+                  height={30}
+                  className="img-fluid"
+                />
+              </div>
+              <div className={styles.footer__content__info}>
+                <p>{footerData.creedText}</p>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+
+      {/* Copyright Section */}
+      <section className={styles.copy_rights}>
+        <Container>
+          <div className={`${styles.copy_rights__content}`}>
+            <ul className={`${styles.footer__links} list-inline`}>
+              {footerData.socialLinks.map((social, index) => (
+                <li key={index}>
+                  <Link href={social.url}>
+                    <FontAwesomeIcon icon={social.icon} size="lg" />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+            <p className="mb-0">
+              Copyright {new Date().getFullYear()} Land O’ Lakes Venture37. All
+              Rights Reserved.
+            </p>
+          </div>
+        </Container>
+      </section>
+    </footer>
+  );
+};
+
+export default Footer;

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/footer/footer.module.scss

+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import "../../../scss/helpers/variables";
+@import "../../../scss/helpers/mixins";
+
+
+.footer{
+    background-color: $dark-black;
+    color: $light-gray;
+    .primary_footer {
+        padding: em-calc(50 0);
+
+        @include media-breakpoint-up(lg) {
+            padding: em-calc(130 0);
+        }
+
+        @include media-breakpoint-down(sm) {
+            h4,
+            .footer__links {
+                text-align: center;
+            }
+        }
+    }
+    h4 {
+        font-weight: 900;
+        margin-bottom: em-calc(20);
+        font-size: em-calc(16);
+        line-height: em-calc(20);
+        @include media-breakpoint-up(lg) {
+            font-size: em-calc(22);
+            line-height: em-calc(26);
+        }
+        @include media-breakpoint-down(sm) {
+            margin-bottom: em-calc(15);
+        }
+    }
+    &__intro {
+        display: flex;
+        justify-content: space-between;
+        flex-flow: row wrap;
+        margin-bottom: em-calc(30);
+
+        @include media-breakpoint-up(lg) {
+            flex-flow: column wrap;
+        }
+    }
+
+    &__logo {
+        width: 100%;
+        margin-bottom: em-calc(20);
+
+        @include media-breakpoint-down(sm) {
+            display: flex;
+            justify-content: center;
+        }
+
+        @include media-breakpoint-up(lg) {
+            width: 100%;
+        }
+
+        img {
+            max-width: 200px;
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    &__content {
+        .creed_logo {
+            width: em-calc(55);
+            @include media-breakpoint-down(sm) {
+            margin: 0 auto 1rem;
+          }
+          @include media-breakpoint-between(sm, md) {
+            margin-left: 0;
+            margin-bottom: 1rem;
+          }
+          @include media-breakpoint-up(lg) {
+                width: em-calc(82);
+                margin-left: 0;
+            }
+        }
+        &__info{           
+            font-size: em-calc(12);
+            @include media-breakpoint-up(lg) {              
+                font-size: em-calc(16);
+            }
+            @include media-breakpoint-between(sm, md) {
+                padding-left: 1rem;
+                width: calc(100% - 82px);
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+
+        @include media-breakpoint-up(lg) {
+            position: relative;
+            bottom: -80px;
+        }
+    }
+    .show-tab-down {
+        @include media-breakpoint-between(sm, md) {
+            display: flex !important;
+            align-items: center;
+        }
+        &.footer__content {
+            text-align: center;
+
+            @include media-breakpoint-up(md) {
+                text-align: left;
+            }
+        }
+    }
+    &__links {
+        margin-bottom: em-calc(35);
+
+        li {
+            &:not(:last-child) {
+                margin-bottom: em-calc(10);
+            }
+
+            a {
+                color: inherit;
+
+
+                &:hover {
+                    color: primary;
+                }
+            }
+        }
+    }
+
+    .copy_rights {
+        background-color: $footer-dark-black;
+        color: $white;
+        padding: em-calc(27 0 39);
+        @include media-breakpoint-up(md) {
+            padding: em-calc(15 0);
+        }
+        @include media-breakpoint-up(lg) {
+            padding: em-calc(55 0 45);
+        }
+
+        p {
+            margin-bottom: 0;
+            text-align: center;
+            font-size: em-calc(10);
+            line-height: em-calc(14);
+            @include media-breakpoint-up(md) {
+                order: 1;
+            }
+            @include media-breakpoint-up(lg) {
+                font-size: em-calc(14);
+            line-height: em-calc(20);
+            }
+        }
+
+        &__content {
+            display: flex;
+            justify-content: center;
+            flex-flow: column wrap;
+            align-items: center;
+
+            @include media-breakpoint-up(md) {
+                flex-flow: row wrap;
+                justify-content: space-between;
+            }
+        }
+
+        .footer__links {
+            display: flex;
+            align-items: center;
+            margin-bottom: em-calc(15);
+            @include media-breakpoint-up(md) {
+                order: 2;
+                margin-bottom: 0;
+            }
+
+
+            li {
+                margin-bottom: em-calc(5);
+                @include media-breakpoint-up(md) {
+                    margin-bottom: 0;
+                }
+                &:not(:last-child) {
+                    padding-right: em-calc(20);
+
+                    @include media-breakpoint-up(lg) {
+                        padding-right: em-calc(60);
+                    }
+                }
+
+                a {
+                    font-size: em-calc(30);
+
+                    @include media-breakpoint-up(xl) {
+                        font-size: em-calc(40);
+                    }
+                    svg{
+                        height: 40px;
+                        width: 40px;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/header/Header.tsx

+"use client";
+
+
+import Image from "next/image";
+import { Navbar, Nav, NavDropdown, Row, Col, Form } from "react-bootstrap";
+import navigationData from '../header/navigationData.json';
+import styles from "./header.module.scss";
+import Link from "next/link";
+
+
+const CustomNavbar = () => {
+
+    return (
+        <Navbar
+            collapseOnSelect
+            expand="xl"
+            className={styles.header_sec}
+        >
+            {/* Brand Logo */}
+
+            <Navbar.Brand className={styles.nav_brand_sec} as={Link} href={navigationData.brand.href}>
+
+                <Image
+                    src={navigationData.brand.logo}
+                    alt="logo"
+                    width={200}
+                    height={100}
+                    priority
+                />
+
+            </Navbar.Brand>
+
+
+            {/* Navbar Toggle for Mobile */}
+            <Navbar.Toggle
+                aria-controls="responsive-navbar-nav"
+
+            />
+
+
+            {/* Navbar Links */}
+            <Navbar.Collapse id="responsive-navbar-nav" className={styles.navbar_nav_sec}>
+                <Nav className={`ms-auto ${styles.navbar_nav}`}>
+                    {navigationData.links.map((link, index) => {
+                        // Dropdown Links
+                        if (link.dropdown) {
+                            return (
+                                <NavDropdown
+                                    key={index}
+                                    title={link.title}
+                                    className={styles.multi_column_dropdown}
+                                >
+                                    <div className={styles.sub_menu_list}>
+                                        <Row>
+                                            {link.dropdown.map((dropdown, idx) => (
+                                                <Col lg={4} md={12} sm={12} key={idx}>
+                                                    <h6 className={styles.dropdown_header}>{dropdown.header}</h6>
+                                                    <div className="submenu_list_items">
+                                                        {dropdown.items.map((item, id) => (
+                                                            <NavDropdown.Item key={id} as={Link} href={item.href}>
+                                                                {item.title}
+                                                            </NavDropdown.Item>
+                                                        ))}
+                                                    </div>
+                                                </Col>
+                                            ))}
+                                        </Row>
+                                    </div>
+                                </NavDropdown>
+                            );
+                        }
+
+                        // Normal Nav Links
+                        return (
+                            // <Nav.Link key={index} as={Link} href={link.href} className={styles.nav_link}>
+                            //     {link.title}
+                            // </Nav.Link>
+                            // eslint-disable-next-line react/jsx-key
+                            <Link href={link.href} className="nav-link" key={index}>
+                                {link.title}
+                            </Link>
+                        );
+                    })}
+
+                    {/* High Bandwidth Switch */}
+                    <Nav.Link href="#name" className={styles.nav_link}>
+                        <Form.Check type="switch" id="custom-switch" label="High Bandwidth" />
+                    </Nav.Link>
+
+
+                    {/* <Link href="#name" className="nav-link">
+                        <Form.Check type="switch" id="custom-switch" label="High Bandwidth" />
+                    </Link> */}
+                </Nav>
+            </Navbar.Collapse>
+        </Navbar>
+    );
+};
+
+export default CustomNavbar;

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/header/header.module.scss

+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import "../../../scss/helpers/variables";
+
+.header_sec {
+    padding: 0;
+
+    @include media-breakpoint-down(xl) {
+        background-color: $nav-color;
+    }
+
+    .nav_brand_sec {
+        padding-left: 30px;
+    }
+
+    .navbar_nav_sec {
+        position: relative;
+
+        .navbar_nav {
+            :global(.nav-link) {
+                text-transform: capitalize;
+                color: $nav-color;
+                font-weight: bold;
+                padding: 2.5rem 2rem;
+
+                @include media-breakpoint-down(xl) {
+                    font-size: 32px;
+                    padding: 2.1875rem 5rem;
+                    color: $dark-black;
+                }
+
+                &:after {
+                    display: none;
+                }
+
+
+                :global(.form-switch) {
+                    display: flex;
+                    flex-direction: row-reverse;
+                    padding-left: 0;
+                    float: left;
+
+                    :global(.form-check-input) {
+                        width: 53px;
+                        height: 25px;
+                        margin-top: 0px;
+                        margin-top: -4px;
+                    }
+
+                    :global(.form-check-label) {
+                        padding-right: 50px;
+                        font-size: 12px;
+                        text-transform: uppercase;
+
+
+                    }
+                }
+            }
+
+            .multi_column_dropdown {
+                position: inherit;
+
+                :global(.show) {
+
+                    background-color: $nav-color;
+                    color: $dark-black !important;
+
+                    @include media-breakpoint-down(xl) {
+                        position: relative;
+                        z-index: 1;
+                        background-color: inherit;
+                    }
+
+
+                    &:before {
+                        @include media-breakpoint-down(xl) {
+                            content: "";
+                            position: absolute;
+                            width: 54%;
+                            height: 100%;
+                            z-index: -1;
+                            top: 0;
+                            left: 0;
+                            background-color: $white;
+                        }
+                    }
+                }
+
+                :global(.dropdown-menu) {
+                    width: 100%;
+                    //top: 0;
+                    border-radius: 0;
+                    padding: 0;
+                    margin-top: -1px;
+
+                    @include media-breakpoint-up(xl) {
+                        width: 98%;
+                        margin-top: -6px;
+                    }
+
+                }
+
+                // :global(.nav-link) {
+                //     color: $nav-color;
+
+                //     font-weight: bold;
+                //     padding: 2.5rem 2rem;
+
+                //     @include media-breakpoint-down(xl) {
+                //         font-size: 32px;
+                //         padding: 2.1875rem 5rem;
+                //     }
+
+                //     &:after {
+                //         display: none;
+                //     }
+                // }
+
+            }
+        }
+    }
+
+
+    .sub_menu_list {
+        min-height: 360px;
+        background-color: $white;
+
+        .dropdown_header {
+
+            padding: 1.5rem 2rem;
+            color: $dark-black;
+
+            @include media-breakpoint-up(xl) {
+                background-color: $nav-color;
+            }
+
+        }
+
+        :global(.submenu_list_items) {
+            padding: 0 2rem;
+
+            @include media-breakpoint-up(xl) {
+                padding: 2rem 2rem;
+            }
+
+            :global(.dropdown-item) {
+                padding: 0 0 14px;
+                color: $dark-black;
+                font-weight: bold;
+
+                &:hover {
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/Training/v37_RBT_Bootstrap_next/src/app/components/global/header/navigationData.json

+{
+    "brand": {
+        "logo": "/venture-37-white-logo.png",
+        "href": "/"
+    },
+    "links": [
+        {
+            "title": "Who We Are",
+            "href": "/whoweare"
+        },
+        {
+            "title": "What We Do",
+            "dropdown": [
+                {
+                    "header": "Our Technical Expertise",
+                    "items": [
+                        {
+                            "title": "Food Safety and Trade",
+                            "href": "#safety"
+                        },
+                        {
+                            "title": "Livestock Systems",
+                            "href": "#Livestock"
+                        },
+                        {
+                            "title": "Contact Us",
+                            "href": "#contact"
+                        }
+                    ]
+                },
+                {
+                    "header": "Our Programming by Region",
+                    "items": [
+                        {
+                            "title": "Africa",
+                            "href": "#Africa"
+                        },
+                        {
+                            "title": "Asia",
+                            "href": "#Asia"
+                        },
+                        {
+                            "title": "U.S. Positions",
+                            "href": "#us-positions"
+                        }
+                    ]
+                },
+                {
+                    "header": "Programs",
+                    "items": [
+                        {
+                            "title": "All Our Programs",
+                            "href": "#programs"
+                        },
+                        {
+                            "title": "Asia",
+                            "href": "#Asia"
+                        },
+                        {
+                            "title": "U.S. Positions",
+                            "href": "#us-positions"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Work With Us",
+            "dropdown": [
+                {
+                    "header": "Partnerships",
+                    "items": [
+                        {
+                            "title": "Our Approach to Partnerships",
+                            "href": "#approach"
+                        },
+                        {
+                            "title": "Our Solicitations",
+                            "href": "#solicitations"
+                        },
+                        {
+                            "title": "Contact Us",
+                            "href": "#contact"
+                        }
+                    ]
+                },
+                {
+                    "header": "Careers & Volunteer",
+                    "items": [
+                        {
+                            "title": "Join Our Team",
+                            "href": "#join-our-team"
+                        },
+                        {
+                            "title": "International Positions",
+                            "href": "#international-positions"
+                        },
+                        {
+                            "title": "U.S. Positions",
+                            "href": "#us-positions"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "title": "Our Insights",
+            "href": "/insighthub"
+        }
+    ]
+}
\ No newline at end of file

src/Training/v37_RBT_Bootstrap_next/src/app/components/leadership_announcements/LeadershipAnnouncements.tsx

+"use client";
+import React from "react";
+import { Container, Row, Col, Button } from "react-bootstrap";
+import ProjectCard from "../global/card/ProjectCard";
+
+// Define the type for a project
+interface Project {
+  id: number;
+  cardClass?: string;
+  image?: string;
+  title?: string;
+  tags?: string;
+  status?: string;
+  link?: string;
+  alignment?: string;
+}
+
+// Props type
+interface LeadershipAnnouncementsProps {
+  leadershipData: Project[];
+}
+
+const LeadershipAnnouncements: React.FC<LeadershipAnnouncementsProps> = ({
+  leadershipData,
+}) => {
+  return (
+    <section className="leadership-section sec-pad medium-gray-bg">
+      <Container>
+        <Row className="justify-content-center">
+          <Col md={8} className="text-center content-wrapper">
+            <h6 className="heading-label mb-1">
+              Thought Leadership & Announcements
+            </h6>
+            <h2 className="text-uppercase mb-2">HERE'S WHAT WE’RE INVOLVED IN TODAY</h2>
+          </Col>
+        </Row>
+        <Row className="justify-content-center">
+          {leadershipData.map((project) => (
+            <Col key={project.id} md={4} className="mb-4">
+              <ProjectCard project={project} />
+            </Col>
+          ))}
+        </Row>
+        <div className="text-center mt-4">
+          <Button variant="primary">View All Programs</Button>
+        </div>
+      </Container>
+    </section>
+  );
+};
+
+export default LeadershipAnnouncements;

src/Training/v37_RBT_Bootstrap_next/src/app/components/recent_project/RecentProject.tsx

+"use client";
+import React from "react";
+import { Container, Row, Col, Button } from "react-bootstrap";
+import ProjectCard from "../global/card/ProjectCard";
+
+// Define the type for a project
+interface Project {
+  id: number;
+  cardClass?:string;
+  image?: string;
+  title?: string;
+  tags?: string;
+  status?: string;
+  link?: string;
+  alignment?:string;
+}
+
+// Props type
+interface RecentProjectProps {
+  projects: Project[];
+}
+
+const RecentProject: React.FC<RecentProjectProps> = ({ projects }) => {
+  return (
+    <div className="recent-project sec-pad medium-gray-bg">
+      <Container>
+        <h6 className="text-uppercase text-center recent-project-title mb-4">
+          Recent Projects
+        </h6>
+        <Row className="justify-content-center">
+          {projects.map((project) => (
+            <Col key={project.id} md={4} className="mb-4">
+              <ProjectCard project={project} />
+            </Col>
+          ))}
+        </Row>
+        <div className="text-center mt-4">
+          <Button variant="primary">View All Programs</Button>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default RecentProject;

src/Training/v37_RBT_Bootstrap_next/src/app/components/signup_form/SignUpForm.tsx

+'use client';
+
+import React from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { Form, Button, Row, Col, Container } from 'react-bootstrap';
+
+interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  company: string;
+  country: string;
+  interestedInVolunteering: boolean;
+}
+
+const SignUpForm: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>();
+
+  const onSubmit: SubmitHandler<FormData> = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <section className="sec-pad signup-form light-primary-bg">
+      <Container>
+        <Row className="justify-content-center">
+          <Col xl={5} className="d-flex flex-dir-column align-center">
+            <h2>LATEST UPDATES DIRECTLY TO YOUR INBOX:</h2>
+            <p>Subscribe to our newsletter for peak insights on agriculture and global development.</p>
+          </Col>
+          <Col xl={6}>
+            <Form onSubmit={handleSubmit(onSubmit)}>
+              <Row className="mb-3">
+                <Col md={6}>
+                  <Form.Group>
+                    <Form.Label>First Name</Form.Label>
+                    <Form.Control
+                      type="text"
+                      {...register('firstName', { required: 'First name is required' })}
+                      isInvalid={!!errors.firstName}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                      {errors.firstName?.message}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+                </Col>
+                <Col md={6}>
+                  <Form.Group>
+                    <Form.Label>Last Name</Form.Label>
+                    <Form.Control type="text" {...register('lastName')} />
+                  </Form.Group>
+                </Col>
+              </Row>
+              <Form.Group className="mb-3">
+                <Form.Label>Email</Form.Label>
+                <Form.Control
+                  type="email"
+                  {...register('email', { required: 'Email is required', pattern: { value: /[^@]+@[^.]+\..+/, message: 'Enter a valid email' } })}
+                  isInvalid={!!errors.email}
+                />
+                <Form.Control.Feedback type="invalid">
+                  {errors.email?.message}
+                </Form.Control.Feedback>
+              </Form.Group>
+              <Row className="mb-3">
+                <Col md={6}>
+                  <Form.Group>
+                    <Form.Label>Company Affiliation</Form.Label>
+                    <Form.Control type="text" {...register('company')} />
+                  </Form.Group>
+                </Col>
+                <Col md={6}>
+                  <Form.Group>
+                    <Form.Label>Country of Residence</Form.Label>
+                    <Form.Select {...register('country')}>
+                      <option value="">Select a country</option>
+                      <option value="United States">United States</option>
+                      <option value="Afghanistan">Afghanistan</option>
+                      <option value="Albania">Albania</option>
+                      <option value="Algeria">Algeria</option>
+                    </Form.Select>
+                  </Form.Group>
+                </Col>
+              </Row>
+              <Form.Group className="mb-3">
+                <Form.Check
+                  type="checkbox"
+                  label="I am interested in Venture37 volunteer opportunities."
+                  {...register('interestedInVolunteering')}
+                />
+              </Form.Group>
+              <div className="text-end">
+                <Button variant="secondary" type="submit">Sign Up</Button>
+              </div>
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+    </section>
+  );
+};
+
+export default SignUpForm;

src/Training/v37_RBT_Bootstrap_next/src/app/components/track_record/track_record.module.scss

+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import "../../scss/helpers/variables";
+@import "../../scss/helpers/mixins";
+
+.trackRecordSec {
+    position: relative;
+    z-index: 3;
+    .track_record_conainer{
+        padding: 0;
+        overflow-x: clip;
+        @include media-breakpoint-down(md) {
+            padding-right: 0;
+            padding-left: 0;
+            overflow: hidden;
+        }
+        @include media-breakpoint-up(md) {
+            width: 100%;
+            max-width: 100%;
+        }
+            .record_left_sec {
+                padding-top: 2.5rem;
+                padding-bottom: 2.5rem;
+                @include media-breakpoint-down(lg) {
+                    padding-left: 15px;
+                    padding-right: 15px;
+                }
+                @include media-breakpoint-up(md) {
+                    padding-top: 70px;
+                    padding-bottom: 70px;
+                }
+                @include media-breakpoint-up(xl) {
+                    padding-top: 160px;
+                    padding-bottom: 160px;
+                }
+                @include media-breakpoint-up(xxl) {
+                    padding-top: 200px;
+                    padding-bottom: 200px;
+                }
+
+                    .content_sec{
+                        @include media-breakpoint-up(lg) {
+                            max-width: 48.125rem;
+                            margin-right: 40px;
+                            padding-left: 15px;
+                            margin-left: auto;
+                        }
+                            .sec_sub_title {
+                                text-transform: uppercase;
+                                color: #02AFAC;
+                                line-height: 1;
+                                font-weight: 800;
+                                margin-bottom: 2.5rem;
+                                @include media-breakpoint-up(xl){
+                                    font-size: 1.125rem;
+                                }
+                            }
+                            .sec_title {
+                                margin-bottom: 2rem !important;;
+                                @include media-breakpoint-up(md) {
+                                    font-size: 2.125rem;
+                                }
+                                @include media-breakpoint-up(xl) {
+                                    font-size: 2.3125rem;
+                                }
+                            }
+                            .description {
+                                margin-bottom: 2rem !important;
+                            }
+                    }
+            }
+            .record_right_sec {
+                .image_sec {
+                    background-repeat: no-repeat !important;
+                    background-position: left !important;
+                    position: absolute;
+                    z-index: 1;
+                    width: 100%;
+                    height: 100% ;
+                    z-index: 4;
+                    @include media-breakpoint-up(sm) {
+                        left: 150px;
+                        width: calc(100% - 150px);
+                    }
+                }
+                .overlap_image {
+                    position: relative;
+                    z-index: 9;
+                    @include media-breakpoint-up (sm) {
+                        position: absolute;
+                        height: calc(100% + 100px);
+                        margin-top: -100px;
+                        z-index: 4;
+                        width: calc(100% - 15px);
+                    }
+                    .track_record_img {
+                        @include media-breakpoint-up(sm) {
+                            height: 100%;
+                            width: 100%;
+                            position: absolute;
+                            object-fit: cover;
+                            object-position: left;
+                        }
+                    }
+                }
+            }
+    }
+}

src/Training/v37_RBT_Bootstrap_next/src/app/components/track_record/track_record.tsx

+// "use client";
+
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import styles from './track_record.module.scss';
+import Image from "next/image";
+
+
+const TrackRecord: React.FC = () => {
+    return (
+        <section className={styles.trackRecordSec}>
+            <Container fluid className={` ${styles.track_record_conainer}`}>
+                <Row>
+                    <Col md={6}>
+                        <div className={`d-md-flex flex-md-column ${styles.record_left_sec}`}>
+                            <div className={styles.content_sec}>
+                                <h6 className="heading-label">OUR PROVEN TRACK RECORD</h6>
+                                <h2 > WE HAVE A PROVEN TRACK RECORD OF DELIVERING HIGH-QUALITY RESULTS FOR BOTH
+                                GOVERNMENT AND PRIVATE-SECTOR PROGRAMS</h2>
+                                <p className={styles.description}>With more than 40 years of agricultural development programming around the globe, we’ve got
+                                a powerful approach to transforming agricultural systems.</p>
+                                <button className='btn btn-primary mb-0'>View Our Programs</button>
+                            </div>
+                            
+                        </div>
+                        
+                    </Col>
+                    <Col md={6} className="position-relative ">
+                        <div className={styles.record_right_sec}>
+                            <div className={styles.image_sec} style={{background:"url(/trackrecord-background.webp)"}}></div>
+                            <div className={styles.overlap_image}>
+                                    <Image 
+                                        src="/trackrecord.webp"
+                                        alt="A Primer on Lebanon's Cooperative"
+                                        width={700}
+                                        height={700}
+                                        loading="lazy"
+                                        fetch-priority="low"
+                                        className={`img-fluid ${styles.track_record_img}`}
+                                    />
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+            </Container>
+        </section>
+    )
+}
+
+export default TrackRecord;
\ No newline at end of file