feat: Add features section

Author: tusharmoraye

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "build:prod": "react-scripts build && react-snap",
+    "build:prod": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -34,7 +34,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react-scripts": "3.4.3",
-    "react-snap": "^1.23.0"
+    "react-scripts": "3.4.3"
   }
 }

src/App.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import BackgroundImage from './components/BackgroundImage';
 import Header from './components/Header';
 import AboutProduct from './components/AboutProduct';
-// import Features from './components/Features';
+import Features from './components/Features';
 import DemoContainer from './containers/DemoContainer';
 import Footer from './components/Footer';
 
@@ -27,7 +27,7 @@ function App() {
         <Header />
         <AboutProduct />
         <DemoContainer />
-        {/* <Features /> */}
+        <Features />
         <Footer />
       </Container>
     </Wrapper>

src/assets/branding-insights.png

@@ -16,10 +16,7 @@ const StyledDiv = styled.div`
 `;
 
 const StyledImgDiv = styled.div`
-  background: #121212;
-  border: 1px solid #29FFBF;
   box-sizing: border-box;
-  box-shadow: 0px 12px 30px #081B15;
   border-radius: 8px;
   overflow: hidden;
 `;
@@ -30,11 +27,22 @@ const StyledImg = styled.img`
 `;
 
 const StyledTitle = styled.h3`
-  margin-top: 40px;
+  margin-top: 12px;
+  padding: 0 12px;
+
+  @media(min-width: 768px) {
+    margin-top: 40px;
+    padding: 0 24px;
+  }
 `;
 
 const StyledText = styled.div`
   font-size: 0.9rem;
+  padding: 0 12px;
+
+  @media(min-width: 768px) {
+    padding: 0 24px;
+  }
 `;
 
 function FeatureCard({ feature: { url, title, text } }) {

src/assets/similar-videos.png

@@ -2,6 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import FeatureCard from './FeatureCard';
+import brandingInsightsImg from '../assets/branding-insights.png';
+import twitterIntegrationImg from '../assets/twitter-integration.png';
+import similarVideosImg from '../assets/similar-videos.png';
 
 const StyledH1 = styled.h1`
   text-align: center;
@@ -19,20 +22,19 @@ const StyledH4 = styled.h4`
   font-weight: 400;
 `;
 
-
 const features = [
   {
-    url: "https://static.fotor.com.cn/assets/projects/pages/0eeff7e0-7528-11e9-9443-e356e0129bd6_2e592a62-4a05-44f5-8483-2b31549c98fe_thumb.jpg",
+    url: brandingInsightsImg,
     title: "Branding Insights",
     text: "Track your brand in stadiums, trailers, videos to gain their duration time on screen"
   },
   {
-    url: "https://static.fotor.com.cn/assets/projects/pages/0eeff7e0-7528-11e9-9443-e356e0129bd6_2e592a62-4a05-44f5-8483-2b31549c98fe_thumb.jpg",
+    url: twitterIntegrationImg,
     title: "Twitter Integration",
     text: "Edit and trim your favourite part of the video and share via twitter"
   },
   {
-    url: "https://static.fotor.com.cn/assets/projects/pages/0eeff7e0-7528-11e9-9443-e356e0129bd6_2e592a62-4a05-44f5-8483-2b31549c98fe_thumb.jpg",
+    url: similarVideosImg,
     title: "Similar Videos",
     text: "Watch visually similar videos within the platform"
   }
@@ -50,7 +52,7 @@ function Features() {
       <StyledH1>Smart AI Assistance</StyledH1>
       <StyledH4>We help creators, marketers and social media enthusiasts to gain insights through our machine learning platform</StyledH4>
       <StyledDiv>
-        {features.map(feature => <FeatureCard feature={feature} />)}
+        {features.map(feature => <FeatureCard feature={feature} key={feature.title} />)}
       </StyledDiv>
     </>
   );

src/assets/twitter-integration.png

@@ -6,8 +6,7 @@ import playIcon from '../assets/play.svg';
 const StyledDiv = styled.div`
   border: 2px solid ${props => props.selected ? "#A129FF" : "#434343"};
   border-radius: 8px;
-  width: 220px;
-  height: 125px;
+  width: 320px;
   overflow: hidden;
   display: flex;
   position: relative;

src/components/FeatureCard.js

@@ -30,7 +30,7 @@ const VideoMetadata = React.memo(
   function ({ video: { url } }) {
     return (
       <StyledDiv>
-        <StyledVideo src={url} controls />
+        <StyledVideo src={url} controls autoPlay muted />
         <Metadata />
       </StyledDiv>
     );

src/components/Features.js

@@ -46,7 +46,7 @@ function VideoModal({ url, isOpen, close }) {
     }
   }, [isOpen]);
 
-  const video = isOpen ? <StyledVideo controls src={url} onClick={onVideoClick}></StyledVideo> : null;
+  const video = isOpen ? <StyledVideo controls autoPlay muted src={url} onClick={onVideoClick}></StyledVideo> : null;
   return <StyledDiv onClick={close} isOpen={isOpen}>{video}</StyledDiv>;
 }