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 |
247
src/app/page.tsx
247
src/app/page.tsx
|
|
@ -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,129 +536,140 @@ 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]">
|
||||
<Image
|
||||
src="/marina.png"
|
||||
alt="Port Amador Marina"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
sizes="45vw"
|
||||
priority
|
||||
/>
|
||||
// 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.jpg"
|
||||
alt="Port Amador Marina"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
sizes="(max-width: 1024px) 100vw, 45vw"
|
||||
priority
|
||||
style={{ objectPosition: 'center' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Form Section */}
|
||||
<div className="w-[55%] flex flex-col justify-center py-[40px] pl-[40px] pr-[80px]">
|
||||
{/* Heading */}
|
||||
<h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[72px] leading-none mb-12 font-normal">
|
||||
Connect with us
|
||||
</h2>
|
||||
{/* Right Side - Form Section */}
|
||||
<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-[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">
|
||||
{/* First Row - First Name and Last Name */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="firstName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="First Name*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lastName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Last Name*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Second Row - Email and Phone */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="email"
|
||||
{...field}
|
||||
placeholder="Email*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Phone number*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message Field */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="message"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder="Message"
|
||||
className="min-h-[60px] bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] resize-none focus:outline-none focus:ring-0"
|
||||
<Form {...form}>
|
||||
<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-1 md:grid-cols-2 gap-4 md:gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="firstName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="First Name*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lastName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Last Name*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="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]"
|
||||
>
|
||||
SUBMIT
|
||||
</Button>
|
||||
{/* Second Row - Email and Phone */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="email"
|
||||
{...field}
|
||||
placeholder="Email*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Phone number*"
|
||||
className="bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message Field */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="message"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder="Message"
|
||||
className="min-h-[60px] bg-transparent border-b border-t-0 border-l-0 border-r-0 border-white/60 text-white placeholder:text-white/70 focus:border-white rounded-none px-0 pb-1 pt-0 font-['bill_corporate_medium'] font-light text-[16px] resize-none focus:outline-none focus:ring-0"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Submit Button */}
|
||||
<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-[16px] lg:text-[18px] uppercase tracking-[0.05em] h-[45px] lg:h-[50px] rounded-[3px]"
|
||||
>
|
||||
SUBMIT
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue