SBIT-85: fix

public/page-data/index/page-data.json

@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1693928026","176670904","1886264361","2898073905","3206133181","4006044966"]}
+    "staticQueryHashes": ["1128713364","176670904","1886264361","2898073905","3206133181","4006044966","943162249"]}

src/components/BannerHead/BannerHead.js

@@ -2,31 +2,43 @@ import React from "react"
 import "./BannerHead.scss"
 import MarkdownView from "react-showdown"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useTheme } from "../../context/themeContext"
 
 const BannerHead = ({ data }) => {
-    const title = data?.title;
+  const { theme } = useTheme()
 
-    const checkImage = () => {
+  const title = data?.title
 
-        if (data?.image?.url) {
-            return <img src={data?.image?.url} alt={data?.image?.name} />
-        } else {
-            const image = getImage(data?.image?.localFile)
-            return <GatsbyImage image={image} alt={`img-${title}`}></GatsbyImage>
-        }
+  const checkImage = () => {
+    if (data?.image?.url) {
+      return (
+        <img
+          src={
+            theme === "dark" && data?.imageDark
+              ? data?.imageDark?.url
+              : data?.image?.url
+          }
+          alt={data?.image?.name}
+        />
+      )
+    } else {
+      const image = getImage(data?.image?.localFile)
+      const imageDark = data?.imageDark && getImage(data?.imageDark?.localFile)
+      return (
+        <GatsbyImage
+          image={theme === "dark" && imageDark ? imageDark : image}
+          alt={`img-${title}`}
+        ></GatsbyImage>
+      )
     }
+  }
 
-    return (
-        <div class="banner d-flex justify-content-center">
-            <div class="banner__image">
-                {checkImage()}
-            </div>
-
-            {title && (
-                <MarkdownView markdown={title} />
-            )}
-        </div>
-    )
+  return (
+    <div class="banner d-flex justify-content-center">
+      <div class="banner__image">{checkImage()}</div>
+      {title && <MarkdownView markdown={title} />}
+    </div>
+  )
 }
 
 export default BannerHead

src/components/BannerHead/BannerHead.scss

@@ -5,7 +5,7 @@
   width: 100%;
   min-height: 300px;
   align-items: center;
-
+  color: $primary;
   h3 {
     color: $primary;
     text-align: center;

src/components/BannerList/Banner.scss

@@ -1,6 +1,7 @@
 @import "../../styles/global.scss";
 
 .bannerList {
+  color: $primary;
   .card_item {
     p {
       text-align: justify;

src/components/BlogPage/BlogContainer.js

@@ -16,7 +16,6 @@ const Blog = () => {
   const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
-  console.log(bannerHead)
   const {
     pageTitle,
     pageDescription,

src/components/CasesSection/CasesSection.scss

@@ -1,12 +1,14 @@
 @import "../../styles/global.scss";
 
 .casesSection {
+    color: $primary;
     h2 {
         text-align: center;
         font-weight: 700;
     }
 }
 .case {
+    color: $primary;
     --bs-gutter-x: 0 !important;
     padding: 10px;
     &__img {

src/components/Hero/Hero.scss

@@ -1,5 +1,6 @@
 @import "../../styles/global.scss";
 .hero {
+  color: $primary;
   overflow: hidden;
   display: flex;
   flex-direction: row;

src/components/HomePage/HomeContainer/HomeContainer.js

@@ -45,7 +45,7 @@ const Home = ({ location }) => {
 
       {/* Dynamic zone */}
       {data.allStrapiHome.nodes[0].body.map(component =>
-        bodyComponents[component.strapi_component](component)
+        bodyComponents[component.strapi_component] ? bodyComponents[component.strapi_component](component) : null
       )}
     </Layout>
   )

src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss

@@ -1,3 +1,4 @@
+@import "../../../../styles/global.scss";
 .dropdown {
   &_elem {
     width: 18.5rem;
@@ -10,7 +11,7 @@
       margin-top: 0;
       margin-bottom: 1rem;
       &-inner{
-        color: black;
+        color: $primary;
       }
     }
   }
@@ -53,8 +54,9 @@
   position: relative;
   top: -20px;
   &-background {
+    filter: brightness(120%);
     transform-origin: 0 0;
-    background-color: white;
+    background-color: $primary-container;
     border-radius: 4px;
     overflow: hidden;
     position: relative;

src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss

@@ -24,7 +24,7 @@
       border: 0;
       font-size: 18px;
       padding: 2rem 1.5rem 1.2rem 1.5rem;
-      color: #1f1d37;
+      color: $primary;
       display: flex;
       justify-content: baseline;
       @media screen and (max-width: $breakpoint-xl) {
@@ -37,10 +37,10 @@
       /* position above the dropdown, otherwise the dropdown will cover up the bottom sliver of the buttons */
       position: relative;
       z-index: 2;
-      &:hover,
-      &:focus {
+      &:hover{
         opacity: 0.7;
         outline: none;
+        color: $secondary;
       }
     }
     &-dropdown_container {

src/components/NavBar/NavBar.scss

@@ -1,7 +1,7 @@
 @import "../../styles/global.scss";
 
 .NavBar {
-  background-color: white;
+  background-color: $primary-container;
   z-index: 10;
   & > a {
     margin: 1.5em 0 1em 50px;
@@ -44,26 +44,16 @@
 
 .navbar_item-title-active {
   text-decoration: none;
-  color: #3f6be8 !important;
+  color: $secondary !important;
 }
 
 .NavBar_Side {
   display: flex;
   flex-direction: row;
   align-items: center;
   &-contact {
+    @include primaryBtn;
     white-space: nowrap;
-    box-shadow: 0px 2px 10px #3f6be880;
-    padding: 0.6em;
-    margin-right: 1em;
-    background-color: #3f6be8;
-    color: white;
-    border: 1px solid #3f6be8;
-    border-radius: 4px;
-    &:hover {
-      background-color: white;
-      color: #3f6be8;
-    }
   }
   p {
     color: #1f1d37;

src/components/NavBar/Navbar.js

@@ -49,7 +49,7 @@ const NavBar = () => {
             </div>
           )}
           <div className="NavBar_Side">
-            <button className="NavBar_Side-contact">Let´s Talk</button>
+            <button className="NavBar_Side-contact">Hablemos</button>
             <button className="theme-toggle" onClick={toggleTheme}>
               {theme === "dark" ? (
                 <img

src/components/Text/Text.js

@@ -3,12 +3,11 @@ import MarkdownView from "react-showdown";
 import './Text.scss';
 
 export default function Text({ data }) {
-    console.log(data)
     const title = data?.title;
     const description = data?.text;
 
     return (
-        <div className="text container my-3 d-flex flex-column flex-lg-row">
+        <div className="text container py-3 d-flex flex-column flex-lg-row">
 
             {title && (
                 <h2 className="title me-3 mt-5 p-lg-2">{title}</h2>

src/components/Text/Text.scss

@@ -1,6 +1,7 @@
 @import "../../styles/global.scss";
 
 .text {
+  color: $primary;
   .title {
     text-transform: uppercase;
   }

src/components/animatedTransitionContinous/animatedTransitionContinous.scss

@@ -1,3 +1,5 @@
+@import "../../styles/global.scss";
+
 .m-scroll {
   display: flex;
   position: relative;
@@ -56,7 +58,7 @@
         cursor: default;
         &:hover {
           text-decoration: none;
-          color: black;
+          color: $primary;
         }
       }
     }

src/components/expandGrid/ExpandGrid.js

@@ -6,14 +6,14 @@ import "./expandGrid.scss"
 const ExpandGrid = ({ data }) => {
   return (
     <div
-      className="m-3 mx-auto sm:mx-3 py-5 container"
+      className="p-3 mx-auto sm:mx-3 py-5 container"
       id={data.strapi_component + "-" + data.id}
     >
       <section className="expandGrid">
         <div className="expandGrid-body">
           <h2>{data.title}</h2>
           <h6 className="px-5">{data.subtitle}</h6>
-          <AnimatedList items={data.items.slice(0,4)} />
+          <AnimatedList items={data.items.slice(0, 4)} />
         </div>
       </section>
     </div>
@@ -35,9 +35,9 @@ const ListItem = ({ index, onClick, data }) => {
       <div className="listItem" onClick={() => onClick(index)}>
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
-          <div className="listItem-more">
-            <p>Ver mas</p>
-          </div>
+            <div className="listItem-more">
+              <p>Ver mas</p>
+            </div>
             <Flipped
               flipId={`avatar-${index}`}
               stagger="card-image"
@@ -53,7 +53,7 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, data }) => {
+const ExpandedListItem = ({ index, data, isFirst }) => {
   return (
     <Flipped
       flipId={createCardFlipId(index)}
@@ -64,13 +64,11 @@ const ExpandedListItem = ({ index, data }) => {
         }, 400)
       }}
     >
-      <div
-        className="listItem-expanded"
-      >
+      <div className="listItem-expanded">
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <p  ></p>
+              <p></p>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -79,7 +77,7 @@ const ExpandedListItem = ({ index, data }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div className="additional-content">
+            <div className={"additional-content " + isFirst ? "animated-in" : ""}>
               <div>
                 <MarkdownView markdown={data.text} />
               </div>
@@ -93,7 +91,7 @@ const ExpandedListItem = ({ index, data }) => {
 
 const AnimatedList = ({ items }) => {
   const [itemsArray, setItemsArray] = useState({ items, focused: null })
-
+  const [isFirst, setIsFirst] = useState(true)
   useEffect(() => {
     setItemsArray(prev => ({ ...prev, focused: items[0].id }))
   }, [])
@@ -102,6 +100,7 @@ const AnimatedList = ({ items }) => {
     for (let i = 0; i < items.length; i++) {
       const item = itemsArray.items[i]
       if (item.id === index) {
+        setIsFirst(false)
         setItemsArray(prevItems => ({
           items: [
             item,
@@ -115,7 +114,6 @@ const AnimatedList = ({ items }) => {
     }
   }
 
-
   return (
     <Flipper
       flipKey={itemsArray.focused}
@@ -134,6 +132,7 @@ const AnimatedList = ({ items }) => {
             <>
               {item.id === itemsArray.focused ? (
                 <ExpandedListItem
+                  isFirst={isFirst}
                   index={itemsArray.focused}
                   data={item}
                 />

src/components/expandGrid/expandGrid.scss

@@ -1,11 +1,11 @@
 @import ".././../styles/global.scss";
 
 .expandGrid {
+  color: $primary;
   display: flex;
   flex-direction: column;
   justify-content: center;
   h2 {
-    color: #333333;
     flex-grow: 1;
     text-align: center;
     font-weight: 700;
@@ -40,7 +40,7 @@
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-  background-color: #ececec;
+  background-color: rgba(180, 180, 180, 0.24);
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
@@ -137,7 +137,6 @@
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
-  height: 5rem;
   h4 {
     text-align: left;
   }

src/components/quote/quote.scss

@@ -3,7 +3,7 @@
 .quote {
   display: grid;
   gap: 3em;
-
+  color: $primary;
   &-body {
     grid-area: quote-body;
     img {