Add founder contact card to homepage contact section

[Copilot]

Adds direct contact information for the founder/CEO to the homepage contact section for easier visitor outreach.

Changes

• Contact Section Enhancement (app/page.tsx)
  • Added GlowCard component displaying founder contact details above the interest form
  • Includes title, name, position, phone (tel: link), and email (mailto: link)
  • Responsive flexbox layout (stacks on mobile, horizontal on desktop)
  • Hover states: phone → text-brand, email → text-brand2

Implementation

{/* Founder Contact */}
<div className="mb-12">
  <GlowCard className="p-8 text-center">
    <div className="text-sm font-semibold text-brand2 uppercase tracking-wider mb-2">
      Founder &amp; CEO
    </div>
    <h3 className="text-2xl font-bold text-text mb-2">
      Mack
    </h3>
    <p className="text-muted mb-6">
      Founder &amp; Chief Executive Officer, T.O.O.L.S Inc
    </p>
    <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8">
      <a href="tel:+16193507638" className="text-text hover:text-brand transition-colors font-medium flex items-center gap-2">
        <span className="text-lg">📞</span>
        +1 (619) 350-7638
      </a>
      <a href="mailto:dmack@sdtoolsinc.org" className="text-text hover:text-brand2 transition-colors font-medium flex items-center gap-2">
        <span className="text-lg">📧</span>
        dmack@sdtoolsinc.org
      </a>
    </div>
  </GlowCard>
</div>

Screenshot

Original prompt

Objective

Add founder contact information to the existing contact section on the homepage, matching the current design system.

Requirements

1. Update the Contact Section in app/page.tsx

Locate the section with id="contact" (around line 217) and add a new "Founder Contact" card above the interest form.

The founder contact card should:

• Use the GlowCard component to match existing styling
• Include the following information:
  • Title: "Founder & CEO"
  • Name: Mack
  • Position: Founder & Chief Executive Officer, T.O.O.LS Inc
  • Phone: +1 (619) 350-7638 (with clickable tel: link)
  • Email: dmack@sdtoolsinc.org (with clickable mailto: link)

2. Layout Structure

Insert the founder contact section right after the section heading "Get Started" / "Ready to Start Your Journey?" and before the interest form iframe.

The layout should:

• Use a GlowCard with padding consistent with other cards on the page
• Center the content
• Use appropriate spacing between elements
• Make phone and email links interactive with hover states matching the brand colors
• Be responsive (work well on mobile and desktop)

3. Styling Guidelines

• Follow the existing design patterns from the homepage
• Use Tailwind CSS classes consistent with the rest of the site
• Text colors should use the existing design tokens: text-text, text-muted, text-brand, text-brand2
• Links should have hover:text-brand or hover:text-brand2 transition effects
• Maintain consistent spacing with other sections (use classes like mb-8, mt-6, etc.)

4. Example Structure

{/* Founder Contact */}
<div className="mb-12">
  <GlowCard className="p-8 text-center">
    {/* Add founder contact content here */}
  </GlowCard>
</div>

Expected Outcome

The contact section should now display the founder's contact information prominently, making it easy for visitors to reach out directly to the CEO while maintaining the existing interest form below.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.