Skip to content

chore(website): add product showcase screenshots to landing page #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AmElmo merged 1 commit into from
Feb 25, 2026
Merged

chore(website): add product showcase screenshots to landing page #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 71 additions & 10 deletions website/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,16 +136,77 @@ export default function Home() {
</div>
</section>

{/* Second Screenshot */}
<section className={styles.screenshotSection}>
<div className={styles.screenshotWrap}>
<Image
src="/screenshots/screens_page.png"
alt="SpecWright — Specification viewer with screen definitions"
width={1200}
height={750}
className={styles.screenshot}
/>
{/* Product Showcase */}
<section className={styles.showcase}>
<div className={styles.showcaseRow}>
<div className={styles.showcaseImage}>
<Image
src="/screenshots/project_page.png"
alt="SpecWright — Project dashboard"
width={1200}
height={750}
/>
</div>
<div className={styles.showcaseText}>
<h3>All your projects at a glance</h3>
<p>
Track every project from a single dashboard. See progress, status, and jump into any
spec instantly.
</p>
</div>
</div>

<div className={styles.showcaseRowReverse}>
<div className={styles.showcaseImage}>
<Image
src="/screenshots/screens_page.png"
alt="SpecWright — Screen specifications"
width={1200}
height={750}
/>
</div>
<div className={styles.showcaseText}>
<h3>Detailed screen specifications</h3>
<p>
Every screen defined with wireframes, interactions, and edge cases — before a single
line of code is written.
</p>
</div>
</div>

<div className={styles.showcaseRow}>
<div className={styles.showcaseImage}>
<Image
src="/screenshots/technology_choices.png"
alt="SpecWright — Technology choices with rationale"
width={1200}
height={750}
/>
</div>
<div className={styles.showcaseText}>
<h3>Informed technology decisions</h3>
<p>
Compare libraries and frameworks with pros, cons, and rationale. Every choice
documented and justified.
</p>
</div>
</div>

<div className={styles.showcaseRowReverse}>
<div className={styles.showcaseImage}>
<Image
src="/screenshots/acceptance_criteria.png"
alt="SpecWright — Acceptance criteria with job stories"
width={1200}
height={750}
/>
</div>
<div className={styles.showcaseText}>
<h3>Clear acceptance criteria</h3>
<p>
Job stories with testable conditions so every feature has a clear definition of done.
</p>
</div>
</div>
</section>

Expand Down
73 changes: 73 additions & 0 deletions website/styles/home.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,64 @@
margin: 0;
}

/* ── Showcase ── */
.showcase {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 2rem 4rem;
display: flex;
flex-direction: column;
gap: 4rem;
}

.showcaseRow {
display: flex;
align-items: center;
gap: 3rem;
}

.showcaseRowReverse {
composes: showcaseRow;
flex-direction: row-reverse;
}

.showcaseImage {
flex: 3;
min-width: 0;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06),
0 25px 80px -12px rgba(99, 102, 241, 0.15),
0 8px 32px -8px rgba(0, 0, 0, 0.5);
}

.showcaseImage img {
display: block;
width: 100%;
height: auto;
}

.showcaseText {
flex: 2;
min-width: 0;
}

.showcaseText h3 {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
color: #fafafa;
}

.showcaseText p {
font-size: 0.95rem;
line-height: 1.6;
color: #71717a;
margin: 0;
}

/* ── Workflow ── */
.workflow {
max-width: 640px;
Expand Down Expand Up @@ -407,6 +465,21 @@
padding: 2rem 1.5rem 3rem;
}

.showcase {
padding: 1.5rem 1.5rem 3rem;
gap: 3rem;
}

.showcaseRow,
.showcaseRowReverse {
flex-direction: column;
gap: 1.5rem;
}

.showcaseText {
text-align: center;
}

.workflow {
padding: 3rem 1.5rem;
}
Expand Down
Loading