matt
/
portamador-landing-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align marina image with form boundaries
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:
Matt 2025-09-22 23:53:09 +02:00
parent 90dbc75123
commit d699c2522a
4 changed files with 129 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 167 KiB

BIN
public/marina.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 MiB

BIN
public/marina.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 354 KiB

43
src/app/page.tsx
View File

@ -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-full">
<Image
src="/marina.png"
src="/marina.jpg"
alt="Port Amador Marina"
fill
className="object-cover object-center"
@ -536,34 +536,42 @@ export default function Home() {
</div>
</div>
) : (
// Desktop Layout - Matching Figma exactly
<div className="min-h-screen flex flex-col relative pt-[200px]">
<div className="w-full max-w-[1600px] mx-auto flex items-stretch flex-1">
{/* Left Side - Marina Image - Aligned with form content */}
<div className="w-[45%] relative">
<div className="absolute top-0 bottom-0 left-[80px] right-[40px]">
// Desktop Layout - Responsive with aligned image
<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 px-8 lg:px-[80px]">
<div className="flex flex-col lg:flex-row gap-8 lg:gap-0">
{/* Left Side - Marina Image Container */}
<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
src="/marina.png"
src="/marina.jpg"
alt="Port Amador Marina"
fill
className="object-cover object-center"
sizes="45vw"
sizes="(max-width: 1024px) 100vw, 45vw"
priority
style={{ objectPosition: 'center' }}
/>
</div>
</div>
</div>
{/* 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 */}
<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
</h2>
<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 */}
<div className="grid grid-cols-2 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
<FormField
control={form.control}
name="firstName"
@ -597,7 +605,7 @@ export default function Home() {
</div>
{/* 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
control={form.control}
name="email"
@ -649,10 +657,10 @@ export default function Home() {
/>
{/* Submit Button */}
<div className="pt-4">
<div className="pt-2 lg:pt-4">
<Button
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
</Button>
@ -661,6 +669,9 @@ export default function Home() {
</Form>
</div>
</div>
</div>
</div>
</div>
{/* Footer - at bottom of page */}
<div className="w-full max-w-[1600px] mx-auto px-[80px] pb-8 pt-12">