Chnages saved

BhattAnsh · Oct 6, 2024 · ca25fe1 · ca25fe1
1 parent 6da4b8a
commit ca25fe1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/QuizQuestFrontend/package-lock.json b/QuizQuestFrontend/package-lock.json
diff --git a/QuizQuestFrontend/src/App.jsx b/QuizQuestFrontend/src/App.jsx
@@ -1,5 +1,5 @@
 import "./App.css";
-import Home from "./pages/Home";
+import Home from "./pages/home";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import FloatingNav from "./components/navbar";
 import { IoMdHome, IoMdAddCircle, IoMdMail } from "react-icons/io";

diff --git a/QuizQuestFrontend/src/pages/home.jsx b/QuizQuestFrontend/src/pages/home.jsx
@@ -2,28 +2,47 @@ import svg from "../assets/spotlight.svg";
 import { motion } from "framer-motion";
 
 export default function Home() {
-// import image from '/images/Grid.svg'
-function Home() {
   return (
-    <div className="flex h-screen w-screen justify-center  "style={{ backgroundImage: `url('/images/bgImage.avif')`, backgroundRepeat:"no-repeat",backgroundSize:"cover",  backgroundPosition: 'center' }}>
-     <div className="flex items-center justify-evenly w-11/12 ">
-     <div className="flex flex-col m-8 gap-6" >
-        <div className="">
-          <h1 className="text-6xl font-bold text-[#FFFFFF] "><span className="text-[#CFF466]">QUIZ</span> QUEST</h1>
-        </div>
-        <div className="w-[22vw] ">
-          <p className="leading-tight text-lg text-[#FFFFFF]">Where knowledge meets fun - build, join, and host quizzes with a community of quiz enthusiasts!</p>
-        </div>
-        <div className=" border-2 bg-[#CFF466] border-[#CFF466] rounded-lg py-1 text-center w-[9vw]">
-          <button className=" text-[#1E5128] text-sm">Create Now</button>
-        </div>
+    <>
+      <div className="h-screen w-screen md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1 }}
+          className="flex flex-col justify-center items-center h-full w-full"
+        >
+          <img src={svg} alt="spotlight" className="absolute top-0 left-0" />
+          <div className="relative h-screen w-[100vw] ">
+          <div className="flex items-center  h-full w-full  absolute left-60 mt-10 ">
+            <div className="flex flex-col gap-6  w-1/2 ">
+              <div>
+                <h1 className="text-7xl font-bold text-[#FFFFFF]">
+                  <span className="text-[#CFF466]">QUIZ</span> QUEST
+                </h1>
+              </div>
+              <div className="w-[24vw]">
+                <p className="leading-7 text-xl text-[#FFFFFF]">
+                  Where knowledge meets fun - build, join, and host quizzes with a
+                  community of quiz enthusiasts!
+                </p>
+              </div>
+              <div className="border-2 bg-[#CFF466] border-[#CFF466] rounded-lg py-1 text-center w-[10vw] mt-1">
+                <button className="text-[#1E5128] text-md">Create Now</button>
+              </div>
+            </div>
+
+
+            <div className="border border-[#7e9442] shadow-[1px_1px_20px_0.1px__rgba(207,244,102,1)]  overflow-hidden  rounded-xl h-[60vh] w-[70vw] relative">
+              <img
+                src="/images/quiz.jpg"
+                alt="img"
+                className="absolute top-0  w-full h-full object-cover"
+              />
+            </div>
+          </div>
+          </div>
+        </motion.div>
       </div>
-      <div className="border border-[#7e9442] shadow-[1px_1px_20px_1px__rgba(207,244,102,1)]  w-6/12 rounded-xl overflow-hidden">
-    <img src="/images/quiz.jpg" alt="Grid" className=""/>
-</div>
-     </div>
-    </div>
+    </>
   );
 }
-
-export default Home;