homebanner added

Author: jsvigneshkanna

components/homebanner.js

@@ -0,0 +1,34 @@
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+import {useState, useRef, useEffect} from "react";
+const Homebanner = () => {
+  return (
+    <div className="banner">
+      <div className="banner_container">
+        <div className="left_container">
+          <div className="what_is">What is Tailwind CSS UI bootstrap</div>
+          <div className="what_is_ans">
+            <p>
+              This is one stop for frontend developers (sorry 🙏 fullstack
+              developers) who are designing and building their website in
+              tailwind css
+            </p>
+            <p>
+              Here you can find all UI components and layouts build exclusively
+              in tailwind
+            </p>
+            <p>
+              Additional point, checkout components page - dont say this to your
+              competitors 🤫
+            </p>
+          </div>
+        </div>
+        <div className="right_container">
+          <img src="/home_banner.png" alt="banner" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Homebanner;

pages/_app.js

@@ -1,8 +1,9 @@
-import '../styles/globals.css'
-import '../styles/components/navbar_style.css';
+import "../styles/globals.css";
+import "../styles/components/navbar_style.css";
+import "../styles/components/homebanner.css";
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+function MyApp({Component, pageProps}) {
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

pages/index.js

@@ -1,6 +1,7 @@
 import Head from "next/head";
 
 import Navbar from "../components/navbar";
+import Homebanner from "../components/homebanner";
 
 export default function Home() {
   return (
@@ -13,6 +14,7 @@ export default function Home() {
 
       <div className=" bg-slate-100 min-h-screen">
         <Navbar />
+        <Homebanner />
       </div>
     </div>
   );

public/home_banner.png

@@ -0,0 +1,51 @@
+.banner {
+  background-color: rgb(35, 32, 71);
+  min-height: 80vh;
+  width: 100%;
+  font-family: poppins;
+  padding-top: 2%;
+}
+
+.banner_container {
+  width: 75%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10rem;
+  z-index: 10;
+}
+
+.left_container {
+  width: 100%;
+}
+
+.what_is {
+  font-weight: bolder;
+  color: wheat;
+  text-decoration: underline;
+  text-underline-offset: 8px;
+  padding-bottom: 24px;
+  font-size: large;
+  letter-spacing: 4px;
+}
+
+.what_is_ans {
+  color: white;
+  font-size: x-large;
+  line-height: 1.8;
+}
+
+.what_is_ans p {
+  margin-bottom: 24px;
+}
+
+.right_container {
+  width: 100%;
+}
+
+.right_container img {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

styles/components/homebanner.css

@@ -1,3 +1,6 @@
+/* Google font family for poppins */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
 .nav_container {
   width: 100%;
   background: linear-gradient(

styles/components/navbar_style.css

@@ -1,10 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Google font family for poppins */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-* {
-  font-family: 'Poppins', sans-serif;
-}