Skip to content

Commit

Permalink
Revert-lint-change
Browse files Browse the repository at this point in the history 
Signed-off-by: Tharanishwaran <[email protected]>
  • Loading branch information
@Tharanishwaran
Tharanishwaran authored Oct 25, 2024
1 parent 22b45ef commit 66dc0af
Showing 1 changed file with 131 additions and 77 deletions.
208 changes: 131 additions & 77 deletions src/sections/Home/Playground-home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,45 +19,51 @@ import kiali from "../../../collections/integrations/kiali-operator/icons/color/
import knative from "../../../collections/integrations/knative/icons/color/knative-color.svg";
import dapr from "../../../collections/integrations/dapr/icons/color/dapr-color.svg";
import fabedge from "../../../collections/integrations/fabedge/icons/color/fabedge-color.svg";
import helm from "../../../collections/integrations/helm-controller/icons/color/helm-controller-color.svg";
import amdgpu from "../../../collections/integrations/amd-gpu/icons/color/amd-gpu-color.svg";
import karmada from "../../../collections/integrations/karmada/icons/color/karmada-color.svg";
import kubeflow from "../../../collections/integrations/kubeflow/icons/color/kubeflow-color.svg";
import terraform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
import fluentd from "../../../collections/integrations/fluentd/icons/color/fluentd-color.svg";


const ViewsSectionWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
.views-section {
position: relative;
.small-card-container {
display: flex;
flex-direction: row;
background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
margin: 3%;
border-radius: 1rem;
max-width: 1920px;
width: 90vw;
height: 500px;
justify-content: space-evenly;
align-items: center;
padding: 0 5% 0 0;
box-sizing: border-box;
overflow: hidden;
@media only screen and (max-width: 767px) {
text-align: center;
flex-direction: column-reverse;
}
gap: 1rem;
}
.views-section {
position: relative;
display: flex;
flex-direction: row;
background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
margin: 3%;
border-radius: 1rem;
max-width: 1920px;
width: 90vw;
height: 500px;
justify-content: space-evenly;
align-items: center;
padding: 0 5% 0 0;
box-sizing: border-box;
//box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
@media only screen and (max-width: 767px) {
text-align: center;
flex-direction: column-reverse;
}
}
.hero-text {
display: flex;
flex-direction: column;
flex: 0 0 50%;
max-width: 50%;
flex: 0 0 50%;
max-width: 50%;
padding-bottom: 3rem;
@media only screen and (max-width: 767px) {
max-width: 100%;
Expand All @@ -70,95 +76,144 @@ const ViewsSectionWrapper = styled.div`
position: relative;
display: flex;
justify-content: center;
flex: 0 0 50%;
max-width: 50%;
flex: 0 0 50%;
max-width: 50%;
overflow: hidden;
height: 100%;
height: 100%;
@media only screen and (max-width: 767px) {
max-width: 100%;
}
}
.small-card-container {
h2 {
/* max-width: 90%; */
padding-bottom: 2%;
}
}
h4 {
max-width: 90%;
@media only screen and (max-width: 767px) {
max-width: 100%;
}
}
.hero-image {
position: relative;
display: flex;
gap: 1rem;
justify-content: center;
flex: 0 0 50%;
max-width: 50%;
svg {
align-items: center;
justify-content: center;
width: 70%;
.visualizer-views-colorMode_svg__colorMode1 {
fill: ${(props) => props.theme.whiteToGrey737373};
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
}
.visible {
opacity: 1;
transition: all 0.2s ease-in;
}
.not-visible {
opacity: 0;
transition: all 0.5s ease;
}
@media only screen and (max-width: 767px) {
max-width: 100%;
}
}
.container {
display: flex;
justify-content: center;
gap: 1rem;
height: 100%;
.overlay {
width: 483px;
height: 680px;
}
.container {
display: flex;
justify-content: center;
gap: 1.5rem;
height: 100%;
}
.line {
position: relative;
height: 100%;
overflow: hidden;
width: 200px;
position: relative;
height: 100%;
overflow: hidden;
width: 200px;
}
.scroll-track {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.scroll-down .scroll-track {
animation: scrollDown 25s linear infinite;
animation: scrollDown 35s linear infinite;
}
.scroll-up .scroll-track {
animation: scrollUp 25s linear infinite;
animation: scrollUp 35s linear infinite;
}
@keyframes scrollDown {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0%);
}
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0%);
}
}
@keyframes scrollUp {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-50%);
}
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-50%);
}
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 150px;
padding: 2rem;
width: 100%;
height:150px;
padding: 2rem;
box-sizing: border-box;
background-color: ${(props) => props.theme.backgroundColor};
margin-bottom: 1rem;
border-radius: 1rem;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.02);
}
//box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9ToBlackTwoFive};
}
// .box:hover {
// box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
// }
.box .boxImg {
width: auto;
height: 60px;
height: 60px;
max-width: 100%;
}
.box .boxText {
margin-top: 1rem;
text-align: center;
Expand All @@ -172,9 +227,13 @@ const ViewsSectionWrapper = styled.div`
padding: 2rem 2rem 0 2rem;
height: auto;
}
.small-card-container {
display: flex;
justify-content: center;
}
}
`;
`;

const KanvasVisualizerViews = () => {
const [imageRef] = useInView({ threshold: 0.3 });
Expand All @@ -189,9 +248,8 @@ const KanvasVisualizerViews = () => {
{ img: docker, name: "Docker" },
{ img: envoy, name: "Envoy" },
{ img: karmada, name: "Karmada" },
{ img: helm, name: "Helm" },
{ img: amdgpu, name: "AMD GPU" },
{ img: fluentd, name: "Fluentd" }

];

const rightColumnItems = [
Expand All @@ -206,27 +264,23 @@ const KanvasVisualizerViews = () => {
{ img: fabedge, name: "FabEdge" },
{ img: kubeflow, name: "Kubeflow" },
{ img: terraform, name: "Terraform" }

];

const renderColumn = (items, direction) => (
<div className={`line scroll-${direction}`}>
<div className="scroll-track">
{/* Original set */}
{items.map((item, index) => (
<div className="box" key={`set1-${index}`}>
<img className="boxImg" src={item.img} alt={item.name} />
<div className="boxText">{item.name}</div>
</div>
))}
{/* First duplicate set */}
{items.map((item, index) => (
<div className="box" key={`set2-${index}`}>
<img className="boxImg" src={item.img} alt={item.name} />
<div className="boxText">{item.name}</div>
</div>
))}
{/* Second duplicate set for seamless loop */}
{items.map((item, index) => (
<div className="box" key={`set3-${index}`}>
<img className="boxImg" src={item.img} alt={item.name} />
Expand All @@ -253,7 +307,7 @@ const KanvasVisualizerViews = () => {
<p>
Employ a set of learning paths that incorporate an application
networking centric curriculum featuring training on 200+
integrations.
integrations.
</p>
<Button
$primary
Expand Down

0 comments on commit 66dc0af

Please sign in to comment.