2025-12-04 17:34:22 -08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > PLAN2CODE - AI Development with Purpose< / title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo+Black&family=Inter:wght@300;400;600;700&display=swap" rel = "stylesheet" >
2025-12-04 21:30:41 -08:00
< link rel = "icon" type = "image/ico" href = "favicon.ico" >
2025-12-04 17:34:22 -08:00
< style >
* {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
: root {
--accent : #0ea5e9 ;
--accent-glow : rgba ( 14 , 165 , 233 , 0.3 ) ;
--black : #000000 ;
--white : #ffffff ;
--gray : #a3a3a3 ;
--dark-gray : #171717 ;
--red : #a70c0c ;
}
body {
font-family : 'Inter' , sans-serif ;
background : var ( - - white ) ;
color : var ( - - black ) ;
overflow-x : hidden ;
}
2025-12-04 20:28:25 -08:00
a . -plain {
color : inherit !important ;
text-decoration : none !important ;
}
2025-12-04 17:34:22 -08:00
. headline {
font-family : 'Bebas Neue' , sans-serif ;
letter-spacing : 0.02 em ;
line-height : 0.9 ;
}
. subheadline {
font-family : 'Archivo Black' , sans-serif ;
letter-spacing : -0.02 em ;
line-height : 1 ;
}
/* Hero Section - INVERTED */
. hero {
height : 100 vh ;
display : grid ;
grid-template-columns : 1 fr 1 fr ;
position : relative ;
}
. hero-left {
background : var ( - - white ) ;
color : var ( - - black ) ;
display : flex ;
flex-direction : column ;
justify-content : center ;
padding : 4 rem ;
position : relative ;
overflow : hidden ;
}
. hero-left :: before {
content : '' ;
position : absolute ;
top : -50 % ;
right : -20 % ;
width : 80 % ;
height : 200 % ;
background : var ( - - accent ) ;
opacity : 0.1 ;
transform : rotate ( 15 deg ) ;
animation : pulseGlow 8 s ease-in-out infinite ;
}
@ keyframes pulseGlow {
0 % , 100 % { opacity : 0.1 ; transform : rotate ( 15 deg ) scale ( 1 ) ; }
50 % { opacity : 0.15 ; transform : rotate ( 15 deg ) scale ( 1.05 ) ; }
}
. hero-title {
position : relative ;
z-index : 1 ;
}
. hero-title h1 {
font-size : clamp ( 4 rem , 15 vw , 12 rem ) ;
margin : 0 ;
line-height : 0.85 ;
animation : slideInLeft 1 s ease-out ;
}
. hero-title . plan {
color : var ( - - black ) ;
display : block ;
}
. hero-title . two {
color : var ( - - accent ) ;
display : block ;
margin-left : 2 rem ;
animation : slideInLeft 1 s ease-out 0.2 s backwards ;
}
. hero-title . code {
color : var ( - - black ) ;
display : block ;
animation : slideInLeft 1 s ease-out 0.4 s backwards ;
}
@ keyframes slideInLeft {
from {
opacity : 0 ;
transform : translateX ( -50 px ) ;
}
to {
opacity : 1 ;
transform : translateX ( 0 ) ;
}
}
. hero-subtitle {
font-size : clamp ( 1 rem , 2 vw , 1.5 rem ) ;
margin-top : 3 rem ;
font-weight : 300 ;
letter-spacing : 0.05 em ;
text-transform : uppercase ;
position : relative ;
z-index : 1 ;
animation : fadeIn 1 s ease-out 0.8 s backwards ;
}
@ keyframes fadeIn {
from { opacity : 0 ; }
to { opacity : 1 ; }
}
. hero-right {
background : var ( - - black ) ;
position : relative ;
overflow : hidden ;
}
. geometric-shape {
position : absolute ;
animation : float 6 s ease-in-out infinite ;
}
@ keyframes float {
0 % , 100 % { transform : translate ( 0 , 0 ) rotate ( 0 deg ) ; }
50 % { transform : translate ( 20 px , -20 px ) rotate ( 5 deg ) ; }
}
. shape-1 {
width : 300 px ;
height : 300 px ;
background : var ( - - accent ) ;
top : 10 % ;
right : 15 % ;
clip-path : polygon ( 50 % 0 % , 100 % 50 % , 50 % 100 % , 0 % 50 % ) ;
opacity : 0.8 ;
animation-delay : 0 s ;
}
. shape-2 {
width : 200 px ;
height : 200 px ;
bottom : 20 % ;
left : 10 % ;
animation-delay : 1 s ;
background : transparent ;
position : absolute ;
}
. shape-2 :: before {
content : '' ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
clip-path : polygon ( 50 % 0 % , 100 % 100 % , 0 % 100 % ) ;
background : var ( - - white ) ;
}
. shape-2 :: after {
content : '' ;
position : absolute ;
top : 20 px ;
left : 20 px ;
width : calc ( 100 % - 40 px ) ;
height : calc ( 100 % - 40 px ) ;
clip-path : polygon ( 50 % 0 % , 100 % 100 % , 0 % 100 % ) ;
background : var ( - - black ) ;
}
. shape-3 {
width : 150 px ;
height : 150 px ;
background : var ( - - white ) ;
top : 40 % ;
left : 20 % ;
border-radius : 50 % ;
opacity : 0.3 ;
animation-delay : 2 s ;
}
. shape-4 {
width : 250 px ;
height : 250 px ;
border : 15 px solid var ( - - accent ) ;
bottom : 10 % ;
right : 20 % ;
transform : rotate ( 45 deg ) ;
animation-delay : 1.5 s ;
}
/* Problem Section */
. problem {
min-height : 60 vh ;
display : flex ;
align-items : center ;
justify-content : center ;
padding : 8 rem 4 rem ;
background : var ( - - black ) ;
color : var ( - - white ) ;
position : relative ;
overflow : hidden ;
text-align : center ;
}
. problem :: before {
content : '' ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
background : linear-gradient ( 135 deg , transparent 40 % , var ( - - accent ) 100 % ) ;
opacity : 0.1 ;
}
. problem-text {
font-size : clamp ( 2 rem , 6 vw , 5 rem ) ;
max-width : 1400 px ;
font-weight : 700 ;
line-height : 1.2 ;
position : relative ;
z-index : 1 ;
opacity : 0 ;
transform : translateY ( 30 px ) ;
transition : all 1 s ease-out ;
}
. problem-text . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
. problem-text . highlight {
color : var ( - - accent ) ;
font-style : italic ;
}
. accent {
color : var ( - - accent ) ;
}
. gray {
color : var ( - - gray ) ;
}
. code-line {
font-family : 'Courier New' , Courier , monospace ;
color : var ( - - accent ) ;
white-space : nowrap ;
}
2025-12-23 15:42:35 -08:00
. code-block {
font-family : 'Courier New' , Courier , monospace ;
background : var ( - - dark - gray ) ;
color : var ( - - white ) ;
padding : 1.5 rem ;
border-radius : 8 px ;
margin-top : 1 rem ;
overflow-x : auto ;
font-size : 0.9 rem ;
line-height : 1.6 ;
font-weight : 400 ;
display : inline-block ;
}
. code-block . comment {
color : var ( - - gray ) ;
}
. code-block . command {
color : var ( - - accent ) ;
}
2025-12-04 17:34:22 -08:00
. code-list {
list-style : auto ;
margin-left : 40 px ;
}
. code-list li :: marker {
color : var ( - - gray ) ;
}
. github-link {
display : inline-flex ;
align-items : center ;
gap : 0.5 rem ;
margin-top : 2 rem ;
padding : 1 rem 1.5 rem ;
background : var ( - - black ) ;
color : var ( - - white ) ;
text-decoration : none ;
font-weight : 600 ;
letter-spacing : 0.05 em ;
text-transform : uppercase ;
font-size : 0.875 rem ;
position : relative ;
z-index : 1 ;
transition : all 0.3 s ease ;
animation : fadeIn 1 s ease-out 1 s backwards ;
}
. github-link : hover {
background : var ( - - accent ) ;
transform : translateX ( 5 px ) ;
}
. github-icon {
width : 1.25 rem ;
height : 1.25 rem ;
}
. inline-link {
display : inline-block ;
margin-top : 1 rem ;
color : var ( - - accent ) ;
text-decoration : none ;
font-weight : 600 ;
transition : all 0.3 s ease ;
}
. inline-link : hover {
color : var ( - - black ) ;
transform : translateX ( 5 px ) ;
}
/* Steps Section - INVERTED PATTERN */
. step {
min-height : 80 vh ;
display : flex ;
align-items : center ;
justify-content : center ;
}
. step-content {
display : flex ;
flex-direction : column ;
justify-content : center ;
padding : 6 rem 4 rem ;
max-width : 900 px ;
width : 100 % ;
opacity : 0 ;
transform : translateY ( 50 px ) ;
transition : all 0.8 s ease-out ;
}
. step-content . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
. step-header {
display : flex ;
align-items : center ;
gap : 2 rem ;
margin-bottom : 2 rem ;
}
. step-number {
font-size : clamp ( 5 rem , 10 vw , 8 rem ) ;
line-height : 1 ;
opacity : 0.5 ;
}
. step-icon {
font-size : clamp ( 3 rem , 6 vw , 5 rem ) ;
}
. step-title {
font-size : clamp ( 2 rem , 4 vw , 3.5 rem ) ;
margin-bottom : 2 rem ;
line-height : 1.1 ;
}
. step-description {
font-size : 1.125 rem ;
line-height : 1.8 ;
margin-bottom : 2 rem ;
font-weight : 300 ;
}
. step-points {
list-style : none ;
margin-top : 2 rem ;
}
. step-points li {
font-size : 1 rem ;
padding : 1 rem 0 ;
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.1 ) ;
position : relative ;
padding-left : 2 rem ;
}
. step-points li :: before {
content : '→' ;
position : absolute ;
left : 0 ;
color : var ( - - accent ) ;
font-weight : 700 ;
}
/* Alternating step backgrounds */
. step : nth-child ( odd ) { background : var ( - - white ) ; color : var ( - - black ) ; }
. step : nth-child ( odd ) . step-points li { border-bottom-color : rgba ( 0 , 0 , 0 , 0.1 ) ; }
. step : nth-child ( even ) { background : var ( - - black ) ; color : var ( - - white ) ; }
. step : nth-child ( even ) . step-points li { border-bottom-color : rgba ( 255 , 255 , 255 , 0.1 ) ; }
/* Numbers Section */
. numbers {
padding : 6 rem 2 rem ;
background : var ( - - white ) ;
position : relative ;
overflow-x : auto ;
}
. numbers-grid {
display : flex ;
justify-content : space-between ;
align-items : center ;
gap : 2 rem ;
max-width : 1400 px ;
margin : 0 auto ;
min-width : max-content ;
}
. number-item {
text-align : center ;
opacity : 0 ;
transform : translateY ( 30 px ) ;
transition : all 0.6 s ease-out ;
flex : 1 ;
min-width : 150 px ;
}
. number-item . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
. number-value {
font-size : clamp ( 4 rem , 8 vw , 7 rem ) ;
line-height : 1 ;
color : var ( - - accent ) ;
margin-bottom : 0.5 rem ;
transition : transform 0.3 s ease ;
}
. number-value . -red {
color : var ( - - red ) ;
}
. number-item : hover . number-value {
transform : scale ( 1.1 ) ;
}
. number-label {
font-size : clamp ( 0.75 rem , 1.5 vw , 1 rem ) ;
font-weight : 600 ;
text-transform : uppercase ;
letter-spacing : 0.05 em ;
white-space : nowrap ;
}
/* Before/After Section - INVERTED */
. comparison {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
min-height : 100 vh ;
}
. comparison-side {
padding : 6 rem 4 rem ;
display : flex ;
flex-direction : column ;
justify-content : center ;
opacity : 0 ;
transition : all 0.8 s ease-out ;
}
. comparison-side . visible {
opacity : 1 ;
}
. comparison-before {
background : var ( - - black ) ;
color : var ( - - white ) ;
position : relative ;
overflow : hidden ;
}
. comparison-before :: before {
content : '' ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
background : repeating-linear-gradient (
45 deg ,
transparent ,
transparent 10 px ,
rgba ( 14 , 165 , 233 , 0.08 ) 10 px ,
rgba ( 14 , 165 , 233 , 0.08 ) 20 px
) ;
}
. comparison-after {
background : var ( - - white ) ;
color : var ( - - black ) ;
position : relative ;
}
. comparison-title {
font-size : clamp ( 2.5 rem , 5 vw , 4 rem ) ;
margin-bottom : 2 rem ;
position : relative ;
z-index : 1 ;
}
. comparison-list {
list-style : none ;
font-size : 1.125 rem ;
line-height : 2 ;
position : relative ;
z-index : 1 ;
}
. comparison-list li {
padding : 1 rem 0 ;
padding-left : 2 rem ;
position : relative ;
}
. comparison-before . comparison-list li :: before {
content : '✗' ;
position : absolute ;
left : 0 ;
color : #fb7185 ;
font-weight : 700 ;
}
. comparison-after . comparison-list li :: before {
content : '✓' ;
position : absolute ;
left : 0 ;
color : var ( - - accent ) ;
font-weight : 700 ;
}
. comparison-after . comparison-list li {
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.1 ) ;
}
/* How To Start Section */
. how-to-start {
padding : 8 rem 4 rem ;
background : var ( - - white ) ;
color : var ( - - black ) ;
}
. how-to-start-title {
font-size : clamp ( 3 rem , 6 vw , 5 rem ) ;
text-align : center ;
margin-bottom : 6 rem ;
opacity : 0 ;
transform : translateY ( 30 px ) ;
transition : all 0.8 s ease-out ;
}
. how-to-start-title . visible {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
. steps-list {
max-width : 1200 px ;
margin : 0 auto ;
display : grid ;
gap : 3 rem ;
}
. start-step {
display : grid ;
grid-template-columns : auto 1 fr ;
gap : 3 rem ;
align-items : start ;
opacity : 0 ;
transform : translateX ( -50 px ) ;
transition : all 0.6 s ease-out ;
padding : 2 rem ;
border-left : 4 px solid transparent ;
transition : all 0.6 s ease-out , border-color 0.3 s ease ;
}
. start-step . visible {
opacity : 1 ;
transform : translateX ( 0 ) ;
}
. start-step : hover {
border-left-color : var ( - - accent ) ;
transform : translateX ( 10 px ) ;
}
. start-step-number {
font-size : clamp ( 4 rem , 8 vw , 6 rem ) ;
line-height : 1 ;
color : var ( - - accent ) ;
font-weight : 700 ;
min-width : 150 px ;
}
. start-step-content h3 {
font-size : clamp ( 1.5 rem , 3 vw , 2.5 rem ) ;
margin-bottom : 1 rem ;
}
. start-step-content p {
font-size : 1.125 rem ;
line-height : 1.8 ;
font-weight : 300 ;
color : var ( - - gray ) ;
}
2025-12-23 15:42:35 -08:00
. install-screenshot {
margin-top : 2 rem ;
border-radius : 8 px ;
overflow : hidden ;
box-shadow : 0 10 px 40 px rgba ( 0 , 0 , 0 , 0.3 ) ;
border : 1 px solid rgba ( 85 , 96 , 247 , 0.3 ) ;
display : inline-block ;
}
. install-screenshot img {
display : block ;
max-width : 100 % ;
height : auto ;
}
2025-12-04 17:34:22 -08:00
/* CTA Section - INVERTED */
. cta {
min-height : 100 vh ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
background : var ( - - black ) ;
position : relative ;
overflow : hidden ;
padding : 4 rem ;
}
. cta :: before {
content : '' ;
position : absolute ;
top : -50 % ;
left : -50 % ;
width : 200 % ;
height : 200 % ;
background : radial-gradient ( circle , var ( - - accent - glow ) 0 % , transparent 70 % ) ;
animation : rotate 20 s linear infinite ;
}
@ keyframes rotate {
from { transform : rotate ( 0 deg ) ; }
to { transform : rotate ( 360 deg ) ; }
}
. cta-text {
font-size : clamp ( 4 rem , 10 vw , 10 rem ) ;
text-align : center ;
margin-bottom : 3 rem ;
position : relative ;
z-index : 1 ;
cursor : pointer ;
transition : all 0.3 s ease ;
opacity : 0 ;
transform : scale ( 0.9 ) ;
animation : scaleIn 1 s ease-out 0.5 s forwards ;
color : var ( - - white ) ;
}
@ keyframes scaleIn {
to {
opacity : 1 ;
transform : scale ( 1 ) ;
}
}
. cta-text : hover {
color : var ( - - accent ) ;
transform : scale ( 1.05 ) ;
text-shadow : 0 0 40 px var ( - - accent - glow ) ;
}
. cta-button {
display : inline-block ;
background : var ( - - white ) ;
color : var ( - - black ) ;
border : none ;
padding : 2 rem 4 rem ;
font-size : 1.5 rem ;
font-weight : 700 ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
text-decoration : none ;
cursor : pointer ;
position : relative ;
z-index : 1 ;
overflow : hidden ;
transition : all 0.3 s ease ;
opacity : 0 ;
animation : fadeInUp 1 s ease-out 1 s forwards ;
}
@ keyframes fadeInUp {
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
from {
opacity : 0 ;
transform : translateY ( 20 px ) ;
}
}
. cta-button :: before {
content : '' ;
position : absolute ;
top : 0 ;
left : -100 % ;
width : 100 % ;
height : 100 % ;
background : var ( - - accent ) ;
transition : left 0.5 s ease ;
z-index : -1 ;
}
. cta-button : hover :: before {
left : 0 ;
}
. cta-button : hover {
transform : scale ( 1.05 ) ;
box-shadow : 0 10 px 40 px var ( - - accent - glow ) ;
color : var ( - - white ) ;
}
. cta-subtext {
margin-top : 2 rem ;
font-size : 1 rem ;
color : var ( - - gray ) ;
text-align : center ;
position : relative ;
z-index : 1 ;
opacity : 0 ;
animation : fadeIn 1 s ease-out 1.5 s forwards ;
}
/* Mobile Responsive */
@ media ( max-width : 768px ) {
. hero ,
. comparison {
grid-template-columns : 1 fr ;
}
. hero {
height : auto ;
}
. hero-left ,
. hero-right {
min-height : 50 vh ;
}
. step {
min-height : auto ;
}
. step-content {
padding : 4 rem 2 rem ;
}
. step-header {
flex-direction : column ;
gap : 1 rem ;
align-items : flex-start ;
}
. numbers {
padding : 4 rem 1 rem ;
}
. numbers-grid {
flex-wrap : wrap ;
justify-content : center ;
}
. number-item {
min-width : 120 px ;
}
. start-step {
grid-template-columns : 1 fr ;
gap : 1 rem ;
}
. start-step-number {
min-width : auto ;
}
. cta-button {
padding : 1.5 rem 3 rem ;
font-size : 1.25 rem ;
}
}
/* Scroll Indicator */
. scroll-indicator {
position : absolute ;
bottom : 2 rem ;
left : 50 % ;
transform : translateX ( -50 % ) ;
z-index : 10 ;
animation : scrollBounce 2 s ease-in-out infinite ;
}
@ keyframes scrollBounce {
0 % , 100 % { transform : translateX ( -50 % ) translateY ( 0 ) ; }
50 % { transform : translateX ( -50 % ) translateY ( 10 px ) ; }
}
. scroll-indicator :: before {
content : '↓' ;
font-size : 2 rem ;
color : var ( - - black ) ;
}
/* Accessibility */
@ media ( prefers-reduced-motion : reduce ) {
* ,
* :: before ,
* :: after {
animation-duration : 0.01 ms !important ;
animation-iteration-count : 1 !important ;
transition-duration : 0.01 ms !important ;
}
}
/* High Contrast Mode Support */
@ media ( prefers-contrast : high ) {
: root {
--accent : #38bdf8 ;
}
. step-points li ,
. comparison-list li {
border-bottom-width : 2 px ;
}
}
< / style >
< / head >
< body >
<!-- Hero Section -->
< section class = "hero" >
< div class = "hero-left" >
< div class = "hero-title headline" >
< h1 class = "plan" > PLAN< / h1 >
< h1 class = "two" > 2< / h1 >
< h1 class = "code" > CODE< / h1 >
< / div >
< p class = "hero-subtitle" > The AI workflow that puts planning first< / p >
< a href = "https://github.com/jparkerweb/plan2code" class = "github-link" target = "_blank" rel = "noopener noreferrer" >
< svg class = "github-icon" viewBox = "0 0 24 24" fill = "currentColor" > < path d = "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" / > < / svg >
2025-12-23 15:42:35 -08:00
Get the Code
2025-12-04 17:34:22 -08:00
< / a >
< / div >
< div class = "hero-right" >
< div class = "geometric-shape shape-1" > < / div >
< div class = "geometric-shape shape-2" > < / div >
< div class = "geometric-shape shape-3" > < / div >
< div class = "geometric-shape shape-4" > < / div >
< / div >
< div class = "scroll-indicator" > < / div >
< / section >
<!-- Problem Section -->
< section class = "problem" >
< h2 class = "problem-text" >
AI development without a plan is just < span class = "highlight" > expensive typing< / span >
< / h2 >
< / section >
<!-- Steps Section -->
< section class = "step" >
< div class = "step-content" >
< div class = "step-header" >
< div class = "step-number headline" > 01< / div >
< div class = "step-icon" > 🤔< / div >
< / div >
< h2 class = "step-title subheadline" > Plan< / h2 >
< p class = "step-description" >
Have natural back and forth conversations with AI to analyze your requirements and design the solution. Iterate until you reach a minimum of 90% confidence in your agreed upon plan.
< / p >
< ul class = "step-points" >
< li > Extract functional and non-functional requirements< / li >
< li > Examine existing codebase and integration points if applicable< / li >
< li > Confirm tech stack with explicit approval< / li >
< li > Design architecture, interfaces, and schemas< / li >
< / ul >
< / div >
< / section >
< section class = "step" >
< div class = "step-content" >
< div class = "step-header" >
< div class = "step-number headline" > 02< / div >
< div class = "step-icon" > 📝< / div >
< / div >
< h2 class = "step-title subheadline" > Document< / h2 >
< p class = "step-description" >
Transform your plan into structured, actionable implementation specs. Break work into phases with clear tasks any developer could follow.
< / p >
< ul class = "step-points" >
< li > Create phase-by-phase implementation plan< / li >
< li > Define one-story-point tasks with checkboxes< / li >
< li > Each phase is self-contained for fresh context< / li >
< li > Generate `overview.md` and `Phase X.md` files< / li >
< li > Enables tracking progress for each task and phase< / li >
< / ul >
< / div >
< / section >
< section class = "step" >
< div class = "step-content" >
< div class = "step-header" >
< div class = "step-number headline" > 03< / div >
< div class = "step-icon" style = "color: var(--accent);" > ⚡< / div >
< / div >
< h2 class = "step-title subheadline" > Implement< / h2 >
< p class = "step-description" >
Execute the implementation following specs exactly. By following one phase per conversation, context is kept clean, focused, and efficient.
< / p >
< ul class = "step-points" >
< li > With resumeable context enabled by progress tracking, start a fresh conversation for each phase< / li >
< li > Follow specifications exactly as documented< / li >
< li > Update progress for each task as it completes< / li >
< li > Code review before marking a phase complete< / li >
< / ul >
< / div >
< / section >
< section class = "step" >
< div class = "step-content" >
< div class = "step-header" >
< div class = "step-number headline" > 04< / div >
< div class = "step-icon" > 🧹< / div >
< / div >
< h2 class = "step-title subheadline" > Finalize< / h2 >
< p class = "step-description" >
Validate the implementation, create summaries, and archive documentation. Ensure nothing was missed and the project is properly closed out.
< / p >
< ul class = "step-points" >
< li > Audit all tasks for completion< / li >
< li > Document what was built and files changed< / li >
< li > Review if `README.md` or other docs need updates< / li >
< li > Archive specs to completed folder for future reference< / li >
< / ul >
< / div >
< / section >
<!-- Numbers Section -->
< section class = "numbers" >
< div class = "numbers-grid" >
< div class = "number-item" >
< div class = "number-value headline" > 4< / div >
< div class = "number-label" > Structured phases< / div >
< / div >
< div class = "number-item" >
< div class = "number-value headline" > ✓< / div >
< div class = "number-label" > Confidence before code< / div >
< / div >
< div class = "number-item" >
< div class = "number-value headline" > 1< / div >
< div class = "number-label" > Conversation per phase< / div >
< / div >
< div class = "number-item" >
< div class = "number-value headline -red" > 0< / div >
< div class = "number-label" > Context pollution< / div >
< / div >
< / div >
< / section >
<!-- Before/After Section -->
< section class = "comparison" >
< div class = "comparison-side comparison-before" >
< h2 class = "comparison-title subheadline" > THE CHAOS< / h2 >
< ul class = "comparison-list" >
< li > Start coding immediately< / li >
< li > Discover issues mid-implementation< / li >
< li > Constant backtracking and refactoring< / li >
< li > Bloated context with dead ends< / li >
< li > Unclear if requirements are met< / li >
< li > Expensive AI tokens on trial & error< / li >
< li > Low confidence in the final result< / li >
< / ul >
< / div >
< div class = "comparison-side comparison-after" >
< h2 class = "comparison-title subheadline" > THE CLARITY< / h2 >
< ul class = "comparison-list" >
< li > Complete plan before coding< / li >
< li > Issues caught during design< / li >
< li > Implementation follows blueprint< / li >
< li > Clean, focused context per phase< / li >
< li > Clear success criteria validated< / li >
< li > Efficient AI assistance throughout< / li >
< li > Ship with total confidence< / li >
< / ul >
< / div >
< / section >
<!-- How To Start Section -->
< section class = "how-to-start" >
< h2 class = "how-to-start-title headline" > HOW TO START< / h2 >
< div class = "steps-list" >
< div class = "start-step" >
< div class = "start-step-number headline" > 01< / div >
< div class = "start-step-content" >
< h3 class = "subheadline" > Install the workflow< / h3 >
2025-12-23 15:42:35 -08:00
< p > Run the install script to copy the Plan2Code prompts to your AI assistant workflow directories. Works with Claude Code, Cursor, GitHub Copilot, Windsurf, and more.< / p >
< pre class = "code-block" > < span class = "comment" > # Clone the repository< / span >
< span class = "command" > git clone https://github.com/jparkerweb/plan2code.git< / span >
< span class = "comment" > # Navigate to the directory< / span >
< span class = "command" > cd plan2code< / span >
< span class = "comment" > # Run the interactive installer< / span >
< span class = "command" > node install.js< / span > < / pre >
< p > < a href = "https://github.com/jparkerweb/plan2code" class = "inline-link" target = "_blank" rel = "noopener noreferrer" > Get the Code → < / a > < / p >
< div class = "install-screenshot" >
< img src = "install-script.jpg" alt = "Plan2Code global installation terminal interface showing platform selection menu" >
< / div >
2025-12-04 17:34:22 -08:00
< / div >
< / div >
< div class = "start-step" >
< div class = "start-step-number headline" > 02< / div >
< div class = "start-step-content" >
< h3 class = "subheadline" > Start a new chat with < span class = "code-line" > /plan2code-1--plan< / span > < / h3 >
< p > Describe your feature or project. The AI will work through planning phases until reaching 90% confidence in the solution.< / p >
< / div >
< / div >
< div class = "start-step" >
< div class = "start-step-number headline" > 03< / div >
< div class = "start-step-content" >
< h3 class = "subheadline" > Follow the 4-step workflow< / h3 >
< p > New conversation for each step:< / p >
< ul class = "code-list" >
< li > < span class = "code-line" > /plan2code-1--plan< / span > < / li >
< li > < span class = "code-line" > /plan2code-2--document< / span > < / li >
< li > < span class = "code-line" > /plan2code-3--implement< / span > < span class = "gray" > (per phase)< / span > < / li >
< li > < span class = "code-line" > /plan2code-4--finalize< / span > < / li >
< / ul >
< br >
< p > Clean context, maximum clarity!< / p >
< / div >
< / div >
< / div >
< / section >
<!-- CTA Section -->
< section class = "cta" >
2025-12-04 20:28:25 -08:00
< h2 class = "cta-text headline" > < a class = "-plain" href = "https://github.com/jparkerweb/plan2code" > START< br > PLANNING< br > NOW< / a > < / h2 >
2025-12-23 15:42:35 -08:00
< a href = "https://github.com/jparkerweb/plan2code" class = "cta-button" target = "_blank" rel = "noopener noreferrer" > GET THE CODE< / a >
< p class = "cta-subtext" > Transform your AI development workflow today< / p >
2025-12-04 17:34:22 -08:00
< / section >
< script >
// Intersection Observer for scroll animations
const observerOptions = {
threshold : 0.2 ,
rootMargin : '0px 0px -100px 0px'
} ;
const observer = new IntersectionObserver ( ( entries ) => {
entries . forEach ( entry => {
if ( entry . isIntersecting ) {
entry . target . classList . add ( 'visible' ) ;
}
} ) ;
} , observerOptions ) ;
// Observe all animated elements
document . addEventListener ( 'DOMContentLoaded' , ( ) => {
const animatedElements = document . querySelectorAll (
'.problem-text, .step-content, .number-item, .comparison-side, .how-to-start-title, .start-step'
) ;
animatedElements . forEach ( el => observer . observe ( el ) ) ;
// Stagger animation for number items
const numberItems = document . querySelectorAll ( '.number-item' ) ;
numberItems . forEach ( ( item , index ) => {
item . style . transitionDelay = ` ${ index * 0.1 } s ` ;
} ) ;
// Stagger animation for start steps
const startSteps = document . querySelectorAll ( '.start-step' ) ;
startSteps . forEach ( ( step , index ) => {
step . style . transitionDelay = ` ${ index * 0.2 } s ` ;
} ) ;
// Hide scroll indicator after scrolling
let scrolled = false ;
window . addEventListener ( 'scroll' , ( ) => {
if ( ! scrolled && window . scrollY > 100 ) {
const indicator = document . querySelector ( '.scroll-indicator' ) ;
if ( indicator ) {
indicator . style . opacity = '0' ;
indicator . style . transition = 'opacity 0.5s ease' ;
scrolled = true ;
}
}
} ) ;
// Parallax effect for hero shapes
const shapes = document . querySelectorAll ( '.geometric-shape' ) ;
window . addEventListener ( 'scroll' , ( ) => {
const scrolled = window . scrollY ;
shapes . forEach ( ( shape , index ) => {
const speed = ( index + 1 ) * 0.1 ;
shape . style . transform = ` translateY( ${ scrolled * speed } px) ` ;
} ) ;
} ) ;
// Add pulse effect to numbers on hover
const numberValues = document . querySelectorAll ( '.number-value' ) ;
numberValues . forEach ( value => {
value . addEventListener ( 'mouseenter' , ( ) => {
value . style . transition = 'transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)' ;
} ) ;
} ) ;
// Keyboard accessibility for CTA
document . querySelector ( '.cta-text' ) . setAttribute ( 'tabindex' , '0' ) ;
document . querySelector ( '.cta-text' ) . addEventListener ( 'keypress' , ( e ) => {
if ( e . key === 'Enter' ) {
window . open ( 'https://github.com/jparkerweb/plan2code' , '_blank' ) ;
}
} ) ;
} ) ;
// Performance optimization: pause animations when not in viewport
const prefersReducedMotion = window . matchMedia ( '(prefers-reduced-motion: reduce)' ) ;
if ( ! prefersReducedMotion . matches ) {
const animationObserver = new IntersectionObserver ( ( entries ) => {
entries . forEach ( entry => {
if ( entry . isIntersecting ) {
entry . target . style . animationPlayState = 'running' ;
} else {
entry . target . style . animationPlayState = 'paused' ;
}
} ) ;
} , { threshold : 0 } ) ;
const animatedShapes = document . querySelectorAll ( '.geometric-shape' ) ;
animatedShapes . forEach ( shape => animationObserver . observe ( shape ) ) ;
}
< / script >
< / body >
< / html >
2025-12-04 20:23:33 -08:00
2025-12-04 20:28:25 -08:00
