Align marina image with form boundaries
Build And Push Image / docker (push) Successful in 1m55s
Details
Build And Push Image / docker (push) Successful in 1m55s
Details
- Image now aligns with top of 'Connect with us' heading - Bottom aligns with Submit button - Improved responsive layout for all screen sizes - Changed marina.png to marina.jpg - Fixed layout structure using flexbox for better alignment
This commit is contained in:
parent
90dbc75123
commit
d699c2522a
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 354 KiB |
|
|
@ -508,7 +508,7 @@ export default function Home() {
|
||||||
<div className="relative w-full h-[300px] mt-8 px-4">
|
<div className="relative w-full h-[300px] mt-8 px-4">
|
||||||
<div className="relative w-full h-full">
|
<div className="relative w-full h-full">
|
||||||
<Image
|
<Image
|
||||||
src="/marina.png"
|
src="/marina.jpg"
|
||||||
alt="Port Amador Marina"
|
alt="Port Amador Marina"
|
||||||
fill
|
fill
|
||||||
className="object-cover object-center"
|
className="object-cover object-center"
|
||||||
|
|
@ -536,34 +536,42 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
// Desktop Layout - Matching Figma exactly
|
// Desktop Layout - Responsive with aligned image
|
||||||
<div className="min-h-screen flex flex-col relative pt-[200px]">
|
<div className="min-h-screen flex flex-col relative pt-[10vh] lg:pt-[15vh] xl:pt-[200px]">
|
||||||
<div className="w-full max-w-[1600px] mx-auto flex items-stretch flex-1">
|
<div className="w-full max-w-[1600px] mx-auto px-8 lg:px-[80px]">
|
||||||
{/* Left Side - Marina Image - Aligned with form content */}
|
<div className="flex flex-col lg:flex-row gap-8 lg:gap-0">
|
||||||
<div className="w-[45%] relative">
|
{/* Left Side - Marina Image Container */}
|
||||||
<div className="absolute top-0 bottom-0 left-[80px] right-[40px]">
|
<div className="order-2 lg:order-1 w-full lg:w-[45%]">
|
||||||
|
<div className="lg:pr-[40px] h-full">
|
||||||
|
{/* On mobile: fixed height, on desktop: match form height */}
|
||||||
|
<div className="relative h-[400px] lg:h-full">
|
||||||
<Image
|
<Image
|
||||||
src="/marina.png"
|
src="/marina.jpg"
|
||||||
alt="Port Amador Marina"
|
alt="Port Amador Marina"
|
||||||
fill
|
fill
|
||||||
className="object-cover object-center"
|
className="object-cover object-center"
|
||||||
sizes="45vw"
|
sizes="(max-width: 1024px) 100vw, 45vw"
|
||||||
priority
|
priority
|
||||||
|
style={{ objectPosition: 'center' }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Right Side - Form Section */}
|
{/* Right Side - Form Section */}
|
||||||
<div className="w-[55%] flex flex-col justify-center py-[40px] pl-[40px] pr-[80px]">
|
<div className="order-1 lg:order-2 w-full lg:w-[55%]">
|
||||||
|
<div className="lg:pl-[40px]">
|
||||||
|
{/* Form content wrapper */}
|
||||||
|
<div className="flex flex-col">
|
||||||
{/* Heading */}
|
{/* Heading */}
|
||||||
<h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[72px] leading-none mb-12 font-normal">
|
<h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[48px] md:text-[60px] lg:text-[72px] leading-none mb-8 lg:mb-12 font-normal">
|
||||||
Connect with us
|
Connect with us
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 lg:space-y-8">
|
||||||
{/* First Row - First Name and Last Name */}
|
{/* First Row - First Name and Last Name */}
|
||||||
<div className="grid grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="firstName"
|
name="firstName"
|
||||||
|
|
@ -597,7 +605,7 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Second Row - Email and Phone */}
|
{/* Second Row - Email and Phone */}
|
||||||
<div className="grid grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="email"
|
name="email"
|
||||||
|
|
@ -649,10 +657,10 @@ export default function Home() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Submit Button */}
|
{/* Submit Button */}
|
||||||
<div className="pt-4">
|
<div className="pt-2 lg:pt-4">
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[18px] uppercase tracking-[0.05em] h-[50px] rounded-[3px]"
|
className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[16px] lg:text-[18px] uppercase tracking-[0.05em] h-[45px] lg:h-[50px] rounded-[3px]"
|
||||||
>
|
>
|
||||||
SUBMIT
|
SUBMIT
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -661,6 +669,9 @@ export default function Home() {
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Footer - at bottom of page */}
|
{/* Footer - at bottom of page */}
|
||||||
<div className="w-full max-w-[1600px] mx-auto px-[80px] pb-8 pt-12">
|
<div className="w-full max-w-[1600px] mx-auto px-[80px] pb-8 pt-12">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue