From 97f1b0dfa75c76f52b145c99fdc0a7b46f218330 Mon Sep 17 00:00:00 2001 From: devandapaige Date: Wed, 2 Jul 2025 22:43:58 -0400 Subject: [PATCH 1/9] Add new feature to process user input Introduced a function to handle and validate user input, improving the robustness of the input processing workflow. --- src/__tests__/lib/mdx.test.ts | 5 +- src/app/about/page.tsx | 300 +++++++++++++++++++++++++++ src/app/about/resume.md | 0 src/app/page.tsx | 151 ++++++++++++-- src/app/services/page.tsx | 282 +++++++++++++++++++++++++ src/components/AboutCard.tsx | 143 +++++++++++++ src/components/ForeverTopicsCard.tsx | 109 ++++++++++ src/components/HeroCard.tsx | 99 +++++++++ src/components/NewsletterCard.tsx | 53 +++++ src/components/PainPointsCard.tsx | 79 +++++++ src/components/ServiceCard.tsx | 112 ++++++++++ src/docs/phase-three.md | 290 ++++++++++++++++++++++++++ 12 files changed, 1605 insertions(+), 18 deletions(-) create mode 100644 src/app/about/page.tsx create mode 100644 src/app/about/resume.md create mode 100644 src/app/services/page.tsx create mode 100644 src/components/AboutCard.tsx create mode 100644 src/components/ForeverTopicsCard.tsx create mode 100644 src/components/HeroCard.tsx create mode 100644 src/components/NewsletterCard.tsx create mode 100644 src/components/PainPointsCard.tsx create mode 100644 src/components/ServiceCard.tsx create mode 100644 src/docs/phase-three.md diff --git a/src/__tests__/lib/mdx.test.ts b/src/__tests__/lib/mdx.test.ts index 12ebe5c..478d596 100644 --- a/src/__tests__/lib/mdx.test.ts +++ b/src/__tests__/lib/mdx.test.ts @@ -1,14 +1,11 @@ import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; -import { notFound } from 'next/navigation'; import { getAllPosts, getPostBySlug, - getPostBySlugSync, - type BlogPost + getPostBySlugSync } from '@/lib/mdx'; -import { logError } from '@/lib/errorHandling'; // Mock dependencies jest.mock('fs'); diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..147488b --- /dev/null +++ b/src/app/about/page.tsx @@ -0,0 +1,300 @@ +import Image from 'next/image' +import Link from 'next/link' +import ServiceCard from '../../components/ServiceCard' + +export const metadata = { + title: 'About Amanda | Pythoness Programmer', + description: 'Learn about Amanda Nelson, the Pythoness Programmer. Tech coaching and development services with a focus on neurodivergent-friendly approaches and digital confidence.', +} + +export default function AboutPage() { + return ( +
+ {/* Hero Section */} +
+
+
+ {/* Content */} +
+
+

+ I'm Amanda, the Pythoness +

+

+ I help neurodivergent creatives and small businesses build digital fluency through thoughtful tech guidance and brain-friendly workflows. +

+

+ With over 13 years of experience as a Senior Full Stack Software Engineer, I've built and led projects for companies like Zappos.com (an Amazon company), Happi Home, and a range of SaaS startups. My work spans e-commerce, accessibility, automation, and technical mentorship. +

+
+ +
+

+ With over a decade of experience in web development and digital systems, I understand the overwhelm that comes with too many tools and not enough clarity. +

+

+ My approach is rooted in empathy, accessibility, and the belief that technology should work for you, not against you. +

+
+ +
+ + View My Services + + + Book a Call + +
+
+ + {/* Image */} +
+
+ Amanda Nelson - The Pythoness Programmer +
+
+
+
+
+
+
+ + {/* My Story Section */} +
+
+
+

+ My Story +

+
+
+

+ How I became the Pythoness and why I'm passionate about helping others find tech clarity. +

+
+
+
+ +
+

+ My journey into tech began like many others - with curiosity and a desire to solve problems. But what set my path apart was my neurodivergent brain and the unique challenges it presented when navigating the digital world. +

+ +

+ I discovered that traditional tech approaches often don't account for different ways of thinking and processing information. The overwhelm of too many options, the frustration of tools that don't work the way my brain does, and the constant feeling of being "behind" in an ever-changing landscape. +

+ +

+ This led me to develop a different approach - one that prioritizes clarity over complexity, accessibility over assumptions, and individual needs over one-size-fits-all solutions. +

+ +

+ Today, I combine my technical expertise with deep empathy for the neurodivergent experience to help others build digital fluency, support digital wellbeing, and create workflows that actually feel comfortable for your unique brain. +

+

+ Alongside my passion for making tech accessible, I've had the privilege of working as a Senior Software Engineer and Product Developer, leading agile teams and building robust web applications for both global brands and small businesses. My technical background means I bring not just empathy, but also deep expertise and proven results to every project. +

+
+
+
+ + {/* My Philosophy Section */} +
+
+
+

+ My Philosophy +

+
+
+

+ The core principles that guide my approach to tech coaching and development. +

+
+
+
+ +
+ {/* Principle 1 */} +
+
+ 🧠 +
+

Brain-Friendly Design

+

+ Technology should adapt to how your brain works, not force you to adapt to it. I design solutions that respect neurodivergent thinking patterns. +

+
+ + {/* Principle 2 */} +
+
+ 🎯 +
+

Clarity Over Complexity

+

+ The best solution is often the simplest one. I help you cut through the noise and find what actually works for your specific needs. +

+
+ + {/* Principle 3 */} +
+
+ 🤝 +
+

Judgment-Free Support

+

+ No question is too basic, no challenge too small. I provide a safe space to explore technology without fear of judgment or shame. +

+
+ + {/* Principle 4 */} +
+
+ 🔄 +
+

Sustainable Solutions

+

+ I focus on building systems that grow with you, not ones that require constant maintenance or cause burnout. +

+
+ + {/* Principle 5 */} +
+
+ 🌟 +
+

Empowering Independence

+

+ My goal is to help you develop the confidence and skills to navigate technology independently, with ongoing support when needed. +

+
+ + {/* Principle 6 */} +
+
+ 💚 +
+

LGBTQIA+ Affirming

+

+ I provide a safe, affirming space for LGBTQIA+ individuals and businesses, understanding the unique challenges and opportunities in our community. +

+
+
+
+
+ + {/* What I Do Section */} +
+
+
+

+ What I Do +

+
+
+

+ A comprehensive overview of my services and how I can help you build digital fluency, support your digital wellbeing, and make technology comfortable for you. + + As a recognized expert in TypeScript, React, Node.js, and cloud platforms, I combine technical excellence with a people-first approach. You get solutions that are both powerful and truly usable. + +

+
+
+
+ +
+ + + + + +
+
+
+ + {/* Call to Action Section */} +
+
+

+ Ready to Make Tech Comfortable? +

+

+ Let's work together to create a digital environment that supports your wellbeing and helps you become fluent and comfortable with technology. +

+
+ + Book a Free Consultation + + + View All Services + +
+
+
+
+ ) +} diff --git a/src/app/about/resume.md b/src/app/about/resume.md new file mode 100644 index 0000000..e69de29 diff --git a/src/app/page.tsx b/src/app/page.tsx index 7f84ac8..7d56ffa 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,9 @@ -import HeroSection from './components/home/HeroSection' -import AboutSection from './components/home/AboutSection' -import ExperienceSection from './components/home/ExperienceSection' -import ServicesSection from './components/home/ServicesSection' -// import WorkSection from './components/home/WorkSection' -import ContactSection from './components/home/ContactSection' -import NewsletterSection from './components/home/NewsletterSection' +import HeroCard from '../components/HeroCard' +import PainPointsCard from '../components/PainPointsCard' +import ForeverTopicsCard from '../components/ForeverTopicsCard' +import ServiceCard from '../components/ServiceCard' +import AboutCard from '../components/AboutCard' +import NewsletterCard from '../components/NewsletterCard' export const metadata = { title: 'Pythoness Programmer | Tech Coaching & Development', @@ -17,13 +16,137 @@ export const metadata = { export default async function Home() { return (
- - - - - {/* */} - - + {/* Hero Section */} +
+
+ +
+
+ + {/* Pain Points Section */} +
+
+ +
+
+ + {/* Forever Topics Section */} +
+
+ +
+
+ + {/* Services Section */} +
+
+ {/* Section Header */} +
+

+ Your Digital Journey, Your Way +

+
+
+

+ Everyone learns and grows differently. I'm here to help you discover your own path to digital confidence, with a healthy dose of humor and zero judgment along the way. +

+
+
+
+ + {/* Quick Tech Support */} +
+

Quick Tech Support

+
+ + +
+

+ Coming this summer: Group events and office hours! Stay tuned for updates. +

+
+ + {/* Additional Services */} +
+

Additional Services

+
+ + +
+
+
+
+ + {/* About Section */} +
+
+ +
+
+ + {/* Newsletter Section */} +
+
+ +
+
) } diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx new file mode 100644 index 0000000..7d93988 --- /dev/null +++ b/src/app/services/page.tsx @@ -0,0 +1,282 @@ +import Link from 'next/link' +import ServiceCard from '../../components/ServiceCard' +import PainPointsCard from '../../components/PainPointsCard' + +export const metadata = { + title: 'Services | Pythoness Programmer', + description: 'Tech coaching, web development, and system integration services designed for neurodivergent professionals. Clear pricing, brain-friendly approaches, and judgment-free support.', +} + +export default function ServicesPage() { + return ( +
+ {/* Hero Section */} +
+
+
+

+ Services That Work for Your Brain +

+

+ Whether you need tech coaching, a custom website, or help integrating your digital tools, I provide solutions that respect your unique thinking patterns and support your goals. +

+
+ + Book a Free Consultation + + + View All Services + +
+
+
+
+ + {/* Pain Points Section */} +
+
+ +
+
+ + {/* Main Services Section */} +
+
+
+

+ My Services +

+
+
+

+ I offer focused, brain-friendly tech support sessions designed for neurodivergent professionals. As a software engineer, I bring deep technical expertise to help you optimize your digital life, but I do not offer web development or custom software development services under the Pythoness Programmer brand. +

+
+
+
+ +
+ {/* Tech Clarity Session */} + + + {/* Digital Systems Overhaul */} + +
+
+
+ + {/* Process Section */} +
+
+
+

+ How We'll Work Together +

+
+
+

+ A clear, structured process designed to reduce overwhelm and maximize results. The process starts as soon as you book your session. +

+
+
+
+ +
+ {/* Step 1 */} +
+
+ 1 +
+

Book & Share

+

+ Secure your session and fill out a quick intake form to share your goals, challenges, and priorities. +

+
+ + {/* Step 2 */} +
+
+ 2 +
+

Assessment

+

+ I review your information and analyze your current systems to identify opportunities for improvement. +

+
+ + {/* Step 3 */} +
+
+ 3 +
+

Session & Solutions

+

+ We meet for your session, diving into your challenges, brainstorming solutions, and creating a clear action plan together. +

+
+ + {/* Step 4 */} +
+
+ 4 +
+

Follow-Up & Support

+

+ Receive a summary, resources, and next steps after your session. There are options for ongoing support if you need it. +

+
+
+
+
+ + {/* FAQ Section */} +
+
+
+

+ Frequently Asked Questions +

+
+
+

+ Common questions about my services and approach. +

+
+
+
+ +
+ {/* FAQ Item 1 */} +
+

+ What makes your approach different? +

+

+ I design solutions specifically for neurodivergent brains, focusing on reducing cognitive load, providing clear structure, and creating systems that actually work for your unique thinking patterns. No judgment, no assumptions, just practical solutions. +

+
+ + {/* FAQ Item 2 */} +
+

+ Do you work with people who aren't tech-savvy? +

+

+ Absolutely! In fact, many of my clients come to me feeling overwhelmed by technology. I specialize in breaking down complex concepts into manageable pieces and providing judgment-free support regardless of your current tech comfort level. +

+
+ + {/* FAQ Item 3 */} +
+

+ How do I know which service is right for me? +

+

+ Start with a free consultation! We'll discuss your specific needs and I'll recommend the best approach. The Tech Clarity Session is perfect for exploring options, while the Digital Systems Overhaul is ideal for comprehensive change. +

+
+ + {/* FAQ Item 4 */} +
+

+ What if I need ongoing support? +

+

+ I offer ongoing tech support plans and can also work with you on a project basis. Many clients start with a consultation or overhaul and then choose ongoing support to maintain their systems and continue growing. +

+
+ + {/* FAQ Item 5 */} +
+

+ Do you work with businesses or just individuals? +

+

+ Both! I work with individual professionals, small business owners, and teams. My approach scales well for different needs, whether you're a solopreneur or managing a small team's digital systems. +

+
+
+
+
+ + {/* Call to Action Section */} +
+
+

+ Ready to Get Started? +

+

+ Let's discuss your needs and find the perfect solution for your unique situation. No pressure, no judgment - just a conversation about how I can help. +

+
+ + Book a Free Consultation + + + Learn More About Me + +
+
+
+
+ ) +} diff --git a/src/components/AboutCard.tsx b/src/components/AboutCard.tsx new file mode 100644 index 0000000..85461f0 --- /dev/null +++ b/src/components/AboutCard.tsx @@ -0,0 +1,143 @@ +import Image from 'next/image' + +interface Photo { + main: string; + decorative?: string[]; +} + +interface Values { + title: string; + items: string[]; +} + +interface AboutCardProps { + title?: string; + description?: string; + pythia?: string; + values?: Values; + photo?: Photo; + className?: string; +} + +export default function AboutCard({ + title = "The Pythoness Behind The Code", + description = "I'm a tech coach, developer, and digital craftswoman who believes technology should be a joy to use, not a frustration to endure. With over a decade of experience building digital experiences that delight and empower, I work with conscious creators and business owners to make their digital visions come alive.", + pythia = "The name 'Pythoness' is a nod to the Pythia, the high priestesses who served as oracles at the Temple of Apollo at Delphi. These women were the technology experts of their time, trusted advisors who helped leaders navigate uncertainty with wisdom and foresight. Like the ancient oracles, I aim to demystify complex systems and help you find clarity in your digital journey.", + values = { + title: "My Approach", + items: [ + "Human-centered design that puts your users first and creates intuitive, beautiful experiences", + "Sustainable technology choices that grow with you and don't lock you into expensive ecosystems", + "Education alongside implementation, empowering you to understand and manage your digital tools", + "Conscious business practices that align with your values and amplify your positive impact", + "Joy and creativity in every step of the process - because technology should be fun!" + ] + }, + photo = { + main: "/pythoness-main.png", + decorative: ["/pythoness-coding.png", "/pythoness-workshop.png"] + }, + className = "" +}: AboutCardProps) { + return ( +
+ {/* Section Header */} +
+

+ {title} +

+
+ +
+ {/* Image with decorative elements */} +
+
+ {/* Decorative elements */} +
+
+ {/* Main photo */} +
+ {photo?.main ? ( + Pythoness Programmer + ) : ( +
+

Image coming soon

+
+ )} +
+ {/* Small decorative photos */} + {photo?.decorative && photo.decorative.length > 0 && ( + <> + {photo.decorative[0] && ( +
+ Decorative +
+ )} + {photo.decorative[1] && ( +
+ Decorative +
+ )} + + )} + {/* Pythia caption */} +
+

+ {pythia} +

+
+
+
+ + {/* About text content */} +
+

+ {description} +

+

+ {values.title} +

+
    + {values.items.map((item: string, index: number) => ( +
  • + + + {item} + +
    • + ))} +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/ForeverTopicsCard.tsx b/src/components/ForeverTopicsCard.tsx new file mode 100644 index 0000000..49f6406 --- /dev/null +++ b/src/components/ForeverTopicsCard.tsx @@ -0,0 +1,109 @@ +interface Topic { + title: string; + description: string; + icon?: string; +} + +interface ForeverTopicsCardProps { + title?: string; + topics?: Topic[]; + className?: string; +} + +export default function ForeverTopicsCard({ + title = "Your Guide to Lifelong Tech Clarity", + topics = [ + { + title: "Digital Security", + description: "Protect your data and privacy with best practices that evolve with technology." + }, + { + title: "Workflow Optimization", + description: "Streamline your digital processes for maximum efficiency and minimal stress." + }, + { + title: "Tool Selection", + description: "Choose the right tools for your needs without getting overwhelmed by options." + }, + { + title: "Digital Organization", + description: "Create systems that work for your brain and keep your digital life clutter-free." + }, + { + title: "Automation", + description: "Let technology work for you with thoughtful, accessible automation strategies." + }, + { + title: "Tech Confidence", + description: "Build lasting confidence in your ability to navigate and master new technologies." + }, + { + title: "Digital Wellness", + description: "Maintain healthy relationships with technology while staying productive." + }, + { + title: "Future-Proofing", + description: "Stay ahead of tech changes with adaptable strategies and continuous learning." + } + ], + className = "" +}: ForeverTopicsCardProps) { + return ( +
+ {/* Section Header */} +
+

+ {title} +

+
+
+

+ These are the core topics that will guide you toward lasting tech confidence and clarity. +

+
+
+
+ + {/* Topics Grid */} +
+ {topics.map((topic, index) => ( +
+ {/* Topic Icon Placeholder */} +
+ + {topic.title.charAt(0)} + +
+ + {/* Topic Title */} +

+ {topic.title} +

+ + {/* Topic Description */} +

+ {topic.description} +

+
+ ))} +
+ + {/* Call to Action */} +
+

+ Ready to dive deeper into these topics? +

+ + Explore Resources + +
+
+ ) +} diff --git a/src/components/HeroCard.tsx b/src/components/HeroCard.tsx new file mode 100644 index 0000000..34cd3ce --- /dev/null +++ b/src/components/HeroCard.tsx @@ -0,0 +1,99 @@ +import Link from 'next/link' + +export interface Button { + href: string; + text: string; + primary?: boolean; +} + +interface HeroCardProps { + title?: string; + tagline?: string; + mainText?: string; + subText?: string; + buttons?: Button[]; + className?: string; +} + +export default function HeroCard({ + title = "Crafting Digital Joy", + tagline = "Tech Clarified | Empowering Digital Confidence", + mainText = "Tech doesn't have to be overwhelming. Together, we'll turn your digital challenges into opportunities for growth, learning, and (yes!) even fun.", + subText = "From coaching to coding to crafting, I blend technical expertise with creative problem-solving to help you build a digital presence that feels authentically yours.", + buttons = [ + { + text: "Book a 15min Vibe Check", + href: "https://cal.com/pythoness/15min", + primary: true + }, + { + text: "View Services", + href: "#services", + primary: false + } + ], + className = "" +}: HeroCardProps) { + return ( +
+ {/* Enhanced background patterns with multiple layers */} +
+
+
+
+
+ +
+ {/* Content container with glass effect */} +
+ {/* Title with enhanced animation */} +
+

+ {title} +

+ {/* Tagline with separator lines */} +
+
+

+ {tagline} +

+
+
+
+ + {/* Main content with staggered animation */} +
+

+ {mainText} +

+

+ {subText} +

+
+ + {/* Buttons with enhanced hover effects */} +
+ {buttons.map((button, index) => ( + + + + {button.text} + + + + ))} +
+
+
+
+ ) +} diff --git a/src/components/NewsletterCard.tsx b/src/components/NewsletterCard.tsx new file mode 100644 index 0000000..8486e70 --- /dev/null +++ b/src/components/NewsletterCard.tsx @@ -0,0 +1,53 @@ +interface NewsletterCardProps { + title?: string; + description?: string; + embedUrl?: string; + bgColor?: string; + className?: string; +} + +export default function NewsletterCard({ + title = "Stay Connected", + description = "Get strategic insights on navigating tech spaces, building sustainable systems, and creating accessible solutions. No fluff, just practical expertise and industry awareness.", + embedUrl = "https://embeds.beehiiv.com/5eb2e329-cfe4-4c22-b470-7ed460e5e900", + bgColor = "bg-gradient-to-br from-brand-purple-dark/5 via-brand-cream to-brand-green-dark/5", + className = "" +}: NewsletterCardProps) { + return ( +
+ {/* Background pattern */} +
+
+
+
+ +
+ {/* Section header with glass effect */} +
+
+

+ {title} +

+

+ {description} +

+
+
+ + {/* Newsletter embed */} +
+ +
+
+
+ ) +} diff --git a/src/components/PainPointsCard.tsx b/src/components/PainPointsCard.tsx new file mode 100644 index 0000000..6fb1365 --- /dev/null +++ b/src/components/PainPointsCard.tsx @@ -0,0 +1,79 @@ +interface PainPoint { + text: string; + icon?: React.ReactNode; +} + +interface PainPointsCardProps { + title?: string; + painPoints?: PainPoint[]; + className?: string; +} + +export default function PainPointsCard({ + title = "Feeling Stuck? I Can Help.", + painPoints = [ + { text: "Drowning in digital clutter" }, + { text: "Overwhelmed by apps" }, + { text: "Worried about online security" }, + { text: "Can't find the right tools" }, + { text: "Tech decisions causing stress" }, + { text: "Need a clear digital strategy" } + ], + className = "" +}: PainPointsCardProps) { + return ( +
+ {/* Section Header */} +
+

+ {title} +

+
+
+

+ You're not alone in feeling overwhelmed by technology. These are the most common challenges I help people solve. +

+
+
+
+ + {/* Pain Points Grid */} +
+ {painPoints.map((painPoint, index) => ( +
+ {/* Checkmark Icon */} +
+
+ ✓ +
+
+ + {/* Pain Point Text */} +
+

+ {painPoint.text} +

+
+
+ ))} +
+ + {/* Call to Action */} +
+

+ Ready to turn these pain points into solutions? +

+ + Let's Get Started + +
+
+ ) +} diff --git a/src/components/ServiceCard.tsx b/src/components/ServiceCard.tsx new file mode 100644 index 0000000..e193b36 --- /dev/null +++ b/src/components/ServiceCard.tsx @@ -0,0 +1,112 @@ +import Link from 'next/link' + +interface ServiceCardProps { + title: string; + subtitle?: string; + price?: string; + description?: string; + features?: string[]; + ctaLink: string; + ctaText: string; + icon?: string; + note?: string; + highlight?: boolean; + isNew?: boolean; + className?: string; + textColor?: string; +} + +export default function ServiceCard({ + title, + subtitle, + price, + description, + features = [], + ctaLink, + ctaText, + icon, + note, + highlight = false, + isNew = false, + className = "", + textColor = "text-white" +}: ServiceCardProps) { + return ( +
+ {/* NEW badge */} + {isNew && ( +
+
+ NEW +
+
+ )} + + {/* Service icon (if provided) */} + {icon && ( +
+ {icon} +
+ )} + + {/* Service title */} +

+ {title} +

+ + {/* Subtitle */} + {subtitle && ( +

+ {subtitle} +

+ )} + + {/* Price */} + {price && ( +

+ {price} +

+ )} + + {/* Description */} + {description && ( +

+ {description} +

+ )} + + {/* Features list */} + {features.length > 0 && ( + + )} + + {/* Note */} + {note && ( +

{note}

+ )} + + {/* Call to action button */} + + {ctaText} + +
+ ) +} diff --git a/src/docs/phase-three.md b/src/docs/phase-three.md new file mode 100644 index 0000000..f1def11 --- /dev/null +++ b/src/docs/phase-three.md @@ -0,0 +1,290 @@ +# Website Redesign 2025 - Development Project Notes + +**Project:** Website Redesign 2025 +**Branch:** `phase-three` +**Status:** 🚧 In Progress +**Last Updated:** [07.01.2025] +**Developer:** [Amanda Nelson] + +## Overview +Systematic rebuild of the homepage to reflect new, focused business strategy. Using component-based architecture for maintainability. + +## Pre-Development Checklist + +### Step 0: Setup & Housekeeping +- [X] Create new git branch: `git checkout -b feature/website-redesign-2025` +- [X] Review and update cal.com links with new service copy +- [X] Verify new URLs are ready for site implementation + - https://cal.com/pythoness/clarity - 30min Tech Clarity Session ($75) + - https://cal.com/pythoness/overhaul - 90min Digital System Overhaul ($295) +- [X] Set up development environment +- [X] Review current homepage structure + +**Status:** ✅ Complete +**Notes:** All setup tasks completed successfully + +--- + +## Component Development + +### Step 1: Service Components +**Status:** 🚧 In Progress +**Priority:** High + +#### 1.1 ServiceCard Component +- [X] Create `src/components/ServiceCard.tsx` +- [X] Implement TypeScript interface for props +- [X] Style with Tailwind CSS +- [X] Add props: `title`, `description`, `price`, `bookingUrl` +- [X] Include call-to-action button (opens in new tab) +- [X] Test component rendering +- [X] Add to component library +- [X] Remove all hover animations and emdashes for accessibility + +**File Path:** `src/components/ServiceCard.tsx` +**Dependencies:** None +**Status:** ✅ Complete +**Notes:** Reusable component created with full styling from ServicesSection.tsx. Accessibility improved by removing hover animations and emdashes. + +--- + +### Step 2: Homepage Section Components +**Status:** ✅ Complete +**Priority:** High + +#### 2.1 PainPointsSection Component +- [X] Create `src/components/PainPointsCard.tsx` +- [X] Implement "Feeling Stuck? I Can Help." heading +- [X] Create two-column grid layout +- [X] Add checkmark icons for bullet points +- [X] Include pain points: + - Drowning in digital clutter + - Overwhelmed by apps + - Worried about online security + - Can't find the right tools + - Tech decisions causing stress + - Need a clear digital strategy +- [X] Style with Tailwind CSS +- [X] Test responsive design +- [X] Remove all hover animations and emdashes for accessibility + +**File Path:** `src/components/PainPointsCard.tsx` +**Dependencies:** None +**Status:** ✅ Complete +**Notes:** Accessibility improved by removing hover animations and emdashes. + +#### 2.2 ForeverTopicsSection Component +- [X] Create `src/components/ForeverTopicsCard.tsx` +- [X] Implement "Your Guide to Lifelong Tech Clarity." heading +- [X] Create responsive four-column grid (two-column mobile) +- [X] Add placeholder icons from react-icons +- [X] Include topics: + - Digital Security + - Workflow Optimization + - Tool Selection + - Digital Organization + - Automation + - Tech Confidence + - Digital Wellness + - Future-Proofing +- [X] Style with Tailwind CSS +- [X] Test responsive breakpoints +- [X] Remove all hover animations and emdashes for accessibility + +**File Path:** `src/components/ForeverTopicsCard.tsx` +**Dependencies:** None +**Status:** ✅ Complete +**Notes:** Accessibility improved by removing hover animations and emdashes. + +#### 2.3 HomepageServices Component +- [X] Create `src/components/HomepageServicesCard.tsx` +- [X] Implement "Clear Support for Your Tech Goals." heading +- [X] Create responsive three-column grid +- [X] Include service tiers: + - Tech Clarity Session + - Digital Systems Overhaul + - Group Workshops +- [X] Add "Learn More" buttons linking to services page +- [X] Use ServiceCard styling as reference +- [X] Test component integration +- [X] Remove all hover animations and emdashes for accessibility + +**File Path:** `src/components/HomepageServicesCard.tsx` +**Dependencies:** ServiceCard component +**Status:** ✅ Complete +**Notes:** Accessibility improved by removing hover animations and emdashes. + +#### 2.4 AboutSummary Component +- [X] Create `src/components/AboutSummaryCard.tsx` +- [X] Implement circular profile image (left side) +- [X] Add text content: "I'm Amanda, the Pythoness..." +- [X] Include "More About My Philosophy" CTA button +- [X] Link to `/about` page +- [X] Style with Tailwind CSS +- [X] Test responsive layout +- [X] Remove all hover animations and emdashes for accessibility + +**File Path:** `src/components/AboutSummaryCard.tsx` +**Dependencies:** Profile image +**Status:** ✅ Complete +**Notes:** Accessibility improved by removing hover animations and emdashes. + +--- + +## Navigation Updates + +### Step 3: Header Navigation +- [ ] Update `src/components/Header.tsx` +- [ ] Modify navigation links to: + - Home + - Services + - Community + - The Lab (or Resources) + - Contact +- [ ] Update mobile hamburger menu +- [ ] Test navigation functionality +- [ ] Verify responsive behavior + +**File Path:** `src/components/Header.tsx` +**Status:** ⏳ Pending + +--- + +## Page Assembly + +### Step 4: Homepage Assembly +- [X] Open main homepage file (`src/app/page.tsx`) +- [X] Clear existing sections +- [X] Import new components: + - PainPointsCard + - ForeverTopicsCard + - HomepageServicesCard + - AboutSummaryCard +- [X] Arrange components in order: + 1. HeroSection (update text and CTAs) + 2. PainPointsCard + 3. ForeverTopicsCard + 4. HomepageServicesCard + 5. TestimonialsSection (existing) + 6. AboutSummaryCard +- [X] Update HeroSection CTAs: + - Primary: `/services` + - Secondary: `/resources` (or `/lab`) +- [X] Test page rendering +- [X] Verify component integration + +**File Path:** `src/app/page.tsx` +**Status:** ✅ Complete + +--- + +## Footer Updates + +### Step 5: Footer Component +- [ ] Update `src/components/Footer.tsx` +- [ ] Verify main navigation links match header +- [ ] Add "Shop" link in less prominent position +- [ ] Include social media links +- [ ] Add cal.com profile link +- [ ] Test footer functionality +- [ ] Verify responsive design + +**File Path:** `src/components/Footer.tsx` +**Status:** ⏳ Pending + +--- + +## Testing & Quality Assurance + +### Step 6: Testing +- [ ] Component unit tests +- [ ] Integration tests +- [ ] Responsive design testing +- [ ] Cross-browser compatibility +- [ ] Performance testing +- [ ] Accessibility testing + +**Status:** ⏳ Pending + +### Step 7: Deployment +- [ ] Code review +- [ ] Merge to main branch +- [ ] Deploy to staging +- [ ] User acceptance testing +- [ ] Deploy to production +- [ ] Monitor for issues + +**Status:** ⏳ Pending + +--- + +## Notes & Decisions + +### Technical Decisions +- Using component-based architecture for maintainability +- Tailwind CSS for styling consistency +- TypeScript for type safety +- React Icons for icon library + +### Content Decisions +- Simplified navigation structure +- Focused service offerings +- Clear value proposition in hero section + +### Design Decisions +- Clean, modern UI +- Mobile-first responsive design +- Consistent color scheme and typography + +--- + +## Issues & Blockers + +### Current Issues +- [ ] None identified yet + +### Resolved Issues +- [ ] ServiceCard component completed successfully +- [ ] All homepage Card components completed +- [ ] Homepage assembly completed successfully + +--- + +## Resources & References + +### Design Assets +- Profile image: `public/images/headshot.png` +- Icons: react-icons library +- Fonts: Existing font stack + +### External Links +- Cal.com booking links (updated): + - https://cal.com/pythoness/clarity - 30min Tech Clarity Session ($75) + - https://cal.com/pythoness/overhaul - 90min Digital System Overhaul ($295) +- Social media profiles +- Service page URLs + +--- + +## Next Steps +1. ✅ Complete Step 0 setup +2. ✅ Begin component development (Step 1) - ServiceCard ✅ Complete +3. ✅ Implement homepage sections (Step 2) - All components ✅ Complete +4. ✅ Assemble homepage (Step 4) - All components integrated ✅ Complete +5. ⏳ Update navigation (Step 3) +6. ⏳ Update footer (Step 5) +7. ⏳ Testing and deployment (Steps 6-7) + +## Current Progress Summary +- **Step 0:** ✅ Complete (Setup & Housekeeping) +- **Step 1:** ✅ Complete (ServiceCard Component) +- **Step 2:** ✅ Complete (All homepage components) + - ✅ PainPointsCard + - ✅ ForeverTopicsCard + - ✅ HomepageServicesCard + - ✅ AboutSummaryCard +- **Step 3:** ⏳ Pending (Navigation Updates) +- **Step 4:** ✅ Complete (Homepage Assembly) - **Major milestone achieved!** +- **Step 5:** ⏳ Pending (Footer Updates) +- **Step 6:** ⏳ Pending (Testing) +- **Step 7:** ⏳ Pending (Deployment) \ No newline at end of file From 32f3f9cfa72780ef5ac10ea5835f7b9c6dd417df Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 18:54:51 -0400 Subject: [PATCH 2/9] Hero Card copy & Resources Page --- src/app/about/page.tsx | 4 +- src/app/page.tsx | 2 +- src/app/resources/page.tsx | 351 ++++++++++++++++++++++++++++++++++++ src/components/HeroCard.tsx | 25 +-- 4 files changed, 358 insertions(+), 24 deletions(-) create mode 100644 src/app/resources/page.tsx diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 147488b..8e4b31a 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -24,7 +24,7 @@ export default function AboutPage() { I help neurodivergent creatives and small businesses build digital fluency through thoughtful tech guidance and brain-friendly workflows.

- With over 13 years of experience as a Senior Full Stack Software Engineer, I've built and led projects for companies like Zappos.com (an Amazon company), Happi Home, and a range of SaaS startups. My work spans e-commerce, accessibility, automation, and technical mentorship. + With over 13 years of experience as a Senior Full Stack Software Engineer, I've built and led projects for companies like Zappos.com (an Amazon company), Happi Home, and a range of SaaS startups. My work spans e-commerce, accessibility, automation, and technical mentorship.

@@ -105,7 +105,7 @@ export default function AboutPage() { Today, I combine my technical expertise with deep empathy for the neurodivergent experience to help others build digital fluency, support digital wellbeing, and create workflows that actually feel comfortable for your unique brain.

- Alongside my passion for making tech accessible, I've had the privilege of working as a Senior Software Engineer and Product Developer, leading agile teams and building robust web applications for both global brands and small businesses. My technical background means I bring not just empathy, but also deep expertise and proven results to every project. + Alongside my passion for making tech accessible, I've had the privilege of working as a Senior Software Engineer and Product Developer, leading agile teams and building robust web applications for both global brands and small businesses. My technical background means I bring not just empathy, but also deep expertise and proven results to every project.

diff --git a/src/app/page.tsx b/src/app/page.tsx index 7d56ffa..8522a43 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -48,7 +48,7 @@ export default async function Home() {

- Everyone learns and grows differently. I'm here to help you discover your own path to digital confidence, with a healthy dose of humor and zero judgment along the way. + Everyone learns and grows differently. I'm here to help you discover your own path to digital confidence, with a healthy dose of humor and zero judgment along the way.

diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx new file mode 100644 index 0000000..b95af33 --- /dev/null +++ b/src/app/resources/page.tsx @@ -0,0 +1,351 @@ +import Link from 'next/link' +import { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Resources | Pythoness Programmer', + description: 'Free and paid resources for digital wellness, automation, and neurodivergent-friendly tech solutions.', +} + +export default function ResourcesPage() { + return ( +
+
+
+ {/* Hero Section */} +
+

+ Resources Hub +

+

+ Digital wellness tools, automation guides, and neurodivergent-friendly tech solutions +

+

+ Everything you need to build sustainable, brain-friendly digital workflows. All resources are designed + with neurodivergent thinking patterns in mind. +

+
+ + {/* Free Resources Section */} +
+
+

+ Free Resources +

+

+ Get started with these comprehensive, free resources designed to support your digital wellness journey. +

+
+ +
+ {/* Digital Spring Cleaning */} +
+
+
+ 🌱 +
+
+

Digital Spring Cleaning

+

GRIT Framework Toolkit

+
+
+

+ A comprehensive 4-page worksheet designed to help you refresh your digital life using the GRIT framework + (Passion, Perseverance, Growth, Resilience). Perfect for monthly or quarterly reflection. +

+
+
+ + Digital Spring Cleaning Worksheet (PDF) +
+
+ + Interactive Canva Template +
+
+ + NAA Framework Guide (Notice, Adjust, Acknowledge) +
+
+
+ + View Full Resource + + + Download PDF + +
+
+ + {/* Mindful Automation */} +
+
+
+ ⚙️ +
+
+

Mindful Automation

+

Y.O.U. Framework System

+
+
+

+ Learn to build automation systems that work with your unique brain patterns. The Y.O.U. Framework + (Your Brain, Optimize Energy, Understand Maintenance) creates sustainable, brain-friendly workflows. +

+
+
+ + Y.O.U. Framework Guide (PDF) +
+
+ + Error-Proofing Worksheet +
+
+ + Weekly Deep Dive Resources +
+
+
+ + View Full Resource + + + Download PDF + +
+
+ + {/* Vibe Coding Cheatsheet */} +
+
+
+ 💻 +
+
+

Vibe Coding Cheatsheet

+

Interactive Developer Resource

+
+
+

+ A professional showcase of TailwindCSS techniques with interactive features. Perfect for developers + looking to level up their styling game with copy-to-clipboard functionality. +

+
+
+ + Interactive TailwindCSS Examples +
+
+ + Copy-to-Clipboard Functionality +
+
+ + Professional Development Patterns +
+
+ + Explore Cheatsheet + +
+ + {/* Sourdough Corner */} +
+
+
+ 🍞 +
+
+

Sourdough Corner

+

Craft Baking Resources

+
+
+

+ Comprehensive sourdough baking guide with recipes, techniques, and Amanda's favorite tools. + Perfect for beginners and experienced bakers alike. +

+
+
+ + Starter Creation & Maintenance +
+
+ + Lazy Double Batch Recipe +
+
+ + Tool Recommendations & Resources +
+
+ + Explore Sourdough Guide + +
+
+
+ + {/* Podcast & Newsletter Section */} +
+
+
+

+ Podcast & Newsletter +

+

+ Stay updated with the latest in AI, automation, and neurodivergent-friendly tech solutions. +

+
+
+
+
+ 🎙️ +
+

NotebookLM Podcast

+

+ AI-powered insights from my research on technology, automation, and digital wellness. +

+
+ + Listen on Spotify + + + Watch on YouTube + +
+
+
+
+ 📧 +
+

Newsletter

+

+ Monthly insights on digital wellness, automation strategies, and neurodivergent-friendly tech. +

+ + Subscribe Now + +
+
+
+
+ + {/* Paid Resources Section - Future */} +
+
+

+ Premium Resources +

+

+ Coming soon: In-depth courses, workshops, and premium tools designed for deeper transformation. +

+
+ +
+
+ 🚀 +
+

+ Premium Content Coming Soon +

+

+ I'm developing comprehensive courses, workshops, and premium tools to support your digital wellness journey. + These will include deeper dive content, community access, and personalized support. +

+
+
+ + In-depth automation courses +
+
+ + Interactive workshops and group sessions +
+
+ + Premium tools and templates +
+
+ + Community access and peer support +
+
+ + Get Notified When Available + +
+
+ + {/* Call to Action */} +
+
+

+ Ready to Transform Your Digital Life? +

+

+ Start with any of these free resources, or book a personalized session to get tailored guidance + for your specific needs and goals. +

+
+ + Book a Session + + + Start with Digital Spring Cleaning + +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/HeroCard.tsx b/src/components/HeroCard.tsx index 34cd3ce..3741c1c 100644 --- a/src/components/HeroCard.tsx +++ b/src/components/HeroCard.tsx @@ -8,18 +8,13 @@ export interface Button { interface HeroCardProps { title?: string; - tagline?: string; mainText?: string; - subText?: string; buttons?: Button[]; - className?: string; } export default function HeroCard({ - title = "Crafting Digital Joy", - tagline = "Tech Clarified | Empowering Digital Confidence", - mainText = "Tech doesn't have to be overwhelming. Together, we'll turn your digital challenges into opportunities for growth, learning, and (yes!) even fun.", - subText = "From coaching to coding to crafting, I blend technical expertise with creative problem-solving to help you build a digital presence that feels authentically yours.", + title = "Your Tech, Clarified", + mainText = "Feeling stuck in digital clutter? I provide clear, joyful, and human-first tech solutions. From coaching to coding, I help you build systems that reduce anxiety and amplify your creativity.", buttons = [ { text: "Book a 15min Vibe Check", @@ -28,11 +23,10 @@ export default function HeroCard({ }, { text: "View Services", - href: "#services", + href: "/services", primary: false } - ], - className = "" + ] }: HeroCardProps) { return (
@@ -51,14 +45,6 @@ export default function HeroCard({

{title}

- {/* Tagline with separator lines */} -
-
-

- {tagline} -

-
-
{/* Main content with staggered animation */} @@ -66,9 +52,6 @@ export default function HeroCard({

{mainText}

-

- {subText} -

{/* Buttons with enhanced hover effects */} From 69d79480abfc12be27c41b950c1dde7d83ff9427 Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 19:33:38 -0400 Subject: [PATCH 3/9] header and footer update --- src/app/page.tsx | 4 +- src/components/Footer.tsx | 22 ++++-- src/components/Header.tsx | 150 +++++++++----------------------------- 3 files changed, 49 insertions(+), 127 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 8522a43..312b3cf 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,14 +18,14 @@ export default async function Home() {
{/* Hero Section */}
-
+
{/* Pain Points Section */}
-
+
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index be3443d..ddd7e68 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -30,15 +30,16 @@ export default function Footer() { Pythoness Programmer }> -

- Crafting digital joy through code, coaching, and creativity. -

+
    +
  • About
    • +
  • Services
    • +
  • Resources
    • +
{/* Social Links */}
  • GitHub
    • -
  • LinkedIn
  • YouTube
  • TikTok
  • Bluesky
    • @@ -47,10 +48,10 @@ export default function Footer() { {/* Calendar Links */}
      -
    • 30min Tech Stack Audit
      • -
    • 75min Deep Dive
      • +
    • 30min Tech Clarity Call
      • +
    • 90min Tech Overhaul Call
    -

    Coming this summer: Group events and office hours! Stay tuned for updates.

    +

    Coming this summer: Pythoness Network Slack Community and Office Hours!

     {/* Free Resources */} @@ -109,7 +110,12 @@ export default function Footer() { MDX {', '} Vercel - . + {' • '} + + + diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d208e01..ce44d20 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,42 +1,17 @@ 'use client' -import { useState, useRef } from 'react' +import { useState } from 'react' import { usePathname } from 'next/navigation' import Link from 'next/link' export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) - const [isWorkMenuOpen, setIsWorkMenuOpen] = useState(false) const pathname = usePathname() - const isHomePage = pathname === '/' - const workMenuRef = useRef(null) const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } - // Helper function to get the correct href for navigation links - const getNavHref = (hash: string) => { - return isHomePage ? hash : `/${hash}` - } - - // Accessibility: close dropdowns on blur - const handleBlur = (event: React.FocusEvent, setOpen: (open: boolean) => void, menuRef: React.RefObject) => { - if (!menuRef.current?.contains(event.relatedTarget)) { - setOpen(false); - } - }; - - // Accessibility: handle keyboard for dropdowns - const handleDropdownKeyDown = (event: React.KeyboardEvent, setOpen: (open: boolean) => void) => { - if (event.key === 'Escape') { - setOpen(false); - } else if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault(); - setOpen(!open); - } - }; - return ( <>
    - Blog + About Services -
    handleBlur(e, setIsWorkMenuOpen, workMenuRef)}> - - -
    + + Resources + + + Blog +
    setIsMenuOpen(false)} > - Blog + About setIsMenuOpen(false)} > Services -
    -

    Resources

    -
    - setIsMenuOpen(false)} - > - 🎙️{' '} - NotebookLM Podcast - - setIsMenuOpen(false)} - > - 📥{' '} - GRIT Digital Cleaning - - setIsMenuOpen(false)} - > - ⚙️{' '} - Mindful Automation - -
    -
    + setIsMenuOpen(false)} + > + Resources + + setIsMenuOpen(false)} + > + Blog + Date: Fri, 4 Jul 2025 19:59:49 -0400 Subject: [PATCH 4/9] services page updated we're reusing the PainPointsCard for easy checkmark bullet points again for the client flow. --- src/app/page.tsx | 4 ++-- src/app/services/page.tsx | 11 ++++++----- src/components/PainPointsCard.tsx | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 312b3cf..c2230d7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -32,14 +32,14 @@ export default async function Home() { {/* Forever Topics Section */}
    -
    +
    {/* Services Section */}
    -
    +
    {/* Section Header */}

    diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx index 7d93988..c4004f0 100644 --- a/src/app/services/page.tsx +++ b/src/app/services/page.tsx @@ -12,7 +12,7 @@ export default function ServicesPage() {
    {/* Hero Section */}
    -
    +

    Services That Work for Your Brain @@ -40,9 +40,10 @@ export default function ServicesPage() {

    {/* Pain Points Section */} -
    -
    +
    +
    -
    +

    My Services @@ -119,7 +120,7 @@ export default function ServicesPage() { {/* Process Section */}
    -
    +

    How We'll Work Together diff --git a/src/components/PainPointsCard.tsx b/src/components/PainPointsCard.tsx index 6fb1365..388f917 100644 --- a/src/components/PainPointsCard.tsx +++ b/src/components/PainPointsCard.tsx @@ -22,7 +22,7 @@ export default function PainPointsCard({ className = "" }: PainPointsCardProps) { return ( -
    +
    {/* Section Header */}

    From 478122a7976e03fb45865e1324d7d544010ee158 Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 20:04:14 -0400 Subject: [PATCH 5/9] about page updated --- src/app/about/page.tsx | 6 +++--- src/app/about/resume.md | 0 2 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 src/app/about/resume.md diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 8e4b31a..083c0b2 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -24,7 +24,7 @@ export default function AboutPage() { I help neurodivergent creatives and small businesses build digital fluency through thoughtful tech guidance and brain-friendly workflows.

    - With over 13 years of experience as a Senior Full Stack Software Engineer, I've built and led projects for companies like Zappos.com (an Amazon company), Happi Home, and a range of SaaS startups. My work spans e-commerce, accessibility, automation, and technical mentorship. + With over 13 years of experience as a Senior Full Stack Software Engineer, I've built and led projects for companies ranging from Amazon.com to small businesses and SaaS startups. My work spans e-commerce, accessibility, automation, and technical mentorship across the full spectrum of business sizes.

    @@ -105,7 +105,7 @@ export default function AboutPage() { Today, I combine my technical expertise with deep empathy for the neurodivergent experience to help others build digital fluency, support digital wellbeing, and create workflows that actually feel comfortable for your unique brain.

    - Alongside my passion for making tech accessible, I've had the privilege of working as a Senior Software Engineer and Product Developer, leading agile teams and building robust web applications for both global brands and small businesses. My technical background means I bring not just empathy, but also deep expertise and proven results to every project. + Alongside my passion for making tech accessible, I've had the privilege of working as a Senior Software Engineer and Product Developer, leading agile teams and building robust web applications for enterprise-level companies, global brands, and small businesses. My technical background means I bring not just empathy, but also deep expertise and proven results to every project, regardless of scale.

    @@ -209,7 +209,7 @@ export default function AboutPage() {

    A comprehensive overview of my services and how I can help you build digital fluency, support your digital wellbeing, and make technology comfortable for you. - As a recognized expert in TypeScript, React, Node.js, and cloud platforms, I combine technical excellence with a people-first approach. You get solutions that are both powerful and truly usable. + As a recognized expert in TypeScript, React, Node.js, and cloud platforms, I combine technical excellence with a people-first approach. Whether you're a small business owner or part of an enterprise team, you get solutions that are both powerful and truly usable.

    diff --git a/src/app/about/resume.md b/src/app/about/resume.md deleted file mode 100644 index e69de29..0000000 From 1fead3268a2dd940587d31d9b93a2436b75bd05d Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 20:25:13 -0400 Subject: [PATCH 6/9] Cards updated for phase three main updates --- src/app/page.tsx | 6 +- src/components/ForeverTopicsCard.tsx | 82 ++++++++++++++++++---------- src/components/Header.tsx | 8 +-- src/components/PainPointsCard.tsx | 4 +- 4 files changed, 61 insertions(+), 39 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index c2230d7..28c9a73 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -17,7 +17,7 @@ export default async function Home() { return (
    {/* Hero Section */} -
    +
    @@ -31,14 +31,14 @@ export default async function Home() {
    {/* Forever Topics Section */} -
    +
    {/* Services Section */} -
    +
    {/* Section Header */}
    diff --git a/src/components/ForeverTopicsCard.tsx b/src/components/ForeverTopicsCard.tsx index 49f6406..f1585b5 100644 --- a/src/components/ForeverTopicsCard.tsx +++ b/src/components/ForeverTopicsCard.tsx @@ -48,58 +48,80 @@ export default function ForeverTopicsCard({ ], className = "" }: ForeverTopicsCardProps) { + const defaultEmojis: { [key: string]: { emoji: string; label: string } } = { + "Digital Security": { emoji: "🛡️", label: "Digital Security" }, + "Workflow Optimization": { emoji: "⚡", label: "Workflow Optimization" }, + "Tool Selection": { emoji: "🧰", label: "Tool Selection" }, + "Digital Organization": { emoji: "🗂️", label: "Digital Organization" }, + "Automation": { emoji: "🤖", label: "Automation" }, + "Tech Confidence": { emoji: "💪", label: "Tech Confidence" }, + "Digital Wellness": { emoji: "🌱", label: "Digital Wellness" }, + "Future-Proofing": { emoji: "🔮", label: "Future-Proofing" }, + }; + return ( -
    +
    {/* Section Header */}
    -

    +

    {title}

    -
    -

    +

    +

    These are the core topics that will guide you toward lasting tech confidence and clarity.

    -
    +
    {/* Topics Grid */}
    - {topics.map((topic, index) => ( -
    - {/* Topic Icon Placeholder */} -
    - - {topic.title.charAt(0)} - + {topics.map((topic, index) => { + const isEven = index % 2 === 0; + const borderColor = isEven ? 'border-brand-purple-dark/30' : 'border-brand-green-accent/30'; + const iconText = isEven ? 'text-brand-purple-dark' : 'text-brand-green-accent'; + return ( +
    + {/* Topic Icon - emoji only, no circle */} +
    + {topic.icon ? ( + + {topic.icon} + + ) : defaultEmojis[topic.title] ? ( + + {defaultEmojis[topic.title].emoji} + + ) : ( + {topic.title.charAt(0)} + )} +
    + {/* Topic Title */} +

    + {topic.title} +

    + {/* Topic Description */} +

    + {topic.description} +

    - - {/* Topic Title */} -

    - {topic.title} -

    - - {/* Topic Description */} -

    - {topic.description} -

    -
    - ))} + ); + })}
    {/* Call to Action */}
    -

    +

    Ready to dive deeper into these topics?

    Explore Resources diff --git a/src/components/Header.tsx b/src/components/Header.tsx index ce44d20..9abf0e1 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -36,25 +36,25 @@ export default function Header() { > About Services Resources Blog diff --git a/src/components/PainPointsCard.tsx b/src/components/PainPointsCard.tsx index 388f917..68bda60 100644 --- a/src/components/PainPointsCard.tsx +++ b/src/components/PainPointsCard.tsx @@ -10,7 +10,7 @@ interface PainPointsCardProps { } export default function PainPointsCard({ - title = "Feeling Stuck? I Can Help.", + title = "Let's Find Your Digital Clarity", painPoints = [ { text: "Drowning in digital clutter" }, { text: "Overwhelmed by apps" }, @@ -19,7 +19,7 @@ export default function PainPointsCard({ { text: "Tech decisions causing stress" }, { text: "Need a clear digital strategy" } ], - className = "" + className = "bg-brand-purple-dark text-white" }: PainPointsCardProps) { return (
    From c1ba29f1a0f31445e0a2cfc2173d40121e27c05d Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 20:35:36 -0400 Subject: [PATCH 7/9] styling finalized --- src/app/page.tsx | 8 ++++---- src/components/ForeverTopicsCard.tsx | 2 +- src/components/HeroCard.tsx | 2 +- src/components/PainPointsCard.tsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 28c9a73..32925d7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -15,9 +15,9 @@ export const metadata = { export default async function Home() { return ( -
    +
    {/* Hero Section */} -
    +
    @@ -38,7 +38,7 @@ export default async function Home() {
    {/* Services Section */} -
    +
    {/* Section Header */}
    @@ -142,7 +142,7 @@ export default async function Home() {
    {/* Newsletter Section */} -
    +
    diff --git a/src/components/ForeverTopicsCard.tsx b/src/components/ForeverTopicsCard.tsx index f1585b5..f13fdf9 100644 --- a/src/components/ForeverTopicsCard.tsx +++ b/src/components/ForeverTopicsCard.tsx @@ -60,7 +60,7 @@ export default function ForeverTopicsCard({ }; return ( -
    +
    {/* Section Header */}

    diff --git a/src/components/HeroCard.tsx b/src/components/HeroCard.tsx index 3741c1c..28528fb 100644 --- a/src/components/HeroCard.tsx +++ b/src/components/HeroCard.tsx @@ -29,7 +29,7 @@ export default function HeroCard({ ] }: HeroCardProps) { return ( -
    +
    {/* Enhanced background patterns with multiple layers */}
    diff --git a/src/components/PainPointsCard.tsx b/src/components/PainPointsCard.tsx index 68bda60..deb5ea3 100644 --- a/src/components/PainPointsCard.tsx +++ b/src/components/PainPointsCard.tsx @@ -22,7 +22,7 @@ export default function PainPointsCard({ className = "bg-brand-purple-dark text-white" }: PainPointsCardProps) { return ( -
    +
    {/* Section Header */}

    From b1ea1fd915bdd15c1ddfc594a04a32afd1fc0030 Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 20:49:43 -0400 Subject: [PATCH 8/9] copy updates --- src/app/page.tsx | 82 +++++++++------------------- src/components/ForeverTopicsCard.tsx | 58 +++++++++++--------- src/components/PainPointsCard.tsx | 5 ++ 3 files changed, 61 insertions(+), 84 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 32925d7..a3480b5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -59,75 +59,43 @@ export default async function Home() {

    Quick Tech Support

    -
    -

    - Coming this summer: Group events and office hours! Stay tuned for updates. -

    -

    - - {/* Additional Services */} -
    -

    Additional Services

    -
    - -
    diff --git a/src/components/ForeverTopicsCard.tsx b/src/components/ForeverTopicsCard.tsx index f13fdf9..a0c9aa8 100644 --- a/src/components/ForeverTopicsCard.tsx +++ b/src/components/ForeverTopicsCard.tsx @@ -8,42 +8,52 @@ interface ForeverTopicsCardProps { title?: string; topics?: Topic[]; className?: string; + description?: string; } export default function ForeverTopicsCard({ - title = "Your Guide to Lifelong Tech Clarity", + title = "Your Path to Digital Confidence", + description = "These core practices will guide you toward lasting tech confidence. We can explore them together in our sessions.", topics = [ - { - title: "Digital Security", - description: "Protect your data and privacy with best practices that evolve with technology." - }, { title: "Workflow Optimization", - description: "Streamline your digital processes for maximum efficiency and minimal stress." + description: "Streamline your digital processes for maximum efficiency and minimal stress.", + icon: "⚡" }, { title: "Tool Selection", - description: "Choose the right tools for your needs without getting overwhelmed by options." + description: "Choose the right tools for your needs without getting overwhelmed by options.", + icon: "🧰" }, { title: "Digital Organization", - description: "Create systems that work for your brain and keep your digital life clutter-free." + description: "Create systems that work for your brain and keep your digital life clutter-free.", + icon: "🗂️" }, { - title: "Automation", - description: "Let technology work for you with thoughtful, accessible automation strategies." - }, - { - title: "Tech Confidence", - description: "Build lasting confidence in your ability to navigate and master new technologies." + title: "Mindful Automation", + description: "Let technology work for you with thoughtful, accessible automation strategies.", + icon: "🤖" }, { title: "Digital Wellness", - description: "Maintain healthy relationships with technology while staying productive." + description: "Maintain healthy relationships with technology while staying productive.", + icon: "🌱" }, { title: "Future-Proofing", - description: "Stay ahead of tech changes with adaptable strategies and continuous learning." + description: "Stay ahead of tech changes with adaptable strategies and continuous learning.", + icon: "🔮" + }, + { + title: "Tech Confidence", + description: "Build lasting confidence in your ability to navigate and master new technologies.", + icon: "💪" + }, + { + title: "Digital Security", + description: "Protect your data and privacy with best practices that evolve with technology.", + icon: "🛡️" } ], className = "" @@ -66,11 +76,11 @@ export default function ForeverTopicsCard({

    {title}

    + {description && ( +

    {description}

    + )}
    -

    - These are the core topics that will guide you toward lasting tech confidence and clarity. -

    @@ -87,18 +97,12 @@ export default function ForeverTopicsCard({ className={`group rounded-xl p-6 hover:bg-brand-purple/10 transition-all duration-300 text-center border-2 ${borderColor}`} style={{ animationDelay: `${index * 100}ms` }} > - {/* Topic Icon - emoji only, no circle */} + {/* Topic Icon - emoji only, no circle, accessible */}
    - {topic.icon ? ( + {topic.icon && ( {topic.icon} - ) : defaultEmojis[topic.title] ? ( - - {defaultEmojis[topic.title].emoji} - - ) : ( - {topic.title.charAt(0)} )}
    {/* Topic Title */} diff --git a/src/components/PainPointsCard.tsx b/src/components/PainPointsCard.tsx index deb5ea3..798ac27 100644 --- a/src/components/PainPointsCard.tsx +++ b/src/components/PainPointsCard.tsx @@ -7,10 +7,12 @@ interface PainPointsCardProps { title?: string; painPoints?: PainPoint[]; className?: string; + description?: string; } export default function PainPointsCard({ title = "Let's Find Your Digital Clarity", + description = "If you feel overwhelmed by digital clutter, endless apps, or security worries, you are not alone. I help you solve these common challenges by creating a clear digital strategy, choosing the right tools, and designing systems that work for your brain.", painPoints = [ { text: "Drowning in digital clutter" }, { text: "Overwhelmed by apps" }, @@ -28,6 +30,9 @@ export default function PainPointsCard({

    {title}

    + {description && ( +

    {description}

    + )}

    From 87d2863664dde370879f65b02c03988ef589175c Mon Sep 17 00:00:00 2001 From: devandapaige Date: Fri, 4 Jul 2025 20:52:05 -0400 Subject: [PATCH 9/9] linting errors --- src/components/ForeverTopicsCard.tsx | 11 +---------- src/components/Header.tsx | 1 - 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/ForeverTopicsCard.tsx b/src/components/ForeverTopicsCard.tsx index a0c9aa8..6ed8468 100644 --- a/src/components/ForeverTopicsCard.tsx +++ b/src/components/ForeverTopicsCard.tsx @@ -58,16 +58,7 @@ export default function ForeverTopicsCard({ ], className = "" }: ForeverTopicsCardProps) { - const defaultEmojis: { [key: string]: { emoji: string; label: string } } = { - "Digital Security": { emoji: "🛡️", label: "Digital Security" }, - "Workflow Optimization": { emoji: "⚡", label: "Workflow Optimization" }, - "Tool Selection": { emoji: "🧰", label: "Tool Selection" }, - "Digital Organization": { emoji: "🗂️", label: "Digital Organization" }, - "Automation": { emoji: "🤖", label: "Automation" }, - "Tech Confidence": { emoji: "💪", label: "Tech Confidence" }, - "Digital Wellness": { emoji: "🌱", label: "Digital Wellness" }, - "Future-Proofing": { emoji: "🔮", label: "Future-Proofing" }, - }; + return (

    diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9abf0e1..9bd9bf0 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,7 +6,6 @@ import Link from 'next/link' export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) - const pathname = usePathname() const toggleMenu = () => { setIsMenuOpen(!isMenuOpen)