Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated home page #6

Merged
merged 2 commits into from
Aug 4, 2024
Merged

updated home page #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02baa1d
updated home page
arshsaxena Aug 4, 2024
ab7f7cd
responsive homepage
ezhil56x Aug 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/Nav.tsx
View file
Open in desktop
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
Open in desktop
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
186 changes: 179 additions & 7 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function Home() {
backgroundImage: `url(${bg.src})`,
backgroundSize: "cover",
backgroundPosition: "center",
height: "86vh",
height: "100%",
}}
>
<div className="pt-10 pb-3 mb-4 mt-4">
Expand All @@ -32,20 +32,23 @@ 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>
<p className=" mt-10 w-[90%] md:w-[45%] mx-auto text-md md:text-lg">
<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
boasts a big gathering of members and associates alike. Join us on our
mission to make cyberspace a safer place!
</p>
<p className=" mt-10 w-[90%] md:w-[45%] mx-auto text-md md:text-lg">
Join CYSCOM to kickstart your cybersecurity journey
<p className=" mt-5 w-[90%] md:w-[45%] mx-auto text-md md:text-lg">
Join CYSCOM to kickstart your cybersecurity journey.
</p>
</div>
<div className="flex justify-center mt-4">
<div className="flex justify-center mt-4 mb-24">
{!session ? (
<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"
Expand All @@ -56,10 +59,179 @@ export default function Home() {
</Button>
) : (
<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>
<Link href="/form">Apply Now!</Link>
</Button>
)}
</div>
<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 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>
Responsibilities encompass the management of the primary chapter
website, subsidiary event websites, and any additional web
platforms integral to projects.
<br />
<br />
This role involves the creation of web development projects and
applications for utilization within the chapter or by external
parties.
</p>
</div>
<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>
Our skilled technical team enthusiastically engages in Capture The
Flag (CTF) competitions and undertakes exciting security-oriented
projects. This involves friendly challenges where our experts
showcase their problem-solving abilities by solving puzzles and
overcoming digital obstacles.
<br />
<br />
Additionally, they're dedicated to crafting innovative projects
that enhance the security of systems and data, making sure
everything is well-guarded in our digital landscape.
</p>
</div>
<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
platforms integral to projects.
<br />
<br />
This role involves the creation of web development projects and
applications for utilization within the chapter or by external
parties.
</p>
</div>
<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
behind our dynamic and engaging events. With meticulous
coordination, the department orchestrates a diverse range of
activities, catering to the interests of cybersecurity
enthusiasts.
<br />
<br />
The team adeptly manages finances, ensuring every penny is
well-utilized for impactful experiences. Leveraging strategic
partnerships, the department actively secures sponsors that share
our commitment to fostering knowledge-sharing and networking
opportunities.
</p>
</div>
<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
practices, fostering an informed community.
<br />
<br />
Plays an important role in spreading awareness about
Cybersecurity, Teaching Technical Concepts to the public, and
finding creative ways to do the same.
</p>
</div>
<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>
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-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 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-[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-[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-[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-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">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">
Shortlisted candidates and the final results can be checked on
the same website
</li>
<li className="pl-3">
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>
</div>
</div>
</div>
);
}