smaller-studios · S-codes14 · Jul 3, 2021 · Jul 3, 2021 · Jul 3, 2021 · Aug 17, 2021
diff --git a/.eslintcache b/.eslintcache
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,13 +6,13 @@
   "dependencies": {
     "colorthief": "^2.3.0",
     "gh-pages": "^2.1.1",
-    "react": "^16.10.2",
+    "react": "^16.14.0",
     "react-dom": "^16.10.2",
-    "react-easy-emoji": "^1.3.0",
+    "react-easy-emoji": "^1.6.1",
     "react-headroom": "^3.0.0",
     "react-lottie": "^1.2.3",
     "react-reveal": "^1.2.2",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.3",
     "react-twitter-embed": "3.0.3",
     "react-typed": "^1.2.0"
   },
@@ -41,7 +41,7 @@
     ]
   },
   "devDependencies": {
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "prettier": "^2.2.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,23 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v8=qAJ44G5Bm7">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v8=qAJ44G5Bm7">
-    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg?v8=qAJ44G5Bm7" color="#885bd5">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v8=qAJ44G5Bm7">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://user-images.githubusercontent.com/81442054/119279026-6048d900-bc29-11eb-88e2-9b38a6869a9d.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://user-images.githubusercontent.com/81442054/119279026-6048d900-bc29-11eb-88e2-9b38a6869a9d.png">
+    <link rel="mask-icon" href="https://user-images.githubusercontent.com/81442054/119279026-6048d900-bc29-11eb-88e2-9b38a6869a9d.png" color="#885bd5">
+    <link rel="shortcut icon" href="https://user-images.githubusercontent.com/81442054/119279026-6048d900-bc29-11eb-88e2-9b38a6869a9d.png">
     <meta name="msapplication-TileColor" content="#603cba">
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#6c63ff" />
     <meta
       name="Smaller Studios"
-      content=""
+      content="Smaller Studios is a team of motivated young entrepreneurs, engineers and artists set out to focus on how we can better serve the incredible teams that we work with - That being you."
     />
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon_io/apple-touch-icon.png?v8=qAJ44G5Bm7">
-    <meta property="og:title" content="Smaller Studioz" />
-    <meta property="og:type" content="website" />
+    <link rel="apple-touch-icon" sizes="180x180" href="https://user-images.githubusercontent.com/81442054/119279026-6048d900-bc29-11eb-88e2-9b38a6869a9d.png">
+    <meta property="og:title" content="Smaller Studio" />
+    <meta property="og:type" content="Smaller Studios is a team of motivated young entrepreneurs, engineers and artists set out to focus on how we can better serve the incredible teams that we work with - That being you." />
     <meta property="og:url" content="https://smallerstudios.github.io/" />
-    <meta property="og:image" content="https://smallerstudios.github.io/static/media/developerActivity.59389695.svg" />
+    <meta property="og:image" content="https://user-images.githubusercontent.com/81442054/119279026-6048d900-bc29-11eb-88e2-9b38a6869a9d.png" />
+    <meta name="description" content="Smaller Studios is a team of motivated young entrepreneurs, engineers and artists set out to focus on how we can better serve the incredible teams that we work with - That being you." />
+    <meta name="twitter:card" content="Smaller Studios is a team of motivated young entrepreneurs, engineers and artists set out to focus on how we can better serve the incredible teams that we work with - That being you.">
     <link rel=preload href="/static/media/Montserrat-Regular.ee653992.ttf" as="font" type="font/woff" crossorigin>
     <link rel=preload href="/static/media/Agustina.21f233e1.woff" as="font" type="font/woff" crossorigin>
 	<!--

diff --git a/src/assets/images/At the office-amico.svg b/src/assets/images/At the office-amico.svg
diff --git a/src/assets/images/At the office-cuate.svg b/src/assets/images/At the office-cuate.svg
diff --git a/src/assets/images/At the office-pana.svg b/src/assets/images/At the office-pana.svg
diff --git a/src/assets/images/At the office-rafiki.svg b/src/assets/images/At the office-rafiki.svg
diff --git a/src/assets/images/COMPUTER.webp b/src/assets/images/COMPUTER.webp
diff --git a/src/assets/images/Learning-cuate.svg b/src/assets/images/Learning-cuate.svg
diff --git a/src/assets/images/Telecommuting-cuate.1svg b/src/assets/images/Telecommuting-cuate.1svg
diff --git a/src/assets/images/Telecommuting-cuate.svg b/src/assets/images/Telecommuting-cuate.svg
diff --git a/src/assets/images/Telecommuting-pana.svg b/src/assets/images/Telecommuting-pana.svg
diff --git a/src/assets/images/Telecommuting-rafiki.svg b/src/assets/images/Telecommuting-rafiki.svg
diff --git a/src/assets/images/design.webp b/src/assets/images/design.webp
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
@@ -1,6 +1,6 @@
 .main-button {
-  background-color: #55198b;
-  border: solid 1px #55198b;
+  background-color: #00ff73;
+  border: solid 1px #f3f7f4;
   color: white;
   font-weight: 700;
   width: max-content;

diff --git a/src/components/socialMedia/SocialMedia.css b/src/components/socialMedia/SocialMedia.css
@@ -27,39 +27,39 @@
 }
 
 .facebook i {
-  background-color: #3b5998;
+  background-color: #333;
 }
 
 .linkedin i {
-  background-color: #0e76a8;
+  background-color: #333;
 }
 
 .github i {
   background-color: #333;
 }
 
 .gitlab i {
-  background-color: #fca326;
+  background-color: #333;
 }
 
 .google i {
-  background-color: #ea4335;
+  background-color: #333;
 }
 
 .twitter i {
-  background-color: #1da1f2;
+  background-color: #333;
 }
 
 .medium i {
-  background-color: #000;
+  background-color: #333;
 }
 
 .stack-overflow i {
-  background-color: #f48024;
+  background-color: #333;
 }
 
 .instagram i {
-  background-color: #c13584;
+  background-color: #333;
 }
 
 /* Hover Transition */
@@ -72,7 +72,7 @@
 .instagram i:hover,
 .stack-overflow i:hover,
 .medium i:hover {
-  background-color: black;
+  background-color: rgba(194, 236, 188, 0.918);
 }
 
 /* Media Query */

diff --git a/src/components/socialMedia/SocialMedia.js b/src/components/socialMedia/SocialMedia.js
@@ -39,7 +39,7 @@ export default function socialMedia() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <i className="fab fa-google"></i>
+         <i class="fas fa-envelope"></i> 
           <span></span>
         </a>
       ) : null}

diff --git a/src/containers/Main.js b/src/containers/Main.js
@@ -1,25 +1,14 @@
 import React, {Component} from "react";
 import Header from "../components/header/Header";
 import Greeting from "./greeting/Greeting";
+import Problem from "./problems/problems"
+import Brand from "./brand/brand"
 import Skills from "./skills/Skills";
-// import StackProgress from "./skillProgress/skillProgress";
-// import WorkExperience from "./workExperience/WorkExperience";
-// import Projects from "./projects/Projects";
-// import StartupProject from "./StartupProjects/StartupProject";
-// import Achievement from "./achievement/Achievement";
-// import Blogs from "./blogs/Blogs";
-// import Footer from "../components/footer/Footer";
-// import Talks from "./talks/Talks";
-// import Podcast from "./podcast/Podcast";
-// import Education from "./education/Education";
+import Footer from "../components/footer/Footer";
 import Top from "./topbutton/Top";
-import Hero from "./hero";
-import Steps from "./steps";
-// import Twitter from "./twitter-embed/twitter";
+import Twitter from "./twitter-embed/twitter";
 import {StyleProvider} from "../contexts/StyleContext";
 import "./Main.css";
-// import Profile from "./profile/Profile";
-
 export default class Main extends Component {
   constructor(props) {
     super(props);
@@ -48,23 +37,21 @@ export default class Main extends Component {
           value={{isDark: this.state.isDark, changeTheme: this.changeTheme}}
         >
           <Header />
-
-          <Hero />
-          {/* <Steps /> */}
           <Greeting />
+          <Problem />
+          <Brand />
           <Skills />
           {/* <StackProgress /> */}
           {/* <Education /> */}
           {/* <WorkExperience /> */}
           {/* <Projects /> */}
-          {/* <StartupProject />
-          <Achievement />
-          <Blogs />
-          <Talks /> */}
-          {/* <Twitter /> */}
-          {/* <Podcast />
-          <Profile />
-          <Footer /> */}
+          {/* <StartupProject /> */}
+          {/* <Achievement /> */}
+          {/* <Blogs /> */}
+          {/* <Talks /> */}
+          <Twitter />
+          {/* <Profile /> */}
+          <Footer />
           <Top />
         </StyleProvider>
       </div>

diff --git a/src/containers/StartupProjects/StartupProjects.css b/src/containers/StartupProjects/StartupProjects.css
@@ -61,7 +61,7 @@
 }
 
 .project-card-footer span.project-tag {
-  background: #55198b;
+  background: #0778e8;
   color: #f5f2f4;
   vertical-align: middle;
   align-items: center;

diff --git a/src/containers/blogs/Blogs.js b/src/containers/blogs/Blogs.js
@@ -11,7 +11,7 @@ export default function Blogs() {
   }
   return (
     <Fade bottom duration={1000} distance="20px">
-      <div className="main" id="blogs">
+      <div className="main" id="websites">
         <div className="blog-header">
           <h1 className="blog-header-text">{blogSection.title}</h1>
           <p

diff --git a/src/containers/brand/brand.js b/src/containers/brand/brand.js
@@ -0,0 +1,53 @@
+import React, {useContext} from "react";
+import {Fade} from "react-reveal";
+// import emoji from "react-easy-emoji";
+import "../right-text.css";
+// import landingPerson from "../../assets/lottie/64807-geometric-back";
+// import DisplayLottie from "../../components/displayLottie/DisplayLottie";
+import picture from "../../assets/images/Telecommuting-cuate.svg"
+import StyleContext from "../../contexts/StyleContext";
+
+export default function Brand() {
+  const {isDark} = useContext(StyleContext);
+
+  return (
+    <Fade bottom duration={1000} distance="40px">
+      <div className="greet-main" id="greeting">
+        <div className="greeting-main">
+          <div className="greeting-text-div">
+            <div>
+              <h1
+                className={isDark ? "dark-mode greeting-text" : "greeting-text"}
+              >
+                We love your brand
+
+              </h1>
+              <p
+                className={
+                  isDark
+                    ? "dark-mode greeting-text-p"
+                    : "greeting-text-p subTitle"
+                }
+              >
+                Specially designed to help your team achieve aesthetic website and branding
+                We have tools that help you and your team all free of charge or you can ask us to do it for you
+
+                We will curate a product line that is perfect for your team
+
+                and we’re so confident that you’ll love it that we do all the design and product selection for free.
+              </p>
+
+            </div>
+          </div>
+          <div className="greeting-image-div">
+              <img
+                alt=""
+                src={picture}
+              ></img>
+
+          </div>
+        </div>
+      </div>
+    </Fade>
+  );
+}
diff --git a/src/containers/education/Education.css b/src/containers/education/Education.css
diff --git a/src/containers/education/Education.js b/src/containers/education/Education.js
diff --git a/src/containers/greeting/Greeting.css b/src/containers/greeting/Greeting.css
@@ -35,7 +35,7 @@
 .greeting-text {
   font-size: 70px;
   line-height: 1.1;
-  color: whitesmoke !important;
+  color: black !important;
 }
 
 .greeting-text-p {