Skip to content

Commit

Permalink
Improved UI/UX: of scrolling news and orgainization
Browse files Browse the repository at this point in the history
  • Loading branch information
@suyash101101
suyash101101 committed Jan 22, 2025
1 parent 2eb2964 commit 93eb3fa
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 44 deletions.
108 changes: 65 additions & 43 deletions src/components/Hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import backgroundImage from '../img/WhatsApp Image 2025-01-18 at 20.45.37.jpeg';

const Hero = () => {
return (
<div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-green-50">
<div className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-green-50">
{/* Fixed background with overlay */}
<div className="absolute inset-0">
<img
src="https://www.nitk.ac.in/images/b1.jpg"
Expand All @@ -18,20 +19,23 @@ const Hero = () => {
<div className="absolute inset-0 bg-green-50/80" />
</div>

<div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
{/* Main content */}
<div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mt-20 mb-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="space-y-8"
className="space-y-6"
>
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-800 tracking-tight mb-4">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 tracking-tight">
1<sup>st</sup> National Conference on
Climate Resilience and Environmentally Sustainable
Technologies (NITK-CREST 2025)
<br />
Climate Resilience and Environmentally Sustainable
<br />
Technologies (NITK-CREST 2025)
</h1>

<div className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-800 tracking-tight">
<div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 tracking-tight">
<TypeAnimation
sequence={[
'NITK CREST-2025',
Expand All @@ -51,14 +55,6 @@ Technologies (NITK-CREST 2025)
/>
</div>

<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 3.8, duration: 0.8 }}
className="max-w-2xl mx-auto text-base sm:text-lg text-gray-600"
>
</motion.p>

<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
Expand All @@ -85,6 +81,7 @@ Technologies (NITK-CREST 2025)
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 4.2, duration: 0.8 }}
className="mt-8"
>
<Link to="/registration">
<motion.button
Expand All @@ -102,41 +99,66 @@ Technologies (NITK-CREST 2025)
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 4.4, duration: 0.8 }}
className="flex flex-col items-center justify-center space-y-4"
className="flex flex-col items-center justify-center space-y-4 mt-8"
>
<h2 className="text-xl font-semibold text-green-700">Organized By</h2>
<div className="flex items-center justify-center space-x-8">
<motion.div
whileHover={{ scale: 1.05 }}
className="w-16 h-16 rounded-full overflow-hidden border-2 border-green-600 shadow-lg"
>
<motion.div
whileHover={{ scale: 1.05 }}
className="flex flex-col items-center"
>
<div className="w-16 h-16 rounded-full overflow-hidden border-2 border-green-600 shadow-lg mb-2">
<img src={nitkLogo} alt="NITK Logo" className="w-full h-full object-cover" />
</motion.div>
<motion.div
whileHover={{ scale: 1.05 }}
className="w-16 h-16 rounded-full overflow-hidden border-2 border-green-600 shadow-lg"
>
<img src={backgroundImage} alt="Department Image" className="w-full h-full object-cover" />
</motion.div>
</div>
</div>
<span className="text-sm text-gray-800 max-w-[150px] text-center">National Institute of Technology Karnataka, Surathkal</span>
</motion.div>
<h2 className="text-xl font-semibold text-green-700">In association with</h2>
<motion.div
whileHover={{ scale: 1.05 }}
className="flex flex-col items-center"
>
<div className="w-16 h-16 rounded-full overflow-hidden border-2 border-green-600 shadow-lg mb-2">
<img src={backgroundImage} alt="KSPCB Logo" className="w-full h-full object-cover" />
</div>
<span className="text-sm text-gray-800 max-w-[150px] text-center">Karnataka State Pollution Control Board</span>
</motion.div>
</motion.div>
</motion.div>
</div>

{/* Animated Marquee Text */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 4.4, duration: 0.8 }}
className="mt-6"
>
<div className="relative overflow-hidden">
<div className="animate-scroll-right whitespace-nowrap">
<span className="text-black font-semibold text-lg inline-block">
🔴 We are accepting Abstracts LIVE NOW!!! | Selected papers will be published in Material Science and Engineering Technology (SCIE, IF-1.2), Wiley Publication as special issue 🔴
{/* Scrolling News Section */}
<div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-sm shadow-lg py-3 z-20">
<div className="max-w-7xl mx-auto">
<div className="flex space-x-4 overflow-hidden">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="flex whitespace-nowrap"
>
<div className="animate-marquee inline-block">
<span className="text-green-700 font-semibold px-4">
🔴 Selected papers will be published in Material Science and Engineering Technology (SCIE, IF-1.2), Wiley Publication as special issue
</span>
<span className="text-green-700 font-semibold px-4">
🔴 The abstract submission date extended to 30 January 2025
</span>
<span className="text-green-700 font-semibold px-4">
🔴 Early bird registration is now open
</span>
</div>
</div>
</motion.div>
</motion.div>
<div className="animate-marquee2 inline-block absolute">
<span className="text-green-700 font-semibold px-4">
🔴 Selected papers will be published in Material Science and Engineering Technology (SCIE, IF-1.2), Wiley Publication as special issue
</span>
<span className="text-green-700 font-semibold px-4">
🔴 The abstract submission date extended to 30 January 2025
</span>
<span className="text-green-700 font-semibold px-4">
🔴 Early bird registration is now open
</span>
</div>
</motion.div>
</div>
</div>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Timeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useRef } from 'react';

const timelineEvents = [
{ date: '15/11/2024', event: 'Abstract Submission begins' },
{ date: '20/1/2025', event: 'Last date for Abstract Submission' },
{ date: <><s>20/1/2025</s> 30/01/2025</>, event: 'Last date for Abstract Submission' },
{ date: '10/02/2025', event: 'Notification of Acceptance' },
{ date: '12/02/2025', event: 'Early Bird Registration closes' },
{ date: '20/02/2025', event: 'Registration Deadline' },
Expand Down
30 changes: 30 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,34 @@ body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
scroll-behavior: smooth;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}

@keyframes marquee2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}

.animate-marquee {
animation: marquee 30s linear infinite;
}

.animate-marquee2 {
animation: marquee2 30s linear infinite;
}

0 comments on commit 93eb3fa

Please sign in to comment.