# Eagan Luxury Real Estate - Codebase Overview ## Project Description Eagan Luxury is a luxury real estate website for St. Petersburg, Florida waterfront properties. The site showcases waterfront estates, skyline penthouses, and Gulf Beach villas throughout St. Petersburg, Tierra Verde, and the Pinellas Bayway. Built with Next.js 15+ using the App Router, featuring a clean, elegant design system. ## Tech Stack - **Framework**: Next.js 15.5.7 (App Router) - **Language**: TypeScript 5 - **Styling**: Tailwind CSS 3.3.0 - **CMS**: Sanity CMS 4.10.2 - **Database**: Prisma ORM with PostgreSQL - **Animations**: Framer Motion 12.23.24 - **Maps**: Leaflet & React Leaflet - **Forms**: React Hook Form 7.66.0 - **Email**: SendGrid 8.1.6 - **Deployment**: Vercel ## Project Structure ``` Eagan-Luxury/ ├── app/ # Next.js App Router pages │ ├── [community]/ # Dynamic community pages (e.g., /dolphin-cay, /bacopa-bay) │ │ ├── page.tsx # Community main page │ │ ├── businesses/ # Community businesses │ │ ├── condominiums/ # Community condos │ │ ├── marinas/ # Community marinas │ │ ├── magazine/ # Community magazine │ │ ├── restaurants/ # Community restaurants │ │ ├── resources/ # Community resources │ │ ├── single-family-homes/ # Single family homes │ │ ├── water-front/ # Waterfront properties │ │ └── constants.ts # Community-specific constants │ ├── about/ # About page │ ├── accessibility/ # Accessibility statement │ ├── api/ # API routes │ │ ├── contact/ # Contact form submission │ │ ├── home-valuation/ # Home valuation form │ │ ├── listings/ # Listings API │ │ └── start-journey/ # Start journey form │ ├── blog/ # Blog/journal section │ │ ├── [slug]/ # Individual blog posts │ │ └── page.tsx # Blog listing page │ ├── communities/ # Communities overview page │ ├── components/ # App-specific components │ │ ├── CommunityStructuredData.tsx │ │ ├── Footer.tsx │ │ ├── HomepageStructuredData.tsx │ │ ├── Listings.tsx │ │ ├── LocalBusinessSchema.tsx │ │ └── StructuredData.tsx │ ├── condos/ # Condos section │ │ ├── [slug]/ # Individual condo pages │ │ ├── page.tsx # Condos listing │ │ └── constants.ts # Condo constants │ ├── contact/ # Contact page │ ├── fair-housing/ # Fair housing page │ ├── idx/ # IDX (MLS) search integration │ ├── listing/ # Individual listing pages │ ├── listings/ # Property listings page │ ├── mls-information/ # MLS information page │ ├── privacy-policy/ # Privacy policy │ ├── sellers/ # Seller's guide │ ├── start-my-journey/ # Start journey page │ ├── testimonials/ # Testimonials page │ ├── thank-you/ # Thank you page │ ├── terms-and-conditions/ # Terms and conditions │ ├── layout.tsx # Root layout with fonts, scripts, structured data │ ├── page.tsx # Homepage │ ├── globals.css # Global styles │ ├── robots.ts # Robots.txt generation │ └── sitemap.ts # Sitemap generation ├── components/ # Shared React components │ ├── ConditionalLayout.tsx # Conditional layout wrapper │ ├── Navbar.tsx # Navigation component │ ├── Footer.tsx # Footer component │ ├── ContactForm.tsx # Contact form │ ├── ContactFormWidget.tsx # Contact form widget │ ├── HomeValuation.tsx # Home valuation form │ ├── FeaturedProperties.tsx # Featured properties display │ ├── FeaturedListingWidget.tsx # Featured listing widget │ ├── SearchWidget.tsx # Property search widget │ ├── StartMyJourneyForms.tsx # Journey forms │ ├── ValuationFormWidget.tsx # Valuation form widget │ ├── ScrollAnimations.tsx # Scroll animations │ ├── ScrollProgressBar.tsx # Scroll progress indicator │ ├── CondosMap.tsx # Condos map component │ ├── CondosMapWrapper.tsx # Condos map wrapper │ ├── DowntownCondosMap.tsx # Downtown condos map │ ├── DowntownCondosMapWrapper.tsx # Downtown condos map wrapper │ ├── SingleCondoMap.tsx # Single condo map │ ├── SingleCondoMapWrapper.tsx # Single condo map wrapper │ ├── IdxPage.tsx # IDX page component │ ├── ListingPage.tsx # Listing page component │ ├── content/ # Content components │ └── ui/ # Reusable UI components ├── lib/ # Utility libraries │ ├── client.ts # API client setup │ ├── db.ts # Database connection (Prisma) │ ├── email.ts # Email utilities (SendGrid) │ ├── sanity.ts # Sanity CMS client │ ├── sanity-utils.ts # Sanity utility functions │ ├── structuredData.ts # Structured data (JSON-LD) generators │ ├── scrollAnimations.ts # Scroll animation utilities │ ├── zapier.ts # Zapier integration │ ├── utils.ts # General utilities │ ├── data/ # Data utilities │ │ ├── analytics.ts # Analytics data │ │ └── faqs.ts # FAQ data │ └── utils/ # Additional utilities │ └── property-utils.ts # Property-related utilities ├── sanity/ # Sanity CMS configuration │ ├── schemas/ # Content schemas │ └── queries/ # GROQ queries ├── schemas/ # Additional schemas │ ├── Author.ts # Author schema │ ├── Blog.ts # Blog schema │ ├── Business.ts # Business schema │ ├── Resource.ts # Resource schema │ └── index.ts # Schema exports ├── types/ # TypeScript type definitions │ ├── listing.ts # Listing types │ ├── property.ts # Property types │ ├── sanity.ts # Sanity types │ ├── framer-motion.d.ts # Framer Motion types │ └── MapComponent.d.ts # Map component types ├── data/ # Static data │ └── blogPosts.ts # Blog posts data ├── public/ # Static assets │ ├── images/ # Image assets │ ├── logos/ # Logo files │ ├── listings/ # Listing images │ ├── data/ # JSON data files │ │ ├── active.json # Active listings │ │ ├── coming-soon.json # Coming soon listings │ │ ├── sold.json # Sold listings │ │ ├── blog.json # Blog data │ │ ├── press.json # Press data │ │ ├── napa.json # Napa data │ │ ├── sonoma.json # Sonoma data │ │ └── sonoma-napa.json # Sonoma-Napa data │ └── videos/ # Video assets ├── emails/ # Email templates │ ├── AdminNotification.tsx # Admin notification email │ └── ContactConfirmation.tsx # Contact confirmation email ├── scripts/ # Utility scripts │ ├── setup-database.ts # Database setup │ ├── refresh-listing-search.ts # Refresh listing search │ ├── create-dolphin-cay-posts.ts # Create blog posts │ └── quick-api-test.ts # API testing ├── next.config.js # Next.js configuration ├── tailwind.config.js # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration ├── package.json # Dependencies and scripts └── vercel.json # Vercel deployment configuration ``` ## Design System ### Color Palette - **White**: `#ffffff` - Primary background - **Black/Ink**: `#111111` - Text and headers - **Accent**: `#B08D57` - Accent color for buttons, borders, highlights - **Graphite**: `#666666` - Secondary text - **Line**: `#e5e5e5` - Borders and dividers ### Typography - **Headings**: Playfair Display (serif) - weights: 400, 500, 600, 700 - **Body**: Space Grotesk (sans-serif) - weights: 400, 500, 600, 700 - Light weight for elegant, minimal look - Uppercase tracking for labels and small text ### CSS Classes - Custom utility classes defined in `globals.css` - Uses Tailwind CSS with custom configuration - Component classes: `btn-primary`, `btn-ghost`, `btn-outline`, `eyebrow`, `rule`, `section-shell`, `page-shell`, `feature-card`, `tile`, etc. ## Key Features ### 1. Dynamic Community Pages - Dynamic routing for communities: `/dolphin-cay`, `/bacopa-bay`, `/downtown-st-petersburg`, etc. - Each community has sub-pages: businesses, restaurants, marinas, magazine, resources - Community-specific constants and data ### 2. Sanity CMS Integration - Blog posts managed through Sanity - Businesses, resources, and other content types - GROQ queries for fetching content - Sanity Studio accessible at `/studio` (redirects to hosted studio) ### 3. IDX/MLS Integration - IDX Broker API integration for live property listings - Custom property search, listing cards, listing details, lead registration, and saved properties - IDX pages at `/listings` and `/listing/[slug]` ### 4. Maps Integration - Leaflet maps for displaying condos and communities - Multiple map components: CondosMap, DowntownCondosMap, SingleCondoMap - Map wrappers handle client-side rendering ### 5. Forms & Contact - Contact form with SendGrid email integration - Home valuation form - Start journey form - All forms use React Hook Form - Zapier integration for form submissions ### 6. SEO & Structured Data - Comprehensive structured data (JSON-LD) for: - Organization schema - Real estate agent schema - Local business schema - Website schema - Community-specific schemas - Dynamic sitemap generation - Robots.txt generation - Open Graph and Twitter card metadata ### 7. Analytics & Tracking - Google Analytics: `G-0KP8S5ECYD` - Google Ads Conversion: `AW-17780739958` - Elfsight AI Chatbot integration ## Environment Variables Required environment variables (`.env.local`): ``` NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id NEXT_PUBLIC_SANITY_DATASET=production SANITY_API_TOKEN=your_api_token DATABASE_URL=your_database_url (for Prisma) SENDGRID_API_KEY=your_sendgrid_key ``` ## API Routes ### `/api/contact` - Handles contact form submissions - Sends emails via SendGrid - Returns JSON response ### `/api/home-valuation` - Handles home valuation form submissions - Processes valuation requests ### `/api/listings` - Fetches property listings - Returns listing data ### `/api/start-journey` - Handles start journey form submissions - Processes journey requests ## Important Files ### Configuration Files - `next.config.js`: Next.js config with image domains, redirects, and build settings - `tailwind.config.js`: Tailwind CSS configuration - `tsconfig.json`: TypeScript configuration with path aliases (`@/*`) - `vercel.json`: Vercel deployment configuration ### Core Application Files - `app/layout.tsx`: Root layout with fonts, scripts, structured data, and global setup - `app/page.tsx`: Homepage with hero, featured properties, communities map, testimonials - `components/ConditionalLayout.tsx`: Conditional layout wrapper for different page types - `lib/structuredData.ts`: Functions for generating JSON-LD structured data - `lib/sanity.ts`: Sanity CMS client configuration - `lib/email.ts`: SendGrid email utility functions ### Data Files - `public/data/active.json`: Active property listings - `public/data/sold.json`: Sold property listings - `public/data/coming-soon.json`: Coming soon listings - `data/blogPosts.ts`: Blog posts data structure ## Common Patterns ### Page Structure - Pages use Next.js App Router - Metadata exported for SEO - Structured data components for rich snippets - Section-based layout with `section-shell` and `page-shell` classes ### Component Patterns - Server components by default - Client components marked with `'use client'` - Map components wrapped in client-side wrappers - Form components use React Hook Form ### Styling Patterns - Tailwind CSS utility classes - Custom CSS classes in `globals.css` - Responsive design with mobile-first approach - Consistent spacing and typography system ### Data Fetching - Sanity CMS for blog and content - Static JSON files for listings data - API routes for form submissions - Prisma for database operations ## Third-Party Integrations 1. **Sanity CMS**: Content management for blog and resources 2. **IDX Broker API**: MLS/IDX property listings and lead capture 3. **SendGrid**: Email delivery 4. **Google Analytics**: Website analytics 5. **Google Ads**: Conversion tracking 6. **Elfsight**: AI chatbot 7. **Zapier**: Form submission automation 8. **Leaflet**: Interactive maps ## Development Commands ```bash npm run dev # Start development server npm run build # Build for production npm start # Start production server npm run lint # Run ESLint npm run sanity # Start Sanity Studio locally npm run sanity:build # Build Sanity Studio npm run sanity:deploy # Deploy Sanity Studio ``` ## Redirects The site has extensive redirects configured in `next.config.js`: - Old URLs to new App Router structure - Community/building redirects - Blog post redirects - Navigation page redirects ## Notes - ESLint and TypeScript errors are ignored during builds (configured in `next.config.js`) - Images are optimized via Next.js Image component - Remote images from `cdn.sanity.io` are allowed - The site uses server-side rendering and static generation where appropriate - All forms include proper validation and error handling - Accessibility features included (accessibility page, semantic HTML)