Merge pull request #9 from shivjoshi1996/develop

V1 Release
shivjoshi1996 · Dec 1, 2021 · 3cbec58 · 3cbec58
2 parents 0191bc9 + ba5e66e
commit 3cbec58
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js
@@ -40,6 +40,7 @@ const StyledContactForm = styled.form`
 
   input[type='text'],
   input[type='email'] {
+    font-family: 'Montserrat', san-serif;
     width: 100%;
     border: none;
     background-color: #fec5bb;
@@ -58,6 +59,7 @@ const StyledContactForm = styled.form`
     background-color: #fec5bb;
     border-bottom: 1px solid white;
     resize: none;
+    font-family: 'Montserrat', san-serif;
     font-size: 1rem;
     color: #2f2e41;
   }

diff --git a/src/components/HomeServices.js b/src/components/HomeServices.js
@@ -21,8 +21,12 @@ const StyledServicesDescription = styled.p`
 
 const StyledServicesGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-template-columns: 1fr;
   grid-gap: 5rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
 `;
 
 const StyledServiceItem = styled.div`
@@ -32,7 +36,7 @@ const StyledServiceItem = styled.div`
     margin-bottom: 0.5rem;
   }
   p {
-    max-width: 25rem;
+    width: 100%;
   }
 `;
 
@@ -52,27 +56,32 @@ export default function HomeServices({
   servicesTitle,
   servicesDescription,
 }) {
-  const servicesArray = services.nodes;
   return (
     <StyledServicesSection id="services">
       <StyledServicesHeading>{servicesTitle}</StyledServicesHeading>
       <StyledServicesDescription>
         {servicesDescription}
       </StyledServicesDescription>
       <StyledServicesGrid>
-        {servicesArray.map((service) => (
-          <StyledServiceItem key={service.serviceTitle}>
-            <StyledServiceImageWrapper key={service.serviceTitle}>
-              <img
-                src={
-                  service.serviceImage.asset.gatsbyImageData.images.fallback.src
-                }
-              />
-            </StyledServiceImageWrapper>
-            <h3>{service.serviceTitle}</h3>
-            <p>{service.serviceDescription}</p>
-          </StyledServiceItem>
-        ))}
+        {services.length > 0
+          ? services.map((service) => (
+              <StyledServiceItem key={service.serviceTitle}>
+                <StyledServiceImageWrapper key={service.serviceTitle}>
+                  {service.serviceImage ? (
+                    <img
+                      src={
+                        service.serviceImage.asset.gatsbyImageData.images
+                          .fallback.src
+                      }
+                      alt=""
+                    />
+                  ) : null}
+                </StyledServiceImageWrapper>
+                <h3>{service.serviceTitle}</h3>
+                <p>{service.serviceDescription}</p>
+              </StyledServiceItem>
+            ))
+          : null}
       </StyledServicesGrid>
     </StyledServicesSection>
   );

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -36,7 +36,7 @@ const StyledLogo = styled.a`
   font-weight: 600;
 
   @media (min-width: 768px) {
-    font-size: 1.7rem;
+    font-size: 2rem;
   }
 `;
 

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -8,7 +8,6 @@ import SEO from '../components/SEO';
 
 export default function IndexPage({ data }) {
   const { sanityHomepage } = data;
-  const { allSanityHomepageServices } = data;
   return (
     <div>
       <SEO />
@@ -18,7 +17,7 @@ export default function IndexPage({ data }) {
         heroButtonText={sanityHomepage.heroButtonText}
       />
       <HomeServices
-        services={allSanityHomepageServices}
+        services={sanityHomepage.services}
         servicesTitle={sanityHomepage.servicesTitle}
         servicesDescription={sanityHomepage.servicesDescription}
       />
@@ -48,14 +47,11 @@ export const query = graphql`
       whoWeAreDescription
       contactFormTitle
       contactFormDescription
-    }
-    allSanityHomepageServices {
-      nodes {
+      services {
         serviceTitle
         serviceDescription
         serviceImage {
           asset {
-            id
             gatsbyImageData
           }
         }