adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Customized hero container

Browse Source
This commit is contained in:
Umar Adilov 2025-05-03 02:04:03 +05:00
parent 6a069ecf39
commit 5a5a1503b1
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/oriyo_bg.jpeg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 112 KiB

After

Width:  |  Height:  |  Size: 172 KiB

18
src/widgets/hero-section.tsx
View File

@ -12,7 +12,17 @@ export const HeroSection = () => {
return (
<section className='relative'>
<div className='relative h-[400px] w-full overflow-hidden sm:h-[500px] xl:h-[700px]'>
<div className='relative h-[500px] w-full overflow-hidden bg-black sm:h-[500px] xl:h-[700px]'>
<div
style={{
width: '100%',
height: '90%',
position: 'absolute',
top: -60,
right: 20,
}}
className='sm:!top-0 sm:!right-20 sm:!h-[70vh] sm:!w-[100vh]'
>
<Image
src='/oriyo_bg.jpeg'
alt='Gas Station Network'
@ -20,7 +30,9 @@ export const HeroSection = () => {
className='object-cover'
priority
/>
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
</div>
<div className='absolute inset-0 flex items-end bg-gradient-to-r from-black/70 to-black/30 px-2 pb-12 sm:items-center sm:pb-0'>
<div className='container mx-auto'>
<div className='max-w-lg space-y-4 text-white'>
<div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
@ -31,7 +43,7 @@ export const HeroSection = () => {
<p className='text-gray-200 sm:text-lg'>
{t('home.hero.description')}
</p>
<div className='mt-6 flex flex-col gap-2 sm:flex-row sm:gap-4'>
<div className='mt-6 flex gap-2 sm:flex-row sm:gap-4'>
<Link href='#stations'>
<Button className='bg-red-600 hover:bg-red-700'>
{t('common.buttons.findStation')}{' '}