From 82cf090806cedab08ccb1e12eef7d0fc056fcf33 Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Sat, 29 Apr 2023 16:01:50 -0500
Subject: [PATCH] Added layout + skeleton components

---
 src/components/Header.tsx     |  2 +-
 src/components/RootLayout.tsx | 24 +++++++++++++++++++++
 src/pages/index.tsx           | 40 ++++++++++++++++++-----------------
 3 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 src/components/RootLayout.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d8e6aff..3835087 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-export const Footer: React.FC = () => {
+export const Header: React.FC = () => {
   return (
     <header>
       {/* Logo */}
diff --git a/src/components/RootLayout.tsx b/src/components/RootLayout.tsx
new file mode 100644
index 0000000..9b790bf
--- /dev/null
+++ b/src/components/RootLayout.tsx
@@ -0,0 +1,24 @@
+import { Plus_Jakarta_Sans } from "next/font/google";
+import { Header } from "~/components/Header";
+import { Footer } from "~/components/Footer";
+import type { PropsWithChildren } from "react";
+
+const jakarta = Plus_Jakarta_Sans({
+  subsets: ["latin"],
+  weight: ["400", "600", "800"],
+  display: "block",
+  preload: true,
+  variable: "--font-jakarta",
+});
+
+export const RootLayout: React.FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <>
+      <Header />
+      <main className={`${jakarta.variable} min-h-screen bg-white font-sans`}>
+        {children}
+      </main>
+      <Footer />
+    </>
+  );
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cf8aeb6..34b73f0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,6 @@
 import { type NextPage } from "next";
 import Head from "next/head";
-import { Plus_Jakarta_Sans } from "next/font/google";
-
-const jakarta = Plus_Jakarta_Sans({
-  subsets: ["latin"],
-  weight: ["400", "600", "800"],
-  display: "block",
-  preload: true,
-  variable: "--font-jakarta",
-});
+import { RootLayout } from "~/components/RootLayout";
 
 const Home: NextPage = () => {
   return (
@@ -18,22 +10,32 @@ const Home: NextPage = () => {
         <meta name="description" content="A software development company." />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={`${jakarta.variable} bg-white font-sans`}>
-        <h1 className="font-extrabold text-black">Sunrise</h1>
-        <p className="leading-relaxed text-black">
-          Creating software that looks and works great is our specialty at
-          Sunrise. Our team of experts combines artistry and technical know-how
-          to craft solutions that will make your business{" "}
-          <span className="font-semibold text-orange">shine</span>.
-        </p>
-      </main>
+      <RootLayout>
+        <Hero />
+        {/* <Services /> */}
+        {/* <Projects /> */}
+        {/* <About /> */}
+        {/* <Contact /> */}
+      </RootLayout>
     </>
   );
 };
 
 export default Home;
 
-// const Hero = () => {}
+const Hero = () => {
+  return (
+    <>
+      <h1 className="font-extrabold text-black">Sunrise</h1>
+      <p className="leading-relaxed text-black">
+        Creating software that looks and works great is our specialty at
+        Sunrise. Our team of experts combines artistry and technical know-how to
+        craft solutions that will make your business{" "}
+        <span className="font-semibold text-orange">shine</span>.
+      </p>
+    </>
+  );
+};
 // const Services = () => {}
 // const Projects = () => {}
 // const About = () => {}