added bg for hero

krishna8421 · Dec 25, 2023 · 7a20986 · 7a20986
1 parent 7bf7711
commit 7a20986
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/public/hero-bg.png b/public/hero-bg.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,9 @@ export const metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className="dark">
-      <body className={`font-sans ${GeistSans.className}`}>
+      <body
+        className={`bg-hero bg-cover bg-center bg-no-repeat font-sans ${GeistSans.className}`}
+      >
         <Suspense fallback={<Loader />}>
           <Providers>
             <div className="flex min-h-screen flex-col">

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 
 const Loader = () => {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
-      <video autoPlay loop muted playsInline className="w-48 h-48">
+      <video autoPlay loop muted playsInline className="h-48 w-48">
         <source src="/preloader.mp4" type="video/mp4" />
         Your browser does not support the video tag.
       </video>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,7 +7,11 @@ export default {
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      backgroundImage: {
+        hero: "url('/hero-bg.png')",
+      },
+    },
   },
   darkMode: "class",
   plugins: [nextui()],