Skip to content

GitLab

U
usability-knowledge-base
Commit 7f7c2d48 authored by Nagaraju Goru's avatar Nagaraju Goru
Browse files
Options

whoweare page

parent a12ac34d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1047 additions and 19 deletions
src/Training/v37_RBT_Bootstrap_next/public/banner.webp 0 → 100644
View file @ 7f7c2d48
File added
src/Training/v37_RBT_Bootstrap_next/public/capsule-pattern.webp 0 → 100644
View file @ 7f7c2d48
File added
src/Training/v37_RBT_Bootstrap_next/public/who-we-are-leadership-dai-harvey.webp 0 → 100644
View file @ 7f7c2d48
File added
src/Training/v37_RBT_Bootstrap_next/public/who-we-are-leadership-kyle-nelson.webp 0 → 100644
View file @ 7f7c2d48
File added
src/Training/v37_RBT_Bootstrap_next/public/who-we-are-leadership-mat-ayaga.webp 0 → 100644
View file @ 7f7c2d48
File added
src/Training/v37_RBT_Bootstrap_next/src/app/components/agriculture/agriculture.module.scss 0 → 100644
View file @ 7f7c2d48
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.agriculture_sec {
background-color: $secondary;
color: $white;
padding-top: 4.375rem;
padding-bottom: 4.375rem;
margin-bottom: 4.375rem;
@include media-breakpoint-up (md) {
margin-bottom: 5rem;
}
@include media-breakpoint-up (xl) {
margin-bottom: 9.375rem;
}
.agriculture_sec_container {
@include media-breakpoint-down(xl) {
padding-left: 80px;
padding-right: 80px;
}
@include media-breakpoint-down(lg) {
padding-left: 40px;
padding-right: 40px;
}
.sec_title {
margin-bottom: 3.75rem;
font-size: 30px;
@include media-breakpoint-up (md){
font-size: 34px;
}
@include media-breakpoint-up (xl){
font-size: 37px;
}
}
.agriculture_sec_row {
@include media-breakpoint-down (lg) {
row-gap: 3.125rem;
}
.card {
@include media-breakpoint-up (xl) {
padding: 0 60px;
}
.card_title {
@include media-breakpoint-up (xl) {
font-size: 18px;
}
}
}
}
}
}
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/agriculture/agriculture.tsx 0 → 100644
View file @ 7f7c2d48
import React from "react";
import styles from './agriculture.module.scss';
import { title } from "process";
import { Col, Container, Row } from "react-bootstrap";
const agricultureContent = [
{
title : "WE KNOW HOW AGRICULTURE FITS IN.",
description : "Whether it’s animal nutrition, dairy foods, crop insights, or sustainability, we leverage expertise and resources from one of the United States’ largest cooperatives, working with some of the most respected brands in agribusiness and food production.",
},
{
title : "OUR WORK IS MARKET-DRIVEN.",
description : "We’re rooted in America’s heartland, with branches around the globe. Whether we’re partnering with the private sector, government officials, or academic institutions, we take an agile approach to our market-driven approach.",
},
{
title : "BY BOOSTING FOOD SECURITY ABROAD, WE HELP BUSINESS PROSPECTS AT HOME.",
description : "We know that a prosperous world is in our best interest – leading to stronger markets, business opportunities, trade, and global security. It’s a win-win for everyone.",
}
];
const Agriclture = () => {
return (
<section className={styles.agriculture_sec}>
<Container className={styles.agriculture_sec_container}>
<h2 className={`text-center ${styles.sec_title}`}>WE KNOW AGRICULTURE</h2>
<Row className={styles.agriculture_sec_row}>
{
agricultureContent.map((item, index) => (
<Col key={index} lg={4} className={`text-center ${styles.card}`}>
<h6 className={styles.card_title}>{item.title}</h6>
<p className={styles.card_description}>{item.description}</p>
</Col>
))
}
</Row>
</Container>
</section>
);
};
export default Agriclture;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/analysis/analysis.module.scss 0 → 100644
View file @ 7f7c2d48
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.analysis_sec {
padding: 60px 0 32px;
@include media-breakpoint-up(md) {
padding: 120px 0 100px;
}
.container_wrapper {
@include media-breakpoint-down(lg) {
padding-left: 80px;
padding-right: 80px;
}
@include media-breakpoint-down(md) {
padding-left: 40px;
padding-right: 40px;
}
.analysis_sec_row {
max-width: 102.5rem;
@include media-breakpoint-down(lg) {
justify-content: center;
}
.analysis_left_sec {
@include media-breakpoint-up(lg) {
margin-right: 70px;
}
.analysis_score {
font-weight: 900;
font-size: 11.25rem;
display: inline-block;
letter-spacing: 1.44px;
line-height: 1;
@include media-breakpoint-up(lg) {
margin-bottom: 0 ;
}
}
}
.analysis_right_sec {
.sec_sub_title {
margin-bottom: 0.625rem;
color: $warning;
@include media-breakpoint-up(lg) {
font-size: 18px;
}
}
.sec_title {
font-size: 30px;
margin-bottom: 25px;
@include media-breakpoint-up(md) {
font-size: 34px;
}
@include media-breakpoint-up(xl) {
font-size: 37px;
}
}
}
}
}
}
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/analysis/analysis.tsx 0 → 100644
View file @ 7f7c2d48
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import styles from './analysis.module.scss';
const Analysis = () => {
const analysisContent = {
score : "37%",
sunTitle : "A Cooperative Effort to Feed the World",
title : "THAT'S THE PERCENTAGE OF EARTH'S LAND WHERE THE FARMERS CAN GROW THE CROPS AND RAISE THE LIVESTOCK THAT FEED OUR WORLD. IT'S ALL WE'VE GOT.",
description : "The world’s population will be nearly 10 billion by 2050. Yet, we have limited resources and land to feed a growing population. We’ve got to work together — across continents, cultures, and markets — to make nutritious food abundant, so that everyone can realize their full potential.",
subDescription : "Venture37 is uniquely positioned to do just that. That’s because we tap into the people and power of Land O’Lakes, Inc., one of the largest farmer-owned cooperatives with diversified agribusinesses in dairy, livestock and crops, and agricultural sustainability. Pair this with local insights from 40 years of agricultural development, and we’ve got what it takes to unlock the potential of dairy, livestock, and crops farms and agribusiness ventures around the world. Our integrated solutions promote competitive markets, resilient systems, nutrition-secure communities, and inclusive societies.",
};
return (
<section className={`sec-pad ${styles.analysis_sec}`}>
<Container className={styles.container_wrapper}>
<Row className={ `align-items-center ${styles.analysis_sec_row}`}>
<Col lg={6} xl={5} className={`d-flex justify-content-lg-end`}>
<div className={`${styles.analysis_left_sec}`}>
<h6 className={styles.analysis_score}>{analysisContent.score}</h6>
</div>
</Col>
<Col lg={6} xl={6}>
<div className={`${styles.analysis_right_sec}`}>
<h6 className={styles.sec_sub_title}>{analysisContent.sunTitle}</h6>
<h2 className={styles.sec_title}>{analysisContent.title}</h2>
<p className={styles.sec_description}>{analysisContent.description}</p>
<p className={styles.sec_description}>{analysisContent.subDescription}</p>
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default Analysis;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/banner/Banner.tsx
View file @ 7f7c2d48
......@@ -2,6 +2,7 @@ import { Container, Row, Col, Button } from "react-bootstrap";
import styles from "./banner.module.scss";
import Image from "next/image";
import Cardslider from "./Cardslider";
import PassionSlider from "./whoWeAreCardSlider";
interface Banner {
bgimageUrl: string;
......@@ -37,7 +38,8 @@ const Banner: React.FC<Banner> = ({
/>
</Container>
<div className="card_slider">
<Cardslider />
{/* <Cardslider /> */}
<PassionSlider />
</div>
</section>
);
......
src/Training/v37_RBT_Bootstrap_next/src/app/components/banner/whoWeAreCardSlider.module.scss 0 → 100644
View file @ 7f7c2d48
@import "~bootstrap/scss/mixins";
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.slider_container {
.slider {
overflow: hidden;
margin-top: -60px;
position: relative;
z-index: 3;
// padding-right: 100px;
@include media-breakpoint-up (md){
margin-top: -200px;
}
&::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
top:50%;
left: 0;
background-color: $white;
}
:global(.slick-slide) {
width: 230px !important;
margin-right: 15px;
position: relative;
z-index: 9;
margin-bottom: 0px;
height: auto !important;
&:last-child{
margin-right: 15px;
}
@media (min-width:375px) {
width: 285px !important;
}
@media (min-width:425px) {
width: 335px !important;
}
@include media-breakpoint-up (md) {
width: 312px !important;
}
@include media-breakpoint-up (lg){
width: 440px !important;
}
@include media-breakpoint-up (xl){
width: 411px !important;
}
@include media-breakpoint-up (xl){
width: 387px !important;
}
}
:global(.slick-list) {
margin-left: calc((100vw - min(100vw, 1300px)) / 2) !important;
}
.card {
background: url(/program-detail-tile-call-out-wave-background.webp) center / auto no-repeat, linear-gradient(90deg, #DD7E28 0%, #D86C27 100%);
background-position: center;
background-size: auto;
border-radius: 5px;
height: auto;
.card_content_wrapper {
background: $white;
text-align: center;
padding: 1.5rem 2rem 2px;
margin: 15px;
min-height: 15.625rem;
@include media-breakpoint-up (md) {
margin: 20px;
}
.card_content {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 18.75rem;
.card_title {
font-size: 0.8125rem;
color: #E8A62B;
}
.signature_wrapper {
width: 100%;
height: 100px;
.signature_image {
width: 100%;
height: 100px;
object-fit: contain;
}
}
.card_quote {
font-size: 20px;
font-weight: 700;
@include media-breakpoint-up(md){
font-size: 22px;
}
}
}
}
}
}
}
src/Training/v37_RBT_Bootstrap_next/src/app/components/banner/whoWeAreCardSlider.tsx 0 → 100644
View file @ 7f7c2d48
'use client'
import React from "react";
import Slider from "react-slick";
import Image from "next/image";
import styles from "./whoWeAreCardSlider.module.scss";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const slides = [
{
quote : "Creating opportunities for youth in the livestock sector.",
signature : "/who-we-are-quotes-04-avaliani-lasha-signature-creating-opportunities-for-youth.svg"
},
{
quote : "Advancing agricultural technologies that meet gaps in markets.",
signature : "/who-we-are-quotes-04-avaliani-lasha-signature-creating-opportunities-for-youth.svg"
},
{
quote :"Contributing to a safer and healthier food system for everyone.",
signature : "/who-we-are-quotes-04-avaliani-lasha-signature-creating-opportunities-for-youth.svg"
},
{
quote : "Advocating for women in agriculture.",
signature : "/who-we-are-quotes-04-avaliani-lasha-signature-creating-opportunities-for-youth.svg"
},
];
const PassionSlider = () => {
// const settings = {
// centerMode: false,
// centerPadding: '350px',
// slidesToShow: 3,
// dots: true,
// autoplay: false,
// autoplaySpeed: 3000,
// arrows: false,
// infinite: true,
// // centerMode : true,
// // centerPadding : '2%',
// responsive: [
// {
// breakpoint: 2500,
// settings: {
// slidesToShow: 2,
// },
// },
// {
// breakpoint: 2000,
// settings: {
// slidesToShow: 2,
// },
// },
// {
// breakpoint: 1500,
// settings: {
// slidesToShow: 2,
// },
// },
// {
// breakpoint: 1200,
// settings: {
// slidesToShow: 2,
// },
// },
// {
// breakpoint: 767,
// settings: {
// slidesToShow: 1,
// },
// },
// ],
// };
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<section className={styles.slider_container}>
<Slider {...settings} className={styles.slider}>
{slides.map((slide, index) => (
<div key={index}>
<div className={styles.card}>
<div className={styles.card_content_wrapper}>
<div className={styles.card_content}>
<h6 className={styles.card_title}>WE ARE PASSIONATE ABOUT :</h6>
<p className={`mb-0 ${styles.card_quote}`}>{slide.quote}</p>
<div className={styles.signature_wrapper}>
<Image
src={slide.signature}
alt="Signature"
width={500}
height={500}
className={styles.signature_image}
/>
</div>
</div>
</div>
</div>
</div>
))}
</Slider>
</section>
);
};
export default PassionSlider;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/leadership/leadership.module.scss 0 → 100644
View file @ 7f7c2d48
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.leadership_sec {
padding-bottom: 3.75rem;
@include media-breakpoint-up (xl) {
padding-bottom: 7.5rem;
}
.leadership_sec_container {
@include media-breakpoint-down(lg) {
padding-left: 80px;
padding-right: 80px;
}
@include media-breakpoint-down(md) {
padding-left: 40px;
padding-right: 40px;
}
}
.sec_title {
font-size: 30px;
margin-bottom: 60px;
@include media-breakpoint-up (md) {
font-size: 34px;
margin-bottom: 85px;
}
@include media-breakpoint-up (xl) {
font-size: 37px;
margin-bottom: 95px;
}
}
.leadership_row {
margin-bottom: 3.75rem;
@include media-breakpoint-up (xl) {
margin-bottom: 5rem;
}
.image_col {
display: flex;
@include media-breakpoint-down (md) {
justify-content: center !important;
}
.image_wrapper {
width: 14.375rem;
height: 14.375rem;
margin-bottom: 1.25rem;
@include media-breakpoint-up (xl) {
width: 24.8125rem;
height: 24.8125rem;
}
.leader_image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.content_wrapper {
.leader_title {
color: $warning;
}
.leader_name {
font-size: 24px;
margin-bottom: 30px;
@include media-breakpoint-up (md) {
font-size: 30px;
margin-bottom: 25px;
}
@include media-breakpoint-up (xl) {
font-size: 24px;
}
}
}
}
}
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/leadership/leadership.tsx 0 → 100644
View file @ 7f7c2d48
import React from "react";
import Image from "next/image";
import { Col, Container, Row } from "react-bootstrap";
import styles from './leadership.module.scss';
const leadershipTeam = [
{
name: "John Ellenberger",
title : "Executive Director",
description : "John leads Land O’Lakes Venture37, a 501(c)(3) non-profit founded in 1981 by Land O’Lakes, Inc. He assumed the role in 2017 after leading the Land O'Lakes, Inc. U.S. Dairy Foods teams since 2008. Before joining Land O’Lakes, John led corporate marketing at American Medical Systems and spent 15 years in various marketing leadership roles at General Mills. He earned his bachelor’s degree and MBA from the University of Minnesota. John was recently appointed as a board member of the Board for International Food and Agricultural Development (BIFAD) and serves as Vice Chair on the Board of Directors for ServeMinnesota. He previously served on the Board of Directors for Gillette Children’s Specialty Healthcare.",
image : "/who-we-are-leadership-john-ellenberger.webp",
},
{
name : "Giselle Aris",
title : "Group Director of Strategic Growth and Partnerships",
description : "Giselle joined our team in 2011, after spending two years designing, scaling, and managing a smallholder farmer-owned dairy enterprise in South India. She brings over a decade of experience in facilitating inclusive private investment and accelerated business growth in emerging markets. Giselle loves dreaming up new types of shared value partnerships for advancing global agriculture development and food security — so if you have ideas on ways we could co-invest towards these goals, get in touch! Giselle is happiest when she’s climbing a mountain, riding her bike, reading a book, or cooking and eating in good company.",
image : "/who-we-are-leadership-giselle-aris.webp",
},
{
name : "Mat Ayaga",
title : "Human Resources Director",
description : "Mat Ayaga joined Venture37 in 2019. Born and raised in Asembo, Western Kenya, Mat has worked with various global development organizations in Africa and the United States. She has more than 15 years of experience supporting development projects in Africa, Asia, the Middle East, and Eastern Europe. At Venture37, Mat leads the development, implementation, and delivery of strategic Human Resources initiatives and practices across the organization. She loves connecting with people and creating new relationships. Mat is based in Washington DC and enjoys spending time with her family.",
image : "/who-we-are-leadership-mat-ayaga.webp",
},
{
name : "Dai Harvey",
title : "Technical Director",
description : "Dai Harvey embarked on his career with Venture37 in 2004 in his home of Zambia, with a focus of growing private sector involvement in the dairy industry. Since then, Dai has provided technical and management oversight for all types of agricultural projects in over 40 countries worldwide. Now based in the United Kingdom, he still has interests on the family farm in Zambia, where his brothers manage rain fed crops, livestock and tourism operations. Dai is passionate about creating opportunities for improving consumer access to safe, nutritious food and endeavoring to ensure farmers capture more of the final price to consumers",
image : "/who-we-are-leadership-dai-harvey.webp",
},
{
name : "John Kirkwood",
title : "Director of Global Security",
description : "John’s career spans over four decades of public and private sector service in law enforcement and corporate security. John began as a police officer in Lincoln, Nebraska, before joining the United States Secret Service, investigating financial crime, threats and providing protection to national and world leaders. John retired after 25 years as the Special Agent in Charge of the Minneapolis Field Office. He was then appointed the Chief Deputy of the Ramsey County Sheriff’s Office in St. Paul, before coming to Land O’Lakes in 2015.",
image : "/who-we-are-leadership-john-kirkwood.webp",
},
{
name : "Kyle Nelson",
title : "IT Director, Corporate IT Business Lead",
description : "Kyle joined the Land O’Lakes Venture37 team in 2020 after spending four years in different IT leadership roles from IT Security to IT Operations, and he is currently IT Business Lead for all corporate areas. He focuses on helping organizations optimize technology while right-sizing processes to drive operational efficiencies and business growth. He has over 20 years of experience in both corporate and nonprofit organizations across manufacturing, healthcare, insurance, and retail. Kyle enjoys traveling, boating, skiing, photography and is an avid Minnesota Vikings football fan. He and his wife love spending time at the lake with the family.",
image : "/who-we-are-leadership-kyle-nelson.webp",
},
{
name : "Mary Jo Robinson",
title : "Group Director of Operations",
description : "Mary Jo has been with Land O’Lakes for more than three decades of experience in financial and operational roles; holding positions both with Land O’Lakes, Inc. and with Land O’Lakes Venture37. Mary Jo has worked exclusively in the development sector with Venture37 since 2002. Mary Jo holds a BA in Accounting from the University of Wisconsin – Eau Claire and an MBA in International Financial Management from St. Thomas University in St. Paul, Minnesota. Mary Jo loves to spend quality time with family as well as loves to travel, play golf and spend time on Minnesota lakes in the summer.",
image : "/who-we-are-leadership-mary-jo-robinson.webp",
},
{
name : "Meredith Saggers",
title : "Director of Global Monitoring, Evaluation, & Learning",
description : "A part of our team since 2014, Meredith leads the strategic direction of MEL across the organization. She brings 15+ years of experience designing and implementing quality MEL systems in agriculture and economic empowerment programs throughout the world. Meredith is passionate about using quality data to maximize our impact on the participants, businesses and communities we serve. Outside of work, Meredith enjoys fitness and exploring new countries.",
image : "/who-we-are-leadership-meredith-saggers.webp",
},
];
const LeadershipTeam = () => {
return (
<section className={styles.leadership_sec}>
<Container className={styles.leadership_sec_container}>
<h2 className={`text-center ${styles.sec_title}`}>OUR LEADERSHIP TEAM:</h2>
{
leadershipTeam.map((leader, index) => (
<Row key={index} className={`${styles.leadership_row} ${index % 2 !== 0 ? "flex-row-reverse" : ""}`}>
<Col md={5} className={`${styles.image_col} ${index % 2 === 0 ? "justify-content-end": "justify-content-start"}`}>
<div className={styles.image_wrapper}>
<Image
src={leader.image}
alt={leader.name}
height={500}
width={500}
className={styles.leader_image}/>
</div>
</Col>
<Col md={5} className={styles.content_wrapper}>
<h6 className={styles.leader_title}>{leader.title}</h6>
<h4 className={styles.leader_name}>{leader.name}</h4>
<p>{leader.description}</p>
</Col>
</Row>
))
}
</Container>
</section>
);
};
export default LeadershipTeam;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/our_approach/our_approach.module.scss 0 → 100644
View file @ 7f7c2d48
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.our_approach {
.content_sec {
margin-bottom: 64px;
.sec_title {
font-size: 32px;
@include media-breakpoint-up(md) {
font-size: 34px;
}
@include media-breakpoint-up(xl) {
font-size: 37px;
}
}
}
}
.slider_sec {
:global(.slick-dots) {
bottom: 40px;
}
:global(.slick-dots li) {
background-color: $white;
border-radius: 1rem;
margin-right: 20px;
width: 10px;
height: 10px;
}
:global(.slick-dots li.slick-active) {
width: 70px;
border-radius: 1rem;
}
.slide {
position: relative;
.image_wrapper {
.image {
width: 100%;
height: auto;
}
}
.content_wrapper {
@include media-breakpoint-up (xs) {
position: relative;
border-radius: 0px;
padding: 2.5rem 0;
font-style: normal;
max-width: 42.875rem;
font-weight: 400;
left: 50%;
transform: translateX(-50%);
background-color: $white;
width: calc(100% - 80px);
color: $dark-black;
}
@include media-breakpoint-up (md){
position: absolute;
padding: 3.125rem 2.5rem;
max-width: 42.875rem;
bottom: 5rem;
}
@include media-breakpoint-up (xl){
max-width: 42rem;
right: auto;
left: 51%;
bottom: 50%;
transform: translateY(50%);
}
.sub_title{
@include media-breakpoint-up (xl){
font-size: 18px;
}
}
.title {
font-size: 30px;
margin-bottom: 25px;
@include media-breakpoint-up (md){
font-size: 34px;
}
@include media-breakpoint-up (md){
font-size: 37px;
}
}
}
}
}
src/Training/v37_RBT_Bootstrap_next/src/app/components/our_approach/our_approach.tsx 0 → 100644
View file @ 7f7c2d48
'use client'
import React from "react";
import styles from './our_approach.module.scss';
import { useEffect, useRef} from "react";
import Image from "next/image";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { Container } from "react-bootstrap";
const slides = [
{
image : "/who-we-are-carousel-market-driven-large.webp",
title : "OUR WORK IS MARKET-DRIVEN.",
subtitle : "OUR APPROACH",
description : "Our roots in agribusiness and our connections to global industry networks help us understand the complexity of market systems to advance a simple goal: turning market challenges into opportunities — all to accelerate supply and demand."
},
{
image : "/who-we-are-carousel-evidence-based-large.webp",
title : "OUR DECISIONS ARE EVIDENCE-BASED.",
subtitle : "OUR APPROACH",
description : "Data and science ensure our roadmap is built on facts, not assumptions. Evidence is ever-evolving—and so are we. From design to implementation, we ensure we’re monitoring and leveraging key data points to maximize our impact.",
},
{
image : "/who-we-are-carousel-adapt-and-scale-large.webp",
title : "WE ADAPT AND SCALE CUTTING-EDGE INNOVATIONS.",
subtitle : "OUR APPROACH",
description : "Through our affiliation with Land O’Lakes and our close partnerships with private sector experts, we adapt and scale innovations and best practices from the very best industry leaders — whether it’s in food safety, sustainability, supply chain, digital solutions, or food loss and waste.",
},
{
image : "/who-we-are-carousel-learn-and-adapt-large.webp",
title : "WE REGULARLY LEARN AND ADAPT.",
subtitle : "OUR APPROACH",
description : "We know we can always do better. It’s about accelerating what’s working and changing what’s not. We also know that local insights must drive customized solutions — each community is nuanced and complex, so is there any other way?",
},
{
image : "/who-we-are-carousel-solutions-that-last-large.webp",
title : "WE SEEK SOLUTIONS THAT LAST.",
subtitle : "OUR APPROACH",
description : "Sustainability is core to everything we do. We identify and remedy inefficiencies to make sure agriculture and food production is as productive as possible. We also know that local experts are key to sustainable outcomes, so we prioritize local partnerships to drive global impact.",
},
{
image : "/who-we-are-carousel-social-inclusion-large.webp",
title : "SOCIAL INCLUSION LEADS TO LASTING PROGRESS.",
subtitle : "OUR APPROACH",
description : "When people of all ages and identities equally take part in a society, it strengthens the whole. Across our work, we engage and empower all members of society, including women and young people.",
},
];
const settings = {
dots : true,
infinite : true,
speed : 500,
slidesToShow : 1,
slidesToScroll : 1,
arrows : false,
autoplay : true,
autoplaySpeed : 5000,
customPaging: ( i: number ) => <div className={styles.dot}></div>
}
const OurApproach = () => {
const sliderRef = useRef<Slider | null>(null);
useEffect(() => {
document.querySelectorAll('.slick-dots li').forEach((dot, index) => {
dot.addEventListener('click', () => {
if (sliderRef.current) {
sliderRef.current.slickGoTo(index);
}
});
});
}, []);
return (
<section className={styles.our_approach}>
<section className={styles.content_sec}>
<Container>
<div className={styles.content_wrapper}>
<h2 className={`text-center mb-0 ${styles.sec_title}`}>WE COLLABORATE WITH PARTNERS AROUND THE GLOBE TO UNLEASH THE LOCAL POWER OF GLOBAL AGRICULTURE .</h2>
</div>
</Container>
</section>
<section className={styles.slider_sec}>
<Slider ref={sliderRef} {...settings} className={styles.slider_wrapper}>
{
slides.map((slide, index) => (
<div key={index} className={styles.slide}>
<div className={styles.image_wrapper}>
<Image
src={slide.image}
alt={slide.title}
width={500}
height={500}
className={styles.image}
/>
</div>
<div className={styles.content_wrapper}>
<h6 className={`heading-label ${styles.sub_title}`}>{slide.subtitle}</h6>
<h2 className={styles.title}>{slide.title}</h2>
<p>{slide.description}</p>
</div>
</div>
))
}
</Slider>
</section>
</section>
)
}
export default OurApproach;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/our_history/our_history.module.scss 0 → 100644
View file @ 7f7c2d48
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.our_history_sec {
.history_sec_container {
padding-left: 0;
padding-right: 0;
overflow: hidden;
}
.image_container {
position: relative;
padding-left: 0;
padding-right: 0;
@include media-breakpoint-down (sm){
height: 370px;
}
.image_wrapper {
background-repeat: no-repeat;
background-position: left;
position: absolute;
left: auto;
width: 100%;
height: 100%;
background-size: cover;
}
}
.content_wrapper {
padding: 2.5rem;
@include media-breakpoint-up (md){
padding: 70px;
}
@include media-breakpoint-up (lg){
padding-top: 140px;
padding-bottom: 140px;
}
@include media-breakpoint-up (xl){
padding-top: 200px;
padding-bottom: 200px;
max-width: 43rem;
margin-left: 9.5625rem;
}
.sec_sub_title {
@include media-breakpoint-up(lg) {
font-size: 18px;
}
}
.sec_title {
font-size: 30px;
margin-bottom: 25px;
@include media-breakpoint-up(md) {
font-size: 34px;
}
@include media-breakpoint-up(xl) {
font-size: 37px;
}
}
}
}
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/our_history/our_history.tsx 0 → 100644
View file @ 7f7c2d48
import React from "react";
import styles from './our_history.module.scss';
import { title } from "process";
import { Col, Container, Row } from "react-bootstrap";
const OurHistory = () => {
const historyContent = {
subTititle : "OUR HISTORY",
title : "WITH ROOTS IN MINNESOTA, WE’VE MADE AN IMPACT IN 80+ COUNTRIES WORLDWIDE.",
description : "In 1981, a group of farmers gathered in a Minnesota board room of Land O’Lakes, Inc. to discuss a bold idea: international development. As members of a cooperative dating back to 1921, these farmer-members knew from experience that uniting to improve agriculture can lead to healthier communities and stronger economies — both abroad and at home in the United States. They agreed that fostering food security and economic prosperity globally was a win-win for everyone: for business ventures, for trade, and for a more secure world.",
subDescription : "This is how Venture37 got its roots.",
backgroundImage : "/who-we-are-our-history-two-men-and-truck-small.webp"
};
return (
<section className={styles.our_history_sec}>
<Container fluid className={styles.history_sec_container}>
<Row>
<Col md={5} lg={6} className={styles.image_container}>
<div className={styles.image_wrapper} style={{backgroundImage: `url(${historyContent.backgroundImage})`}}>
</div>
</Col>
<Col md={7} lg={6}>
<div className={styles.content_wrapper}>
<h6 className={`heading-label ${styles.sec_sub_title}`}>{historyContent.subTititle}</h6>
<h2 className={styles.sec_title}>{historyContent.title}</h2>
<p className={styles.sec_description}>{historyContent.description}</p>
<h6>{historyContent.subDescription}</h6>
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default OurHistory;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/videosec/videosec.module.scss 0 → 100644
View file @ 7f7c2d48
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';
@import "../../scss/helpers/variables";
@import "../../scss/helpers/mixins";
.video_sec {
position: relative;
margin-bottom: 3.75rem;
@include media-breakpoint-up(md) {
margin-bottom: 6.25rem;
}
.capsule_pattern {
background-repeat: repeat-x;
height: 4.25rem;
background-size: contain;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-40px);
}
.video_sec_container {
@include media-breakpoint-down(lg) {
padding-left: 80px;
padding-right: 80px;
}
@include media-breakpoint-down(md) {
padding-left: 40px;
padding-right: 40px;
}
.video_wrapper {
position: relative;
display: inline-block;
width: 100%;
.responsive_embed {
padding-bottom: 56.25%;
position: relative;
height: 0;
margin-bottom: 1rem;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
}
}
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/components/videosec/videosec.tsx 0 → 100644
View file @ 7f7c2d48
import React from "react";
import styles from './videosec.module.scss';
import { Col, Container, Row } from "react-bootstrap";
const capsulPattern = "/capsule-pattern.webp";
const VideoSec: React.FC = () => {
return (
<section className={styles.video_sec}>
<div className={styles.capsule_pattern} style={{backgroundImage: `url(${capsulPattern})`}}></div>
<Container className={styles.video_sec_container}>
<Row className="align-items-center justify-content-center">
<Col md={12} lg={9}>
<div className={styles.video_wrapper}>
<div className={styles.responsive_embed}>
<iframe
src="https://www.youtube.com/embed/yPu2LAkETow?autoplay=1&amp;mute=1&amp;enablejsapi=1"
id="videoIframe"
allow="autoplay; encrypted-media"
allowFullScreen
frameBorder="0"
title="External Video">
</iframe>
</div>
</div>
</Col>
</Row>
</Container>
</section>
)
}
export default VideoSec;
\ No newline at end of file
src/Training/v37_RBT_Bootstrap_next/src/app/whoweare/page.tsx
View file @ 7f7c2d48
import React from "react";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Banner from "../components/banner/Banner";
const bannerData = {
bgimageUrl: "/banner.jpg",
smalltitle: "A Cooperative Effort to Feed",
title: "The World",
imageUrl: "/business-people.png",
};
import React from 'react'
import Analysis from '../components/analysis/analysis'
import VideoSec from '../components/videosec/videosec'
import OurApproach from '../components/our_approach/our_approach'
import OurHistory from '../components/our_history/our_history'
import Agriclture from '../components/agriculture/agriculture'
import LeadershipTeam from '../components/leadership/leadership'
import Banner from '../components/banner/Banner'
const WhoWeAre = () => {
return (
<>
<Banner {...bannerData} />
</>
);
};
return (
<>
<Banner
bgimageUrl = '/banner.webp'
imageUrl = '/business-people.png'
title = 'Growth'
smalltitle = 'Champions for '
/>
<Analysis />
<VideoSec />
<OurApproach />
<OurHistory />
<Agriclture />
<LeadershipTeam />
</>
)
}
export default WhoWeAre;
export default WhoWeAre
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment