Skip to content

Commit

Permalink
responsive homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@ezhil56x
ezhil56x committed Aug 4, 2024
1 parent 02baa1d commit ab7f7cd
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 83 deletions.
2 changes: 1 addition & 1 deletion app/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Nav = () => {
<header className="bg-blue-950 text-white">
<nav>
<div className="flex justify-between items-center w-full px-5 md:px-10 py-4">
<div>
<div className='hidden md:block'>
<Link href="/">
<Image src={Logo} width="50" height="50" alt="logo" />
</Link>
Expand Down
18 changes: 7 additions & 11 deletions app/form/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export default function FormPage() {

useEffect(() => {
if (acceptApplication && !isFormSubmitted) {
setBackgroundHeight("95vh");
setBackgroundHeight("max-content");
} else {
setBackgroundHeight("86vh");
}
Expand Down Expand Up @@ -316,14 +316,12 @@ export default function FormPage() {
name="previousWork1"
render={({ field }: any) => (
<FormItem>
<FormLabel>
Previous Work(s) (Portfolio, GitHub profile, Google
Drive link, etc.)
</FormLabel>
<FormLabel>Previous Works (if any)</FormLabel>
<FormControl>
<Input
{...field}
placeholder="Previous Work"
placeholder="Portfolio, GitHub profile, Google
Drive link, etc."
className="resize-none w-full text-black"
/>
</FormControl>
Expand Down Expand Up @@ -388,14 +386,12 @@ export default function FormPage() {
name="previousWork2"
render={({ field }: any) => (
<FormItem>
<FormLabel>
Previous Work(s) (Portfolio, GitHub profile, Google
Drive link, etc.)
</FormLabel>
<FormLabel>Previous Works (if any)</FormLabel>
<FormControl>
<Input
{...field}
placeholder="Previous Work"
placeholder="Portfolio, GitHub profile, Google
Drive link, etc."
className="resize-none w-full text-black"
/>
</FormControl>
Expand Down
152 changes: 81 additions & 71 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ export default function Home() {
/>
</div>
<div className="mx-auto w-[80%] text-center">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight">
<h1 className="text-4xl md:text-4xl font-bold tracking-tight">
CYSCOM
</h1>
<h2 className="text-lg md:text-xl mt-1 md:mt-3">VIT Chennai</h2>
<h3 className="text-md md:text-lg font-bold mt-1 md:mt-3">
RECRUITMENTS 2024-25
<h3 className="text-md md:text-xl font-bold mt-1 md:mt-3">
Recruitments 2024-25
</h3>
<p className=" mt-5 w-[90%] md:w-[45%] mx-auto text-md md:text-lg">
Started with a few people having cyber safety in mind, the chapter now
Expand All @@ -50,29 +50,26 @@ export default function Home() {
</div>
<div className="flex justify-center mt-4 mb-24">
{!session ? (
<Button onClick={() => signIn("google")}>
<div className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200">
Sign in with Google
<FaGoogle className="ml-1" />
</div>
<Button
className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200"
onClick={() => signIn("google")}
>
Sign in with Google
<FaGoogle className="ml-1" />
</Button>
) : (
<Button>
<Link href="/form">
<div className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200">
Apply Now!
</div>
</Link>
<Button className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200">
<Link href="/form">Apply Now!</Link>
</Button>
)}
</div>
<div className="departments w-[85%] space-y-5">
<h1 className="text-center text-4xl text-white font-bold mb-5">
DEPARTMENRTS
<div className="departments w-full md:w-[85%] px-4 md:px-0 space-y-5 mx-auto">
<h1 className="text-center text-3xl md:text-4xl text-white font-bold mb-10">
Departments
</h1>
<div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
<div className="w-1/2 department px-4 py-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#3d44a3]">
<h2 className="text-3xl text-white font-bold mb-5">
<div className="departments-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-5">
<div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#3d44a3]">
<h2 className="text-lg md:text-xl text-white font-semibold mb-5">
Development (Web-Dev and Open Source Projects)
</h2>
<p>
Expand All @@ -86,8 +83,8 @@ export default function Home() {
parties.
</p>
</div>
<div className="w-1/2 department p-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#f53100]">
<h2 className="text-3xl text-white font-bold mb-5">
<div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#f53100]">
<h2 className="text-lg md:text-xl text-white font-semibold mb-5">
Technical (CTF and Projects)
</h2>
<p>
Expand All @@ -103,10 +100,10 @@ export default function Home() {
everything is well-guarded in our digital landscape.
</p>
</div>
</div>
<div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
<div className="w-1/2 department px-4 py-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#090]">
<h2 className="text-3xl text-white font-bold mb-5">Design</h2>
<div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#090]">
<h2 className="text-lg md:text-xl text-white font-semibold mb-5">
Design
</h2>
<p>
Responsibilities encompass the management of the primary chapter
website, subsidiary event websites, and any additional web
Expand All @@ -118,12 +115,12 @@ export default function Home() {
parties.
</p>
</div>
<div className="w-1/2 department p-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#97004c]">
<h2 className="text-3xl text-white font-bold mb-5">
<div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#97004c]">
<h2 className="text-lg md:text-xl text-white font-semibold mb-5">
Event Management
</h2>
<p>
The Event Management Department at Cyscom, is the driving force
The Event Management Department at Cyscom is the driving force
behind our dynamic and engaging events. With meticulous
coordination, the department orchestrates a diverse range of
activities, catering to the interests of cybersecurity
Expand All @@ -137,86 +134,99 @@ export default function Home() {
opportunities.
</p>
</div>
</div>
<div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
<div className="w-1/2 department px-4 py-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#1a7848]">
<h2 className="text-3xl text-white font-bold mb-5">Content</h2>
<div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#1a7848]">
<h2 className="text-lg md:text-xl text-white font-semibold mb-5">
Content
</h2>
<p>
The Content Department at Cyscom shapes cybersecurity discourse by
crafting insightful blogs, news updates, and engaging infographic
posts. As writers we delve into trends, developments, and best
posts. As writers, we delve into trends, developments, and best
practices, fostering an informed community.
<br />
<br />
Plays an important role in spreading awareness about
Cybersecurity, Teaching Technical Concepts to the public and
Cybersecurity, Teaching Technical Concepts to the public, and
finding creative ways to do the same.
</p>
</div>
<div className="w-1/2 department p-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#a2b825]">
<h2 className="text-3xl text-white font-bold mb-5">Social Media</h2>
<div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#a2b825]">
<h2 className="text-lg md:text-xl text-white font-semibold mb-5">
Social Media
</h2>
<p>
Responsible for posting regularly about the latest updates in the
field of Cybersecurity on our platforms and boosting our online
presence with trendy captions and hashtags to accompany our weekly
posts. In short, it is the department which connects the backend
of the chapter to the outside world.
The Social Media Department is responsible for maintaining a
vibrant online presence by regularly posting updates on the latest
trends and developments in the field of cybersecurity. This
includes crafting engaging captions and using relevant hashtags to
enhance visibility and engagement. The team ensures that our
chapter's activities and achievements are communicated effectively
to the outside world, acting as the bridge between our internal
efforts and our external audience.
</p>
</div>
</div>
</div>
<div className="departments w-[85%] space-y-5">
<h1 className="text-center text-4xl text-white font-bold mt-10 mb-5">
WHY JOIN CYSCOM?

<div className="departments w-full md:w-[85%] space-y-5">
<h1 className="text-center text-4xl text-white font-bold mt-20 mb-10">
Why CYSCOM?
</h1>
<div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
<div className="text-center w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-xl text-white font-bold">
<div className="departments-container flex flex-col md:flex-row md:space-x-5 space-y-5 md:space-y-0 items-center">
<div className="text-center w-[80%] md:w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-base text-white">
Get to be a part of the biggest cyber security student group in
VIT Chennai!
</h2>
</div>
<div className="text-center w-1/4 department px-3 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-xl text-white font-bold">
Work on real time projects, learn effective collaboration and how
<div className="text-center w-[80%] md:w-1/4 department px-3 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-base text-white">
Work on real-time projects, learn effective collaboration and how
to organize events!
</h2>
</div>
<div className="text-center w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-xl text-white font-bold">
Learn new and exciting technologies and tech stacks through
webinars, online sessions and more!
<div className="text-center w-[80%] md:w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-base text-white">
Learn new tech stacks through webinars, online sessions and much
more!
</h2>
</div>
<div className="text-center w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-xl text-white font-bold">
<div className="text-center w-[80%] md:w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
<h2 className="text-base text-white">
Dive into the evolving world of cyber-security and learn about the
best security practices!
</h2>
</div>
</div>
</div>
<div className="departments w-[85%] space-y-5">
<h1 className="text-center text-4xl text-white font-bold mt-10 mb-5">
HOW TO APPLY?
<div className="departments w-full lg:w-[85%] space-y-5">
<h1 className="text-center text-4xl text-white font-bold mt-20 mb-10">
How to apply?
</h1>
<div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
<div className="mx-auto w-1/2">
<ul className="list-decimal text-lg space-y-2">
<li className="pl-3">Login using your VIT email.</li>
<li className="pl-3">Fill the form with some basic details.</li>
<li className="pl-3">Login using your VIT email</li>
<li className="pl-3">Click on Apply Now!</li>
<li className="pl-3">
Choose your preferred departments and add your previous works if
any
</li>
<li className="pl-3">
Fill the rest and submit the application form
</li>
<li className="pl-3">
Based on your application, you will be shortlisted for a quick
interview
</li>
<li className="pl-3">
Choose your preferred interview slot and department. Apply
before *date time* for *date* & *date* slots and before *date
time* for *date* & *date* slots.
Shortlisted candidates and the final results can be checked on
the same website
</li>
<li className="pl-3">
The interview will be conducted on Google Meet. If you are
selected, attend the interview in the given time slot. The
WhatsApp group link for the selected applicants will be sent to
your email or will be displayed on this recruitment portal if
you are selected. Google Meet link will be sent in the WhatsApp
group.
Freshers are welcome to apply for any department. Prior
experience is beneficial but not essential. What matters most is
a strong desire to learn, grow, and collaborate with the team
</li>
</ul>
</div>
Expand Down

0 comments on commit ab7f7cd

Please sign in to comment.