Objective:
Design a visually compelling, adaptive landing page for a travel agency specializing in trips to Saint Petersburg. This page should embody a cozy and dreamy aesthetic while aligning with the brand's main color: green. The goal is to engage users emotionally, creating a sense of wanderlust while also being functional and user-friendly.

Design Guidelines:

Color Palette:
Utilize the 60-30-10 rule for color distribution:
Primary Color (60%): A soft, muted green (e.g., #88B888) to reflect tranquility, nature, and coziness.
Secondary Color (30%): A warm beige or light cream (e.g., #F5EFE6) for a dreamy and welcoming backdrop.
Accent Color (10%): A touch of gold or warm amber (e.g., #D4A373) to evoke elegance and the historical charm of Saint Petersburg.
Golden Ratio:
Structure the layout using the golden ratio for elements such as hero sections, image placements, typography hierarchy, and whitespace for a naturally appealing balance.
Ensure key visual components like the headline-text ratio, column and image grids, and button placements follow this proportional guideline.
App Type:
The landing page is adaptive and optimized for both desktop and mobile screens. It must be responsive and deliver a seamless user experience across devices.
Detailed List of UI Elements: Hero Section:
Full-width background image/video of an iconic Saint Petersburg scene (e.g., the Hermitage Museum or the Church of the Savior on Spilled Blood) with a translucent overlay for coziness.
Dreamy headline, e.g., “Discover the Timeless Beauty of Saint Petersburg” in a serif font for an elegant feel.
Subheadline: “Plan your perfect getaway with our tailor-made travel experiences.”
Call-to-action (CTA) button: "Explore Now" (green background with warm gold text).
About Section:
Grid layout with golden ratio spacing.
Left side: Brief text (who we are, our mission).
Right side: Supporting image collage (historic landmarks, cozy cafes, dreamy canals).
Tour Packages Section:
Featured packages displayed as cards or tiles.
Package includes:
Title (e.g., "3 Days in Saint Petersburg")
Price in a gold font for emphasis.
Stunning package image.
Highlights list.
Button: “Learn More.”
Why Us Section (Value Proposition):
Icons paired with short text (e.g., personalized itineraries, local insider experiences, eco-friendly travels).
Subtle, elegant illustrations reflecting a storytelling charm.
Testimonials Section:
Dynamic carousel of customer reviews with images of happy travelers.
Background: Light cream with golden dividers to differentiate sections.
Overlay: Quotation mark graphics in the background for aesthetic touches.
Gallery of Destinations:
Adaptive photo grid with hover effects displaying iconic spots in Saint Petersburg.
Includes small captions for each image.
FAQ Section:
Accordion-style dropdowns with detailed answers to common travel queries.
Newsletter Sign-Up Section:
Text: “Let us take you on a dreamy journey. Subscribe for travel insights!”
Input field for email and subscribe button styled with green background and golden accents.
Footer:
Agency logo.
Quick links (About Us, Tours, Contact).
Social media icons styled subtly with the muted green palette.
Copyright notice and eco-friendly disclaimer.
Typography:

Headings: Serif fonts (e.g., Playfair Display, Cinzel) to reflect refinement and elegance.
Body Text: Sans-serif fonts (e.g., Lato, Open Sans) for readability and modernity.
Interactive Features:

Parallax scrolling for some image sections to add depth.
Subtle animations on hover for buttons, images, and links to build a dreamy and immersive experience.
Responsive Design:

Ensure the UI is adapted for various screen sizes:
Desktop: Grid layout with elegant whitespace.
Tablet: Two-column layout with easily tappable elements.
Mobile: Single-column layout for clean navigation.
Overall Aesthetic:
The landing page should convey a sense of coziness, luxury, and dreamy allure. Use soft transitions, elegant layouts, and captivating visuals of Saint Petersburg to create an emotional connection with potential travelers. Prioritize aesthetically pleasing proportions (golden ratio), harmonious color distribution, and a touch of storytelling to inspire visitors to book their dream trip. Use HTML CSS js to build this ui