text edit

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,36 +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 Us</h2>
-        <p className="mt-5">Ridiculus mus mauris vitae ultricies leo integer malesuada nunc.</p>
-      </div>
-      <div className="flex-1 px-3">
-        <h2 className="text-lg font-semibold">Important Links</h2>
-        <ul className="mt-4 leading-loose">
-          <li>
-            <a href="https://codebushi.com">Terms &amp; Conditions</a>
-          </li>
-          <li>
-            <a href="https://codebushi.com">Privacy Policy</a>
-          </li>
-        </ul>
-      </div>
-      <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://dev.to/changoman">Dev.to</a>
-          </li>
-          <li>
-            <a href="https://twitter.com/HuntaroSan">Twitter</a>
-          </li>
-          <li>
-            <a href="https://github.com/codebushi/gatsby-starter-lander">GitHub</a>
-          </li>
-        </ul>
+        <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>
   </footer>
 );

src/components/layout/Header.js

@@ -2,33 +2,31 @@ import React from 'react';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import LogoIcon from '../../svg/LogoIcon';
 import Button from '../Button';
+import Logo from '../../svg/logo.svg';
 
 const Header = () => (
   <header className="sticky top-0 bg-white shadow">
     <div className="container flex flex-col sm:flex-row justify-between items-center mx-auto py-4 px-8">
       <div className="flex items-center text-2xl">
         <div className="w-12 mr-3">
-          <LogoIcon />
+          <img src={Logo} />
         </div>
-        Lander
+        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>
-      <div className="hidden md:block">
-        <Button className="text-sm">Start Free Trial</Button>
-      </div>
     </div>
   </header>
 );

src/components/layout/Layout.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import Footer from './Footer';
 import Header from './Header';

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

@@ -1,26 +1,28 @@
 export default [
   {
-    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+    title: 'Great work done in my house, very clean and responsible',
     content:
-      'Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet consectetur adipiscing elit duis.',
-    customerName: 'Jane Doe',
-    customerTitle: 'Director of Research and Data',
-    customerImage: 'https://placeimg.com/150/150/people'
+      'Shelby needed her basement hanged and taped after a water leak had damaged her old sheetrock.',
+    customerName: 'Shelby R',
+    customerTitle: 'Happy client',
+    customerImage: 'https://placeimg.com/640/480/tech'
   },
   {
-    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+    title: 'You guys are the best, i feel like ive known you forever, i love my new ceilings',
     content:
-      'Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet consectetur adipiscing elit duis.',
-    customerName: 'John Doe',
-    customerTitle: 'Director of Research and Data',
-    customerImage: 'https://placeimg.com/150/150/people'
+      'Mary did not want her old brocade texture anymore, we took off her old popcorn ceilings and made them smooth.',
+    customerName: 'Mary F',
+    customerTitle: 'Happy client',
+    customerImage: 'https://placeimg.com/640/480/nature'
   },
   {
-    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+    title:
+      'It was a pleasure with you, you are a gentleman and a scholar, will be in contact soon for more projects',
     content:
-      'Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet consectetur adipiscing elit duis.',
-    customerName: 'Jane Smith',
-    customerTitle: 'Director of Research and Data',
-    customerImage: 'https://placeimg.com/150/150/people'
+      '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://images.unsplash.com/photo-1573497491207-618cc224f243?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3334&q=80'
   }
 ];