You are an expert web designer and developer tasked with creating a luxurious, conversion-optimized, one-page website for a professional notary service. Follow ALL instructions precisely to deliver a production-ready, modern website that exudes prestige, trust, and professionalism.

DESIGN PHILOSOPHY & THEME
Visual Identity: Royal | Prestige | Modern Minimalism | Luxe | Trustworthy | Refined
Core Principles:
Restrained Elegance
Clean, spacious layouts with generous whitespace
Gold used sparingly as jewelry—not overwhelming decoration
Every element must earn its place; absolutely no clutter
Professional imagery that's muted and sophisticated (never loud or distracting)
Fluid Scroll Experience
Each section must be full viewport height (~100vh or min-height: 92vh) for elegant slide-like navigation
Implement smooth scroll behavior with subtle parallax effect on hero section
Sections reveal with gentle fade-up animation (15–25px translateY) + opacity transition (300–400ms with cubic-bezier easing)
Micro-Interactions (Keep tasteful, 200–400ms duration)
Buttons: scale(1.02) + shadow elevation on hover
Cards: subtle lift (translateY(-4px)) + gold glow border on hover
Nav links: gold underline slide-in animation (300ms)
Form inputs: gold border highlight on focus
All transitions use cubic-bezier(0.16, 1, 0.3, 1) for smooth, natural motion
Visual Hierarchy
Headlines must be 1.5x larger than standard scale (commanding presence)
Gold bars/accents guide the eye through content flow
Clear pricing with no vague "call for quote" language
Professional owner portrait with soft gold frame effect
Trust Signals Prominently Displayed
Star ratings and trust badges in hero
Client photos in testimonials (diverse, professional headshots)
Clear certifications and credentials
Transparent, upfront pricing

TECHNICAL SPECIFICATIONS
COLOR PALETTE
Primary Black: #000000 (backgrounds, main UI depth)
Luxe Gold: #D4AF37 (primary accents, borders, CTA buttons)
Warm Gold Alt: #C8A951 (hover states, subtle gradients)
Pure White: #FFFFFF (text on dark backgrounds, light card backgrounds)
Subtle Gray: #1A1A1A (card backgrounds for depth variation)
Accessibility Requirement: Ensure WCAG AA contrast ratio (gold #D4AF37 on black = 4.8:1—must pass). All text must be easily readable.
TYPOGRAPHY SYSTEM
Headlines (H1, H2, H3): {{ HEADLINE_FONT }} (fallback: Georgia, serif)
H1: 3.5–4.5rem desktop / 2.25rem mobile | Weight: 600–700 | Line-height: 1.2
H2: 2.5–3rem desktop / 1.75rem mobile | Weight: 600–700 | Line-height: 1.3
H3: 1.75–2rem desktop / 1.5rem mobile | Weight: 600 | Line-height: 1.4
Body & UI Text: {{ BODY_FONT }} (fallback: -apple-system, BlinkMacSystemFont, sans-serif)
Base size: 1.125rem (18px) for optimal readability
Weights: 400 (regular), 500 (medium), 600 (semibold)
Line-height: 1.6–1.75
SPACING & LAYOUT
Section Padding: 8rem 2rem (desktop) / 4rem 1.5rem (mobile)
Element Gaps: 2rem–4rem between major components
Max-width Container: 1280px centered
Grid System: 12-column grid for service cards (4 columns desktop, 2 tablet, 1 mobile)
RESPONSIVE BREAKPOINTS
- Mobile: < 640px (1 column, stacked buttons, larger touch targets)
- Tablet: 640px–1024px (2 columns for cards, adjusted typography)
- Desktop: > 1024px (3–4 columns, full-width hero)

ANIMATION SPECIFICATIONS
Hero Background Animation
- Subtle parallax effect: background moves at 0.3x scroll speed
- Gentle opacity pulse on overlay (60% → 65% → 60%, 8-second loop)
- Dark gradient overlay: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%)
- Keep CPU-friendly; use CSS transforms and opacity only
Scroll Reveal Animation (All Sections)
- Initial state: opacity: 0, transform: translateY(25px)
- On viewport entry: opacity: 1, transform: translateY(0)
- Transition: 400ms cubic-bezier(0.16, 1, 0.3, 1)
- Stagger child elements by 80ms for cascading effect
- Use Intersection Observer API for performance
Button Hover Effects
- transform: scale(1.02) translateY(-2px)
- box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35)
- transition: all 220ms ease-out
- Gold background buttons: invert colors on hover (dark text on light gold)
Sticky Navigation
- Position: sticky with backdrop-blur(10px)
- Background: rgba(0, 0, 0, 0.85) with blur
- Active link indicator: 2px gold bottom border, slide-in from left (180ms)
- Smooth scroll to sections with offset for sticky header
Testimonials Animation
- Cards enter with staggered delay (50ms per card)
- Optional: Gentle horizontal auto-scroll marquee (slow, 40-second loop)
- Hover: slight scale and shadow lift

SECTION-BY-SECTION STRUCTURE
1) HERO SECTION (Full viewport height: 100vh)
Layout:
Full-bleed background image ({{ HERO_FLAG_IMAGE_URL }}) with parallax animation
Dark overlay for text readability (70% black gradient)
Sticky navigation bar at top with logo and menu links
Content centered vertically and horizontally
Navigation Bar (Sticky):
Left: {{ BUSINESS_NAME }} logo ({{ LOGO_URL }}) - max height 50px
Right: Nav links → Services | About | Testimonials | Contact
Smooth scroll behavior to sections
Active link highlighted with gold underline
Mobile: Hamburger menu with slide-in drawer
Hero Content (Centered):
Main Headline (H1):
"Notary Near Me {{ CITY }} & Apostille — the #1 Rated Notary Service in {{ CITY }} and Surrounding Areas."
Sub-headline (one line below H1):
"Fast, professional, and trusted notary services—available online, mobile, or in-office. Your documents, handled with precision and care."
CTA Buttons (Stacked mobile, inline desktop):
Primary Button: "Call Now {{ PRIMARY_PHONE }}" (tel:{{ PRIMARY_PHONE }})
Gold background, dark text, rounded-lg, shadow on hover
Secondary Button: "Explore Services" (smooth scroll to #services)
Outlined gold border, white text, rounded-lg
Trust Badge (Below buttons):
⭐⭐⭐⭐⭐ "Trusted by neighbors in {{ CITY }}"
Small text, gold stars, white text

2) SERVICES SECTION (Min-height: 92vh)
Section Title (H2, centered):
"Services & Pricing"
Section Intro (Centered, max-width 800px):
"From apostilles to estate planning, {{ BUSINESS_NAME }} offers comprehensive notary solutions tailored to your needs. Transparent pricing, no hidden fees."
Service Cards Layout:
Grid: 3 columns desktop / 2 tablet / 1 mobile
Card design: Black background (#1A1A1A), gold title bar at top, white text, subtle gold border
Each card has gold accent header with service category name
List items underneath with pricing aligned right
Service Cards Content:
Card 1: Apostille
Gold header: "Apostille Services"
Items:
Apostille Consultation — $75
Apostille Processing — Starting at $125
Card 2: General Notary
Gold header: "General Notary"
Items:
Power of Attorney — $75
Witnessing — $40
Document Notarization — $35
Card 3: Estate Planning
Gold header: "Estate Planning"
Items:
Wills — Starting at $150
Trusts — Starting at $175
Card 4: Online Notarizations
Gold header: "Online Notarizations"
Items:
General Notary — Starting at $35
International Notarization — Starting at $75
Card 5: Real Estate Transactions
Gold header: "Real Estate Transactions"
Items:
Buyer/Seller Closings — $135
Refinance — $125
Other Documents — Starting at $75
Card 6: Mobile Notary (Optional, use if {{ MOBILE_SERVICE }} = true)
Gold header: "Mobile Notary"
Items:
On-Site Service — Starting at $95
Same-Day Availability
Legal Disclaimer (Below cards, centered, small text):
"Prices are starting rates; final pricing may vary based on document complexity, travel distance, and jurisdictional requirements. Call {{ PRIMARY_PHONE }} for a free quote."

3) ABOUT THE NOTARY SECTION (Min-height: 92vh)
Section Title (H2, centered):
"About {{ OWNER_NAME }}"
Layout: Two-column (Stack on mobile)
Left Column: Owner Portrait
Round or soft-rounded image with subtle gold ring border (3px)
Image: {{ OWNER_PHOTO_URL }} or elegant placeholder
Max width: 400px desktop / full width mobile
Subtle shadow and hover scale effect
Right Column: Owner Bio & Highlights
Bio Copy (120–160 words):
"{{ OWNER_NAME }} is a certified notary public serving {{ CITY }} and surrounding communities with {{ YEARS_EXPERIENCE }} years of experience. Known for exceptional attention to detail and a client-first approach, {{ OWNER_NAME }} specializes in apostille services, estate planning documents, and complex real estate transactions.

Whether you need a quick mobile notarization or guidance through an international apostille process, {{ OWNER_NAME }} delivers clarity, speed, and professionalism every time. Licensed, bonded, and insured, {{ OWNER_NAME }} is committed to making notary services accessible—offering online, mobile, and in-office appointments to fit your schedule.

Your peace of mind is the priority."
Three Key Highlights (Bullet points with gold checkmarks or stars):
- {{ OWNER_POINT_1 }}
- {{ OWNER_POINT_2 }}
- {{ OWNER_POINT_3 }}
Micro-CTA (Below bullets):
"Questions? Call {{ PRIMARY_PHONE }} or text for fast answers."
Make phone number a clickable tel: link with gold color

4) TESTIMONIALS SECTION (Min-height: 92vh)
Section Title (H2, centered):
"Client Love"
Section Intro (Centered, optional):
"See why {{ CITY }} residents trust {{ BUSINESS_NAME }} for their notary needs."
Testimonials Grid:
14 testimonial cards total
Grid: 4 columns desktop / 2–3 tablet / 1–2 mobile
Compact cards with rounded corners, white background, subtle shadow
Each card contains: small round photo (60–80px), name, 1–2 sentence review
Testimonial Content (14 Reviews with Female Names):
Sarah M. — "Fast, professional, and so helpful! {{ OWNER_NAME }} made apostille services simple when I needed documents for overseas."
Jennifer L. — "Best notary in {{ CITY }}! Online notarization saved me hours. Highly recommend!"
Maria G. — "{{ OWNER_NAME }} was patient and clear. Got my power of attorney done same day."
Ashley T. — "Super responsive and came to my home for mobile service. Worth every penny!"
Danielle K. — "I was nervous about apostille requirements, but {{ BUSINESS_NAME }} walked me through everything step-by-step."
Rachel P. — "Quick turnaround on estate planning docs. Felt confident the whole time."
Emily R. — "Friendly, knowledgeable, and available when I needed help. Five stars!"
Amanda S. — "{{ OWNER_NAME }} handled my real estate closing flawlessly. No stress at all."
Christina H. — "Online notary was so convenient! Done in 15 minutes from my couch."
Lauren B. — "Professional and thorough. {{ BUSINESS_NAME }} is my go-to for all notary needs."
Jessica W. — "Needed an apostille urgently—{{ OWNER_NAME }} delivered same day. Lifesaver!"
Nicole D. — "Clear pricing, no surprises. Exactly what I needed for my trust documents."
Megan F. — "Responsive, reliable, and so easy to work with. Highly recommend to anyone in {{ CITY }}!"
Stephanie V. — "{{ OWNER_NAME }} made a stressful process simple. Can't thank them enough!"
Photo Guidance:
Use {{ TESTIMONIAL_PHOTOS }} array if provided
Otherwise: Use royalty-free, professional female headshots (diverse ages 25–55)
Consistent lighting and quality across all images
Images should be optimized (WebP format preferred)
Animation:
Staggered reveal on scroll (50ms delay per card)
Optional: Gentle horizontal marquee effect for visual interest

5) CONTACT SECTION (Min-height: 92vh)
Section Title (H2, centered):
"Get in Touch"
Layout: Two-column split (Stack on mobile)
Left Column: Primary CTA Block
Large Primary Button:
"Call {{ PRIMARY_PHONE }}"
Extra large button (tel:{{ PRIMARY_PHONE }})
Gold background, dark text, prominent shadow
Secondary Button (if {{ WHATSAPP_NUMBER }} provided):
"Text / WhatsApp {{ WHATSAPP_NUMBER }}"
Outlined button below primary
Right Column: Contact Information
Contact Details List:
📍 Service Area: {{ CITY }} & Surrounding Communities
📧 Email: {{ CONTACT_EMAIL }}
🕐 Hours: {{ BUSINESS_HOURS }}
Use icons (emoji or icon font)
Make email clickable (mailto:)
Clear, readable formatting
Contact Form (Below or integrated):
Form Title:
"Need a quote or have questions? Fill out the form below and we'll respond within 2 hours during business hours."
Form Fields:
Name* (required, text input)
Phone* (required, tel input)
Email* (required, email input)
Document Type (dropdown select):
Options: Apostille, General Notary, Estate Planning, Real Estate, Online Notary, Other
Message (textarea, optional)
Submit Button:
"Request a Quote"
Gold background, dark text
Loading state on submit
Success message: "Thank you! We'll call you within 2 hours."
Error handling with clear inline messages
Form Action:
POST to {{ FORM_ENDPOINT }} with JSON payload
Client-side validation (required fields, email format, phone format)
Fallback: mailto:{{ CONTACT_EMAIL }} if endpoint fails

6) FOOTER (Standard height, ~40vh)
Layout: Three-column (Stack on mobile)
Left Column: Branding
{{ BUSINESS_NAME }}
Serving {{ CITY }} with Pride
Logo: {{ LOGO_URL }} (max height 60px)
Optional: Business address if {{ BUSINESS_ADDRESS }} provided
Middle Column: Social Proof
"Find Us on Google"
Google My Business badge or button
Link to {{ GMB_URL }} (open in new tab, rel="noopener")
5-star rating display
Right Column: Quick Links
- Home (scroll to hero)
- Services (scroll to services)
- About (scroll to about)
- Testimonials (scroll to testimonials)
- Contact (scroll to contact)
Gold color on hover
Smooth scroll behavior
Copyright Bar (Full width, centered):
© {{ CURRENT_YEAR }} {{ BUSINESS_NAME }}. All rights reserved. | Licensed, Bonded, Insured Notary Public
Small text, subtle gray color
Optional: Privacy Policy & Terms links if {{ PRIVACY_URL }} and {{ TERMS_URL }} provided

ACCESSIBILITY & SEO REQUIREMENTS
Accessibility (WCAG AA Compliance)
Semantic HTML5 elements (header, nav, main, section, article, footer)
ARIA labels on icon buttons and navigation
Focus indicators: 2px gold outline on all interactive elements
Alt text for ALL images (descriptive for content images, empty alt="" for decorative)
Form labels properly associated with inputs
Keyboard navigation support (tab order, skip links)
Color contrast ratio of 4.5:1 minimum for body text, 3:1 for large text
SEO Meta Tags (Include in )
html





















PERFORMANCE OPTIMIZATION
Image Optimization
Use WebP format with JPG/PNG fallback
Lazy-load images below the fold (loading="lazy" attribute)
Provide responsive images with srcset for different screen sizes
Compress hero background image (aim for <300KB)
Optimize all images through compression (TinyPNG or similar)
Code Optimization
Inline critical CSS for above-the-fold content
Defer non-essential JavaScript
Minify CSS and JavaScript in production
Use CSS animations over JavaScript where possible
Throttle/debounce scroll event listeners (16ms for 60fps)
Loading Strategy
Preload hero background image
Preconnect to external domains (fonts, CDNs)
Use font-display: swap for web fonts
Implement smooth loading states (skeleton screens or fade-in)

TECHNICAL IMPLEMENTATION NOTES
Framework Options
Pure HTML/CSS/JS: Single-file or three-file structure (index.html, styles.css, script.js)
With Tailwind: Use CDN (https://cdn.tailwindcss.com) for rapid development
React Component: Single-file React component with hooks for state management
No localStorage/sessionStorage: All state must be in-memory (React state, JS variables)
Required External Libraries (CDN-based)
Smooth Scroll Polyfill: For Safari compatibility
Intersection Observer Polyfill: For older browsers
Optional: AOS (Animate On Scroll) library for simplified animations
Icon Library: Font Awesome, Lucide, or SVG icons
Scroll Animation Implementation
javascript
// Intersection Observer for scroll animations
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry, index) => {
    if (entry.isIntersecting) {
      setTimeout(() => {
        entry.target.classList.add('revealed');
      }, index * 80); // Stagger delay
    }
  });
}, observerOptions);

// Observe all sections
document.querySelectorAll('section').forEach(section => {
  observer.observe(section);
});
```

---

## QUALITY ASSURANCE CHECKLIST

Before delivery, ensure:
- ✅ All sections are ~100vh height (elegant scroll stops)
- ✅ Smooth scroll behavior works across all browsers
- ✅ All {{ VARIABLES }} are properly replaced with user data
- ✅ Responsive design works on mobile (375px), tablet (768px), desktop (1440px+)
- ✅ All links are functional (tel:, mailto:, smooth scroll anchors)
- ✅ Images have proper alt text and are optimized
- ✅ Form validation works and provides clear error messages
- ✅ Hover states and animations are smooth (60fps)
- ✅ Gold/black contrast passes WCAG AA standards
- ✅ Navigation sticky behavior works without overlapping content
- ✅ All interactive elements have proper focus indicators
- ✅ Typography scales properly across breakpoints
- ✅ No console errors in browser dev tools
- ✅ Page loads in under 3 seconds on 4G connection

---

## OUTPUT FORMAT

Deliver a **single, production-ready HTML file** (or structured HTML/CSS/JS files) with:
1. All variables clearly marked and replaceable
2. Inline CSS or external stylesheet (minified for production)
3. JavaScript for animations and interactions (vanilla JS or lightweight library)
4. Comments explaining key sections and customization points
5. Graceful fallbacks for missing variable data (use placeholders or default values)

**Alternative:** If using React, deliver a single-component artifact with all styling included (Tailwind CDN or styled-components).

---

# CUSTOMIZABLE VARIABLES (USER INPUT SECTION)

**Fill in the following details to customize your website. All fields marked with * are required.**
```
FINAL INSTRUCTIONS TO AI
Using the variables provided above:
Replace all {{ VARIABLE }} placeholders with the actual values from the user input section
Generate production-ready code following all design specifications and technical requirements
Ensure all 6 sections are full viewport height (~100vh) for elegant scroll experience
Implement all animations as specified (parallax, scroll reveals, hover effects)
Optimize for performance (lazy loading, image compression guidance, efficient code)
Test responsiveness mentally across mobile (375px), tablet (768px), and desktop (1440px+)
Include fallbacks for missing optional variables (use elegant defaults or hide sections gracefully)
Provide brief setup instructions at the top of the code file for any customization needed

VERY IMPORTANT: when page loads make sure  the first hero sectionappearing in thestarting the hero section should be clearly displayed when page is opened (in front) with fade in animation of headline, buttons. BG flag image should be viisble from starting so no issues with that. Now for the section About Owner Detials make the background flipped like make the section bg white and text black to make it stand out and for GET In touch section make the bg: gold color (which we're using) and on top using perfect text color that works