Added layout + skeleton components

src/components/Header.tsx

@@ -1,4 +1,4 @@
-export const Footer: React.FC = () => {
+export const Header: React.FC = () => {
   return (
     <header>
       {/* Logo */}

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 />
+    </>
+  );
+};

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 = () => {}