Skip to content

Fix: Kanvas Collaborate Page #6611

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 104 additions & 28 deletions src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-team.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import styled from "styled-components";
import { ReactComponent as CollaborationImg } from "./../FeaturesSection/Collaborate/images/collab4-colorMode.svg";
import { useInView } from "react-intersection-observer";
import { useState } from "react";
import conversationImage from "./images/conversation.png";
import componentGif from "./images/components.gif";
import versionHistory from "./images/versionHistory.png";
import undoRedo from "./images/undoRedo.png";

const CollaborationFeatureWrapper = styled.div`

display: flex;
flex-direction: row;
flex-direction: column;
/* background-color: ${props => props.theme.grey121212ToWhite};;
max-width: 90%; */
width: 100%;
justify-content: center;
/* align-items: center; */
padding: 5% 5% 8%;
Expand All @@ -18,24 +23,6 @@ const CollaborationFeatureWrapper = styled.div`
flex-direction: column-reverse;
} */

.hero-div {
position: relative;
transition: 0.5s;
display: flex;
flex-direction: row-reverse;
background-color: ${props => props.theme.grey121212ToWhite};;
max-width: 90%;
height: fit-content;
justify-content: space-between;
align-items: center;
padding: 2% 5% 8%;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@media only screen and (max-width: 767px) {
text-align: center;
flex-direction: column-reverse;
}
}

.hero-text {
display: flex;
flex-direction: column;
Expand All @@ -57,11 +44,6 @@ const CollaborationFeatureWrapper = styled.div`
max-width: 50%;
}

img {
opacity: 0;
transition: opacity ease-out 0.5s;
}

svg {
opacity: 0;
transition: opacity ease-out 0.5s;
Expand Down Expand Up @@ -90,6 +72,24 @@ const CollaborationFeatureWrapper = styled.div`

`;

const StyledDiv = styled.div`
position: relative;
display: flex;
flex-direction: ${({ reverse }) => (reverse ? "row-reverse" : "row")};
background-color: ${(props) => props.theme.grey121212ToWhite};
max-width: 90%;
height: fit-content;
justify-content: space-between;
align-items: center;
padding: 2% 5% 8%;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

@media only screen and (max-width: 767px) {
flex-direction: column;
text-align: center;
}
`;

const CollaborationFeatureTeam = () => {
const [locatorRef, inView] = useInView({ threshold: 0.5 });
// const [sectionRef, sectionView] = useInView({ threshold: 1.0 });
Expand All @@ -106,17 +106,93 @@ const CollaborationFeatureTeam = () => {

return (
<CollaborationFeatureWrapper>
<div className="hero-div">
<StyledDiv reverse={true} >
<div className="hero-image" ref={locatorRef}>
<CollaborationImg className={imageInView ? "visible" : ""} alt=""/>
<CollaborationImg className={imageInView ? "visible" : ""} alt="" />
</div>
<div className="hero-text">
<h2><span>Collaborate with your Team</span></h2>
<p>Build an iterative design flow with live collaboration that keeps you in the loop whether you are working in the office or remotely.</p>
</div>
</div>
</StyledDiv>
<StyledDiv reverse={false}>
<div className="hero-image">
<ImageWithAnimation
src={conversationImage}
alt="Conversation feature illustration"
/>
</div>
<div className="hero-text">
<h2><span>Integrated Comments</span></h2>
<p>Add comments directly to give feedback or ask questions. Great for discussing changes without leaving the canvas.</p>
</div>
</StyledDiv>
<StyledDiv reverse={true}>
<div className="hero-image">
<ImageWithAnimation
src={componentGif}
alt="Shared Component Library"
/>
</div>
<div className="hero-text">
<h2><span>Shared Component Library</span></h2>
<p>Access to a library of reusable components and designs. Save time by using or modifying shared designs.</p>
</div>
</StyledDiv>
<StyledDiv reverse={false}>
<div className="hero-image">
<ImageWithAnimation
src={versionHistory}
alt="Live Activity Log"
/>
</div>
<div className="hero-text">
<h2><span>Live Activity Log</span></h2>
<p>See real-time updates of edits, comments, and actions by you and your team.</p>
</div>
</StyledDiv>
<StyledDiv reverse={true}>
<div className="hero-image">
<ImageWithAnimation
src={undoRedo}
alt="Undo & Revert Changes"
/>
</div>
<div className="hero-text">
<h2><span>Undo & Revert Changes</span></h2>
<p>Made a mistake? No worries — you can easily undo recent actions. Go back to a previous state without losing your progress.</p>
</div>
</StyledDiv>
</CollaborationFeatureWrapper>
);
};

export default CollaborationFeatureTeam;
export default CollaborationFeatureTeam;


const StyledImage = styled.img`
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;

&.img-animate {
opacity: 1;
transform: translateY(0);
}

@media only screen and (max-width: 767px) {
width: 100%;
}
`;

const ImageWithAnimation = ({ src, alt }) => {
const [ref, inView] = useInView({ threshold: 0.4 });
return (
<StyledImage
ref={ref}
src={src}
alt={alt}
className={inView ? "img-animate" : ""}
/>
);
};
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading