Skip to content

Commit

Permalink
Merge pull request #25 from mohit-nagaraj/pr
Browse files Browse the repository at this point in the history 
Landing page complete
  • Loading branch information
@SkySingh04
SkySingh04 authored Aug 16, 2024
2 parents b9f53cd + 9ff7a7d commit f81a3ed
Show file tree
Hide file tree
Showing 14 changed files with 161 additions and 125 deletions.
37 changes: 29 additions & 8 deletions app/(default)/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,40 @@
export const metadata = {
title: 'Home',
description: 'Landing page',
}
title: "Home",
description: "Landing page",
};

import Hero from '@/components/hero'
import Domains from '@/components/domains'
import '../css/additional-styles/landing.css';
import Landing from '@/components/landing';
import Hero from "@/components/hero";
import Domains from "@/components/domains";
import "../css/additional-styles/landing.css";
import Landing from "@/components/landing";
import Image from "next/image";
import Link from "next/link";

export default function Home() {
return (
<>
<Hero />
<div className="flex flex-col justify-center items-center py-10 px-5 mb-20">
<div className="text-4xl font-bold text-center text-gray-200 mb-4">
Upcoming Events
</div>
<Link href="/form">
<Image
src={"/images/sih.png"}
alt="sih"
height={400}
width={1100}
className="rounded-3xl border-2 border-slate-500"
/>
</Link>
<Link href="/form">
<button className="btn-sm text-xl text-black bg-green-500 mx-3 rounded-xl mt-5">
Register for SIH
</button>
</Link>
</div>
<Domains />
<Landing />
</>
)
);
}
5 changes: 5 additions & 0 deletions app/css/additional-styles/landing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
background-image: url("../../../public/images/pbimage3.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@media (max-width: 768px) {
margin-top: 60px;
}
};

h1{
Expand Down Expand Up @@ -78,6 +82,7 @@ h1{
height: 100%;
width: 100%;
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
position: absolute;
backface-visibility: hidden;
Expand Down
216 changes: 114 additions & 102 deletions components/landing.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,136 @@

import React from "react";
import '../app/css/additional-styles/landing.css';
import ImageOne from '../public/images/demo.jpg';
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>
<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">
PB Hustle
</h2>
<h2 className="text-2xl font-bold mb-4">PB Hustle</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.
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 className="w-96 h-96 flex items-center justify-center bg-black-900">
<Image
src={"/images/cp.jpeg"}
alt=""
className="rounded-xl object-cover w-full h-full"
width={"500"}
height={"500"}
/>
</div>
</div>
</div>

<div className="flex flex-col md:flex-row w-full h-">
<div className="flex flex-col-reverse items-center justify-center md:flex-row w-full h-full">
<div className="highlight flex-1 flex items-center justify-center bg-black-500 h-full">
<Image src={ImageOne} alt='' className='' />
<div className="w-96 h-96 flex items-center justify-center bg-black-900">
<Image
src={"/images/dev.jpg"}
alt=""
className="rounded-xl object-cover w-full h-full"
width={"400"}
height={"300"}
/>
</div>
</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">
PB Chronicals
</h2>
<p className="text-lg text-center md:text-center ">
<div className="highlight flex-1 flex items-center justify-center p-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">PB Chronicals</h2>
<p className="text-lg">
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.
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">
Smart India Hackathon
</h2>
<p className="text-lg text-center md:text-center">
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.
Along with this, teams from Point Blank have won hackathons all across
the city and country.
<div className="flex flex-col md:flex-row w-full h-full">
<div className="highlight flex-1 flex items-center justify-center p-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">Smart India Hackathon</h2>
<p className="text-lg">
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. Along with this,
teams from Point Blank have won hackathons all across the city and
country.
</p>
</div>
</div>
<div className=" highlight flex-1 flex items-center justify-center bg-black-900">
<Image src={ImageOne} alt='' className='' />
<div className="highlight flex-1 flex items-center justify-center bg-black-900">
<div className="w-96 h-96 flex items-center justify-center bg-black-900">
<Image
src={"/images/hack.jpg"}
alt=""
className="rounded-xl object-cover w-full h-full"
width={"400"}
height={"400"}
/>
</div>
</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 className="flex flex-col-reverse items-center justify-center md:flex-row w-full h-full">
<div className="highlight flex-1 flex items-center justify-center bg-black-900 h-full">
<div className="w-96 h-96 flex items-center justify-center bg-black-900">
<Image
src={"/images/ctf.jpg"}
alt=""
className="rounded-xl object-cover w-full h-full"
width={"300"}
height={"300"}
/>
</div>
</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">
PB CTF
</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.
<div className="highlight flex-1 flex items-center justify-center p-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">PB CTF</h2>
<p className="text-lg">
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>
<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>
Expand All @@ -128,41 +140,42 @@ export default function Landing() {
<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>
<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" }
{ 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" },

{
id: 4,
url: '/images/openday.jpg',
textt: "Tech Open Day",
textb: "Our first offline event of the year and it was a huge success✨Get to know about tech societies on campus and how to join them🚀",
},
{
id: 5,
url: '/images/advaith.jpg',
textt: "Advaith",
textb: "An event full of opportunities, challenges, learning and much more! Be a part of something big, be a part of ADVAITH!",
},
{
id: 6,
url: '/images/recruit.jpeg',
textt: "Recruitment 2024",
textb: "Recruitment 2024 is here! Join us and be a part of the Point Blank family!🚀",
},
];

const CardComponents = () => {
Expand All @@ -182,25 +195,24 @@ const CardComponents = () => {
);
};



const EventComponent = () => {
return (
<>
{eventCard.map((ec) => (
<div>
<div key={ec.id}
className="event-card">
<div key={ec.id} className="event-card">
<div className="card">
<div className="front"></div>
<div className="front">
<img src={ec.url} className="w-full h-full object-cover" alt="" />
</div>
<div className="back">
<h2>{ec.textt}</h2>
<p className='text-center'>{ec.textb}</p>
<h2 className="text-xl font-semibold capitalize">{ec.textt}</h2>
<p className="px-4 text-center text-gray-300">{ec.textb}</p>
</div>
</div>
</div>
</div>
))}
</>
)
}
);
};
Loading

0 comments on commit f81a3ed

Please sign in to comment.