597 lines
23 KiB
TypeScript
597 lines
23 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect, useRef } from 'react';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { useMediaQuery } from '@react-hook/media-query';
|
||
|
|
import { ChevronDown, Phone, Mail } from 'lucide-react';
|
||
|
|
import { z } from 'zod';
|
||
|
|
import { useForm } from 'react-hook-form';
|
||
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import {
|
||
|
|
Form,
|
||
|
|
FormControl,
|
||
|
|
FormField,
|
||
|
|
FormItem,
|
||
|
|
} from '@/components/ui/form';
|
||
|
|
import { Input } from '@/components/ui/input';
|
||
|
|
import { Textarea } from '@/components/ui/textarea';
|
||
|
|
|
||
|
|
const formSchema = z.object({
|
||
|
|
firstName: z.string().min(1, 'First name is required'),
|
||
|
|
lastName: z.string().min(1, 'Last name is required'),
|
||
|
|
email: z.string().email('Invalid email address'),
|
||
|
|
phone: z.string().min(1, 'Phone is required'),
|
||
|
|
message: z.string().optional(),
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function ContactPage() {
|
||
|
|
const [mounted, setMounted] = useState(false);
|
||
|
|
const [logoPosition, setLogoPosition] = useState('center');
|
||
|
|
const [logoStyle, setLogoStyle] = useState<React.CSSProperties>({});
|
||
|
|
const [buttonOpacity, setButtonOpacity] = useState(1);
|
||
|
|
const [chevronOpacity, setChevronOpacity] = useState(1);
|
||
|
|
const [contactTop, setContactTop] = useState(0);
|
||
|
|
const [windowHeight, setWindowHeight] = useState(0);
|
||
|
|
|
||
|
|
const contactSectionRef = useRef<HTMLDivElement>(null);
|
||
|
|
const logoRef = useRef<HTMLDivElement>(null);
|
||
|
|
const animationFrameRef = useRef<number | null>(null);
|
||
|
|
const lastScrollY = useRef(0);
|
||
|
|
|
||
|
|
const isMobile = useMediaQuery("(max-width: 768px)");
|
||
|
|
const isDesktop = useMediaQuery("(min-width: 1280px)");
|
||
|
|
|
||
|
|
// Manage form state
|
||
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
||
|
|
resolver: zodResolver(formSchema),
|
||
|
|
defaultValues: {
|
||
|
|
firstName: "",
|
||
|
|
lastName: "",
|
||
|
|
email: "",
|
||
|
|
phone: "",
|
||
|
|
message: "",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||
|
|
console.log(values);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Logo dimensions based on screen size
|
||
|
|
const logoWidth = isMobile ? 240 : isDesktop ? 316 : 280;
|
||
|
|
const logoHeight = isMobile ? 115 : isDesktop ? 151 : 134;
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setMounted(true);
|
||
|
|
// Set initial dimensions on mount
|
||
|
|
setWindowHeight(window.innerHeight);
|
||
|
|
if (contactSectionRef.current) {
|
||
|
|
setContactTop(contactSectionRef.current.offsetTop);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const updateLogoPosition = () => {
|
||
|
|
if (!contactSectionRef.current) return;
|
||
|
|
|
||
|
|
const scrollY = window.scrollY;
|
||
|
|
const currentWindowHeight = window.innerHeight;
|
||
|
|
const currentContactTop = contactSectionRef.current.offsetTop;
|
||
|
|
|
||
|
|
// Update cached values if needed
|
||
|
|
if (currentContactTop !== contactTop) {
|
||
|
|
setContactTop(currentContactTop);
|
||
|
|
}
|
||
|
|
if (currentWindowHeight !== windowHeight) {
|
||
|
|
setWindowHeight(currentWindowHeight);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calculate positions - adjusted for scaled logo
|
||
|
|
const targetTopPosition = isMobile ? 10 : 20; // Adjusted for smaller scaled logo
|
||
|
|
|
||
|
|
if (isMobile) {
|
||
|
|
// For mobile, calculate where the logo should end up
|
||
|
|
const startY = currentWindowHeight * 0.35; // Logo starts higher - 35% from top
|
||
|
|
const endY = targetTopPosition + (logoHeight * 0.5) / 2; // Account for 50% scale
|
||
|
|
const totalDistance = startY - endY;
|
||
|
|
|
||
|
|
// Keep animation ending at the full contact section position
|
||
|
|
const animationEndScroll = currentContactTop;
|
||
|
|
|
||
|
|
if (scrollY >= animationEndScroll) {
|
||
|
|
// Logo has reached destination - keep it fixed but move with scroll
|
||
|
|
setLogoPosition('top');
|
||
|
|
|
||
|
|
// Calculate position to simulate being part of the page
|
||
|
|
const scrollPastEnd = scrollY - animationEndScroll;
|
||
|
|
const fixedY = endY - scrollPastEnd;
|
||
|
|
const mobileScale = 0.5; // Final scale for mobile
|
||
|
|
|
||
|
|
setLogoStyle({
|
||
|
|
position: 'fixed',
|
||
|
|
top: `${fixedY}px`,
|
||
|
|
left: '50%',
|
||
|
|
transform: `translate3d(-50%, 0, 0) scale3d(${mobileScale}, ${mobileScale}, 1)`,
|
||
|
|
transformOrigin: 'center',
|
||
|
|
willChange: 'transform',
|
||
|
|
transition: 'none',
|
||
|
|
zIndex: 50
|
||
|
|
});
|
||
|
|
} else if (scrollY > 0) {
|
||
|
|
// Animate logo from center to destination - starts immediately at any scroll
|
||
|
|
const progress = scrollY / animationEndScroll;
|
||
|
|
const currentY = startY - (totalDistance * progress);
|
||
|
|
const mobileScale = 1 - (0.5 * progress); // Scale from 1.0 to 0.5
|
||
|
|
|
||
|
|
setLogoPosition('animating');
|
||
|
|
setLogoStyle({
|
||
|
|
position: 'fixed',
|
||
|
|
top: `${currentY}px`,
|
||
|
|
left: '50%',
|
||
|
|
transform: `translate3d(-50%, 0, 0) scale3d(${mobileScale}, ${mobileScale}, 1)`,
|
||
|
|
transformOrigin: 'center',
|
||
|
|
willChange: 'transform',
|
||
|
|
transition: 'none',
|
||
|
|
zIndex: 50
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// At the top - logo at starting position
|
||
|
|
setLogoPosition('center');
|
||
|
|
setLogoStyle({
|
||
|
|
position: 'fixed',
|
||
|
|
top: `${startY}px`,
|
||
|
|
left: '50%',
|
||
|
|
transform: 'translate3d(-50%, 0, 0) scale3d(1, 1, 1)',
|
||
|
|
transformOrigin: 'center',
|
||
|
|
willChange: 'transform',
|
||
|
|
transition: 'none',
|
||
|
|
zIndex: 50
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// Desktop - standard animation with scaling
|
||
|
|
const logoSpeed = 0.4;
|
||
|
|
const centerY = currentWindowHeight / 2;
|
||
|
|
const targetTopPosition = 20; // Reduced from 100px to account for smaller logo
|
||
|
|
const totalDistance = centerY - targetTopPosition - logoHeight / 2;
|
||
|
|
const logoYPosition = -(scrollY * logoSpeed);
|
||
|
|
const maxUpwardMovement = -totalDistance;
|
||
|
|
const animatedY = Math.max(logoYPosition, maxUpwardMovement);
|
||
|
|
|
||
|
|
// Calculate scale based on scroll progress
|
||
|
|
const maxScroll = 500; // Scroll distance at which scaling completes
|
||
|
|
const scrollProgress = Math.min(scrollY / maxScroll, 1);
|
||
|
|
const scale = 1 - (0.6 * scrollProgress); // Scale from 1.0 to 0.4
|
||
|
|
|
||
|
|
// Update state based on scroll
|
||
|
|
if (scrollY > 10) {
|
||
|
|
setLogoPosition('animating');
|
||
|
|
} else {
|
||
|
|
setLogoPosition('center');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fixed positioning with animation and scaling
|
||
|
|
setLogoStyle({
|
||
|
|
position: 'fixed',
|
||
|
|
top: '50%',
|
||
|
|
left: '50%',
|
||
|
|
transform: `translate3d(-50%, calc(-50% + ${animatedY}px), 0) scale3d(${scale}, ${scale}, 1)`,
|
||
|
|
transformOrigin: 'center',
|
||
|
|
willChange: 'transform',
|
||
|
|
transition: 'none',
|
||
|
|
zIndex: 50
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hide button and chevron - faster on mobile
|
||
|
|
const fadeThreshold = isMobile ? 5 : 10; // Fade out at just 5px scroll on mobile
|
||
|
|
if (scrollY > fadeThreshold) {
|
||
|
|
setButtonOpacity(0);
|
||
|
|
setChevronOpacity(0);
|
||
|
|
} else {
|
||
|
|
setButtonOpacity(1);
|
||
|
|
setChevronOpacity(1);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Animated scroll to form
|
||
|
|
const scrollToForm = () => {
|
||
|
|
if (!contactSectionRef.current) {
|
||
|
|
console.error('Contact section ref not found');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('Starting scroll animation to:', contactSectionRef.current.offsetTop);
|
||
|
|
|
||
|
|
// Use native smooth scrolling
|
||
|
|
window.scrollTo({
|
||
|
|
top: contactSectionRef.current.offsetTop,
|
||
|
|
behavior: 'smooth'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Add scroll listener for bidirectional animation with RAF
|
||
|
|
useEffect(() => {
|
||
|
|
let ticking = false;
|
||
|
|
|
||
|
|
const handleScroll = () => {
|
||
|
|
lastScrollY.current = window.scrollY;
|
||
|
|
|
||
|
|
if (!ticking) {
|
||
|
|
animationFrameRef.current = requestAnimationFrame(() => {
|
||
|
|
updateLogoPosition();
|
||
|
|
ticking = false;
|
||
|
|
});
|
||
|
|
ticking = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleResize = () => {
|
||
|
|
setWindowHeight(window.innerHeight);
|
||
|
|
if (contactSectionRef.current) {
|
||
|
|
setContactTop(contactSectionRef.current.offsetTop);
|
||
|
|
}
|
||
|
|
updateLogoPosition();
|
||
|
|
};
|
||
|
|
|
||
|
|
// Initial position update
|
||
|
|
updateLogoPosition();
|
||
|
|
|
||
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||
|
|
window.addEventListener('resize', handleResize);
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('scroll', handleScroll);
|
||
|
|
window.removeEventListener('resize', handleResize);
|
||
|
|
if (animationFrameRef.current) {
|
||
|
|
cancelAnimationFrame(animationFrameRef.current);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, [isMobile, isDesktop, logoHeight, windowHeight]);
|
||
|
|
|
||
|
|
// Don't render until mounted to avoid hydration mismatch
|
||
|
|
if (!mounted) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full bg-[#1b233b]">
|
||
|
|
{/* Hero Section - Full Viewport Height */}
|
||
|
|
<section className="relative h-screen flex flex-col items-center justify-center">
|
||
|
|
{/* Single Port Amador Logo with dynamic positioning - Always rendered */}
|
||
|
|
<div
|
||
|
|
ref={logoRef}
|
||
|
|
className="z-50"
|
||
|
|
style={logoStyle}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src="/logo.png"
|
||
|
|
alt="Port Amador"
|
||
|
|
width={logoWidth}
|
||
|
|
height={logoHeight}
|
||
|
|
priority
|
||
|
|
style={{
|
||
|
|
width: `${logoWidth}px`,
|
||
|
|
height: `${logoHeight}px`,
|
||
|
|
objectFit: 'contain'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Button with fade out on scroll */}
|
||
|
|
<button
|
||
|
|
onClick={scrollToForm}
|
||
|
|
className={`fixed z-30 px-8 py-3 bg-[#C6AE97] text-[#1B233B] font-['bill_corporate_medium'] font-normal text-base uppercase tracking-wider rounded-md hover:bg-[#D4C1AC] transition-all`}
|
||
|
|
style={{
|
||
|
|
bottom: '120px',
|
||
|
|
left: '50%',
|
||
|
|
transform: 'translateX(-50%)',
|
||
|
|
opacity: buttonOpacity,
|
||
|
|
pointerEvents: buttonOpacity > 0 ? 'auto' : 'none',
|
||
|
|
transition: 'opacity 0.3s ease-out'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
CONNECT WITH US
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Chevron Down - with fade out on scroll */}
|
||
|
|
<div
|
||
|
|
className="fixed z-20"
|
||
|
|
style={{
|
||
|
|
bottom: '40px',
|
||
|
|
left: '50%',
|
||
|
|
transform: 'translateX(-50%)',
|
||
|
|
opacity: chevronOpacity,
|
||
|
|
transition: 'opacity 0.3s ease-out'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ChevronDown
|
||
|
|
className="text-[#C6AE97] animate-bounce"
|
||
|
|
size={32}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Contact Section - Desktop Layout with Marina Image */}
|
||
|
|
<section
|
||
|
|
ref={contactSectionRef}
|
||
|
|
className="w-full relative"
|
||
|
|
>
|
||
|
|
{isMobile ? (
|
||
|
|
// Mobile Layout - Stacked with Image
|
||
|
|
<div className="flex flex-col min-h-screen pt-[150px]">
|
||
|
|
{/* Form Section */}
|
||
|
|
<div className="px-8 pb-12">
|
||
|
|
<h2 className="font-['Palatino',_serif] text-[#C6AE97] text-[40px] mb-8 font-normal text-center">
|
||
|
|
Connect with us
|
||
|
|
</h2>
|
||
|
|
<Form {...form}>
|
||
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="firstName"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormControl>
|
||
|
|
<Input
|
||
|
|
placeholder="First Name*"
|
||
|
|
{...field}
|
||
|
|
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 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="lastName"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormControl>
|
||
|
|
<Input
|
||
|
|
placeholder="Last Name*"
|
||
|
|
{...field}
|
||
|
|
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 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="email"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormControl>
|
||
|
|
<Input
|
||
|
|
placeholder="Email*"
|
||
|
|
type="email"
|
||
|
|
{...field}
|
||
|
|
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 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="phone"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormControl>
|
||
|
|
<Input
|
||
|
|
placeholder="Phone number*"
|
||
|
|
{...field}
|
||
|
|
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 py-2 font-['bill_corporate_medium'] font-light text-[16px]"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="message"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormControl>
|
||
|
|
<Textarea
|
||
|
|
placeholder="Message"
|
||
|
|
{...field}
|
||
|
|
className="min-h-[80px] 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 py-2 font-['bill_corporate_medium'] font-light text-[16px] resize-none"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<div className="pt-6">
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
className="w-full bg-[#C6AE97] text-[#1B233B] hover:bg-[#D4C1AC] font-['bill_corporate_medium'] font-medium text-[16px] uppercase tracking-wider py-3 rounded-[5px]"
|
||
|
|
>
|
||
|
|
SUBMIT
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Marina Image Section */}
|
||
|
|
<div className="relative w-full h-[300px] mt-8 px-4">
|
||
|
|
<div className="relative w-full h-full">
|
||
|
|
<Image
|
||
|
|
src="/marina.png"
|
||
|
|
alt="Port Amador Marina"
|
||
|
|
fill
|
||
|
|
className="object-cover object-center"
|
||
|
|
sizes="(max-width: 768px) 90vw, 100vw"
|
||
|
|
priority
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer Section */}
|
||
|
|
<div className="px-8 py-8 mt-auto">
|
||
|
|
<div className="flex justify-between items-end">
|
||
|
|
<div className="flex flex-col space-y-0">
|
||
|
|
<a href="tel:+13109132597" className="font-['bill_corporate_medium'] font-light text-[14px] text-[#C6AE97] hover:text-[#D4C1AC] transition-colors">
|
||
|
|
+1 310 913 2597
|
||
|
|
</a>
|
||
|
|
<a href="mailto:am@portamador.com" className="font-['bill_corporate_medium'] font-light text-[14px] text-[#C6AE97] hover:text-[#D4C1AC] transition-colors">
|
||
|
|
am@portamador.com
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div className="text-[#C6AE97] text-[14px] font-['bill_corporate_medium'] font-light">
|
||
|
|
© Port Amador 2025
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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
|
||
|
|
/>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* 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>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer - at bottom of page */}
|
||
|
|
<div className="w-full max-w-[1600px] mx-auto px-[80px] pb-8 pt-12">
|
||
|
|
<div className="flex justify-between items-end">
|
||
|
|
<div className="flex flex-col space-y-0 text-[#C6AE97]">
|
||
|
|
<a href="tel:+13109132597" className="font-['bill_corporate_medium'] font-light text-[14px] hover:text-[#D4C1AC] transition-colors">
|
||
|
|
+1 310 913 2597
|
||
|
|
</a>
|
||
|
|
<a href="mailto:am@portamador.com" className="font-['bill_corporate_medium'] font-light text-[14px] hover:text-[#D4C1AC] transition-colors">
|
||
|
|
am@portamador.com
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div className="text-[#C6AE97] text-[14px] font-['bill_corporate_medium'] font-light">
|
||
|
|
© Port Amador 2025
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|