feat: create all basic section + style the custom scrollbar with them…

…e support

src/App.jsx

@@ -1,9 +1,11 @@
 import { Footer, Header } from "./components";
+import { Home } from "./sections";
 
 const App = () => {
   return (
-    <main className="relative flex min-h-screen w-screen flex-col bg-white font-space-grotesk transition-colors duration-500 dark:bg-[#100E34]">
+    <main className="relative flex min-h-screen w-full flex-col overflow-x-hidden bg-white font-space-grotesk transition-colors duration-500 dark:bg-[#100E34]">
       <Header />
+      <Home />
       <Footer />
     </main>
   );

src/components/Footer.jsx

@@ -2,6 +2,9 @@ const Footer = () => {
   const year = new Date().getFullYear();
   return (
     <footer className="mt-auto flex h-64 w-full flex-col items-center bg-black text-white">
+      <div>
+
+      </div>
       <div className="mb-20 mt-auto flex w-full items-center justify-center text-sm text-gray-400">
         &copy; Kiran Mahajan. All Rights Reserved {year}
       </div>

src/index.css

@@ -7,3 +7,20 @@
     @apply transition-colors duration-300 hover:text-dark-blue dark:hover:text-violet;
   }
 }
+@layer utilities {
+  ::-webkit-scrollbar {
+    @apply w-1;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-400 dark:bg-slate-700;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-light-blue dark:bg-yellow;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-blue dark:bg-violet;
+  }
+}

src/sections/About.jsx

@@ -0,0 +1,5 @@
+const About = () => {
+  return <section id="about">About</section>;
+};
+
+export default About;

src/sections/Contact.jsx

@@ -0,0 +1,5 @@
+const Contact = () => {
+  return <section id="contact">Contact</section>;
+};
+
+export default Contact;

src/sections/Experience.jsx

@@ -0,0 +1,5 @@
+const Experience = () => {
+  return <section id="experience">Experience</section>;
+};
+
+export default Experience;

src/sections/Home.jsx

@@ -0,0 +1,9 @@
+const Home = () => {
+  return (
+    <section id="home" className="h-screen w-full">
+      Home
+    </section>
+  );
+};
+
+export default Home;

src/sections/Projects.jsx

@@ -0,0 +1,5 @@
+const Projects = () => {
+  return <section id="projects">Projects</section>;
+};
+
+export default Projects;

src/sections/Skills.jsx

@@ -0,0 +1,5 @@
+const Skills = () => {
+  return <section id="skills">Skills</section>;
+};
+
+export default Skills;

src/sections/index.js

@@ -0,0 +1,6 @@
+export { default as Home } from "./Home";
+export { default as About } from "./About";
+export { default as Skills } from "./Skills";
+export { default as Experience } from "./Experience";
+export { default as Projects } from "./Projects";
+export { default as Contact } from "./Contact";