From 345d242aea1c0f25702c6902844143f50c55f64f Mon Sep 17 00:00:00 2001 From: Mariana Caldas Date: Sun, 14 Jun 2026 20:32:29 -0700 Subject: [PATCH 1/5] Adding basic SDD structure for the services page --- specs/services-page/decisions.md | 148 +++++++++++++++ specs/services-page/references.md | 130 +++++++++++++ specs/services-page/specification.md | 270 +++++++++++++++++++++++++++ specs/services-page/tasks.md | 175 +++++++++++++++++ 4 files changed, 723 insertions(+) create mode 100644 specs/services-page/decisions.md create mode 100644 specs/services-page/references.md create mode 100644 specs/services-page/specification.md create mode 100644 specs/services-page/tasks.md diff --git a/specs/services-page/decisions.md b/specs/services-page/decisions.md new file mode 100644 index 00000000..701552c7 --- /dev/null +++ b/specs/services-page/decisions.md @@ -0,0 +1,148 @@ +# Services Page Decisions + +## Source of Truth + +### Decision + +The Services Page specification folder is the primary source of truth for this initiative. + +### Reason + +Requirements, decisions, implementation references, and task tracking should remain centralized and easily discoverable. + +### Implementation + +Contributors should consult: + +- specification.md +- decisions.md +- references.md +- tasks.md + +before beginning implementation work. + +GitHub Issues and Pull Requests should reference these documents whenever applicable. + +## Branch Strategy + +### Decision + +All Services Page development will occur within the `services-dev` branch. + +### Reason + +The Services Page represents a large initiative involving multiple contributors. + +Using a dedicated branch allows the team to: + +- Reduce merge conflicts. +- Test functionality independently. +- Continue maintaining the production site through `main`. +- Deploy Services Page work to a dedicated Netlify staging environment. + +--- + +## Hero Section Form + +### Decision + +Remove custom intake form fields from the Hero section. + +### Reason + +Calendly already collects the required information. + +Maintaining both a custom form and Calendly introduces duplicate data entry and unnecessary friction. + +### Implementation + +Replace the form with a CTA that opens Calendly. + +--- + +## Testimonials Section + +### Decision + +Do not implement the Testimonials section during the initial release. + +### Reason + +The organization does not currently have enough completed client projects to support testimonials. + +### Future State + +The section may be implemented after sufficient client feedback and case studies have been collected. + +--- + +## Pricing Strategy + +### Decision + +Pricing will be one of the final sections implemented. + +### Reason + +The team requires additional time to conduct pricing research and validate assumptions before publishing pricing information. + +The goal is to establish pricing that is: + +- Affordable for small businesses. +- Competitive within the market. +- Sustainable for project delivery. +- Aligned with Web Dev Path's educational mission. + +### Implementation + +Pricing cards may be built after pricing research is completed and approved. + +--- + +## Specification-Driven Development + +### Decision + +The Services Page will be developed using a lightweight Specification-Driven Development approach. + +### Reason + +The team wants to: + +- Improve onboarding. +- Reduce ambiguity. +- Improve collaboration. +- Improve AI-assisted development workflows. +- Create experience with specification-based delivery practices. + +### Implementation + +The following documents act as the source of truth: + +- specification.md +- decisions.md +- tasks.md + +GitHub Issues and Pull Requests should reference these documents whenever applicable. + +--- + +## Netlify Environment Strategy + +### Decision + +Services Page development will be validated through a dedicated Netlify staging environment connected to `services-dev`. + +### Reason + +This allows the team to: + +- Test independently of production. +- Validate functionality before merging. +- Review large features incrementally. + +### Implementation + +Production remains connected to `main`. + +Services staging remains connected to `services-dev`. \ No newline at end of file diff --git a/specs/services-page/references.md b/specs/services-page/references.md new file mode 100644 index 00000000..f1c3bb32 --- /dev/null +++ b/specs/services-page/references.md @@ -0,0 +1,130 @@ +# Services Page References + +## Design + +### Approved Mockups + +[Figma](https://www.figma.com/design/Fp0lLB5OWZLJseTs2svGbg/Web-Dev-Path_design?node-id=4813-12781&t=nFCiwC8KAHXakSmE-0) + + +### Page components doc + +[Google doc](https://docs.google.com/document/d/15evnvS0T8jMhE_mlp1IyIOEhWWKH7eaDwoKVWrLG9PM/edit?usp=sharing) + + +### Design Notes + +- Testimonials section is deferred. +- Hero form has been replaced by a Calendly CTA. +- Mobile and desktop layouts should follow the approved Figma mockups. +- Pricing values are pending research and team review. + +--- + +## Environments + +### Production + +https://www.webdevpath.co + +Purpose: + +Current production website. + +### Services Development Staging + +[NETLIFY_STAGING](https://services-dev-webdevpath.netlify.app/) + +Purpose: + +Dedicated environment for Services Page development and testing coming from +the branch `services-dev` + +### Main Staging + +--- + +## Integrations + +### Calendly + +[CALENDLY](https://calendly.com/marianacaldas/30-min) + +Purpose: + +Primary lead capture and discovery call booking flow. + +Notes: + +- Do not implement duplicate intake forms. +- Calendly should remain the primary scheduling mechanism. + +--- + +## GitHub + +### Repository + +https://github.com/Web-Dev-Path/web-dev-path + +### Services Page Specification + +/specs/services-page/specification.md + +### Services Page Decisions + +/specs/services-page/decisions.md + +### Services Page Tasks + +/specs/services-page/tasks.md + +### Services Page References + +/specs/services-page/references.md + +--- + +## Related Issues + +Add Services Page GitHub Issues here as they are created. + +Example: + +- Hero Section +- What We Offer Section +- How It Works Section +- Pricing Research +- Pricing Section +- Technology Stack Section + +--- + +## Pricing Research + +Purpose: + +Provide supporting information for future pricing decisions. + +Future Resources: + +- Competitor research +- Freelancer pricing research +- Agency pricing research +- Non-profit pricing considerations +- Recommended pricing proposal + +--- + +## Future Resources + +Reserved for: + +- Case studies +- Client testimonials +- Discovery call analytics +- Conversion metrics +- Additional design iterations +- Service package documentation + + diff --git a/specs/services-page/specification.md b/specs/services-page/specification.md new file mode 100644 index 00000000..bbd9ef42 --- /dev/null +++ b/specs/services-page/specification.md @@ -0,0 +1,270 @@ +# Services Page Specification + +## Problem + +Web Dev Path currently lacks a dedicated services page capable of clearly communicating our offerings and creating opportunities for potential clients to engage with the organization. + +Without a dedicated services page: + +- Potential clients have limited visibility into available services. +- Contributors have fewer opportunities to gain experience through real-world projects. +- Organizations interested in collaborating with Web Dev Path lack a clear path to start a conversation. +- The organization cannot effectively communicate its technical capabilities, process, or pricing approach. + +## Goal + +Create a responsive services page that: + +- Explains Web Dev Path's service offerings. +- Builds trust and credibility with potential clients. +- Demonstrates the team's technical capabilities. +- Provides transparent information about engagement options. +- Encourages discovery call bookings. +- Creates opportunities for contributors to gain experience through real client projects. + +## Project Context + +The Services page is part of Web Dev Path's effort to create opportunities for contributors to gain practical experience through real-world projects. + +In addition to supporting lead generation, the page should help establish a pathway for potential clients to engage with Web Dev Path and collaborate with contributors under the guidance of experienced team members. + +## Users + +### Small Business Owners + +- Need website development. +- Need technical support. +- Need affordable pricing. +- Need guidance through the development process. + +### Startup Founders + +- Need MVP development. +- Need product guidance. +- Need technical implementation. +- Need flexible collaboration. + +### Non-Profit Organizations + +- Need digital presence. +- Need community-focused solutions. +- Need affordable development support. + +--- + +## Functional Requirements + +### Hero Section + +#### Purpose + +Introduce the value proposition and encourage visitors to schedule a discovery call. + +#### Requirements + +- Display a primary headline. +- Display supporting copy. +- Display a primary CTA. +- Support desktop and mobile layouts. + +#### Constraints + +Do not implement custom intake form fields. + +Calendly already collects scheduling information. Requiring visitors to complete both a page form and Calendly creates duplicated data entry and unnecessary friction. + +#### CTA + +Primary CTA opens the Calendly booking flow. + +--- + +### What We Offer + +#### Purpose + +Present available service categories. + +#### Requirements + +Display service categories as cards or visual tags. + +#### Service Categories + +- Website Development +- Product Management +- UI / UX Design +- CRM Development +- CMS Development +- Mobile Development +- SEO Optimization +- Project Management + +--- + +### How It Works + +#### Purpose + +Explain the engagement process. + +#### Process Steps + +1. Share Your Project +2. Get Your Team +3. We Build Together +4. Project Launch + +--- + +### Why Choose Us + +#### Purpose + +Build trust and communicate differentiators. + +#### Content Areas + +##### Client-Centric Approach + +Focus on understanding client goals and delivering practical solutions. + +##### Talent Development Model + +Projects create opportunities for contributors to gain real-world experience while delivering value to clients. + +##### End-to-End Expertise + +Support clients throughout planning, design, development, and launch. + +--- + +### Technology Stack + +#### Purpose + +Demonstrate technical capabilities. + +#### Requirements + +Technology list should remain easy to update over time. + +--- + +### Testimonials + +#### Status + +Deferred. + +#### Reason + +The organization does not currently have sufficient completed client projects to support a testimonial section. + +#### Implementation + +No development work is required during the initial release. + +Design placeholders may remain in Figma. + +--- + +### Pricing + +#### Purpose + +Provide transparent starting pricing ranges. + +#### Requirements + +Display available pricing tiers. + +#### Constraints + +Pricing must be supported by market research before implementation. + +Research should consider: + +- Comparable agencies. +- Freelancers. +- Small business affordability. +- Web Dev Path operational capacity. +- Long-term sustainability. + +Pricing values should not be finalized until pricing research has been completed and reviewed with the team. + +--- + +### Discovery Call Section + +#### Purpose + +Provide a final conversion opportunity. + +#### Requirements + +- Display CTA. +- Open Calendly booking flow. +- Support responsive layouts. + +--- + +### Footer + +#### Requirements + +Use existing Web Dev Path footer patterns. + +--- + +## Non-Functional Requirements + +### Responsiveness + +- Desktop +- Tablet +- Mobile + +Layouts must follow approved Figma designs. + +### Accessibility + +- Interactive elements must remain keyboard accessible. +- Buttons and links must remain clearly identifiable. + +### Performance + +- Avoid unnecessary client-side complexity. +- Avoid animations that negatively impact performance. + +### Maintainability + +- Prefer reusable components whenever practical. +- Support future content updates with minimal code changes. + +--- + +## Out of Scope + +- Custom lead capture forms +- CRM integrations +- Automated proposal generation +- Client portals +- Testimonial functionality +- Payment processing + +--- + +## Acceptance Criteria + +The page is considered complete when: + +- All approved sections are implemented. +- Desktop layouts match approved Figma designs. +- Mobile layouts match approved Figma designs. +- Calendly integration is functional. +- No duplicated intake form exists. +- Testimonial functionality remains excluded from implementation. +- Responsive behavior works across supported screen sizes. +- Content is editable without major code changes. +- The page successfully deploys through the services-dev workflow. \ No newline at end of file diff --git a/specs/services-page/tasks.md b/specs/services-page/tasks.md new file mode 100644 index 00000000..6ddb76fa --- /dev/null +++ b/specs/services-page/tasks.md @@ -0,0 +1,175 @@ +# Services Page Tasks + +## Foundation + +- [ ] Create specification-driven development structure. +- [ ] Align team on specification-driven workflow. +- [ ] Reference specification files and how to use it under the Wikipedia. + +--- + +## Hero Section + +### Content + +- [ ] Finalize hero headline. +- [ ] Finalize hero supporting copy. +- [ ] Finalize discovery call messaging. + +### Development + +- [ ] Remove custom intake form fields. +- [ ] Add Calendly CTA button. +- [ ] Connect CTA to Calendly booking flow. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. + +### Validation + +- [ ] Verify Calendly flow works correctly. +- [ ] Verify no duplicate data entry exists. + +--- + +## What We Offer + +- [ ] Confirm service categories. +- [ ] Create service card component. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## How It Works + +- [ ] Review process messaging. +- [ ] Create process step component. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## Why Choose Us + +- [ ] Finalize section content. +- [ ] Create differentiator card component. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## Technology Stack + +- [ ] Confirm technology list. +- [ ] Create technology showcase component. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## Testimonials + +### Deferred + +- [ ] Collect client testimonials. +- [ ] Collect case studies. +- [ ] Reassess implementation after future projects are completed. + +--- + +## Pricing Research + +### Research + +- [ ] Research pricing models used by comparable agencies. +- [ ] Research pricing models used by freelancers. +- [ ] Research pricing models used by development consultancies. +- [ ] Research pricing for website development services. +- [ ] Research pricing for product management services. +- [ ] Research pricing for UI/UX services. +- [ ] Research pricing for CRM implementation services. +- [ ] Research pricing for CMS implementation services. + +### Analysis + +- [ ] Identify affordable pricing ranges. +- [ ] Assess operational feasibility. +- [ ] Assess sustainability of proposed pricing. + +### Team Review + +- [ ] Prepare pricing recommendation document. +- [ ] Present findings to the team. +- [ ] Collect feedback. +- [ ] Finalize pricing strategy. + +--- + +## Pricing Section + +### Dependency + +Pricing implementation must not begin until pricing research has been completed and approved. + +### Development + +- [ ] Finalize pricing tiers. +- [ ] Create pricing card component. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## Discovery Call Section + +- [ ] Finalize CTA copy. +- [ ] Implement CTA section. +- [ ] Connect CTA to Calendly. +- [ ] Implement desktop layout. +- [ ] Implement mobile layout. +- [ ] Validate responsive behavior. + +--- + +## Footer + +- [ ] Integrate existing footer. +- [ ] Validate navigation links. +- [ ] Validate responsive behavior. + +--- + +## Quality Assurance + +### Accessibility + +- [ ] Verify keyboard navigation. +- [ ] Verify button accessibility. +- [ ] Verify link accessibility. + +### Responsiveness + +- [ ] Test desktop layouts. +- [ ] Test tablet layouts. +- [ ] Test mobile layouts. + +### Performance + +- [ ] Review page performance. +- [ ] Review image optimization. +- [ ] Review animation performance. + +### Final Review + +- [ ] Validate implementation against specification.md. +- [ ] Validate implementation against decisions.md. +- [ ] Validate implementation against approved Figma designs. +- [ ] Obtain team approval. +- [ ] Merge `services-dev` into `main`. +- [ ] Validate deployment in staging. +- [ ] Validate deployment in production. From 83c3cf326ab2000abf8017c35d5e22e7d34b450f Mon Sep 17 00:00:00 2001 From: Mariana Caldas Date: Sun, 14 Jun 2026 20:46:38 -0700 Subject: [PATCH 2/5] Updating CHANGELOG --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 03db8081..1dedb228 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -232,6 +232,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added +- Introduced SDD structure for Services Page + ### Fixed ### Changed From ad31eedd229d6af490f7208bf4180c2c65b340bf Mon Sep 17 00:00:00 2001 From: Mariana Caldas Date: Sat, 11 Jul 2026 20:46:43 -0700 Subject: [PATCH 3/5] Updating SDD docs to include new Service page issues; Hero --- CHANGELOG.md | 1 + specs/services-page/references.md | 5 +++-- specs/services-page/tasks.md | 25 ++++--------------------- 3 files changed, 8 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1dedb228..f27fb910 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -233,6 +233,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added - Introduced SDD structure for Services Page +- Updated SDD docs to include new Service page issues ### Fixed diff --git a/specs/services-page/references.md b/specs/services-page/references.md index f1c3bb32..7d2330ab 100644 --- a/specs/services-page/references.md +++ b/specs/services-page/references.md @@ -7,9 +7,10 @@ [Figma](https://www.figma.com/design/Fp0lLB5OWZLJseTs2svGbg/Web-Dev-Path_design?node-id=4813-12781&t=nFCiwC8KAHXakSmE-0) -### Page components doc +### Google Docs -[Google doc](https://docs.google.com/document/d/15evnvS0T8jMhE_mlp1IyIOEhWWKH7eaDwoKVWrLG9PM/edit?usp=sharing) +[Components' Study and Architecture](https://docs.google.com/document/d/15evnvS0T8jMhE_mlp1IyIOEhWWKH7eaDwoKVWrLG9PM/edit?usp=sharing) +[Design System Doc](https://docs.google.com/document/d/16SaPlRJmAB6GCPcW4uo09owKVvkD0sgKm-BZzh0avEc/edit?usp=drive_link) ### Design Notes diff --git a/specs/services-page/tasks.md b/specs/services-page/tasks.md index 6ddb76fa..ffd88f86 100644 --- a/specs/services-page/tasks.md +++ b/specs/services-page/tasks.md @@ -2,32 +2,15 @@ ## Foundation -- [ ] Create specification-driven development structure. -- [ ] Align team on specification-driven workflow. -- [ ] Reference specification files and how to use it under the Wikipedia. +- [PR 306](https://github.com/Web-Dev-Path/web-dev-path/pull/306) Create specification-driven development structure. - DONE +- [Slack Convo](https://webdevpath.slack.com/archives/C09JD1SKVSQ/p1779164066044519) Align team on specification-driven workflow.- DONE +- [Issue 307](https://github.com/Web-Dev-Path/web-dev-path/issues/307) Reference specification files and how to use it under the Wikipedia. - IN PROGRESS --- ## Hero Section -### Content - -- [ ] Finalize hero headline. -- [ ] Finalize hero supporting copy. -- [ ] Finalize discovery call messaging. - -### Development - -- [ ] Remove custom intake form fields. -- [ ] Add Calendly CTA button. -- [ ] Connect CTA to Calendly booking flow. -- [ ] Implement desktop layout. -- [ ] Implement mobile layout. - -### Validation - -- [ ] Verify Calendly flow works correctly. -- [ ] Verify no duplicate data entry exists. +- [Issue #308](https://github.com/Web-Dev-Path/web-dev-path/issues/308) - IN PROGRESS --- From 3ead8fa72952b0fc1b6d1699a7839d4488323de6 Mon Sep 17 00:00:00 2001 From: Mariana Caldas Date: Sun, 12 Jul 2026 13:52:38 -0700 Subject: [PATCH 4/5] Adding final available GItHub issue links --- specs/services-page/references.md | 2 +- specs/services-page/tasks.md | 46 +++++++------------------------ 2 files changed, 11 insertions(+), 37 deletions(-) diff --git a/specs/services-page/references.md b/specs/services-page/references.md index 7d2330ab..0fa2c3da 100644 --- a/specs/services-page/references.md +++ b/specs/services-page/references.md @@ -9,7 +9,7 @@ ### Google Docs -[Components' Study and Architecture](https://docs.google.com/document/d/15evnvS0T8jMhE_mlp1IyIOEhWWKH7eaDwoKVWrLG9PM/edit?usp=sharing) +[Components' Study, Content, and Architecture](https://docs.google.com/document/d/15evnvS0T8jMhE_mlp1IyIOEhWWKH7eaDwoKVWrLG9PM/edit?usp=sharing) [Design System Doc](https://docs.google.com/document/d/16SaPlRJmAB6GCPcW4uo09owKVvkD0sgKm-BZzh0avEc/edit?usp=drive_link) diff --git a/specs/services-page/tasks.md b/specs/services-page/tasks.md index ffd88f86..42b4ab44 100644 --- a/specs/services-page/tasks.md +++ b/specs/services-page/tasks.md @@ -4,53 +4,38 @@ - [PR 306](https://github.com/Web-Dev-Path/web-dev-path/pull/306) Create specification-driven development structure. - DONE - [Slack Convo](https://webdevpath.slack.com/archives/C09JD1SKVSQ/p1779164066044519) Align team on specification-driven workflow.- DONE -- [Issue 307](https://github.com/Web-Dev-Path/web-dev-path/issues/307) Reference specification files and how to use it under the Wikipedia. - IN PROGRESS +- [Issue 307](https://github.com/Web-Dev-Path/web-dev-path/issues/307) Reference specification files and how to use it under the Wikipedia. - OPEN --- ## Hero Section -- [Issue #308](https://github.com/Web-Dev-Path/web-dev-path/issues/308) - IN PROGRESS +- [Issue #308](https://github.com/Web-Dev-Path/web-dev-path/issues/308) - OPEN + --- ## What We Offer -- [ ] Confirm service categories. -- [ ] Create service card component. -- [ ] Implement desktop layout. -- [ ] Implement mobile layout. -- [ ] Validate responsive behavior. +- [Issue #310](https://github.com/Web-Dev-Path/web-dev-path/issues/310) - OPEN --- ## How It Works -- [ ] Review process messaging. -- [ ] Create process step component. -- [ ] Implement desktop layout. -- [ ] Implement mobile layout. -- [ ] Validate responsive behavior. +- [Issue #311 ](https://github.com/Web-Dev-Path/web-dev-path/issues/311) - OPEN --- ## Why Choose Us -- [ ] Finalize section content. -- [ ] Create differentiator card component. -- [ ] Implement desktop layout. -- [ ] Implement mobile layout. -- [ ] Validate responsive behavior. +- [Issue #312](https://github.com/Web-Dev-Path/web-dev-path/issues/312) - OPEN --- -## Technology Stack +## Empowering Your Business with Modern Web & Team Solutions section (Technology Stack) -- [ ] Confirm technology list. -- [ ] Create technology showcase component. -- [ ] Implement desktop layout. -- [ ] Implement mobile layout. -- [ ] Validate responsive behavior. +- [Issue #313](https://github.com/Web-Dev-Path/web-dev-path/issues/313) --- @@ -108,22 +93,11 @@ Pricing implementation must not begin until pricing research has been completed --- -## Discovery Call Section +## Need More Info? Let's Schedule Your Discovery Call section (Discovery Call Section) -- [ ] Finalize CTA copy. -- [ ] Implement CTA section. -- [ ] Connect CTA to Calendly. -- [ ] Implement desktop layout. -- [ ] Implement mobile layout. -- [ ] Validate responsive behavior. - ---- +- [issue #314](https://github.com/Web-Dev-Path/web-dev-path/issues/314) - OPEN -## Footer -- [ ] Integrate existing footer. -- [ ] Validate navigation links. -- [ ] Validate responsive behavior. --- From bc22fbc00a6c2e816ac6e1006b5b1c62ea00ce56 Mon Sep 17 00:00:00 2001 From: Mariana Caldas Date: Sat, 18 Jul 2026 14:11:13 -0700 Subject: [PATCH 5/5] Adding Figma prototype link to docs --- specs/services-page/references.md | 1 + 1 file changed, 1 insertion(+) diff --git a/specs/services-page/references.md b/specs/services-page/references.md index 0fa2c3da..59690812 100644 --- a/specs/services-page/references.md +++ b/specs/services-page/references.md @@ -5,6 +5,7 @@ ### Approved Mockups [Figma](https://www.figma.com/design/Fp0lLB5OWZLJseTs2svGbg/Web-Dev-Path_design?node-id=4813-12781&t=nFCiwC8KAHXakSmE-0) +[Figma Prototypes: animations and behaviours](https://www.figma.com/proto/Fp0lLB5OWZLJseTs2svGbg/Web-Dev-Path_design?node-id=5354-12767&viewport=11375%2C-3827%2C0.23&t=fUPGkKi107ruYZK8-0&scaling=contain&content-scaling=fixed&starting-point-node-id=5354%3A12839&show-proto-sidebar=1) ### Google Docs