Merge pull request #11 from singnet/master

Pull from parent
singnet · Aug 16, 2019 · 7c0f567 · 7c0f567
2 parents 8aaa00d + 9d41f84
commit 7c0f567
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 53 deletions.
diff --git a/src/assets/images/DummyGetStarted.png b/src/assets/images/DummyGetStarted.png
diff --git a/src/components/GetStarted/Category/FeatureMedia/GifContainer.js b/src/components/GetStarted/Category/FeatureMedia/GifContainer.js
@@ -1,7 +1,16 @@
 import React from "react";
+import { withStyles } from "@material-ui/styles";
 
-const GifContainer = ({ content }) => {
-  return <div>{content}</div>;
+import { useStyles } from "./styles";
+
+const GifContainer = ({ classes, content }) => {
+  return (
+    <img
+      src={content || "https://media.giphy.com/media/pLLLNpJWp6jjW/giphy.gif"}
+      alt="Demo Gif File"
+      className={classes.FullWidth}
+    />
+  );
 };
 
-export default GifContainer;
+export default withStyles(useStyles)(GifContainer);
diff --git a/src/components/GetStarted/Category/FeatureMedia/ImgContainer.js b/src/components/GetStarted/Category/FeatureMedia/ImgContainer.js
@@ -1,7 +1,11 @@
 import React from "react";
+import { withStyles } from "@material-ui/styles";
 
-const ImgContainer = ({ content }) => {
-  return <div>{content}</div>;
+import { useStyles } from "./styles";
+import DummyGetStarted from "../../../../assets/images/DummyGetStarted.png";
+
+const ImgContainer = ({ content, classes }) => {
+  return <img src={content || DummyGetStarted} alt="DummyImage" className={classes.FullWidth} />;
 };
 
-export default ImgContainer;
+export default withStyles(useStyles)(ImgContainer);
diff --git a/src/components/GetStarted/Category/FeatureMedia/VideoContainer.js b/src/components/GetStarted/Category/FeatureMedia/VideoContainer.js
@@ -1,7 +1,15 @@
 import React from "react";
+import { withStyles } from "@material-ui/styles";
 
-const VideoContainer = ({ content }) => {
-  return <div>{content}</div>;
+import { useStyles } from "./styles";
+
+const VideoContainer = ({ classes, content }) => {
+  return (
+    <video controls className={classes.FullWidth}>
+      <source src={content || "http://techslides.com/demos/sample-videos/small.mp4"} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  );
 };
 
-export default VideoContainer;
+export default withStyles(useStyles)(VideoContainer);
diff --git a/src/components/GetStarted/Category/FeatureMedia/styles.js b/src/components/GetStarted/Category/FeatureMedia/styles.js
@@ -0,0 +1,3 @@
+export const useStyles = theme => ({
+  FullWidth: { width: "100%" },
+});
diff --git a/src/components/GetStarted/Category/index.js b/src/components/GetStarted/Category/index.js
@@ -6,7 +6,7 @@ import FeatureMedia from "./FeatureMedia";
 import VerticalTabs from "./VerticalTabs";
 import { useStyles } from "./styles";
 
-const Category = ({ classes, icon: Icon, title, description, tabs }) => {
+const Category = ({ classes, icon: Icon, title, description, tabs, rightAlign }) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const handleChange = (event, selectedTabIndex) => {
@@ -21,7 +21,11 @@ const Category = ({ classes, icon: Icon, title, description, tabs }) => {
   };
 
   return (
-    <Grid container spacing={24} className={classes.CategoryWrapper}>
+    <Grid
+      container
+      spacing={24}
+      className={`${classes.CategoryWrapper} ${rightAlign ? classes.reverseDirection : null}`}
+    >
       <Grid item xs={12} sm={12} md={6} lg={6} className={classes.CategoryContent}>
         <div className={classes.Title}>
           <Icon />

diff --git a/src/components/GetStarted/Category/styles.js b/src/components/GetStarted/Category/styles.js
@@ -1,6 +1,11 @@
 export const useStyles = theme => ({
-  CategoryWrapper: { marginBottom: 60 },
+  CategoryWrapper: {
+    marginBottom: 60,
+    justifyContent: "space-between",
+  },
   CategoryContent: {
+    maxWidth: "45%",
+    paddingTop: 25,
     "& p": {
       margin: "10px 0 27px",
       color: theme.palette.text.mediumShadeGray,
@@ -10,6 +15,12 @@ export const useStyles = theme => ({
       "& span": { fontWeight: 600 },
     },
   },
+  reverseDirection: {
+    flexDirection: "row-reverse",
+    "& div": {
+      "&:last-of-type": { justifyContent: "flex-start" },
+    },
+  },
   Title: {
     "& svg": {
       marginRight: 11,
@@ -26,4 +37,8 @@ export const useStyles = theme => ({
       lineHeight: "33px",
     },
   },
+  CategoryMedia: {
+    display: "flex",
+    justifyContent: "flex-end",
+  },
 });
diff --git a/src/components/GetStarted/index.js b/src/components/GetStarted/index.js
@@ -20,13 +20,14 @@ const GetStarted = ({ classes }) => {
           }
         />
       </Grid>
-      {GetStartedCategoriesData.map(item => (
+      {GetStartedCategoriesData.map((item, index) => (
         <Category
           key={item.categoryTitle}
           icon={item.categoryIcon}
           title={item.categoryTitle}
           description={item.categoryDescription}
           tabs={item.categoryTabs}
+          rightAlign={(index + 1) % 2 === 0}
         />
       ))}
       <Grid item xs={12} sm={12} md={12} lg={12} className={classes.SignUpFree}>

diff --git a/src/components/common/Footer/FooterLink.js b/src/components/common/Footer/FooterLink.js
@@ -4,11 +4,17 @@ import SnetSvgLogo from "../SnetSvgLogo";
 
 import { useStyles } from "./styles";
 
-const FooterLink = ({ label, link, image }) => {
+const FooterLink = ({ label, link, image, internalLink }) => {
   const classes = useStyles();
   return (
     <li className={classes.footerLinks}>
-      <a href={link} className={classes.footerLinkText} title={label}>
+      <a
+        href={link}
+        className={classes.footerLinkText}
+        title={label}
+        target={internalLink ? "_self" : "_blank"}
+        rel="noopener noreferrer"
+      >
         {image ? <SnetSvgLogo /> : label}
       </a>
     </li>

diff --git a/src/components/common/Footer/PrimaryFooter/FooterLinks/index.js b/src/components/common/Footer/PrimaryFooter/FooterLinks/index.js
@@ -13,7 +13,13 @@ const FooterLinks = ({ data }) => {
         <ul key={item.title} className={classes.footerLinksList}>
           <FooterLinkTitle title={item.title} />
           {item.children.map(child => (
-            <FooterLink key={child.label} image={child.image} link={child.link} label={child.label} />
+            <FooterLink
+              key={child.label}
+              image={child.image}
+              link={child.link}
+              label={child.label}
+              internalLink={child.internalLink}
+            />
           ))}
         </ul>
       ))}

diff --git a/src/components/common/Footer/PrimaryFooter/index.js b/src/components/common/Footer/PrimaryFooter/index.js
@@ -13,7 +13,13 @@ const PrimaryFooter = ({ leftData, mainData }) => {
         <FooterLogo />
         <ul className={classes.footerLogoSection}>
           {leftData.map(item => (
-            <FooterLink key={item.label} image={item.image} link={item.link} label={item.label} />
+            <FooterLink
+              key={item.label}
+              image={item.image}
+              link={item.link}
+              label={item.label}
+              internalLink={item.internalLink}
+            />
           ))}
         </ul>
       </div>

diff --git a/src/components/common/Footer/SocialIcon.js b/src/components/common/Footer/SocialIcon.js
@@ -7,7 +7,7 @@ const SocialIcon = ({ item }) => {
   const classes = useStyles();
   return (
     <li className={classes.socialIconsLink}>
-      <a href="/" title={item.title} className={classes.socialIcon}>
+      <a href={item.link} title={item.title} className={classes.socialIcon} target="_blank" rel="noopener noreferrer">
         <Icon className={item.className} fontSize="large" />
       </a>
     </li>

diff --git a/src/components/common/Footer/data.js b/src/components/common/Footer/data.js
@@ -1,62 +1,62 @@
 const PrimaryFooterLeft = [
-  { label: "Contact Us", link: "#" },
-  { label: "Foundation Main Site", link: "#" },
-  { label: "Singularity Studio", link: "#" },
-  { label: "White Paper", link: "#" },
-  { label: "Jobs", link: "#" },
+  //{ label: "Contact Us", link: "https://singularitynet.io/#contact" },
+  //{ label: "Foundation Main Site", link: "https://singularitynet.io/" },
+  { label: "Singularity Studio", link: "https://singularitynet.io/studio/" },
+  { label: "White Paper", link: "https://public.singularitynet.io/whitepaper.pdf" },
+  { label: "Jobs", link: "https://singularitynet.io/jobs-temp/" },
 ];
 
 const PrimaryFooterMain = [
   {
     title: "AI Marketplace",
     children: [
-      { label: "Free Signup", link: "#" },
-      { label: "Pricing", link: "#" },
-      { label: "Get Started", link: "#" },
-      { label: "Core Concepts", link: "#" },
-      { label: "Tutorials", link: "#" },
+      { label: "Free Signup", link: "#", internalLink: true },
+      { label: "Get Started", link: "https://dev.singularitynet.io/tutorials/getting-started/" },
+      { label: "Core Concepts", link: "https://dev.singularitynet.io/docs/concepts/" },
+      { label: "Tutorials", link: "https://dev.singularitynet.io/tutorials/" },
     ],
   },
   {
     title: "Resources",
     children: [
-      { label: "Documentation", link: "#" },
-      { label: "Datasets Download", link: "#" },
-      { label: "API Library ", link: "#" },
-      { label: "Telegram", link: "#" },
-      { label: "Forum", link: "#" },
-      { label: "Blog", link: "#" },
+      { label: "Documentation", link: "https://github.com/singnet" },
+      //{ label: "Datasets Download", link: "#" },
+      //{ label: "API Library ", link: "#" },
+      { label: "Telegram", link: "https://telegram.me/singularitynet" },
+      { label: "Forum", link: "https://community.singularitynet.io/" },
+      { label: "Blog", link: "http://blog.singularitynet.io/" },
     ],
   },
   {
     title: "Developers",
     children: [
-      { label: "Request Dev Account", link: "#" },
-      { label: "Request AI Services", link: "#" },
-      { label: "Bounty Rewards", link: "#" },
-      { label: "Contribute Program", link: "#" },
-      { label: "Changelog & Status", link: "#" },
+      { label: "Developer Portal", link: "https://dev.singularitynet.io" },
+      { label: "Github", link: "https://github.com/singnet" },
+      //{ label: "Request Dev Account", link: "#" },
+      //{ label: "Request AI Services", link: "#" },
+      //{ label: "Bounty Rewards", link: "#" },
+      //{ label: "Contribute Program", link: "#" },
+      //{ label: "Changelog & Status", link: "#" },
     ],
   },
   {
     title: "More",
     children: [
-      { label: "AGI Faucet", link: "#" },
-      { label: "MetaMask Plugin", link: "#" },
-      { label: "Events", link: "#" },
-      { label: "Workshops", link: "#" },
-      { label: "Platform Roadmap", link: "#" },
+      { label: "MetaMask Plugin", link: "https://metamask.io" },
+      //{ label: "Events", link: "#" },
+      //{ label: "Workshops", link: "#" },
+      //{ label: "Platform Roadmap", link: "#" },
     ],
   },
 ];
 
 const SecondaryFooter = [
-  { title: "Facebook", className: "fab fa-facebook-f" },
-  { title: "Linkedin", className: "fab fa-linkedin-in" },
-  { title: "Github", className: "fab fa-github" },
-  { title: "Twitter", className: "fab fa-twitter" },
-  { title: "Instagram", className: "fab fa-instagram" },
-  { title: "Youtube", className: "fab fa-youtube" },
+  { title: "Facebook", className: "fab fa-facebook-f", link: "https://www.facebook.com/singularityNET.io" },
+  { title: "Linkedin", className: "fab fa-linkedin-in", link: "https://www.linkedin.com/company/singularitynet/" },
+  { title: "Github", className: "fab fa-github", link: "https://github.com/singnet" },
+  { title: "Twitter", className: "fab fa-twitter", link: "https://twitter.com/singularity_net" },
+  { title: "Instagram", className: "fab fa-instagram", link: "https://instagram.com/singularitynet.io" },
+  { title: "Youtube", className: "fab fa-youtube", link: "https://www.youtube.com/channel/UCbTE8vfz5zuEK5uRnc2yjrw" },
 ];
 
 export const FooterData = {

diff --git a/src/utility/constants/GetStarted.js b/src/utility/constants/GetStarted.js
@@ -14,7 +14,7 @@ export const GetStartedCategoriesData = [
     categoryDescription:
       "Exploring AI – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
     categoryTabs: [
-      { title: "List or Card views", media: { type: "video", content: "content1" } },
+      { title: "List or Card views", media: { type: "gif", content: "" } },
       { title: "Change Filter options", media: { type: "gif", content: "content2" } },
       { title: "Sort options", media: { type: "gif", content: "content3" } },
       { title: "Rating Ranking", media: { type: "gif", content: "content4" } },
@@ -27,7 +27,7 @@ export const GetStartedCategoriesData = [
     categoryDescription:
       "Exploring AI – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
     categoryTabs: [
-      { title: "About Details", media: { type: "video", content: "content" } },
+      { title: "About Details", media: { type: "video", content: "" } },
       { title: "Feature Label 2", media: { type: "gif", content: "content" } },
       { title: "Feature Label 3", media: { type: "gif", content: "content" } },
       { title: "Feature Label 4", media: { type: "gif", content: "content" } },
@@ -40,7 +40,7 @@ export const GetStartedCategoriesData = [
     categoryDescription:
       "Using your inputs  – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
     categoryTabs: [
-      { title: "Accessing the Demo", media: { type: "video", content: "content" } },
+      { title: "Accessing the Demo", media: { type: "img", content: "" } },
       { title: "Change Filter options", media: { type: "gif", content: "content" } },
       { title: "Sort options", media: { type: "gif", content: "content" } },
       { title: "Rating Ranking", media: { type: "gif", content: "content" } },