Skip to content

fix: add landing page content for cet and cse #3

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

Open
mvkariath wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: add landing page content for cet and cse #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 7 additions & 0 deletions public/webContent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"landing": {
"cet_overview": "Founded in 1939, College of Engineering, Trivandrum (CET) is Kerala's first engineering college, established during the reign of Sri Chithira Thirunal Balarama Varma. Initially started with 21 students in Civil, Mechanical, and Electrical Engineering, CET moved to its expansive 125-acre campus in 1960 and is now managed by the Kerala Government.",
"cse_overview": "Established in 1984, the Computer Science and Engineering (CSE) department is known for its academic excellence and strong placement records. With 21 faculty members and a top student intake, CSE has a legacy of producing skilled engineers with alumni holding prominent positions globally in industry, academia, and research."
}
}

186 changes: 108 additions & 78 deletions src/pages/landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,120 @@
"use client";
import "../app/globals.css";
import Image from 'next/image';
import sampleDepartmentImage from '../app/assets/images/sampleDepartmentImage.svg';
import landingImg1 from '../app/assets/images/landingImg1.svg';
import landingImg2 from '../app/assets/images/landingImg2.svg';
import { useState, useEffect } from 'react';
import Image from "next/image";
import sampleDepartmentImage from "../app/assets/images/sampleDepartmentImage.svg";
import landingImg1 from "../app/assets/images/landingImg1.svg";
import landingImg2 from "../app/assets/images/landingImg2.svg";
import { useState, useEffect } from "react";

export default function Landing() {
type landingPageContent = {
cet_overview: string;
cse_overview: string;
};

export default function Landing() {
const [currentImage, setCurrentImage] = useState(0);
const images = [sampleDepartmentImage, landingImg1];
const [data, setData] = useState<landingPageContent>({
cet_overview: "",
cse_overview: "",
});

const [currentImage, setCurrentImage] = useState(0);
const images = [sampleDepartmentImage, landingImg1];
useEffect(() => {
// Fetch JSON data from the public folder
fetch("/webContent.json")
.then((response) => response.json())
.then((jsonData) => setData(jsonData.landing))
.catch((error) => console.error("Error fetching JSON:", error));
}, []);

useEffect(() => {
const imageSwitchInterval = setInterval(() => {
setCurrentImage((prevIndex) => (prevIndex + 1) % images.length);
}, 2000);
useEffect(() => {
const imageSwitchInterval = setInterval(() => {
setCurrentImage((prevIndex) => (prevIndex + 1) % images.length);
}, 2000);

return () => clearInterval(imageSwitchInterval);
}, []);
return () => clearInterval(imageSwitchInterval);
}, []);

const submitQUery = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
alert("Query submitted!");
};
const submitQUery = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
alert("Query submitted!");
};

return (
<div className="overflow-x-hidden">
<div className="relative mt-[1.125rem] mx-[2.03125rem] h-[400px] text-white">
<div
className="absolute inset-0 bg-cover bg-center transition-opacity duration-500 rounded-[1.25rem]"
style={{
backgroundImage: `url(${images[currentImage].src})`,
transition: "background-image 0.5s ease-in-out"
}}
></div>
<div className="absolute inset-0 flex flex-col justify-center items-center text-center z-10">
<h1 className="text-4xl md:text-6xl font-secondary">CS ASSOCIATION</h1>
<p className="text-lg md:text-2xl mt-1 md:mt-2">Department of Computer Science</p>
</div>
<div className="absolute bottom-14 left-5 md:bottom-10 md:left-5 z-10">
<button className="border border-white rounded-lg px-8 py-3 text-lg">
Contact Us
</button>
</div>
<div className="absolute bottom-5 left-5 md:bottom-5 md:right-9 md:left-auto text-lg z-10">
College of Engineering Trivandrum
</div>
</div>
<div className="mx-[2.03125rem] mt-[1.875rem] flex flex-col md:flex-row bg-[#F4F4F4] px-[2rem] md:px-[4.875rem] py-[2rem] md:py-[3.3125rem] rounded-[1.25rem] space-y-4 md:space-x-6">
<Image src={landingImg1} alt="Department of Computer Science" className="rounded-md w-full" />
<div className="flex flex-col my-auto ml-0 md:ml-[6.25rem]">
<h2 className="font-bold text-5xl">Department of Computer Science</h2>
<p className="font-normal text-xl mt-[2.5rem]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div className="mx-[2.03125rem] mt-[1.875rem] flex flex-col md:flex-row bg-[#F4F4F4] px-[2rem] md:px-[4.875rem] py-[2rem] md:py-[3.3125rem] rounded-[1.25rem] space-y-4 md:space-x-6">
<div className="flex flex-col my-auto mr-[4.0625rem]">
<h2 className="font-bold text-5xl">College Of Engineering Trivandrum</h2>
<p className="font-normal text-xl mt-[2.5rem]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<Image src={landingImg2} alt="Department of Computer Science" className="rounded-md" />
</div>
return (
<div className="overflow-x-hidden">
<div className="relative mt-[1.125rem] mx-[2.03125rem] h-[400px] text-white">
<div
className="absolute inset-0 bg-cover bg-center transition-opacity duration-500 rounded-[1.25rem]"
style={{
backgroundImage: `url(${images[currentImage].src})`,
transition: "background-image 0.5s ease-in-out",
}}
></div>
<div className="absolute inset-0 flex flex-col justify-center items-center text-center z-10">
<h1 className="text-4xl md:text-6xl font-secondary">
CS ASSOCIATION
</h1>
<p className="text-lg md:text-2xl mt-1 md:mt-2">
Department of Computer Science
</p>
</div>
<div className="absolute bottom-14 left-5 md:bottom-10 md:left-5 z-10">
<button className="border border-white rounded-lg px-8 py-3 text-lg">
Contact Us
</button>
</div>
<div className="absolute bottom-5 left-5 md:bottom-5 md:right-9 md:left-auto text-lg z-10">
College of Engineering Trivandrum
</div>
</div>
<div className="mx-[2.03125rem] mt-[1.875rem] flex flex-col md:flex-row bg-[#F4F4F4] px-[2rem] md:px-[4.875rem] py-[2rem] md:py-[3.3125rem] rounded-[1.25rem] space-y-4 md:space-x-6">
<Image
src={landingImg1}
alt="Department of Computer Science"
className="rounded-md w-full"
/>
<div className="flex flex-col my-auto ml-0 md:ml-[6.25rem]">
<h2 className="font-bold text-5xl">Department of Computer Science</h2>
<p className="font-normal text-xl mt-[2.5rem]">{data.cse_overview}</p>
</div>
</div>
<div className="mx-[2.03125rem] mt-[1.875rem] flex flex-col md:flex-row bg-[#F4F4F4] px-[2rem] md:px-[4.875rem] py-[2rem] md:py-[3.3125rem] rounded-[1.25rem] space-y-4 md:space-x-6">
<div className="flex flex-col my-auto mr-[4.0625rem]">
<h2 className="font-bold text-5xl">
College Of Engineering Trivandrum
</h2>
<p className="font-normal text-xl mt-[2.5rem]">{data.cet_overview}</p>
</div>
<Image
src={landingImg2}
alt="Department of Computer Science"
className="rounded-md"
/>
</div>

<div className="flex flex-col my-[1.875rem] items-center justify-between mx-[2.03125rem] bg-[#2C2C2C] rounded-lg shadow-lg px-min">
<div className='px-[2.6875rem]'>
<div className="text-[2rem] md:text-[3rem] font-bold text-white mb-4 mt-[2.625rem]">Do you have any queries?</div>
<form className="flex md:flex-row flex-col space-y-3 md:space-y-0 w-full mb-[4.625rem] items-center mx-auto" onSubmit={submitQUery}>
<input
type="text"
placeholder="Write here..."
className="px-4 py-2 mx-auto text-white placeholder:text-[#6A6A6A] rounded-[0.625rem] bg-[#424242] md:mr-4 w-fit md:w-[27.6875rem] focus:outline-none"
/>
<button
type="submit"
className="px-[2.1875rem] py-[0.625rem] font-medium text-white bg-transparent border border-white rounded-[0.625rem] hover:bg-white hover:text-gray-800 transition duration-300"
>
Send
</button>
</form>
</div>
</div>
<div className="flex flex-col my-[1.875rem] items-center justify-between mx-[2.03125rem] bg-[#2C2C2C] rounded-lg shadow-lg px-min">
<div className="px-[2.6875rem]">
<div className="text-[2rem] md:text-[3rem] font-bold text-white mb-4 mt-[2.625rem]">
Do you have any queries?
</div>
<form
className="flex md:flex-row flex-col space-y-3 md:space-y-0 w-full mb-[4.625rem] items-center mx-auto"
onSubmit={submitQUery}
>
<input
type="text"
placeholder="Write here..."
className="px-4 py-2 mx-auto text-white placeholder:text-[#6A6A6A] rounded-[0.625rem] bg-[#424242] md:mr-4 w-fit md:w-[27.6875rem] focus:outline-none"
/>
<button
type="submit"
className="px-[2.1875rem] py-[0.625rem] font-medium text-white bg-transparent border border-white rounded-[0.625rem] hover:bg-white hover:text-gray-800 transition duration-300"
>
Send
</button>
</form>
</div>
);
</div>
</div>
);
}