Adding design 2021

gatsby-config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    `gatsby-plugin-emotion`,
     {
       resolve: `gatsby-theme-codebushi`,
       options: {

package.json

@@ -9,7 +9,10 @@
     "build": "gatsby build"
   },
   "dependencies": {
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
     "gatsby": "^2.18.18",
+    "gatsby-plugin-emotion": "^5.1.0",
     "gatsby-theme-codebushi": "1.0.0",
     "react": "^16.12.0",
     "react-anchor-link-smooth-scroll": "^1.0.12",

src/components/Card.js

@@ -4,7 +4,9 @@ const Card = ({ className, children }) => (
   <div
     className={`p-12 rounded-lg border border-solid border-gray-200 ${className}`}
     style={{
-      boxShadow: '0 10px 28px rgba(0,0,0,.08)'
+      boxShadow: '0 10px 28px rgba(0,0,0,.08)',
+      height: '400px',
+      background: 'white'
     }}
   >
     {children}

src/components/CustomerCard.js

@@ -6,11 +6,6 @@ const CustomerCard = ({ customer }) => (
     <p className="text-xl font-semibold">{customer.title}</p>
     <p className="mt-6">{customer.content}</p>
     <div className="flex items-center mt-8">
-      <img
-        className="w-12 h-12 mr-4 rounded-full"
-        src={customer.customerImage}
-        alt={customer.customerName}
-      />
       <div>
         <p>{customer.customerName}</p>
         <p className="text-sm text-gray-600">{customer.customerTitle}</p>

src/components/layout/Footer.js

@@ -2,21 +2,15 @@ import React from 'react';
 
 const Footer = () => (
   <footer className="container mx-auto py-16 px-3 mt-48 mb-8 text-gray-800">
-    <div className="flex -mx-3">
+    <div className="text-center">
       <div className="flex-1 px-3">
-        <h2 className="text-lg font-semibold">About</h2>
-        <p className="mt-5">Chelsea Construction LLC, (503) 327 1232, [email protected] 
-         CCB #220566</p>
+        <p className="mt-5" style={{ fontWeight: '800', color: '#000000' }}>
+          Chelsea Construction LLC
+        </p>
+        <p className="mt-5">(503) 327 1232</p>
+        <p className="mt-5">[email protected] CCB #220566</p>
       </div>
       <div className="flex-1 px-3" />
-      <div className="flex-1 px-3">
-        <h2 className="text-lg font-semibold">Social Media</h2>
-        <ul className="mt-4 leading-loose">
-          <li>
-            <a href="https://instagram.com/Chelseaconstructionllc">Instagram</a>
-          </li>
-        </ul>
-      </div>
     </div>
   </footer>
 );

src/components/layout/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import LogoIcon from '../../svg/LogoIcon';
 import Button from '../Button';
-import Logo from '../logo-CC.png';
+import Logo from '../../svg/logo.svg';
 
 const Header = () => (
   <header className="sticky top-0 bg-white shadow">
@@ -14,16 +14,16 @@ const Header = () => (
         Chelsea PDX Construction
       </div>
       <div className="flex mt-4 sm:mt-0">
-        <AnchorLink className="px-4" href="#features">
+        <AnchorLink className="px-4 text-gray-600" href="#features">
           Features
         </AnchorLink>
-        <AnchorLink className="px-4" href="#services">
+        <AnchorLink className="px-4 text-gray-600" href="#services">
           Services
         </AnchorLink>
-        <AnchorLink className="px-4" href="#stats">
+        <AnchorLink className="px-4 text-gray-600" href="#stats">
           Stats
         </AnchorLink>
-        <AnchorLink className="px-4" href="#testimonials">
+        <AnchorLink className="px-4 text-gray-600" href="#testimonials">
           Testimonials
         </AnchorLink>
       </div>

src/css/tailwind.css

@@ -1,10 +1,27 @@
 @tailwind base;
 
-a {
-  @apply text-primary;
+.text-gray-600 {
+  color: #8e8e8e !important;
 }
-a:hover {
-  @apply text-primary-darker;
+
+.rounded-lg {
+  border-radius: 2.5rem;
+}
+
+img {
+  border-radius: 1rem;
+}
+
+body {
+  background: #eeeef3;
+  color: #01002d;
+}
+
+.text-gray-900 {
+  color: #01002d !important;
+}
+.text-primary {
+  color: #01002d !important;
 }
 
 @tailwind components;

src/data/customer-data.js

@@ -16,11 +16,13 @@ export default [
     customerImage: 'https://placeimg.com/640/480/nature'
   },
   {
-    title: 'It was a pleasure with you, you are a gentleman and a scholar, will be in contact soon for more projects',
+    title:
+      'It was a pleasure with you, you are a gentleman and a scholar, will be in contact soon for more projects',
     content:
       'David needed sheetrock hanged and taped in the kitchen immidietly due to  having a date aranged for the painters  ',
     customerName: 'David L',
     customerTitle: 'Happy contractor',
-    customerImage: 'https://placeimg.com/640/480/people'
+    customerImage:
+      'https://images.unsplash.com/photo-1573497491207-618cc224f243?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3334&q=80'
   }
 ];

src/pages/index.js

@@ -8,26 +8,38 @@ import StatsBox from '../components/StatsBox';
 import customerData from '../data/customer-data';
 import HeroImage from '../svg/HeroImage';
 import SvgCharts from '../svg/SvgCharts';
-import Logo from '../components/logo-CC.png';
+import Logo from '../svg/logo.svg';
 import drywall1 from '../components/IMG_0524.jpg';
 import drywall2 from '../components/IMG_0536.jpg';
 import drywall3 from '../components/IMG_0545.jpg';
+import Hero from '../../main.png';
+import { css } from '@emotion/react';
+
+// Tagged template literal styles:
+const backgroundStyles = css`
+  background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6), #eeeef3),
+    url(${Hero});
+  height: 700px;
+  background-size: cover;
+  background-position: top center;
+  background-repeat: no-repeat;
+`;
+
+const white = css`
+  background: white;
+`;
+
 export default () => (
   <Layout>
-    <section className="pt-20 md:pt-40">
-      <div className="container mx-auto px-8 lg:flex">
-        <div className="text-center lg:text-left lg:w-1/2">
+    <section className="pt-20 md:pt-40" css={backgroundStyles}>
+      <div className="container mx-auto">
+        <div className="text-center">
           <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold leading-none">
             For all your Drywall needs
           </h1>
-          <p className="text-xl lg:text-2xl mt-6 font-light">
-            Responsibilty, Respect, Honesty
-          </p>
-
-          <p className="mt-4 text-gray-600">Portland metro area and surroundings</p>
-        </div>
-        <div className="lg:w-1/2">
-          <img src={Logo} />
+          <p className="text-xl lg:text-2xl mt-6 font-light">Responsibilty, Respect, Honesty</p>
+
+          <p className="mt-4 text-gray-600">Portland Metro Area and Surroundings</p>
         </div>
       </div>
     </section>
@@ -39,23 +51,28 @@ export default () => (
             <Card className="mb-8">
               <p className="font-semibold text-xl">Sheetrock Installation</p>
               <p className="mt-4">
-                From hanging sheetrock in a room or an entire home, weve got it covered. We can use any size sheetrock. 
+                From hanging sheetrock in a room or an entire home, weve got it covered. We can use
+                any size sheetrock.
               </p>
             </Card>
           </div>
           <div className="flex-1 px-3">
             <Card className="mb-8">
               <p className="font-semibold text-xl">Drywall Taping</p>
               <p className="mt-4">
-                We will make sure our work completes all requirements that meet all local fire and building codes. We can provide any finish level (0 to 5) you desire. 
+                We will make sure our work completes all requirements that meet all local fire and
+                building codes. We can provide any finish level (0 to 5) you desire.
               </p>
             </Card>
           </div>
           <div className="flex-1 px-3">
             <Card className="mb-8">
               <p className="font-semibold text-xl">Patches and Texture</p>
               <p className="mt-4">
-                We are available for patches of all sizes! We will match the texture that you already have on, so you cant even tell their was a patch there. If you are looking to retexture your entire house we can help. Choose from smooth finish, brocade, orange peel, etc.  
+                We are available for patches of all sizes! We will match the texture that you
+                already have on, so you cant even tell their was a patch there. If you are looking
+                to retexture your entire house we can help. Choose from smooth finish, brocade,
+                orange peel, etc.
               </p>
             </Card>
           </div>
@@ -68,7 +85,8 @@ export default () => (
         <div className="lg:pr-32 xl:pr-48">
           <h3 className="text-3xl font-semibold leading-tight">General Contractor</h3>
           <p className="mt-8 text-xl font-light leading-relaxed">
-            As a General Contractor, we can help with all types of construction work your home needs. We know the stress that comes with remodeling your home, let us take care of it.
+            As a General Contractor, we can help with all types of construction work your home
+            needs. We know the stress that comes with remodeling your home, let us take care of it.
           </p>
         </div>
       }
@@ -78,11 +96,10 @@ export default () => (
       reverseOrder
       primarySlot={
         <div className="lg:pl-32 xl:pl-48">
-          <h3 className="text-3xl font-semibold leading-tight">
-          Sub-Contractors
-          </h3>
+          <h3 className="text-3xl font-semibold leading-tight">Sub-Contractors</h3>
           <p className="mt-8 text-xl font-light leading-relaxed">
-          Our team is selective of chosing professional sub-contractors, we will work with both them and the clients to make sure the project is being done right and on time.
+            Our team is selective of chosing professional sub-contractors, we will work with both
+            them and the clients to make sure the project is being done right and on time.
           </p>
         </div>
       }
@@ -91,11 +108,10 @@ export default () => (
     <SplitSection
       primarySlot={
         <div className="lg:pr-32 xl:pr-48">
-          <h3 className="text-3xl font-semibold leading-tight">
-          Design And Plan Your Ideal Home
-          </h3>
+          <h3 className="text-3xl font-semibold leading-tight">Design And Plan Your Ideal Home</h3>
           <p className="mt-8 text-xl font-light leading-relaxed">
-            Our team will work with you directly to assure you are getting the best work for your money.
+            Our team will work with you directly to assure you are getting the best work for your
+            money.
           </p>
         </div>
       }
@@ -106,15 +122,18 @@ export default () => (
         <LabelText className="text-gray-600">Our customers get results</LabelText>
         <div className="flex flex-col sm:flex-row mt-8 lg:px-24">
           <div className="w-full sm:w-1/2">
-            <StatsBox primaryText="100%" secondaryText="Customer Satisfaction" />
+            <StatsBox primaryText="98%" secondaryText="Customer Satisfaction" />
           </div>
           <div className="w-full sm:w-1/2">
             <StatsBox primaryText="32+" secondaryText="Projects done" />
-         </div>
+          </div>
+          <div className="w-full sm:w-1/2">
+            <StatsBox primaryText="10+ Years" secondaryText="Experience" />
+          </div>
         </div>
-       </div>
-      </section>
-   
+      </div>
+    </section>
+
     <section id="testimonials" className="py-20 lg:py-40">
       <div className="container mx-auto">
         <LabelText className="mb-8 text-gray-600 text-center">What customers are saying</LabelText>
@@ -127,14 +146,21 @@ export default () => (
         </div>
       </div>
     </section>
-    <section className="container mx-auto my-20 py-24 bg-gray-200 rounded-lg text-center">
-      <h3 className="text-5xl font-semibold">Ready to create your ideal home ? </h3>
+    <section
+      className="container mx-auto my-20 py-24 bg-gray-200 rounded-lg text-center"
+      style={{ backgroundColor: 'rgb(0 0 43)', color: 'white' }}
+    >
+      <h3 className="text-5xl font-semibold">Ready to create your ideal home? Get in touch! </h3>
+      <p className="mt-8 text-xl font-light">
+        <a style={{ color: 'whitesmoke' }} href="tel:5033271232">
+          (503) 327 1232
+        </a>
+      </p>
       <p className="mt-8 text-xl font-light">
-        Contact us! (503) 327 1232 </p>
-          <p className="mt-8 text-xl font-light"> 
-            email:[email protected] </p>
-              <p className="mt-8 text-xl font-light"> 
-                address: PO Box #446 Beaverton OR 97005 </p>
+        <a href="[email protected]" style={{ color: 'whitesmoke' }}>
+          [email protected]
+        </a>
+      </p>
     </section>
   </Layout>
 );

tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
       colors: {
         primary: {
           lighter: 'hsl(207, 73%, 52%)',
-          default: 'hsl(207, 73%, 57%)',
+          default: '#000',
           darker: 'hsl(207, 73%, 44%)'
         }
       }