diff --git a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-review.js b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-review.js new file mode 100644 index 0000000000000..b44c403a2b658 --- /dev/null +++ b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-review.js @@ -0,0 +1,112 @@ +import React from "react"; +import styled from "styled-components"; +import CollaborateSvg from "../Kanvas-collaborate/images/collaborate.svg"; +import { useInView } from "react-intersection-observer"; +import { useState } from "react"; +import Button from "../../../reusecore/Button"; + +const CollaborationFeatureWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + padding: 5% 5% 8%; + + .hero-div { + position: relative; + transition: 0.5s; + display: flex; + flex-direction: row; /* Changed to row to place image on left, text on right */ + background-color: ${props => props.theme.grey121212ToWhite}; + max-width: 90%; + height: fit-content; + justify-content: space-between; + align-items: center; + padding: 1% 3% 1%; + 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; /* Stack image above text on mobile */ + } + } + + .hero-text { + display: flex; + flex-direction: column; + flex: 0 0 40%; + max-width: 40%; + @media only screen and (max-width: 767px) { + max-width: 100%; + } + } + + h2 { + span { + color: ${props => props.theme.text}; + } + } + + .hero-image { + flex: 0 0 50%; + max-width: 50%; + } + + img { + opacity: 0; + transition: opacity ease-out 0.5s; + } + + svg { + opacity: 0; + transition: opacity ease-out 0.5s; + .collab4-colorMode_svg__colorMode1 { + fill: ${props => props.theme.whiteToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .collab4-colorMode_svg__colorMode2 { + fill: ${props => props.theme.greyB4B4B4ToGrey505050}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .collab4-colorMode_svg__colorMode3 { + fill: ${props => props.theme.blackToWhite}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + @media only screen and (max-width: 767px) { + width: 100%; + } + } + + .visible { + opacity: 1; + transition: opacity ease-in 0.5s; + } +`; + +const CollaborationFeatureReview = () => { + const [locatorRef, inView] = useInView({ threshold: 0.5 }); + const [imageInView, setImageInView] = useState(false); + if (inView && !imageInView) { + setImageInView(true); + } else if (imageInView && !inView) { + setImageInView(false); + } + return ( + +
+
+ +
+
+

+ Review Designs at a glance +

+

+ Streamline your design review process with Kanvas, allowing you to quickly assess and provide feedback on designs, ensuring efficient collaboration and project progression. +

+
+
+ + ); +}; + +export default CollaborationFeatureReview; \ No newline at end of file diff --git a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-share.js b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-share.js new file mode 100644 index 0000000000000..c1087c71a0e85 --- /dev/null +++ b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-share.js @@ -0,0 +1,130 @@ +import React, { useState, useEffect } from "react"; +import styled from "styled-components"; +import { useInView } from "react-intersection-observer"; +// ...existing imports... +import sharegraphic from "../Kanvas-collaborate/images/model-where.gif"; +import Button from "../../../reusecore/Button"; + +const CollaborationFeatureWrapper = styled.div` + + display: flex; + flex-direction: row; + /* background-color: ${props => props.theme.grey121212ToWhite};; + max-width: 90%; */ + justify-content: center; + /* align-items: center; */ + padding: 5% 5% 8%; + /* @media only screen and (max-width: 767px) { + text-align: center; + 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: 1% 3% 1%; + 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; + flex: 0 0 40%; + max-width: 40%; + @media only screen and (max-width: 767px) { + max-width: 100%; + } + } + + h2 { + span { + color: ${props => props.theme.text}; + } + } + + .hero-image { + flex: 0 0 50%; + max-width: 50%; + } + + .hero-image img { + opacity: 0; + transition: opacity ease-out 0.5s; + display: block; + width: 100%; + height: auto; + } + + svg { + opacity: 0; + transition: opacity ease-out 0.5s; + .collab4-colorMode_svg__colorMode1 + { + fill: ${props => props.theme.whiteToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .collab4-colorMode_svg__colorMode2{ + fill: ${props => props.theme.greyB4B4B4ToGrey505050}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .collab4-colorMode_svg__colorMode3{ + fill: ${props => props.theme.blackToWhite}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + @media only screen and (max-width: 767px) { + width: 100%; + } + } + + .hero-image.visible img { + opacity: 1; + transition: opacity ease-in 0.5s; + } + +`; +const CollaborationFeatureShare = () => { + const [ref, inView] = useInView({ + threshold: 0.2, + triggerOnce: true, + }); + const [hasBeenInView, setHasBeenInView] = useState(false); + + useEffect(() => { + if (inView && !hasBeenInView) { + setHasBeenInView(true); + } + }, [inView, hasBeenInView]); + + return ( + +
+
+ Share and Collaborate Seamlessly +
+
+

+ Share Your Designs Seamlessly +

+

+ Effortlessly share your projects and collaborate with team members in real-time, enhancing productivity and teamwork. +

+
+
+ + ); +}; + +export default CollaborationFeatureShare; + diff --git a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-tags.js b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-tags.js new file mode 100644 index 0000000000000..683debaaf48a1 --- /dev/null +++ b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-tags.js @@ -0,0 +1,120 @@ +import styled from "styled-components"; +import React from "react"; +import { useInView } from "react-intersection-observer"; +import GroupComponents from "../Kanvas-collaborate/images/group-components.png"; +import { useState } from "react"; +import Button from "../../../reusecore/Button"; + +const CollaborationFeatureWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + padding: 5% 5% 8%; + + .hero-div { + position: relative; + transition: 0.5s; + display: flex; + flex-direction: row-reverse; /* Changed to row to place image on left, text on right */ + background-color: ${props => props.theme.grey121212ToWhite}; + max-width: 90%; + height: fit-content; + justify-content: space-between; + align-items: center; + padding: 1% 3% 1%; + 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; /* Stack image above text on mobile */ + } + } + + .hero-text { + display: flex; + flex-direction: column; + flex: 0 0 40%; + max-width: 40%; + @media only screen and (max-width: 767px) { + max-width: 100%; + } + } + + h2 { + span { + color: ${props => props.theme.text}; + } + } + + .hero-image { + flex: 0 0 30%; + max-width: 30%; + } + + img { + opacity: 0; + transition: opacity ease-out 0.5s; + } + + svg { + opacity: 0; + transition: opacity ease-out 0.5s; + .collab4-colorMode_svg__colorMode1 { + fill: ${props => props.theme.whiteToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .collab4-colorMode_svg__colorMode2 { + fill: ${props => props.theme.greyB4B4B4ToGrey505050}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .collab4-colorMode_svg__colorMode3 { + fill: ${props => props.theme.blackToWhite}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + @media only screen and (max-width: 767px) { + width: 100%; + } + } + + .visible { + opacity: 1; + transition: opacity ease-in 0.5s; + } + .button { + width: fit-content;} +`; + +const CollaborationFeatureTag = () => { + const [locatorRef, inView] = useInView({ threshold: 0.5 }); + // const [sectionRef, sectionView] = useInView({ threshold: 1.0 }); + const [imageInView, setimageInView] = useState(false); + // const [sectionInView, setSectionInView] = useState(false); + if (inView && !imageInView) + setimageInView(true); + else if (imageInView && !inView) + setimageInView(false); + // if (sectionView && !sectionInView) + // setSectionInView(true); + // if (sectionInView && !sectionView) + // setSectionInView(false); + + return ( + +
+
+ +
+
+

+ Group your components with Tags +

+

+ Use tags to organize and categorize components, with Labels for visible identification and Annotations for additional details and quick search. +

+
+
+ + ); +}; + +export default CollaborationFeatureTag; \ No newline at end of file diff --git a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-team.js b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-team.js index 1441dd5cd069b..11f00d3d12bd2 100644 --- a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-team.js +++ b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-team.js @@ -12,7 +12,7 @@ const CollaborationFeatureWrapper = styled.div` max-width: 90%; */ justify-content: center; /* align-items: center; */ - padding: 5% 5% 8%; + padding: 5% 3% 1%; /* @media only screen and (max-width: 767px) { text-align: center; flex-direction: column-reverse; @@ -22,13 +22,13 @@ const CollaborationFeatureWrapper = styled.div` position: relative; transition: 0.5s; display: flex; - flex-direction: row-reverse; + flex-direction: row; background-color: ${props => props.theme.grey121212ToWhite};; max-width: 90%; height: fit-content; justify-content: space-between; align-items: center; - padding: 2% 5% 8%; + padding: 1% 3% 1%; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); @media only screen and (max-width: 767px) { text-align: center; diff --git a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-work.js b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-work.js index c32c501342d66..917da2d2a09f8 100644 --- a/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-work.js +++ b/src/sections/Kanvas/Kanvas-collaborate/collaboration-feature-work.js @@ -13,7 +13,7 @@ const CollaborationFeatureWrapper = styled.div` max-width: 90%; justify-content: space-between; align-items: center; - padding: 2% 5% 8%; + padding: 1% 3% 5%; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); @media only screen and (max-width: 767px) { text-align: center; diff --git a/src/sections/Kanvas/Kanvas-collaborate/images/collaborate.svg b/src/sections/Kanvas/Kanvas-collaborate/images/collaborate.svg new file mode 100644 index 0000000000000..30657bed4a2f9 --- /dev/null +++ b/src/sections/Kanvas/Kanvas-collaborate/images/collaborate.svg @@ -0,0 +1,479 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Kanvas/Kanvas-collaborate/images/group-components.png b/src/sections/Kanvas/Kanvas-collaborate/images/group-components.png new file mode 100644 index 0000000000000..45906140f032c Binary files /dev/null and b/src/sections/Kanvas/Kanvas-collaborate/images/group-components.png differ diff --git a/src/sections/Kanvas/Kanvas-collaborate/images/model-where.gif b/src/sections/Kanvas/Kanvas-collaborate/images/model-where.gif new file mode 100644 index 0000000000000..3e7fdaabcbdc9 Binary files /dev/null and b/src/sections/Kanvas/Kanvas-collaborate/images/model-where.gif differ diff --git a/src/sections/Kanvas/Kanvas-collaborate/index.js b/src/sections/Kanvas/Kanvas-collaborate/index.js index f0f8bad9d2bd7..d9aa4be710199 100644 --- a/src/sections/Kanvas/Kanvas-collaborate/index.js +++ b/src/sections/Kanvas/Kanvas-collaborate/index.js @@ -3,15 +3,19 @@ import KanvasCollaborateWrapper from "./kanvas-collaborate.style"; import KanvasCollaborateBanner from "./kanvas-collaborate-banner"; import CollaborationFeatureTeam from "./collaboration-feature-team"; import CollaborationFeatureWork from "./collaboration-feature-work"; - +import CollaborationFeatureShare from "./collaboration-feature-share"; import Reviews from "../../Pricing/review-slider"; - +import CollaborationFeatureReview from "./collaboration-feature-review"; +import CollaborationFeatureTag from "./collaboration-feature-tags"; const KanvasCollaborate = () => { return ( + + + {/* */}