Add tailwind and index page

README.md

@@ -2,6 +2,7 @@
 
 This is the Hello Tham Corporate Website Static Web App built using the following technologies:
 - [Gatsby Starter Default](https://github.com/gatsbyjs/gatsby-starter-default)
+- [How To Set Up a Gatsby Project with TypeScript](https://www.digitalocean.com/community/tutorials/how-to-set-up-a-gatsby-project-with-typescript)
 - [Gatsby](https://gatsbyjs.org)
 
 It follows the [JAMstack architecture](https://jamstack.org) by using Git as a single source of truth, and is deployed on Gatsby Cloud.

gatsby-browser.js

@@ -3,5 +3,4 @@
  *
  * See: https://www.gatsbyjs.com/docs/browser-apis/
  */
-
-// You can delete this file if you're not using it
+import './src/styles/global.css'

gatsby-config.js

@@ -1,11 +1,21 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
-    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
+    title: `Hello Tham`,
+    author: {
+      name: `Hello Tham`,
+      summary: `a boutique management and strategy consulting company`,
+    },
+    description: `Hello Tham is a boutique management consulting firm. We deliver consulting services to clients around the world. We specialise in Business and IT strategies, operating models, strategic roadmaps, enterprise architecture, analytics and business process design. We also assist our clients in implementing our recommendations, models and strategies.`,
+    siteUrl: `https://hellotham.com/`,
+    social: {
+      twitter: `HelloThamCom`,
+      linkedin: `company/hellotham`,
+      github: `hellotham`,
+    },
   },
   plugins: [
+    `gatsby-plugin-svgr-svgo`,
+    `gatsby-plugin-postcss`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-image`,
     {
@@ -20,15 +30,13 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
+        name: `Hello Tham`,
+        short_name: `HelloTham`,
         start_url: `/`,
-        background_color: `#663399`,
-        // This will impact how browsers show your PWA/website
-        // https://css-tricks.com/meta-theme-color-and-trickery/
-        // theme_color: `#663399`,
+        background_color: `#ffffff`,
+        theme_color: `#660099`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/logo.png`, // This path is relative to the root of the site.
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality

gatsby-node.js

@@ -4,4 +4,14 @@
  * See: https://www.gatsbyjs.com/docs/node-apis/
  */
 
-// You can delete this file if you're not using it
+const path = require("path");
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+actions.setWebpackConfig({
+    resolve: {
+    alias: {
+        "@": path.resolve(__dirname, "src")
+    }
+    }
+});
+};

package.json

@@ -1,16 +1,41 @@
 {
-  "name": "gatsby-starter-default",
+  "name": "hellotham-website-gatsby4",
   "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
-  "version": "0.1.0",
-  "author": "Kyle Mathews <[email protected]>",
+  "description": "Hello Tham Website in Gatsby v4",
+  "version": "2.0.0",
+  "author": "Hello Tham <[email protected]>",
+  "bugs": {
+    "url": "https://github.com/ChristineTham/hellotham-website-gatsby4/issues"
+  },
+  "homepage": "https://hellotham.com",
+  "keywords": [
+    "gatsby",
+    "typescript",
+    "MDX",
+    "Prism",
+    "TailwindCSS",
+    "blog"
+  ],
+  "license": "0BSD",
+  "main": "n/a",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ChristineTham/hellotham-website-gatsby4.git"
+  },
   "dependencies": {
+    "@headlessui/react": "^1.4.1",
+    "@heroicons/react": "^1.0.4",
+    "@svgr/webpack": "^5.5.0",
+    "@tailwindcss/aspect-ratio": "^0.2.1",
+    "@tailwindcss/forms": "^0.3.3",
+    "@tailwindcss/typography": "^0.4.1",
     "gatsby": "^3.14.0",
     "gatsby-plugin-image": "^1.14.0",
     "gatsby-plugin-manifest": "^3.14.0",
     "gatsby-plugin-offline": "^4.14.0",
     "gatsby-plugin-react-helmet": "^4.14.0",
     "gatsby-plugin-sharp": "^3.14.0",
+    "gatsby-plugin-svgr-svgo": "^1.2.2",
     "gatsby-source-filesystem": "^3.14.0",
     "gatsby-transformer-sharp": "^3.14.0",
     "prop-types": "^15.7.2",
@@ -22,18 +47,19 @@
     "@types/node": "^16.10.1",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.2",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
+    "autoprefixer": "^10.3.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "gatsby-plugin-postcss": "^4.14.0",
+    "postcss": "^8.3.8",
     "prettier": "^2.1.1",
+    "tailwindcss": "^2.2.16",
     "typescript": "^4.4.3"
   },
-  "keywords": [
-    "gatsby"
-  ],
-  "license": "0BSD",
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
@@ -44,12 +70,5 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
     "type-check": "tsc --noEmit",
     "lint": "eslint . --ignore-path .gitignore --ext .ts,.tsx,.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
-  },
-  "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/features.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { MapIcon, SparklesIcon, PuzzleIcon, PresentationChartBarIcon } from '@heroicons/react/outline'
+
+const features = [
+  {
+    name: 'Business and IT Strategies',
+    description:
+      'Business and IT strategy and plans, operating models, business process design and standardisation',
+    icon: SparklesIcon,
+  },
+  {
+    name: 'Enterprise Architecture',
+    description:
+      'Enterprise analysis, design, planning, and implementation for the successful development and execution of a strategy',
+    icon: PuzzleIcon,
+  },
+  {
+    name: 'Analytics and Data Science',
+    description:
+      'Data discovery, analysis, deep and reinforced learning, insights and recommendations',
+    icon: PresentationChartBarIcon,
+  },
+  {
+    name: 'Strategic Roadmaps',
+    description:
+      'Aligning portfolio to strategy, business cases, project planning and initiation',
+    icon: MapIcon,
+  },
+]
+
+export default function Example() {
+  return (
+    <div className="py-12 bg-purple-100">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="lg:text-center">
+          <h2 className="text-base text-purple-800 font-semibold tracking-wide uppercase">Our Services</h2>
+          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+            Vision into Reality
+          </p>
+          <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
+            We help organisations around the world define and implement their vision and objectives.
+          </p>
+        </div>
+
+        <div className="mt-10">
+          <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
+                    <feature.icon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">{feature.name}</p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/findoutmore.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+
+import Services from '@/images/undraw_features_overview_jg7a.svg'
+import Work from '@/images/undraw_All_the_data_re_hh4w.svg'
+import People from '@/images/undraw_Team_page_re_cffb.svg'
+
+const callouts = [
+    {
+      name: 'Our Services',
+      description: 'Business and IT Strategies, Operating Models, Strategic Roadmaps, Enterprise Architecture, Analytics, Business Process Design ',
+      imageSrc: Services,
+      imageAlt: 'Services drawing',
+      href: '#',
+    },
+    {
+      name: 'Recent Work',
+      description: 'Recent examples of work we have performed for our clients',
+      imageSrc: Work,
+      imageAlt: 'Recent work drawing',
+      href: '#',
+    },
+    {
+      name: 'People and Partners',
+      description: 'Find out more about our consultants and partners',
+      imageSrc: People,
+      imageAlt: 'People and Partners drawing',
+      href: '#',
+    },
+  ]
+
+  export default function FindOutMore() {
+    return (
+      <div className="bg-pink-100">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="max-w-2xl mx-auto py-16 sm:py-24 lg:py-32 lg:max-w-none">
+            <h2 className="text-4xl font-extrabold text-purple-800">Find Out More</h2>
+
+            <div className="mt-6 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-6">
+              {callouts.map((callout) => (
+                <div key={callout.name} className="group relative">
+                  <div className="relative w-full h-80 bg-white rounded-lg overflow-hidden group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1">
+                    <img
+                      src={callout.imageSrc}
+                      alt={callout.imageAlt}
+                      className="w-full h-full object-center object-contain"
+                    />
+                  </div>
+                  <h3 className="mt-6 text-2xl text-purple-500">
+                    <a href={callout.href}>
+                      <span className="absolute inset-0" />
+                      {callout.name}
+                    </a>
+                  </h3>
+                  <p className="text-base text-gray-900">{callout.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+

src/components/footer.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import HelloTham from '../images/hellotham.svg'
+
+const Footer = () => (
+  <footer className="text-gray-600 body-font">
+    <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
+      <a className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+        <img src={HelloTham} width="150" />
+      </a>
+      <p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2021 Hello Tham Pty Ltd
+        <a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">@HelloThamCom</a>
+      </p>
+      <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+        <a className="text-gray-500">
+          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" className="w-5 h-5" viewBox="0 0 24 24">
+            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+          </svg>
+        </a>
+        <a className="ml-3 text-gray-500">
+          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" className="w-5 h-5" viewBox="0 0 24 24">
+            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+          </svg>
+        </a>
+        <a className="ml-3 text-gray-500">
+          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" className="w-5 h-5" viewBox="0 0 24 24">
+            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+          </svg>
+        </a>
+        <a className="ml-3 text-gray-500">
+          <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" className="w-5 h-5" viewBox="0 0 24 24">
+            <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+            <circle cx="4" cy="4" r="2" stroke="none"></circle>
+          </svg>
+        </a>
+      </span>
+    </div>
+  </footer>
+)
+export default Footer

src/components/header.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import PropTypes from "prop-types"
 import { Link } from "gatsby"
 
 interface HeaderProps {
@@ -35,12 +34,4 @@ const Header = ({ siteTitle }: HeaderProps) => (
   </header>
 )
 
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
 export default Header