Update newsletter form to match latest Figma design

CHANGELOG.md

@@ -232,6 +232,12 @@ 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
 
+- Updated newsletter input and subscribe button styling to match the latest Figma design.
+- Improved newsletter component responsiveness across different screen sizes.
+
 ### Changed

components/NewsletterSubscribe/NewsletterForm/NewsletterForm.module.scss

@@ -60,27 +60,34 @@
 .input {
   display: block;
   font-size: 1.2rem;
-  border-radius: 1rem;
-  height: 2rem;
+  border-radius: 0.75rem;
+  min-height: 2.75rem;
   margin: 1rem 0;
-  padding: 1rem 1.25rem;
-  border: 1px solid var(--dark-bg);
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--bg-color);
   width: 100%;
 
   &::placeholder {
-    color: var(--color-primary-content);
+    color: var(--color-grey);
   }
 
   &:focus {
     outline: none;
   }
 
   @include large-desktop {
-    font-size: 1.5rem;
+    font-size: 1rem;
     height: 3rem;
     border-radius: 3rem;
     max-width: 25rem;
   }
+  @include desktop {
+    font-size: 0.9rem;
+    height: 2.5rem;
+    border-radius: 0.75rem;
+    min-width: 15rem;
+    padding: 0.75rem 1rem;
+  }
 }
 
 .inputName {

components/NewsletterSubscribe/NewsletterForm/index.js

@@ -112,36 +112,26 @@ const NewsletterForm = ({ getReCaptchaToken }) => {
   return (
     <section className={styles.section}>
       <Container className={styles.innerContainer}>
-        <h2 className={styles.title}>
-          Sign up for news
-          <span className={styles.rightChevron}>
-            <Image
-              src='/images/svg/right-chevron.svg'
-              height={18}
-              width={18}
-              alt='Right Chevron SVG'
-            />
-          </span>
-        </h2>
+        <h2 className={styles.title}>Sign up for news</h2>
         <div>
           <form className={styles.form} onSubmit={handleFormSubmit}>
-            <input
-              className={styles.inputName}
-              onChange={event => setName(event?.target?.value ?? '')}
-              type='text'
-              name='name'
-              value={name}
-              placeholder='name'
-            />
             <input
               className={styles.inputEmail}
               onChange={event => setEmail(event?.target?.value ?? '')}
               type='email'
               name='email'
               value={email}
-              placeholder='email'
+              placeholder='Enter Your Email'
               onKeyUp={event => handleInputKeyEvent(event)}
             />
+            <input
+              className={styles.inputName}
+              onChange={event => setName(event?.target?.value ?? '')}
+              type='text'
+              name='name'
+              value={name}
+              placeholder='Enter Your Name'
+            />
             <NewsLetterSubmitButton label='Subscribe' />
           </form>
 

components/buttons/SubmitButton/SubmitButton.module.scss

@@ -1,14 +1,17 @@
 @use '@/styles/mixins' as *;
 
 .submit-button {
-  padding: 0.3rem 0;
-  min-width: 12rem;
-  font-size: 1.2rem;
+  padding: 0.7rem 0;
+  width: 100%;
+  min-width: 0;
+  font-size: 1rem;
   color: var(--color-white);
   background-color: var(--color-primary-content);
   border-radius: 2rem;
   cursor: pointer;
-  font-weight: bold;
+  font-weight: 545;
+  line-height: 1;
+  letter-spacing: 0;
   text-align: center;
   display: block;
   border: 1px solid var(--color-primary-content);
@@ -33,17 +36,34 @@
   margin-left: auto;
   margin-right: auto;
   border-radius: 1.2rem;
-  background-color: var(--dark-bg);
+  background-color: var(--color-black);
+  border: 1px solid var(--dark-bg);
+  color: var(--color-white);
 
   &:hover {
+    background-color: transparent;
     color: var(--dark-bg);
     border: 1px solid var(--dark-bg);
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--dark-bg);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    opacity: 0.9;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   @include desktop {
     font-size: 1.2rem;
     min-width: 11rem;
-    padding: 0.3rem 0;
+    padding: 0.6rem 0;
   }
 
   @include large-desktop {

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`.