feat(site): Replace products page with contact and refresh branding

- Remove products.html page and all references from navigation menus
- Replace products navigation links with contact page across all pages
- Update color palette from cool blues to warm amber and teal theme
- Adjust typography font declarations for better font stack support
- Add hero section emoji animation with bounce keyframe
- Implement page hero styling for inner pages
- Add about section preview component styling
- Update service pricing background to use primary color
- Enhance CTA section gradient with new color scheme
- Add testimonial card paw print emoji and styling improvements
- Fix footer quick links formatting and alignment
- Standardize HTML indentation and spacing across pages

about.html

@@ -24,7 +24,7 @@
                     <li><a href="/" class="nav-link">Home</a></li>
                     <li><a href="/about.html" class="nav-link active">About</a></li>
                     <li><a href="/services.html" class="nav-link">Services</a></li>
-                    <li><a href="/products.html" class="nav-link">Products</a></li>
+                    <li><a href="/contact.html" class="nav-link">Contact</a></li>
                 </ul>
             </nav>
         </div>
@@ -147,7 +147,9 @@
                     <ul>
                         <li><a href="/">Home</a></li>
                         <li><a href="/about.html">About</a></li>
-<li><a href="/services.html">Services</a></li><li><a href="/products.html">Products</a></li>                    </ul>
+                        <li><a href="/services.html">Services</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
                 </nav>
                 <address class="footer-contact" aria-label="Contact information">
                     <h3>Contact</h3>

contact.html

@@ -22,7 +22,9 @@
                 </button>
                 <ul id="nav-menu" class="nav-list">
                     <li><a href="/" class="nav-link">Home</a></li>
-<li><a href="/about.html" class="nav-link">About</a></li><li><a href="/services.html" class="nav-link">Services</a></li><li><a href="/products.html" class="nav-link">Products</a></li>                    <li><a href="/contact.html" class="nav-link active">Contact</a></li>
+                    <li><a href="/about.html" class="nav-link">About</a></li>
+                    <li><a href="/services.html" class="nav-link">Services</a></li>
+                    <li><a href="/contact.html" class="nav-link active">Contact</a></li>
                 </ul>
             </nav>
         </div>
@@ -133,7 +135,9 @@
                     <h3>Quick Links</h3>
                     <ul>
                         <li><a href="/">Home</a></li>
-<li><a href="/about.html">About</a></li><li><a href="/services.html">Services</a></li><li><a href="/products.html">Products</a></li>                        <li><a href="/contact.html">Contact</a></li>
+                        <li><a href="/about.html">About</a></li>
+                        <li><a href="/services.html">Services</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
                     </ul>
                 </nav>
                 <address class="footer-contact" aria-label="Contact information">

css/style.css

@@ -1,26 +1,26 @@
 :root {
-  /* Brand Colors - PRIMARY */
+  /* Brand Colors - Warm Amber/Terracotta Pet Palette */
-  --color-primary:       #2563eb;   /* Blue-600 */
+  --color-primary:       #b45309;   /* Amber-700 */
-  --color-primary-dark:  #1d4ed8;   /* Blue-700 */
+  --color-primary-dark:  #92400e;   /* Amber-800 */
-  --color-primary-light: #3b82f6;   /* Blue-500 */
+  --color-primary-light: #d97706;   /* Amber-600 */
   
-  /* Accent Colors */
+  /* Accent Colors - Soft Teal for contrast */
-  --color-accent:        #10b981;   /* Emerald-500 */
+  --color-accent:        #0d9488;   /* Teal-600 */
-  --color-accent-dark:   #059669;   /* Emerald-600 */
+  --color-accent-dark:   #0f766e;   /* Teal-700 */
   
-  /* Neutral Colors */
+  /* Neutral Colors - Warm tones */
-  --color-bg:            #f8fafc;   /* Slate-50 */
+  --color-bg:            #fefce8;   /* Warm cream */
-  --color-surface:       #ffffff;   /* White */
+  --color-surface:       #fffbeb;   /* Soft ivory */
-  --color-border:        #e2e8f0;   /* Slate-200 */
+  --color-border:        #fde68a;   /* Amber-200 */
-  --color-text:          #1e293b;   /* Slate-800 */
+  --color-text:          #451a03;   /* Deep brown */
-  --color-text-secondary:#64748b;   /* Slate-500 */
+  --color-text-secondary:#78350f;   /* Warm brown */
-  --color-text-muted:    #94a3b8;   /* Slate-400 */
+  --color-text-muted:    #92400e;   /* Muted amber */
-  --color-footer-bg:     #0f172a;   /* Slate-900 */
+  --color-footer-bg:     #1c1917;   /* Stone-900 */
-  --color-footer-text:   #94a3b8;   /* Slate-400 */
+  --color-footer-text:   #d6d3d1;   /* Stone-300 */
   
   /* Typography */
-  --font-family-heading: Playfair+Display;
+  --font-family-heading: 'Playfair Display', Georgia, serif;
-  --font-family-body:    Nunito+Sans;
+  --font-family-body:    'Nunito Sans', system-ui, sans-serif;
   
   /* Layout & Spacing */
   --max-width:           1200px;
@@ -248,7 +248,7 @@ img {
 
 /* Hero Section */
 .hero {
-  background: linear-gradient(135deg, var(--color-bg) 0%, #f0f9ff 100%);
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
   padding: var(--spacing-2xl) 0 var(--spacing-xl);
   text-align: center;
 }
@@ -256,7 +256,7 @@ img {
 .hero h1 {
   font-size: 2.75rem;
   margin-bottom: var(--spacing-lg);
-  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
+  background: linear-gradient(to right, var(--color-primary), #dc2626);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -269,6 +269,17 @@ img {
   margin: 0 auto var(--spacing-xl);
 }
 
+.hero-emoji {
+  font-size: 3.5rem;
+  margin-bottom: var(--spacing-md);
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -319,6 +330,29 @@ img {
   color: white;
 }
 
+.btn-full-width {
+  width: 100%;
+}
+
+/* Page Hero (inner pages) */
+.page-hero {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  padding: var(--spacing-2xl) 0;
+  text-align: center;
+}
+
+.page-hero h1 {
+  color: var(--color-text);
+  margin-bottom: var(--spacing-md);
+}
+
+.page-subheadline {
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+  max-width: 650px;
+  margin: 0 auto;
+}
+
 /* Features Section */
 .features {
   padding: var(--spacing-2xl) 0;
@@ -366,6 +400,24 @@ img {
 }
 
 /* About Section */
+.about-preview {
+  padding: var(--spacing-2xl) 0;
+  background-color: var(--color-surface);
+  text-align: center;
+}
+
+.about-preview h2 {
+  margin-bottom: var(--spacing-md);
+}
+
+.about-preview-text {
+  max-width: 650px;
+  margin: 0 auto var(--spacing-xl);
+  color: var(--color-text-secondary);
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+
 .about-content {
   padding: var(--spacing-2xl) 0;
   background-color: var(--color-bg);
@@ -517,7 +569,7 @@ img {
 .service-price {
   margin: 0 var(--spacing-lg) var(--spacing-sm);
   padding: var(--spacing-xs) var(--spacing-sm);
-  background-color: var(--color-accent);
+  background-color: var(--color-primary);
   color: white;
   font-weight: 600;
   border-radius: var(--radius-sm);
@@ -587,7 +639,7 @@ img {
 /* CTA Section */
 .cta-section {
   padding: var(--spacing-2xl) 0;
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #0d9488 100%);
   color: white;
   text-align: center;
 }
@@ -636,7 +688,18 @@ img {
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-sm);
-  border-left: 4px solid var(--color-accent);
+  border-left: 4px solid var(--color-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+.testimonial-card::after {
+  content: '🐾';
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 1.5rem;
+  opacity: 0.15;
 }
 
 .testimonial-text {
@@ -942,6 +1005,73 @@ img {
   border: 1px solid var(--color-border);
 }
 
+/* Team Section */
+.team-section {
+  padding: var(--spacing-2xl) 0;
+  background-color: var(--color-bg);
+}
+
+.team-section h2 {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+  color: var(--color-primary);
+}
+
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--spacing-lg);
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
+
+.team-card {
+  text-align: center;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition-normal);
+}
+
+.team-card:hover {
+  transform: translateY(-5px);
+}
+
+.team-photo {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto var(--spacing-md);
+  border-radius: 50%;
+  overflow: hidden;
+  border: 4px solid var(--color-primary-light);
+}
+
+.team-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.team-info h3 {
+  margin-bottom: var(--spacing-2xs);
+  color: var(--color-text);
+}
+
+.team-role {
+  color: var(--color-primary);
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  font-size: 0.875rem;
+}
+
+.team-bio {
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
 /* Footer */
 .site-footer {
   background-color: var(--color-footer-bg);
@@ -1146,14 +1276,14 @@ img {
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-bg: #0f172a;
+    --color-bg: #1c1917;
-    --color-surface: #1e293b;
+    --color-surface: #292524;
-    --color-border: #334155;
+    --color-border: #44403c;
-    --color-text: #f8fafc;
+    --color-text: #fef3c7;
-    --color-text-secondary: #94a3b8;
+    --color-text-secondary: #d6d3d1;
-    --color-text-muted: #64748b;
+    --color-text-muted: #a8a29e;
-    --color-footer-bg: #000000;
+    --color-footer-bg: #0c0a09;
-    --color-footer-text: #94a3b8;
+    --color-footer-text: #a8a29e;
   }
   
   .site-header {
@@ -1162,7 +1292,14 @@ img {
   }
   
   .hero {
-    background: linear-gradient(135deg, var(--color-bg) 0%, #1e293b 100%);
+    background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #44403c 100%);
+  }
+
+  .hero h1 {
+    background: linear-gradient(to right, #fbbf24, #f59e0b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
   
   .feature-card,

index.html

@@ -21,10 +21,10 @@
                     <span class="hamburger"></span>
                 </button>
                 <ul id="nav-menu" class="nav-list">
-                    <li><a href="/" class="nav-link">Home</a></li>
+                    <li><a href="/" class="nav-link active">Home</a></li>
                     <li><a href="/about.html" class="nav-link">About</a></li>
                     <li><a href="/services.html" class="nav-link">Services</a></li>
-                    <li><a href="/products.html" class="nav-link">Products</a></li>
+                    <li><a href="/contact.html" class="nav-link">Contact</a></li>
                 </ul>
             </nav>
         </div>
@@ -34,9 +34,10 @@
         <!-- Hero Section -->
         <section class="hero" aria-labelledby="hero-heading">
             <div class="container">
+                <p class="hero-emoji" aria-hidden="true">🐾</p>
                 <h1 id="hero-heading">Your Dog Deserves the Best Day Ever</h1>
                 <p class="hero-subheadline">Trusted dog walking, grooming, and overnight care from people who truly love dogs.</p>
-                <a href="/contact" class="btn btn-primary">Book a Visit</a>
+                <a href="/contact.html" class="btn btn-primary">Book a Visit</a>
             </div>
         </section>
 
@@ -75,6 +76,13 @@
         </section>
 
         <!-- About Preview -->
+        <section class="about-preview" aria-labelledby="about-preview-heading">
+            <div class="container">
+                <h2 id="about-preview-heading" class="section-title">Meet the Team</h2>
+                <p class="about-preview-text">We are a small crew of dog lovers dedicated to keeping your pups happy and healthy. Every handler on our team is certified and genuinely passionate about dogs.</p>
+                <a href="/about.html" class="btn btn-secondary">Learn About Us</a>
+            </div>
+        </section>
 
         <!-- Testimonials -->
         <section class="testimonials" aria-labelledby="testimonials-heading">
@@ -121,7 +129,10 @@
                     <h3>Quick Links</h3>
                     <ul>
                         <li><a href="/">Home</a></li>
-<li><a href="/about.html">About</a></li><li><a href="/services.html">Services</a></li><li><a href="/products.html">Products</a></li>                    </ul>
+                        <li><a href="/about.html">About</a></li>
+                        <li><a href="/services.html">Services</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
                 </nav>
                 <address class="footer-contact" aria-label="Contact information">
                     <h3>Contact</h3>
@@ -139,4 +150,4 @@
 
     <script src="js/main.js"></script>
 </body>
-</html>
+</html>

products.html

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Happy Tails Pet Care Products - ">
-    <title>Products | Happy Tails Pet Care</title>
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Nunito+Sans:wght@400;500;600&display=swap" rel="stylesheet">
-</head>
-<body>
-    <header class="site-header">
-        <div class="container">
-            <a href="/" class="logo" aria-label="Happy Tails Pet Care - Home">
-                <span class="logo-text">Happy Tails</span>
-            </a>
-            <nav class="main-nav" aria-label="Main navigation">
-                <button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Toggle navigation">
-                    <span class="hamburger"></span>
-                </button>
-                <ul id="nav-menu" class="nav-list">
-                    <li><a href="/" class="nav-link">Home</a></li>
-<li><a href="/about.html" class="nav-link">About</a></li><li><a href="/services.html" class="nav-link">Services</a></li>                    <li><a href="/products.html" class="nav-link active">Products</a></li>
-                </ul>
-            </nav>
-        </div>
-    </header>
-
-    <main class="site-main">
-        <section class="page-hero" aria-labelledby="page-heading">
-            <div class="container">
-                <h1 id="page-heading">Our Products</h1>
-                <p class="page-subheadline"></p>
-            </div>
-        </section>
-
-        <section class="product-categories" aria-labelledby="categories-heading">
-            <div class="container">
-                <nav class="category-tabs" aria-label="Product categories">
-                    <h2 id="categories-heading" class="visually-hidden">Product Categories</h2>
-                    <ul role="tablist">
-                    </ul>
-                </nav>
-
-                <div class="category-panels">
-                </div>
-            </div>
-        </section>
-
-        <section class="cta-section" aria-labelledby="cta-heading">
-            <div class="container">
-                <h2 id="cta-heading">Ready to Schedule Your Pup?</h2>
-                <p>Get in touch today and let us put together the perfect care plan for your dog.</p>
-                <a href="/contact" class="btn btn-primary">Book a Visit</a>
-            </div>
-        </section>
-    </main>
-
-    <footer class="site-footer" role="contentinfo">
-        <div class="container">
-            <div class="footer-grid">
-                <div class="footer-brand">
-                    <p class="footer-logo">Happy Tails</p>
-                    <p class="footer-tagline">Devoted care for happy dogs every single day</p>
-                </div>
-                <nav class="footer-nav" aria-label="Footer navigation">
-                    <h3>Quick Links</h3>
-                    <ul>
-                        <li><a href="/">Home</a></li>
-<li><a href="/about.html">About</a></li><li><a href="/services.html">Services</a></li>                        <li><a href="/products.html">Products</a></li>
-                    </ul>
-                </nav>
-                <address class="footer-contact" aria-label="Contact information">
-                    <h3>Contact</h3>
-                    <p>742 Evergreen Terrace, Springfield, IL 62704</p>
-                    <p><a href="tel:(555) 742-9283">(555) 742-9283</a></p>
-                    <p><a href="mailto:hello@3031023.xyz">hello@3031023.xyz</a></p>
-                </address>
-            </div>
-            <div class="footer-bottom">
-                <p>&copy; 2026 Happy Tails Pet Care. All rights reserved.</p>
-                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a></p>
-            </div>
-        </div>
-    </footer>
-
-    <script src="js/main.js"></script>
-</body>
-</html>

services.html

@@ -24,7 +24,7 @@
                     <li><a href="/" class="nav-link">Home</a></li>
                     <li><a href="/about.html" class="nav-link">About</a></li>
                     <li><a href="/services.html" class="nav-link active">Services</a></li>
-                    <li><a href="/products.html" class="nav-link">Products</a></li>
+                    <li><a href="/contact.html" class="nav-link">Contact</a></li>
                 </ul>
             </nav>
         </div>
@@ -53,7 +53,7 @@
                             <li>Water Breaks</li>
                         </ul>
                         <div class="service-price">$25/walk</div>
-                        <a href="/contact" class="btn btn-secondary">Book a Walk</a>
+                        <a href="/contact.html" class="btn btn-secondary">Book a Walk</a>
                     </article>
                     <article class="service-card">
                         <div class="service-icon" aria-hidden="true">🐾</div>
@@ -66,7 +66,7 @@
                             <li>Consistent Handler</li>
                         </ul>
                         <div class="service-price">$80/week</div>
-                        <a href="/contact" class="btn btn-secondary">Get Weekly Plan</a>
+                        <a href="/contact.html" class="btn btn-secondary">Get Weekly Plan</a>
                     </article>
                     <article class="service-card">
                         <div class="service-icon" aria-hidden="true">🏠</div>
@@ -80,7 +80,7 @@
                             <li>24hr Supervision</li>
                         </ul>
                         <div class="service-price">$65/night</div>
-                        <a href="/contact" class="btn btn-secondary">Book Overnight</a>
+                        <a href="/contact.html" class="btn btn-secondary">Book Overnight</a>
                     </article>
                     <article class="service-card">
                         <div class="service-icon" aria-hidden="true">🐶</div>
@@ -93,7 +93,7 @@
                             <li>Nail Trim</li>
                         </ul>
                         <div class="service-price">$40</div>
-                        <a href="/contact" class="btn btn-secondary">Book Bath</a>
+                        <a href="/contact.html" class="btn btn-secondary">Book Bath</a>
                     </article>
                     <article class="service-card">
                         <div class="service-icon" aria-hidden="true">🦴</div>
@@ -108,7 +108,7 @@
                             <li>Ear Cleaning</li>
                         </ul>
                         <div class="service-price">$75</div>
-                        <a href="/contact" class="btn btn-secondary">Book Groom</a>
+                        <a href="/contact.html" class="btn btn-secondary">Book Groom</a>
                     </article>
                     <article class="service-card">
                         <div class="service-icon" aria-hidden="true">🐕</div>
@@ -121,7 +121,7 @@
                             <li>Confidence Building</li>
                         </ul>
                         <div class="service-price">$35/session</div>
-                        <a href="/contact" class="btn btn-secondary">Join a Session</a>
+                        <a href="/contact.html" class="btn btn-secondary">Join a Session</a>
                     </article>
                     <article class="service-card">
                         <div class="service-icon" aria-hidden="true">🐾</div>
@@ -135,7 +135,7 @@
                             <li>Shaded Rest Areas</li>
                         </ul>
                         <div class="service-price">$20/dog</div>
-                        <a href="/contact" class="btn btn-secondary">Join the Pack</a>
+                        <a href="/contact.html" class="btn btn-secondary">Join the Pack</a>
                     </article>
                 </div>
             </div>
@@ -173,7 +173,7 @@
             <div class="container">
                 <h2 id="cta-heading">Ready to Schedule Your Pup?</h2>
                 <p>Get in touch today and let us put together the perfect care plan for your dog.</p>
-                <a href="/contact" class="btn btn-primary">Book a Visit</a>
+                <a href="/contact.html" class="btn btn-primary">Book a Visit</a>
             </div>
         </section>
     </main>
@@ -189,8 +189,10 @@
                     <h3>Quick Links</h3>
                     <ul>
                         <li><a href="/">Home</a></li>
-<li><a href="/about.html">About</a></li>                        <li><a href="/services.html">Services</a></li>
+                        <li><a href="/about.html">About</a></li>
-<li><a href="/products.html">Products</a></li>                    </ul>
+                        <li><a href="/services.html">Services</a></li>
+                        <li><a href="/contact.html">Contact</a></li>
+                    </ul>
                 </nav>
                 <address class="footer-contact" aria-label="Contact information">
                     <h3>Contact</h3>
@@ -208,4 +210,4 @@
 
     <script src="js/main.js"></script>
 </body>
-</html>
+</html>