feat: add smooth scroll and spacing to page

src/App.tsx

@@ -0,0 +1,22 @@
+import Section from "./components/common/section/Section";
+import Header from "./components/header/Header";
+import Color from "./components/sections/color/Color";
+
+const App = () => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Section
+          id="color_section"
+          title={"colors"}
+          desc={"Basic colors ready for use!"}
+        >
+          <Color />
+        </Section>
+      </main>
+    </>
+  );
+};
+
+export default App;

src/components/common/grid/Grid.tsx

@@ -2,17 +2,12 @@ import { ReactNode } from "react";
 import gridStyles from "./grid.module.scss";
 
 export type GridType = {
-  id: string;
   className?: string;
   children: ReactNode;
 };
 
-const Grid = ({ id, className, children }: GridType) => {
-  return (
-    <div id={id} className={`${gridStyles.grid} ${className}`}>
-      {children}
-    </div>
-  );
+const Grid = ({ className, children }: GridType) => {
+  return <div className={`${gridStyles.grid} ${className}`}>{children}</div>;
 };
 
 export default Grid;

src/components/common/section/Section.tsx

@@ -2,16 +2,17 @@ import { ReactNode } from "react";
 import sectionStyles from "./section.module.scss";
 
 type SectionProps = {
+  id: string;
   children: ReactNode;
   title: string;
   desc: string;
 };
 
-const Section = ({ children, title, desc }: SectionProps) => {
+const Section = ({ id, children, title, desc }: SectionProps) => {
   return (
-    <section id={title} className={`container ${sectionStyles.section}`}>
+    <section id={id} className={`container ${sectionStyles.section}`}>
       <div className={`${sectionStyles.heading}`}>
-        <h2 className={`${sectionStyles.title}`}>{title}</h2>
+        <h1 className={`${sectionStyles.title}`}>{title}</h1>
         <p className={`${sectionStyles.desc}`}>{desc}</p>
       </div>
       {children}

src/components/common/section/section.module.scss

@@ -7,11 +7,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 100px 0;
   .heading {
     margin-bottom: 16px;
     .title {
       text-transform: capitalize;
       text-align: center;
+      font-size: 2.5rem;
     }
     .desc {
       text-align: center;

src/components/sections/color/Color.tsx

@@ -21,11 +21,7 @@ const Color = () => {
         ));
   };
 
-  return (
-    <Grid id="color_grid" className={`${colorStyles.color_grid}`}>
-      {renderColors()}
-    </Grid>
-  );
+  return <Grid className={`${colorStyles.color_grid}`}>{renderColors()}</Grid>;
 };
 
 export default Color;

src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import "./sassy/main.scss";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./styles/globals.scss";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);

src/styles/globals.scss

@@ -12,9 +12,11 @@
   transition: all 150ms ease-in-out;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background-color: $background;
+  height: 1500px;
 }
-main {
-  padding: 100px 0;
-}