Merge pull request #20 from Atharvverma1234/main

Updated Landing Page UI
pbdsce · Aug 15, 2024 · a8c7905 · a8c7905
2 parents b120473 + dd46adf
commit a8c7905
Show file tree

Hide file tree

Showing 6 changed files with 311 additions and 3 deletions.
diff --git a/app/(default)/page.tsx b/app/(default)/page.tsx
@@ -5,12 +5,15 @@ export const metadata = {
 
 import Hero from '@/components/hero'
 import Domains from '@/components/domains'
+import '../css/additional-styles/landing.css';
+import Landing from '@/components/landing';
 
 export default function Home() {
   return (
     <>
       <Hero />
       <Domains />
+      <Landing />
     </>
   )
 }
diff --git a/app/css/additional-styles/landing.css b/app/css/additional-styles/landing.css
@@ -0,0 +1,99 @@
+.div-class {
+      background-image: url("../../../public/images/pbimage3.jpeg");
+      background-size: cover;
+      background-repeat: no-repeat;
+    };
+
+h1{
+  width: 100%;
+  height: 100vh;
+  line-height: 80vh;
+  justify-content: center;
+  text-align: center;
+  display: block;
+  font-size: 100px;
+}
+
+.view {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.box{
+  height: 350px;
+  width: 300px;
+  margin: 50px;
+  background-color: rgb(44, 41, 37);
+  border: 0.5mm solid black;
+  border-radius: 8px;
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+    scale : 0.0 ;
+  }
+  to {
+    opacity: 10;
+    scale : 1;
+  }
+}
+
+.box {
+  animation: appear linear;
+  animation-timeline: view();
+  animation-range: entry 0% cover 30%;
+}
+
+.highlight{
+  animation: appear linear;
+  animation-timeline: view();
+  animation-range: entry 0% cover 30%;
+}
+
+.event-card {
+  width: 300px;
+  height: 350px;
+  perspective: 800px;
+  padding: 10px;
+}
+
+.event-card:hover > .card {
+  cursor: pointer;
+  transform: rotateY(180deg);
+}
+
+.card {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  transition: transform 1500ms;
+  transform-style: preserve-3d;
+}
+
+.front,
+.back {
+  height: 100%;
+  width: 100%;
+  border-radius: 2rem;
+  box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
+  position: absolute;
+  backface-visibility: hidden;
+}
+
+.front {
+  background-color: rgb(32, 98, 4);
+}
+
+.back {
+  background-color: #3a3a3a;
+  transform: rotateY(180deg);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5rem;
+}
+
diff --git a/components/hero.tsx b/components/hero.tsx
@@ -2,19 +2,20 @@ import Logo from '@/public/images/logo.png'
 import Link from 'next/link'
 import DotPattern from "@/components/magicui/dot-pattern";
 import { cn } from "@/lib/utils";
+import "../app/css/additional-styles/landing.css";
 
 
 export default function Hero() {
   return (
-    <section className="relative md:h-screen flex justify-center items-center">
+    <section className="relative md:h-screen flex justify-center items-center div-class">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 ">
         <div className="pt-32 pb-5 md:pt-40 md:pb-5">
           <div className="pb-5 md:pb-5">
             <div className="max-w-6xl mx-auto">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                 <div>
-                  <h1 className="text-5xl font-extrabold leading-tighter tracking-tighter mb-4 text-gray-200" data-aos="zoom-y-out">We are Point Blank</h1>
-                  <p className="text-xl text-gray-100 mb-8" data-aos="zoom-y-out" data-aos-delay="150">We are a multidisciplinary community of programmers.</p>
+                  <h1 className="text-5xl font-extrabold leading-tighter tracking-tighter mb-4 text-gray-200" data-aos="zoom-y-out"></h1>
+                  <p className="text-xl text-gray-100 mb-8" data-aos="zoom-y-out" data-aos-delay="150"></p>
                 </div>
               </div>
             </div>

diff --git a/components/landing.tsx b/components/landing.tsx
@@ -0,0 +1,205 @@
+
+import React from "react";
+import '../app/css/additional-styles/landing.css';
+import ImageOne from '../public/images/demo.jpg';
+import Image from "next/image";
+
+export default function Landing()
+{
+    return(
+        <>
+
+      <div className="container place-items-center font-bold pt-20 pb-10">
+        <h2 className="text-5xl text-white-800 text-center">
+           Activities
+        </h2>
+        <h5 className="text-2xl text-white-800 text-center">
+           We organise lots of student centric activities
+        </h5>
+      </div>
+
+
+
+    <div className="flex flex-col md:flex-row w-full h- ">
+      <div className="highlight flex-1 flex items-center justify-center alip-2 bg-black-800 text-green-500 ">
+         <div className="p-8 md:p-16 max-w-lg text-center ">
+             <h1 className="text-3xl font-bold mb-4 ">
+              COMPETITIVE PROGRAMMING
+             </h1>
+             <h2 className="text-2xl  font-bold mb-4">
+              Coding Contests
+             </h2>
+             <p className="text-lg text-center md:text-center">
+             Point Blank has organized over 40+ editions of its PB Hustle coding contest,
+              where participants solve 5-7 increasingly difficult problems in their preferred 
+              programming language. The contest aims to enhance the programming culture in colleges
+               and help teams qualify for the ACM ICPC. Impressively, DSCE's leading programmers have
+                risen through this platform, with participation in the CodeChef Long Challenge expanding 
+                from just 3 to over 70+ participants.
+             </p>
+           </div>
+         </div>
+        <div className=" highlight flex-1 w-full flex items-center justify-center bg-black-900">
+        <Image src={ImageOne} alt='' className=''/>
+        </div>
+    </div>
+
+    <div className="flex flex-col md:flex-row w-full h-">
+        <div className="highlight flex-1 flex items-center justify-center bg-black-500 h-full">
+          <Image src={ImageOne} alt='' className=''/>
+        </div>
+        <div className=" highlight flex-1 flex items-center justify-center alip-8 bg-black-800 text-green-500">
+          <div className=" p-8 md:p-16 max-w-lg text-center ">
+             <h1 className="text-3xl  font-bold mb-4 ">
+              DEVELOPMENT
+             </h1>
+             <h2 className="text-2xl font-bold mb-4">
+              Workshops
+             </h2>
+             <p className="text-lg text-center md:text-center ">
+             Point Blank has hosted over 100+ workshops, covering a wide range 
+             of topics including open source, DevOps, machine learning, placement 
+             preparation, data structures and algorithms, and mobile and web development, 
+             among others. These workshops are typically conducted in an informal and unscripted 
+             manner, though we do document some of our most significant sessions. 
+             One notable example is our primer on F/OSS development.
+             </p>
+           </div>
+         </div>
+        </div>
+
+    <div className="flex flex-col md:flex-row w-full h-">
+      <div className="highlight flex-1 flex items-center justify-center alip-8 bg-black-800 text-green-500">
+         <div className=" p-8 md:p-16 max-w-lg text-center ">
+             <h1 className="text-3xl  font-bold mb-4 ">
+             HACKATHONS
+             </h1>
+             <h2 className="text-2xl  font-bold mb-4">
+              Competitive Hackathons
+             </h2>
+              <p className="text-lg text-center md:text-center">
+              Smart India Hackathon: Each year, we organize the internal 
+              round of the Smart India Hackathon. In the 2020 edition, over 300+ 
+              individuals from DSCE participated. Two of our teams advanced to the 
+              finals, with one emerging as the winner of the software edition.
+             </p>
+           </div>
+         </div>
+        <div className=" highlight flex-1 flex items-center justify-center bg-black-900">
+        <Image src={ImageOne} alt='' className=''/>
+        </div>
+    </div>
+
+    <div className="flex flex-col md:flex-row w-full h-">
+
+        <div className="highlight flex-1 flex items-center justify-center bg-black-900">
+        <Image src={ImageOne} alt='' className=''/>
+        </div>
+
+        <div className="highlight flex-1 flex items-center justify-center alip-8 bg-black-800 text-green-500">
+         <div className=" p-8 md:p-16 max-w-lg text-center ">
+            <h1 className="text-3xl font-bold mb-4 ">
+              CYBER SECURITY
+            </h1>
+            <h2 className="text-2xl font-bold mb-4">
+              CTFs/Sessions
+            </h2>
+            <p className="text-lg text-center md:text-center">
+            We organize workshops and sessions on various topics in cybersecurity, 
+            including hands-on practice on different platforms. In 2023, we launched 
+            the first in-house Capture The Flag event, PBCTF, which attracted over 70+ participants.
+             </p>
+           </div>
+         </div>
+      </div>                                               
+
+
+      <div className="container place-items-center font-bold pt-20 pb-10">
+         <h2 className="text-5xl text-white-800 text-center">
+           Events
+         </h2>
+         <h5 className="text-2xl text-white-800 text-center">
+           We organise lots of student centric activities
+         </h5>
+      </div>
+
+      <div className="view">
+       <EventComponent></EventComponent>
+      </div>
+
+
+      <div className="container place-items-center font-bold pt-20 pb-10">
+        <h2 className="text-5xl text-white-800 text-center">
+          Leads
+        </h2>
+      </div>
+
+      <div className="view">
+
+        <CardComponents></CardComponents>
+
+      </div>
+
+      <div className="view">
+
+        <CardComponents></CardComponents>
+
+      </div>
+  </>
+    )
+}
+
+
+
+const leads = [
+  { id: 0, text: "lead 1" },
+  { id: 1, text: "lead 2" },
+  { id: 2, text: "lead 3" }
+];
+
+const eventCard = [
+  { id:4 ,textt:"Back of Card", textb:"Additional info on the back of the card"},
+  { id:5 ,textt:"Back of Card", textb:"Additional info on the back of the card"},
+  { id:6 ,textt:"Back of Card", textb:"Additional info on the back of the card"},
+
+];
+
+const CardComponents = () => {
+  return (
+    <>
+      {leads.map((lead) => (
+        <div
+          key={lead.id}
+          className="box card-wrapper transition-transform duration-1000 ease-in-out transform hover:scale-105 hover:shadow-2xl"
+        >
+          <h1 className="absolute bottom-20 left-1/2 transform -translate-x-1/2 text-3xl text-base text-center text-green-600">
+            {lead.text}
+          </h1>
+        </div>
+      ))}
+    </>
+  );
+};
+
+
+
+const EventComponent = () => {
+  return (
+    <>
+    {eventCard.map((ec) => (
+      <div>
+         <div  key={ec.id} 
+         className="event-card">
+         <div className="card">
+           <div className="front"></div>
+              <div className="back">
+                 <h2>{ec.textt}</h2>
+                 <p className='text-center'>{ec.textb}</p>
+              </div>
+           </div>
+        </div>
+      </div>
+    ))}
+    </>
+  )
+}
diff --git a/public/images/demo.jpg b/public/images/demo.jpg
diff --git a/public/images/pbimage3.jpeg b/public/images/pbimage3.jpeg