Wedding Project

Introduction

The Wedding Project aims to create a single-page wedding invitation website that closely replicates the design, layout, animations, typography, spacing, responsiveness, colors, icons, transitions, and overall user experience of the provided reference website. The project will replace the content with personalized details for the wedding of Janaki Rama Raju and Shoba Rani.

System Overview

The system will be a single-page web application designed to provide an elegant and premium wedding invitation experience. It will be fully responsive, optimized for performance and accessibility, and will include interactive elements such as animations, hover effects, and a countdown timer.

Functional Requirements as Story Points

• As a User, I should be able to view the wedding invitation on any device, ensuring full responsiveness for mobile, tablet, and desktop.
• As a User, I should experience smooth scrolling, animations, hover effects, and loading effects similar to the reference website.
• As a User, I should see the wedding details with elegant floral decorations and subtle wedding-themed background elements.
• As a User, I should be able to view a countdown timer to the wedding date (19 August 2026, 10:30 AM).
• As a User, I should have the option to view the venues on Google Maps via a button.
• As a User, I should be able to add the wedding events to my calendar using an "Add to Calendar" button.
• As a User, I should be able to enjoy background music with the option to mute/unmute.
• As a User, I should see elegant serif headings and modern readable body fonts with a soft cream, white, blush pink, and gold accent color palette.

User Personas

• Guest: Individuals invited to the wedding who will use the website to view details, RSVP, and plan their attendance.
• Family Member: Close family members who may assist in sharing the invitation and ensuring guests have the necessary information.

Core User Flows

• Guest visits the website -> Views hero section with couple names and wedding date -> Scrolls to view wedding events and family details -> Uses Google Maps button to locate venues -> Adds events to calendar -> Listens to background music -> Views countdown timer.

Visuals Colors and Theme

• primary: #F5E6CC (soft cream)
• primary_light: #FFF8E7 (lighter cream)
• secondary: #E8C1C1 (blush pink)
• accent: #D4AF37 (gold)
• highlight: #FAD6A5 (warm peach)
• bg: #FFFFFF (white)
• surface: rgba(245, 230, 204, 0.8) (soft cream)
• text: #333333 (dark gray)
• text_muted: #777777 (medium gray)
• border: rgba(200, 200, 200, 0.2) (light gray)

Signature Design Concept

The homepage will feature an interactive floral garden theme. As users scroll, delicate floral elements will animate into view, creating a sense of walking through a blooming garden. The background will subtly shift colors from dawn to dusk, reflecting the time of day. Interactive elements include a countdown timer that blooms like a flower as the date approaches, and a music player with a floral-themed mute/unmute button. The site will use framer-motion for animations and gsap for scroll-triggered effects.

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model, creating a layered depth effect as users scroll through the site. Decorative floral elements will move at different speeds, enhancing the storytelling aspect of the invitation. Internal pages, if any, will maintain a "static" interaction model for clarity and ease of reading.

Non-Functional Requirements

• The website must load quickly and be optimized for performance.
• It should be accessible, adhering to WCAG 2.1 guidelines.
• The design should be clean and use semantic HTML, modern CSS, and JavaScript or React + Tailwind CSS.

Tech Stack

• Frontend: React for Web
• Styling: Tailwind CSS
• Animations: framer-motion, gsap
• Maps: Google Maps API
• Calendar Integration: Custom JavaScript solution
• Music Player: Custom HTML5 audio player

Assumptions and Constraints

• The design must not use copyrighted images; only royalty-free placeholders are allowed.
• The website must replicate the reference site's user experience as closely as possible.
• The project must be completed within the specified timeline to ensure timely delivery for the wedding date.

Glossary

• Responsive Design: A design approach that ensures a website looks good on all devices.
• Parallax: A scrolling technique that creates an illusion of depth by moving background images slower than foreground images.
• WCAG: Web Content Accessibility Guidelines, which provide a standard for making web content accessible to people with disabilities.