Added Video background

Signed-off-by: ayushk1804 <ayushk780@gmail.com>
pbdsce · Jun 23, 2021 · 9782017 · 9782017
1 parent c0d4027
commit 9782017
Show file tree

Hide file tree

Showing 20 changed files with 592 additions and 157 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.2.0",
+    "react-particles-js": "^3.4.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.4",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,4 +1,4 @@
-import 'tailwindcss/tailwind.css'
+// import 'tailwindcss/tailwind.css'
 import '../style/global.css'
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

diff --git a/pages/index.js b/pages/index.js
@@ -16,8 +16,18 @@ export default function Home() {
   return (
     <div
       id="container"
-      className="flex flex-col bg-theme-bg h-screen overflow-hidden"
+      className="flex flex-col bg-theme-bg lg:bg-opacity-90 h-screen overflow-hidden"
     >
+      <video
+        playsInline
+        autoPlay
+        muted
+        loop
+        id="myVideo"
+        className="hidden lg:block"
+      >
+        <source src="/Assets/Videos/Veil.mp4" type="video/mp4" />
+      </video>
       <Head>
         <title>Advaith HackFest</title>
         <meta property="og:title" content="Advaith Hackfest" key="title" />
@@ -28,7 +38,7 @@ export default function Home() {
         />
         <meta name="robots" content="index, follow" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta charset="UTF-8" />
+        <meta charSet="UTF-8" />
       </Head>
       <div id="navbar" className="w-screen shadow-3xl">
         <Sidebar isSidebarOpen={isSidebarOpen} />

diff --git a/public/Assets/Images/header-logo.png b/public/Assets/Images/header-logo.png
diff --git a/public/Assets/Images/header-logo.svg b/public/Assets/Images/header-logo.svg
diff --git a/public/Assets/Videos/Network.webm b/public/Assets/Videos/Network.webm
diff --git a/public/Assets/Videos/Veil.mp4 b/public/Assets/Videos/Veil.mp4
diff --git a/public/Assets/Videos/bg.mp4 b/public/Assets/Videos/bg.mp4
diff --git a/public/Assets/fonts/HelveticaMonospaced.woff b/public/Assets/fonts/HelveticaMonospaced.woff
diff --git a/src/Components/IndexPageComponents/CTAButton/CTAButton.js b/src/Components/IndexPageComponents/CTAButton/CTAButton.js
@@ -3,7 +3,7 @@ import Image from "next/image";
 const CTAButton = () => {
   return (
     <div className="sticky float-right inset-0 flex place-items-center p-5">
-      <button className="rounded-full p-2 md:p-3 md:m-5 bg-[#5865f2] hover:animate-bounce transform md:scale-125">
+      <button className="rounded-full p-2 md:p-3 md:m-5 bg-[#5865f2] hover:animate-bounce transform md:scale-125 focus:outline-none">
         <a className="flex place-items-center">
           <Image
             src="/Assets/Images/Brands/Discord-Logo-White.svg"

diff --git a/src/Components/IndexPageComponents/EventsSection/EventsSection.js b/src/Components/IndexPageComponents/EventsSection/EventsSection.js
@@ -8,6 +8,9 @@ const EventsSection = () => {
         <Card />
         <Card />
         <Card />
+        <Card />
+        <Card />
+        <Card />
       </div>
     </div>
   );

diff --git a/src/Components/IndexPageComponents/FAQSection/FAQSection.js b/src/Components/IndexPageComponents/FAQSection/FAQSection.js
@@ -8,15 +8,14 @@ const FAQSection = () => {
               Frequently Asked Question
             </h1>
             <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
-              The most common questions about how our business works and what
-              can do for you.
+              The most common questions about the event and what can do for you.
             </p>
           </div>
           <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
             <div className="w-full lg:w-1/2 px-4 py-2">
               <details className="mb-4 cursor-pointer">
                 <summary className="font-semibold bg-gray-800 rounded-md py-2 px-4">
-                  How Long is this site live?
+                  How much does it cost?
                 </summary>
                 <span className="text-sm">
                   Laboris qui labore cillum culpa in sunt quis sint veniam.
@@ -26,7 +25,7 @@ const FAQSection = () => {
               </details>
               <details className="mb-4 cursor-pointer">
                 <summary className="font-semibold bg-gray-800 rounded-md py-2 px-4">
-                  Can I install/upload anything I want on there?
+                  Will there be prizes ?
                 </summary>
 
                 <span className="text-sm">

diff --git a/src/Components/IndexPageComponents/Header/Header.js b/src/Components/IndexPageComponents/Header/Header.js
@@ -10,36 +10,35 @@ const SponsorImageList = [
 
 const Header = () => {
   return (
-    <div className="flex flex-col h-screen place-items-center p-10 space-y-10">
-      <div className="flex flex-col place-items-center space-y-1">
+    <div className="flex flex-col h-screen place-items-center lg:bg-opacity-80 p-10 space-y-10">
+      <div className="flex flex-col place-items-center w-full h-1/6 md:w-1/2">
         <Image
-          src="/Assets/Images/advaith-logo.svg"
-          width={180}
-          height={50}
+          src="/Assets/Images/header-logo.svg"
+          width={400}
+          height={150}
+          layout="intrinsic"
+          alt="advaith-logo"
           className="object-contain"
         />
-        <p className="text-theme-primary-600 text-sm">
+        <p className="text-theme-primary-550 text-sm md:text-lg">
           brought to you by ACM-W and Point Blank
         </p>
       </div>
-      <div className="md:h-3/6">
-        <Image
-          src={"/Assets/Images/header-computer.svg"}
-          width={300}
-          height={300}
-          className="object-fit"
-        />
+      <p className="text-theme-primary-300 md:max-w-sm text-center">
+        A week long technical fest with plethora of events : Hackathon,
+        Ideathon, DesignWars etc
+      </p>
+      <div className="flex h-full">
+        <div className="flex flex-col place-items-center mt-auto">
+          <p className="text-theme-primary-550 text-md md:text-xl">
+            Our Partners
+          </p>
+          <SponsorImages Sponsors={SponsorImageList} className="flex" />
+        </div>
       </div>
-      <div className="flex flex-col place-items-center">
-        <p className="text-theme-primary-600 font-semibold text-md">
-          Our Partners
-        </p>
-        <SponsorImages
-          Sponsors={SponsorImageList}
-          className="flex w-full space-x-10"
-        />
+      <div className="flex place-content-end h-full">
+        <ScrollDownIcon className="flex m-auto animate-bounce" />
       </div>
-      <ScrollDownIcon className="animate-bounce" />
     </div>
   );
 };

diff --git a/src/Components/IndexPageComponents/ScheduleTimelineSection/ScheduleTimelineSection.js b/src/Components/IndexPageComponents/ScheduleTimelineSection/ScheduleTimelineSection.js
@@ -34,6 +34,27 @@ const EventDetails = [
     eventDesc:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sit delectus fugiat accusamus adipisci mollitia facere vero culpa fuga eius!",
   },
+  {
+    date: "20 JULY",
+    time: "00:00 pm",
+    eventName: "Capture the Flag",
+    eventDesc:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sit delectus fugiat accusamus adipisci mollitia facere vero culpa fuga eius!",
+  },
+  {
+    date: "20 JULY",
+    time: "00:00 pm",
+    eventName: "Capture the Flag",
+    eventDesc:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sit delectus fugiat accusamus adipisci mollitia facere vero culpa fuga eius!",
+  },
+  {
+    date: "20 JULY",
+    time: "00:00 pm",
+    eventName: "Capture the Flag",
+    eventDesc:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sit delectus fugiat accusamus adipisci mollitia facere vero culpa fuga eius!",
+  },
 ];
 
 const ScheduleTimelineSection = () => {
@@ -48,7 +69,7 @@ const ScheduleTimelineSection = () => {
               key={key}
               id="left-timeline-element"
             >
-              <div className="bg-theme-bg col-start-1 col-end-5 p-4 rounded-xl my-4 ml-auto shadow-md">
+              <div className="bg-theme-bg shadow-md col-start-1 col-end-5 p-4 rounded-xl my-4 ml-auto">
                 <p>
                   {event.date} {event.time}
                 </p>
@@ -58,7 +79,7 @@ const ScheduleTimelineSection = () => {
                   quaerat?
                 </p>
               </div>
-              <div className="col-start-5 col-end-6 md:mx-auto relative mr-10">
+              <div className="bg-theme-cardcol-start-5 col-end-6 md:mx-auto relative mr-10">
                 <div className="h-full w-6 flex items-center justify-center">
                   <div className="h-full w-1 bg-theme-primary-600 pointer-events-none"></div>
                 </div>
@@ -77,7 +98,7 @@ const ScheduleTimelineSection = () => {
                 </div>
                 <div className="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-theme-primary-500 shadow"></div>
               </div>
-              <div className="bg-theme-bg col-start-6 col-end-10 p-4 rounded-xl my-4 mr-auto shadow-md">
+              <div className="bg-theme-bg shadow-md col-start-6 col-end-10 p-4 rounded-xl my-4 mr-auto">
                 <p>
                   {event.date} {event.time}
                 </p>

diff --git a/src/Components/NavBar/NavBar.js b/src/Components/NavBar/NavBar.js
@@ -50,12 +50,12 @@ const NavBar = ({ isSidebarOpen, setSidebarOpen }) => {
         <button className="hidden md:block px-3 py-1 text-lg bg-theme-primary-400 rounded-lg font-semibold">
           <a href="/">Register</a>
         </button>
-        <Image
+        {/* <Image
           src="/Assets/Images/DSCE-logo.png"
           width={35}
           height={35}
           className="object-contain"
-        />
+        /> */}
       </div>
     </nav>
   );

diff --git a/src/Components/Sidebar/Sidebar.js b/src/Components/Sidebar/Sidebar.js
@@ -12,7 +12,7 @@ const Sidebar = ({ isSidebarOpen }) => {
   const [isEventOpen, setIsEventOpen] = useState(false);
   return (
     <div
-      className={`absolute h-full w-3/4 bg-theme-bg bg-opacity-50 shadow-inset transform transition-all duration-200 ease-in-out backdrop-filter backdrop-blur-lg z-20 ${
+      className={`absolute h-full w-3/4 md:hidden bg-theme-bg bg-opacity-50 shadow-inset transform transition-all duration-200 ease-in-out backdrop-filter backdrop-blur-lg z-20 ${
         isSidebarOpen ? "translate-x-0" : "-translate-x-full"
       }`}
     >