add footer section

Author: frontendfixer

src/components/Footer.tsx

@@ -0,0 +1,33 @@
+import Logo from './Logo';
+import SocialLinks from './SocialLinks';
+
+const Footer = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex flex-col items-center gap-10">
+        <Logo large />
+
+        <p className="max-w-sm text-center font-serif text-xl text-gray-300">
+          Transforming Ideas into Immersive User Experiences with the Power of
+          React
+        </p>
+
+        <SocialLinks inverted />
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <p className="text-white">
+          Made with <span className="text-xl text-red-600">&#9829;</span> by{' '}
+          <a
+            href="https://github.com/frontendfixer"
+            className="underline hover:text-blue-400"
+          >
+            Lakshmikanta
+          </a>
+        </p>
+        <p className="font-sm text-gray-500">&copy; All right reserved 2023</p>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/routes/Home.tsx

@@ -1,47 +1,55 @@
 import Contact from '../components/Contact';
 import Container from '../components/Container';
+import Footer from '../components/Footer';
 import HeroSection from '../components/HeroSection';
 import LanguageAndTool from '../components/LanguageAndTool';
 import RecentWork from '../components/RecentWork';
 
 const Home = () => {
   return (
-    <main className="bg-gray-50 dark:bg-dark-900">
-      <section
-        id="hero"
-        className="bg-[url('/src/assets/images/hero-pattern.svg')] bg-cover bg-no-repeat"
-      >
+    <>
+      <main className="bg-gray-50 dark:bg-dark-900">
+        <section
+          id="hero"
+          className="bg-[url('/src/assets/images/hero-pattern.svg')] bg-cover bg-no-repeat"
+        >
+          <Container>
+            <HeroSection />
+          </Container>
+        </section>
+        <section id="skills" className="pb-16">
+          <div className="bg-blue-400 pb-40 pt-24">
+            <h2 className="text-center font-serif text-3xl font-bold text-white drop-shadow-md lg:text-5xl">
+              Skills
+            </h2>
+          </div>
+          <Container>
+            <LanguageAndTool />
+          </Container>
+        </section>
+        <section className="pb-16 pt-24" id="projects">
+          <Container>
+            <h2 className="mb-16 text-center font-serif text-3xl font-bold capitalize text-dark-900 drop-shadow-md dark:text-gray-50 lg:text-5xl">
+              My recent projects
+            </h2>
+            <RecentWork />
+          </Container>
+        </section>
+        <section id="contact" className="bg-lime-400 pb-16 pt-24">
+          <Container>
+            <h2 className="mb-8 text-center font-serif text-3xl font-bold text-white drop-shadow-md lg:text-5xl">
+              Get in touch with me
+            </h2>
+            <Contact />
+          </Container>
+        </section>
+      </main>
+      <footer className="bg-dark-900 pb-6 pt-24">
         <Container>
-          <HeroSection />
+          <Footer />
         </Container>
-      </section>
-      <section id="skills" className="pb-16">
-        <div className="bg-blue-400 pb-40 pt-24">
-          <h2 className="text-center font-serif text-3xl font-bold text-white drop-shadow-md lg:text-5xl">
-            Skills
-          </h2>
-        </div>
-        <Container>
-          <LanguageAndTool />
-        </Container>
-      </section>
-      <section className="pb-16 pt-24" id="projects">
-        <Container>
-          <h2 className="mb-16 text-center font-serif text-3xl font-bold capitalize text-dark-900 drop-shadow-md dark:text-gray-50 lg:text-5xl">
-            My recent projects
-          </h2>
-          <RecentWork />
-        </Container>
-      </section>
-      <section id="contact" className="bg-lime-400 pb-16 pt-24">
-        <Container>
-          <h2 className="mb-8 text-center font-serif text-3xl font-bold text-white drop-shadow-md lg:text-5xl">
-            Get in touch with me
-          </h2>
-          <Contact />
-        </Container>
-      </section>
-    </main>
+      </footer>
+    </>
   );
 };