Skip to content

feat: Hero section UI enhancement by central alignments #42

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

Merged
Zahnentferner merged 2 commits into from
May 19, 2026
+10 −8
Merged

feat: Hero section UI enhancement by central alignments #42

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
978f80d
feat: Hero section UI enhancement by central alignments
reach2saksham Mar 2, 2026
ef0cb25
Merge branch 'main' into feature/hero-revamp
reach2saksham Mar 13, 2026
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
18 changes: 10 additions & 8 deletions src/components/pages/home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,22 @@ const Home: React.FC<HomeProps> = (props: HomeProps) => {


return (
<section className="flex items-center lg:justify-center bg-transparent my-24" id="home" style={{ height: '90vh' }}>
<section className="relative flex items-center justify-center bg-transparent my-24 overflow-hidden" id="home" style={{ height: '90vh' }}>
<img
src="/gallery/Alliance.png"
alt="Djed Alliance Logo Background"
className="absolute w-[640px] md:w-[768px] lg:w-[900px] max-w-none opacity-[0.04] pointer-events-none select-none p-6 justify-center items-center"
/>
<div className="lg:flex sm:flex-row z-40 items-center">
<div className="z-10 lg:mx-20 mx-10">
<h1 className="title text-left flex items-start mb-4 text-4xl font-extrabold leading-none md:text-5xl xl:text-6xl whitespace-pre">{heroText}</h1>
<p className="subtitle text-left flex items-start mb-6 font-light text-gray-500 sm:whitespace-normal lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400 lg:whitespace-pre">{heroSubtitle}</p>
<div className="z-10 lg:mx-20 mx-10 flex flex-col items-center justify-center gap-2">
<h1 className="title text-center flex items-center justify-center mb-4 text-4xl font-extrabold leading-none md:text-5xl xl:text-6xl whitespace-pre">{heroText}</h1>
<p className="subtitle text-center inline-flex items-start my-6 font-bold text-gray-500 sm:whitespace-normal lg:mb-8 md:text-lg lg:text-4xl dark:text-gray-400 lg:whitespace-pre">{heroSubtitle}</p>
<a href="#djed_apps" onClick={(e) => { e.preventDefault(); document.getElementById('djed_apps')?.scrollIntoView({ behavior: 'smooth' }); }} className="link-text w-64 flex items-center justify-center py-3 text-base font-medium text-center text-white bg-black rounded-full cursor-pointer relative overflow-hidden group transition-all duration-300">
<span className="absolute inset-0 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out" style={{ background: 'linear-gradient(90deg, rgba(243, 193, 129, 0.3) 0%, rgba(243, 193, 129, 0.5) 50%, rgba(243, 193, 129, 0.3) 100%)', backdropFilter: 'blur(12px)' }}></span>
<span className="relative z-10">Get started</span>
<span className="relative z-10 ">Get started</span>
<svg className="w-5 h-5 ml-2 -mr-1 relative z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
</a>
</div>
<div className="lg:flex justify-end cursor-pointer my-5">
<img className='rounded-3xl items-center flex justify-center align-middle' src="/gallery/Alliance.png" alt="Djed Alliance's Logo" />
</div>
</div>
<Blur />
</section>
Expand Down