Commit 5651b5f2 authored by Mamtha Adepu's avatar Mamtha Adepu

timeline styles issues

parent 9db1fda6
// Indicator.tsx
import React from "react";
import { Box, useTheme } from "@mui/material";
interface IndicatorProps {
isActive: boolean;
}
const Indicator: React.FC<IndicatorProps> = ({ isActive }) => {
const theme = useTheme();
return (
<Box
sx={{
width: 12,
height: 12,
borderRadius: "50%",
backgroundColor: isActive ? theme.palette.primary.main : theme.palette.grey[400],
transition: "background-color 0.3s",
mx: 1,
}}
/>
);
};
export default Indicator;
......@@ -33,7 +33,8 @@ const LOL_Timeline_12 = () => {
"& .top_image_block": {
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "370px",
// width: "370px",
width:"46%",
marginLeft: "auto",
},
},
......@@ -56,6 +57,7 @@ const LOL_Timeline_12 = () => {
bottom: "0",
},
[theme.breakpoints.up("lg")]: {
width:"47%",
position: "relative",
},
},
......@@ -96,7 +98,8 @@ const LOL_Timeline_12 = () => {
width: "50%",
margin: "-70px 0 0 auto",
[theme.breakpoints.up("sm")]: {
width: "400px",
// width: "400px",
width:"61%",
margin: "100px 0 0 -100px",
},
[theme.breakpoints.up("lg")]: {
......@@ -117,7 +120,8 @@ const LOL_Timeline_12 = () => {
marginLeft: "auto",
},
[theme.breakpoints.up("lg")]: {
width: "420px",
// width: "420px",
width:"90%",
marginTop: "0px",
},
"& img": {
......
......@@ -5,6 +5,12 @@ import { Box, CardMedia, Grid, useTheme } from "@mui/material";
import { styled } from "@mui/system";
const TimeLineSecEvent2 = styled(Box)(({ theme }) => ({
"& .grid_container":{
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "100vw",
},
},
"& .grid_item_left": {
backgroundColor: theme.palette.custom.primaryLight,
padding: "45px 30px",
......@@ -77,7 +83,7 @@ const LOL_Timeline_2 = () => {
return (
<TimeLineSecEvent2 component="section">
<Grid container sx={{ height: { sm: "100vh" }, width: { sm: "100vw" } }}>
<Grid container className="grid_container">
<Grid item xs={12} sm={8} lg={5} className="grid_item_left">
<Box
sx={{ maxWidth: "420px", marginTop: { sm: "250px", lg: "0px" } }}
......
......@@ -5,6 +5,12 @@ import { Box, CardMedia, Grid, useTheme } from "@mui/material";
import { styled } from "@mui/system";
const TimeLineSecEvent3 = styled(Box)(({ theme }) => ({
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "100vw",
},
},
"& .grid_item_left": {
position: "relative",
padding: "40px",
......@@ -168,7 +174,7 @@ const LOL_Timeline_3 = () => {
return (
<TimeLineSecEvent3 component="section">
<Grid container sx={{ height: { sm: "100vh" }, width: { sm: "100vw" } }}>
<Grid container className="grid_container">
<Grid item xs={12} sm={8} className="grid_item_left">
<Box className="butter_prizes">
<CardMedia
......
......@@ -5,6 +5,15 @@ import React from "react";
import TimelineHeading from "./TimelineHeading";
const TimeLineSecEvent4 = styled(Box)(({ theme }) => ({
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "200vw",
},
[theme.breakpoints.up("lg")]: {
width: "100vw",
},
},
"& .grid_item-left": {
backgroundColor: theme.palette.custom.primaryLight,
position: "relative",
......@@ -160,7 +169,7 @@ const LOL_Timeline_4 = () => {
<TimeLineSecEvent4 component="section">
<Grid
container
sx={{ height: { sm: "100vh" }, width: { sm: "200vw", lg: "100vw" } }}
className="grid_container"
>
<Grid item xs={12} sm={6} lg={5} className="grid_item-left">
<Box sx={{ position: "relative", zIndex: "1", height: "100%" }}>
......
......@@ -5,6 +5,15 @@ import React from "react";
import TimelineHeading from "./TimelineHeading";
const TimeLineSecEvent5 = styled(Box)(({ theme }) => ({
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "200vw",
},
[theme.breakpoints.up("lg")]: {
width: "100vw",
},
},
"& .grid_item_left": {
backgroundColor: theme.palette.custom.primaryLight,
position: "relative",
......@@ -120,7 +129,7 @@ const LOL_Timeline_5 = () => {
<TimeLineSecEvent5 component="section">
<Grid
container
sx={{ height: { sm: "100vh" }, width: { sm: "200vw", lg: "100vw" } }}
className="grid_container"
>
<Grid item xs={12} sm={6} className="grid_item_left">
<Box className="victory_image_box">
......
......@@ -5,7 +5,7 @@ import React from "react";
import TimelineHeading from "./TimelineHeading";
const TimeLineSecEvent6 = styled(Box)(({ theme }) => ({
".container": {
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "200vw",
......@@ -14,7 +14,7 @@ const TimeLineSecEvent6 = styled(Box)(({ theme }) => ({
width: "100vw",
},
},
".item-left": {
".grid_item-left": {
backgroundColor: theme.palette.custom.primaryLight,
display: "flex",
justifyContent: "flex-end",
......@@ -53,7 +53,7 @@ const TimeLineSecEvent6 = styled(Box)(({ theme }) => ({
// margin: "164px 130px",
// },
},
".item-right": {
".grid_item-right": {
backgroundColor: theme.palette.custom.goldenPoppy,
display: "flex",
justifyContent: "center",
......@@ -95,8 +95,8 @@ const LOL_Timeline_6 = () => {
};
return (
<TimeLineSecEvent6 component="section">
<Grid container className="container">
<Grid item xs={12} sm={8} className="item-left">
<Grid container className="grid_container">
<Grid item xs={12} sm={7} md={8} className="grid_item-left">
<Box className="box-left">
<Box className="image-left">
<CardMedia
......@@ -119,7 +119,7 @@ const LOL_Timeline_6 = () => {
/>
</Box>
</Grid>
<Grid item xs={12} sm={4} className="item-right">
<Grid item xs={12} sm={5} md={4} className="grid_item-right">
<Box className="box-right">
<TimelineHeading
year="1960"
......
......@@ -5,7 +5,7 @@ import React from "react";
import TimelineHeading from "./TimelineHeading";
const TimeLineSecEvent7 = styled(Box)(({ theme }) => ({
".container": {
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "200vw",
......@@ -14,7 +14,7 @@ const TimeLineSecEvent7 = styled(Box)(({ theme }) => ({
width: "100vw",
},
},
".item-left": {
".grid_item-left": {
backgroundColor: theme.palette.custom.FernGreen,
display: "flex",
flexDirection: "column",
......@@ -63,7 +63,7 @@ const TimeLineSecEvent7 = styled(Box)(({ theme }) => ({
// width: "241px",
// },
},
".item-right": {
".grid_item-right": {
backgroundColor: theme.palette.custom.primaryLight,
paddingLeft: "0",
[theme.breakpoints.up("sm")]: {
......@@ -130,8 +130,8 @@ const LOL_Timeline_7 = () => {
return (
<TimeLineSecEvent7 component="section">
<Grid container className="container">
<Grid item xs={12} sm={5} className="item-left">
<Grid container className="grid_container">
<Grid item xs={12} sm={5} className="grid_item-left">
<Box className="image-left">
<CardMedia
component="img"
......@@ -156,7 +156,7 @@ const LOL_Timeline_7 = () => {
</Box>
</Box>
</Grid>
<Grid item xs={12} sm={7} className="item-right">
<Grid item xs={12} sm={7} className="grid_item-right">
<Box className="right-content">
<Box className="heading-right">
<TimelineHeading
......
......@@ -5,7 +5,7 @@ import React from "react";
import TimelineHeading from "./TimelineHeading";
const TimeLineSecEvent8 = styled(Box)(({ theme }) => ({
".container": {
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "200vw",
......@@ -14,7 +14,7 @@ const TimeLineSecEvent8 = styled(Box)(({ theme }) => ({
width: "100vw",
},
},
".item-left": {
".grid_item-left": {
backgroundColor: theme.palette.custom.moonstoneBlue,
display: "flex",
flexDirection: "column",
......@@ -44,7 +44,7 @@ const TimeLineSecEvent8 = styled(Box)(({ theme }) => ({
width: "64%",
},
},
".item-right": {
".grid_item-right": {
backgroundColor: theme.palette.custom.primaryLight,
display: "flex",
flexFlow: "column-reverse",
......@@ -97,8 +97,8 @@ const LOL_Timeline_8 = () => {
return (
<TimeLineSecEvent8 component="section" className="section">
<Grid container className="container">
<Grid item xs={12} sm={4} className="item-left">
<Grid container className="grid_container">
<Grid item xs={12} sm={4} className="grid_item-left">
<Box className="image-right-hand">
<CardMedia
component="img"
......@@ -129,7 +129,7 @@ const LOL_Timeline_8 = () => {
</Box>
</Box>
</Grid>
<Grid item xs={12} sm={8} className="item-right">
<Grid item xs={12} sm={8} className="grid_item-right">
<Box className="right-content">
<Box className="heading-right">
<TimelineHeading
......
"use client";
import { Box, CardMedia, Grid, useTheme } from "@mui/material";
import { Box, CardMedia, Grid, styled, useTheme } from "@mui/material";
import React from "react";
import TimelineHeading from "./TimelineHeading";
const TimeLineSecEvent9 = styled(Box)(({ theme }) => ({
".grid_container": {
[theme.breakpoints.up("sm")]: {
height: "100vh",
width: "200vw",
},
[theme.breakpoints.up("lg")]: {
width: "100vw",
},
},
".grid_item_left": {
backgroundColor: theme.palette.custom.brightRed,
position: "relative",
display: "flex",
justifyContent: "flex-end",
flexDirection: "column-reverse",
[theme.breakpoints.up("sm")]: {
paddingBottom: "120px",
flexDirection: "column",
},
},
".horse_img": {
width: "300px",
position: "relative",
marginLeft: "auto",
[theme.breakpoints.up("sm")]: {
position: "absolute",
right: "0",
top: "50%",
transform: "translate(20%,-50%)",
},
},
".heading_left_box": {
padding: "80px 30px",
[theme.breakpoints.up("sm")]: {
padding: "0",
maxWidth: "340px",
marginLeft: "130px",
},
},
".farmer_owned_img": {
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "51%",
},
},
".grid_item_right": {
display: "flex",
flexDirection: "column-reverse",
justifyContent: "space-between",
backgroundColor: theme.palette.custom.primaryLight,
[theme.breakpoints.up("sm")]: {
paddingBottom: "120px",
flexDirection: "column",
},
".image_top_right":{
width: "100%",
[theme.breakpoints.up("sm")]: {
width:"84%"
},
},
".flex_box": {
display: "flex",
flexDirection: "column-reverse",
[theme.breakpoints.up("sm")]: {
paddingLeft: "180px",
flexDirection: "column",
},
},
".heading_right_box": {
padding: "30px",
textAlign: "right",
[theme.breakpoints.up("sm")]: {
padding: "0",
textAlign: "left",
maxWidth: "364px",
},
},
},
}));
const LOL_Timeline_9 = () => {
const theme = useTheme();
const Year_2001_Colors_1 = {
......@@ -15,42 +97,17 @@ const LOL_Timeline_9 = () => {
};
return (
<>
<Box component="section">
<Grid
container
sx={{ height: { sm: "100vh" }, width: { sm: "200vw", lg: "100vw" } }}
>
<Grid
item
xs={12}
sm={6}
sx={{
backgroundColor: theme.palette.custom.brightRed,
paddingBottom: { sm: "120px" },
position: "relative",
display: "flex",
justifyContent: "flex-end",
flexDirection: { xs: "column-reverse", sm: "column" },
}}
>
<Box
sx={{
width: "304px",
position: { xs: "relative", sm: "absolute" },
right: { sm: "0" },
top: { sm: "50%" },
transform: { sm: "translate(20%,-50%)" },
marginLeft: "auto"
}}
>
<TimeLineSecEvent9 component="section">
<Grid container className="grid_container">
<Grid item xs={12} sm={6} className="grid_item_left">
<Box className="horse_img">
<CardMedia
component="img"
alt="Farmer Owned Image"
image="/Group_152977.png"
/>
</Box>
<Box sx={{ maxWidth: { sm: "340px" }, padding: { xs: "80px 30px", sm: "0" }, marginLeft: { xs: "0", sm: "130px" } }}>
<Box className="heading_left_box">
<TimelineHeading
year="2001"
description="The Purina brand becomes part of our story through a strategic brand license with Nestle Purina Petcare. We proudly carry on the the brand’s more than 120-year-old tradition of providing high-quality animal nutrition to U.S. farm animals."
......@@ -58,40 +115,24 @@ const LOL_Timeline_9 = () => {
/>
</Box>
<Box sx={{ width: { xs: "100%", sm: "", md: "490px" } }}>
<Box className="farmer_owned_img">
<CardMedia
component="img"
alt="Farmer Owned Image"
image="/BedellPhoto_4152.jpg"
/>
</Box>
</Grid>
<Grid
item
xs={12}
sm={6}
sx={{
display: "flex",
flexDirection: { xs: "column-reverse", sm: "column" },
justifyContent: "space-between",
paddingBottom: { sm: "120px" },
backgroundColor: theme.palette.custom.primaryLight,
}}
>
<Box sx={{ paddingLeft: { sm: "180px" }, display: "flex", flexDirection: { xs: "column-reverse", sm: "column" } }}>
<Box sx={{ width: { xs: "100%", sm: "655px" } }}>
<Grid item xs={12} sm={6} className="grid_item_right">
<Box className="flex_box">
<Box className="image_top_right">
<CardMedia
component="img"
alt="Farmer Owned Image"
image="/DMB_1579.jpg"
/>
</Box>
<Box sx={{ maxWidth: { sm: "364px" }, padding: { xs: "30px", sm: "0" }, textAlign: { xs: "right", sm: "left" } }}>
<Box className="heading_right_box">
<TimelineHeading
year="2001"
description="Our seed business joins with Agriliance’s crop protection products to form Winfield Solutions, LLC. The WinField® brand is later introduced in 2012."
......@@ -104,12 +145,11 @@ const LOL_Timeline_9 = () => {
component="img"
alt="Farmer Owned Image"
image="/Group_152984.jpg"
/>
</Box>
</Grid>
</Grid>
</Box>
</TimeLineSecEvent9>
</>
);
};
......
......@@ -76,6 +76,7 @@ const TimelinePage: React.FC = () => {
LOL_Timeline_13,
];
return (
<>
{isSmUp ? (
......
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