feat: added FunFacts section (#2)

src/components/fun-facts/FunFacts.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { FaPencilAlt, FaWarehouse } from 'react-icons/fa'
+import { FiMonitor } from 'react-icons/fi'
+import { HiOutlineSpeakerphone } from 'react-icons/hi'
+
+import { IItem } from '@/types/types'
+
+import { SectionTitle } from '../section-title'
+
+const ITEMS: IItem[] = [
+  {
+    icon: FaPencilAlt,
+    title: 'Happy Clients',
+    text: '578',
+  },
+  {
+    icon: FaWarehouse,
+    title: 'Working Hours',
+    text: '4780',
+  },
+  {
+    icon: FiMonitor,
+    title: 'Awards Won',
+    text: '15',
+  },
+  {
+    icon: HiOutlineSpeakerphone,
+    title: 'Coffee Consumed',
+    text: '3',
+  },
+]
+
+export const FunFacts = () => {
+  return (
+    <div className="px-4 mx-auto space-y-4">
+      <SectionTitle>
+        <span>Fun Facts</span>
+      </SectionTitle>
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+        {ITEMS.map(item => (
+          <div
+            key={item.title}
+            className="flex flex-col items-center w-full p-6 mt-4 space-y-4 border-2 border-gray-300 rounded-lg transform transition-all delay-200 ease-in-out hover:shadow-xl hover:-translate-y-0.5"
+          >
+            <item.icon className="text-lg text-green-500 md:text-3xl" />
+            <h4 className="text-lg font-bold">{item.title}</h4>
+            <p className="text-6xl text-gray-300">{item.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/fun-facts/index.ts

@@ -0,0 +1 @@
+export * from './FunFacts'

src/components/section-title/SectionTitle.tsx

@@ -0,0 +1,9 @@
+import React, { ReactElement } from 'react'
+
+export const SectionTitle = ({ children }: { children: ReactElement }) => {
+  return (
+    <h2 className="relative inline-block pb-2 text-2xl font-bold title">
+      {children}
+    </h2>
+  )
+}

src/components/section-title/index.ts

@@ -0,0 +1 @@
+export * from './SectionTitle'

src/components/what-i-do/whatido.tsx

@@ -1,13 +1,11 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
 import { FaPencilAlt, FaWarehouse } from 'react-icons/fa'
 import { FiMonitor } from 'react-icons/fi'
 import { HiOutlineSpeakerphone } from 'react-icons/hi'
 
-interface IItem {
-  icon: ComponentType
-  title: string
-  text: string
-}
+import { IItem } from '@/types/types'
+
+import { SectionTitle } from '../section-title'
 
 const ITEMS: IItem[] = [
   {
@@ -39,9 +37,9 @@ const ITEMS: IItem[] = [
 export const WhatIDo = () => {
   return (
     <div className="px-4 mx-auto space-y-4">
-      <h2 className="relative inline-block pb-2 text-2xl font-bold title">
-        What I do
-      </h2>
+      <SectionTitle>
+        <span>What I do</span>
+      </SectionTitle>
       <div className="flex flex-wrap -mx-6">
         {ITEMS.map(item => (
           <div

src/pages/index.tsx

@@ -8,6 +8,7 @@ import { AppLayout } from '@/layouts/AppLayout'
 import { NextPageType } from '@/types/next'
 import { Header } from '@/components/header'
 import { WhatIDo } from '@/components/what-i-do'
+import { FunFacts } from '@/components/fun-facts/FunFacts'
 
 const IndexPage: NextPageType = () => {
   return (
@@ -20,6 +21,7 @@ const IndexPage: NextPageType = () => {
           <div className="space-y-16">
             <Header />
             <WhatIDo />
+            <FunFacts />
           </div>
         </Page.Content>
       </Page>

src/styles/index.scss

@@ -3,4 +3,4 @@
 @import 'tailwindcss/utilities';
 
 @import './Scrollbar.scss';
-@import '@/components/what-i-do/whatido.scss';
+@import '@/components/section-title/SectionTitle.scss';

src/types/types.d.ts

@@ -0,0 +1,7 @@
+import { IconType } from 'react-icons'
+
+export interface IItem {
+  icon: IconType
+  title: string
+  text: string
+}