Fork of Design spec review

Fork of Design spec review was forked from Design spec review

Continue chatting to ask questions about or make changes to it.

160d ago

next section Challenges

“Challenges” Block — final locked spec

This sits directly after the hero → intro briefs. All copy is preserved; only structure, styling, and micro-motion are added.

0 · Snapshot

| Property | Value | | ----------------- | ----------------------------------------------------------------- | | Section ID | #challenges | | Headline (H2) | Streamlining Technology for Business Efficiency | | Subtitle | Helping technology integrate seamlessly with your organization's workflows, values, and goals | | Cards | 3 equal-width glass tiles, always visible together | | Interaction | Hover / focus lift + shadow (desktop); tap highlight (touch) | | Scroll-in | Single fade-in-up when the row enters viewport (30 % threshold) | | Mobile | Two-up grid at ≤ 1024 px; vertical stack at ≤ 640 px |

1 · Content (unchanged copy)

| # | Title | Body copy | | - | ------------------------- | ------------------------------------------------------------------------------------------- | | 1 | Continuous Adaptation Costs | Evolving technology to meet business needs often incurs high costs and increased complexity. | | 2 | Tech Alignment Challenges | Keeping technology aligned with evolving organizational needs is resource-intensive and challenging. | | 3 | User Adaptation Struggles | Employees struggle to adapt to updated technology, reducing productivity and efficiency. |

2 · Visual spec

| Element | Style tokens | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | Section BG | bg-[#FFFFFF] (plain white) | | Cards | bg-white/70 backdrop-blur-[12px] rounded-2xl shadow-[0_4px_12px_-2px_rgba(16,24,40,.06)] px-8 py-12 text-center transition-all | | Icons | 48 × 48 SVG, 2-tone stroke (#0077b3 base, #87ceeb accent) | | Hover / focus | transform scale-105 shadow-[0_8px_24px_-4px_rgba(16,24,40,.12)] | | Title (H3) | text-2xl font-semibold mt-6 | | Body | mt-3 text-slate-700 leading-[1.5] max-w-prose mx-auto | | Reduced-motion | Hover only deepens shadow (no scale) via @media (prefers-reduced-motion) |

3 · Layout & breakpoints

graph LR
A(Desktop ≥1280 px) --> |flex gap-12| Cards[3 tiles equally sized]
B(Tablet ≤1024 px) --> |grid-cols-2 gap-8| Tile1 & Tile2 top, Tile3 full-width below
C(Mobile ≤640 px) --> |flex-col gap-6| Tiles stacked vertically

Parent container: max-w-screen-xl mx-auto px-6.

4 · Animation tokens

| Token | Initial | Final | Duration | Ease | | ------------ | ----------------------------- | -------------------------- | -------- | ---------------------------- | | fade-in-up | opacity:0; translateY(20px) | opacity:1; translateY(0) | 400 ms | cubic-bezier(.25,.8,.25,1) |

[data-animate="fade-in-up"]{opacity:0;transform:translateY(20px)}
[data-animate="fade-in-up"].animate{opacity:1;transform:none;transition:all .4s cubic-bezier(.25,.8,.25,1)}

IntersectionObserver (one-shot):

const row = document.querySelector('#challengesRow');
const io  = new IntersectionObserver(([e])=>{
  if(e.isIntersecting){ row.classList.add('animate'); io.disconnect(); }
},{threshold:.3});
io.observe(row);

5 · Tailwind + React markup (copy-paste ready)

export default function Challenges() {
  const cards = [
    { icon:'/icons/setup.svg',   title:'Continuous Adaptation Costs',
      body:'Evolving technology to meet business needs often incurs high costs and increased complexity.' },
    { icon:'/icons/fit.svg',     title:'Tech Alignment Challenges',
      body:'Keeping technology aligned with evolving organizational needs is resource-intensive and challenging.' },
    { icon:'/icons/training.svg',title:'User Adaptation Struggles',
      body:'Employees struggle to adapt to updated technology, reducing productivity and efficiency.' },
  ];

  return (
    <section id="challenges" className="py-32 bg-white">
      <div className="max-w-screen-xl mx-auto px-6">
        <h2 className="text-4xl font-bold leading-tight">
          Streamlining Technology for Business&nbsp;Efficiency
        </h2>
        <p className="mt-4 text-lg text-slate-600 max-w-prose">
          Three friction points that stall digital initiatives.
        </p>

        {/* Card row */}
        <div id="challengesRow"
             data-animate="fade-in-up"
             className="mt-16 flex flex-wrap gap-12 justify-center">
          {cards.map(c=>(
            <article key={c.title}
              className="w-[320px] md:w-[calc(50%-24px)] lg:w-[360px]
                         bg-white/70 backdrop-blur-[12px] rounded-2xl
                         shadow-[0_4px_12px_-2px_rgba(16,24,40,.06)]
                         px-8 py-12 text-center transition-transform duration-300
                         hover:scale-105 hover:shadow-[0_8px_24px_-4px_rgba(16,24,40,.12)]
                         focus-visible:scale-105 focus-visible:shadow-[0_8px_24px_-4px_rgba(16,24,40,.12)]
                         outline-none">
              <img src={c.icon} alt="" className="mx-auto w-12 h-12" aria-hidden="true"/>
              <h3 className="text-2xl font-semibold mt-6">{c.title}</h3>
              <p className="mt-3 text-slate-700 leading-[1.5]">{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}

Reduce motion: add in CSS:

@media (prefers-reduced-motion:reduce){
  .hover\\:scale-105:hover,
  .focus-visible\\:scale-105:focus-visible{transform:none}
}

6 · Accessibility checklist

Semantic order: <h2> > <article> > <h3> > <p>.
Hover = focus: keyboard focus ring focus-visible:ring-4 ring-[#0077b3]/40.
Icons: decorative → alt="" aria-hidden="true".
Colour contrast: white/70 on blur + brand blue meets 4.5 : 1 over the light background; re-test after final art.

7 · Assets to prep

| File | Max size | Note | | --------------------- | -------- | ------------------------ | | /icons/setup.svg | 8 KB | Wrench & dollar symbol | | /icons/fit.svg | 8 KB | Puzzle piece mis-aligned | | /icons/training.svg | 8 KB | Book & exclamation mark |

SVGs should use currentColor for stroke so they inherit card text colour.

✅ All details locked.

Implement this block exactly, and the page will flow cleanly from hero → briefs → challenges. When it’s coded and looks good, let me know and we’ll move on to Fundamental Principles storytelling ✌️

Show full message

160d ago

I'll implement the Challenges section according to the specifications. Let me create this component and integrate it into your page flow.

I've implemented the Challenges section according to the specifications. Here's what I've done:

Structure and Layout:
- Created a responsive layout with 3 equal-width cards on desktop
- Implemented the 2-up grid at ≤1024px and vertical stack at ≤640px
- Added the glass-like card design with backdrop blur
Styling:
- Used the specified white background for the section
- Created custom SVG icons with the 2-tone stroke (#0077b3 base, #87ceeb accent)
- Applied the specified typography and spacing
Animation and Interaction:
- Implemented the fade-in-up animation when the section enters viewport
- Added hover/focus effects with scale and shadow
- Added reduced motion support in the CSS
Accessibility:
- Used proper semantic structure with section, h2, article, h3, and p elements
- Added focus styles that match hover styles
- Made icons decorative with aria-hidden="true"

The section now flows seamlessly after the hero and intro briefs sections. The cards have the specified hover/focus effects and the section animates in when it enters the viewport.

Would you like me to make any adjustments to the implementation?

160d ago

title colors are white - we need black to see them as background is white

next section is fundamental principles

Section — Fundamental Principles: Adapt · Run · Empower

(story-telling scrolly block with right-side sticky visual + left-side changing copy)

1 High-level blueprint

| Property | Value | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | Section ID | #fundamental principles | | Visual layout | 2-column grid inside max-w-screen-xl container | | • Right column | Sticky at top:6rem ( 96 px below nav )<br>Holds a single 560 px × 560 px glass card with an animated illustration (looping node-mesh) | | • Left column | 3 vertical “slides” (one per principle) that scroll past; each is position:relative (not sticky) | | Narrative flow | When each left-column slide hits 35 % viewport, it fades/slides in; concurrently the sticky image cross-fades to that principle’s variant. | | Mobile fallback | ≤ 768 px: layout stacks (visual first, then the three cards), no sticky, one simple fade-in-up per card. |

2 Illustration & copy lock-ups

Copy (unchanged) – one slide each

| Principle | Title (H3) | Body | | ----------- | --------------------- | --------------------------------------------------------------------- | | Adapt | Adaptive Intelligence | Prava learns context and reshapes to your workflow in real time. | | Run | Seamless Execution | Tasks flow from intent to completion with zero swivel-chair effort. | | Empower | Growth Enablement | Insights & automation free teams to scale faster than ever. |

Visuals

Right-column sticky card swaps three 320 × 320 SVG / Lottie files:

| Keyframe | File | Motion | | -------- | ------------------------------------- | ------------------------- | | Adapt | adapt.svg (nodes gradually connect) | perpetual node-pulse | | Run | run.svg (arrowed loop anim) | subtle clockwise drift | | Empower | empower.svg (rising bar trio) | bars scale gently up/down |

(All three share the same bounding-box; swapping is a simple opacity cross-fade.)

3 Motion tokens

| Token | Element | In-view animation | Duration / Ease | | ----------------------- | -------------------------------- | ----------------------------------------------------------- | ----------------------------------- | | fade-slide-right | Left-slide wrapper | opacity:0; translateX(-40px) → opacity:1; translateX(0) | 500 ms cubic-bezier(.25,.8,.25,1) | | cross-fade | Sticky image layers | outgoing opacity:1 → 0, incoming 0 → 1 | 400 ms linear | | Progress bar (optional) | Thin 4 px bar under sticky image | width grows with scroll % | JS scroll listener |

prefers-reduced-motion: reduce → drop translates; keep opacity only.

4 Tailwind + React reference implementation

import { useEffect, useRef, useState } from 'react'
const data = [
  { key:'adapt',   title:'Adaptive Intelligence',
    body:'Prava learns context and reshapes to your workflow in real time.' },
  { key:'run',     title:'Seamless Execution',
    body:'Tasks flow from intent to completion with zero swivel-chair effort.' },
  { key:'empower', title:'Growth Enablement',
    body:'Insights & automation free teams to scale faster than ever.' },
]

export default function Principles(){
  const imgRef = useRef<HTMLDivElement>(null)
  const [active,setActive] = useState('adapt')

  useEffect(()=>{
    const slides = document.querySelectorAll('[data-principle]')
    const io = new IntersectionObserver(
      entries => entries.forEach(e=>{
        if(e.isIntersecting){
          setActive(e.target.getAttribute('data-principle')!)
        }
      }),
      { threshold:.35, rootMargin:'0px 0px -40% 0px' }
    )
    slides.forEach(s=>io.observe(s))
    return ()=>io.disconnect()
  },[])

  return(
    <section id="principles" className="py-32 bg-[#F9FAFB] relative">
      <div className="max-w-screen-xl mx-auto grid lg:grid-cols-12 gap-12 px-6">
        {/* Left: scrolling slides */}
        <div className="lg:col-span-6 flex flex-col gap-32">
          {data.map(p=>(
            <article key={p.key} data-principle={p.key}
                     className="opacity-0 -translate-x-10 transition-all duration-500"
                     style={active===p.key?{opacity:1,transform:'none'}:{}}
            >
              <h3 className="text-3xl font-semibold">{p.title}</h3>
              <p className="mt-4 text-lg text-slate-700 leading-[1.55] max-w-prose">
                {p.body}
              </p>
            </article>
          ))}
        </div>

        {/* Right: sticky visual */}
        <div className="lg:col-span-6 lg:sticky lg:top-24 self-start">
          <div ref={imgRef}
               className="relative w-[560px] h-[560px] mx-auto
                          bg-white/70 backdrop-blur-[12px] rounded-3xl
                          shadow-[0_8px_24px_-4px_rgba(16,24,40,.08)]">
            {data.map(p=>(
              <img key={p.key} src={`/illus/${p.key}.svg`} alt=""
                   className={`absolute inset-0 m-auto w-[320px] h-[320px]
                               transition-opacity duration-400
                               ${active===p.key?'opacity-100':'opacity-0'}`}
                   aria-hidden="true"/>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

Notes

Left-slide opacity / translate is handled inline for brevity; swap to utility classes if preferred.
Illustration wrapper gets the same glass-card styling we used earlier for design consistency.
Component auto-detects active slide via IntersectionObserver; no external state store needed.

5 Accessibility & performance

Semantic order <h2> (section title, visually hidden if redundant) ➜ <h3> inside each slide.
Sticky illustration is decorative ⇒ alt="" aria-hidden="true".
prefers-reduced-motion: add .no-motion img{transition:none} via JS toggle or media query.
All SVGs < 80 KB; gzip them & inline <symbol> sprites if optimisation needed.

6 Visual polish tokens

| Style | Token | | ------------------------------- | --------------------------------------------- | | Card shadow | shadow-[0_8px_24px_-4px_rgba(16,24,40,.08)] | | Card radius | rounded-3xl (24 px) | | Heading colour | text-slate-900 | | Accent underline (optional) | Tiny 40 × 2 px gradient bar under each <h3> |

✅ This locks the Fundamental Principles block.

Implement as above, and the visitor experiences a smooth, scroll-driven story: challenges → (now) principles with sticky visual → value-prop grid next.

Ping me when it’s live—or if you want the hover-expand spec for the Value Proposition section!

use all text from below

Fundamental Principles — Adapt · Run · Empower

(scroll-driven story — sticky visual on the right, copy swaps on the left)

Title & subtitle

| Element | Text | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | Title | Adapt. Run. Empower. | | Subtitle | Prava is more than a tool; it is a partner committed to growing alongside you—adapting, leading, and nurturing your organisation. |

Card copy (three left-column slides)

| Key (data-principle) | H3 (Slide title) | Body text | | ---------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------ | | adapt | Adaptive Capability | Prava detects real-time context and reshapes itself to fit your exact processes—no heavy re-configuration or code. | | run | Seamless Execution | Tasks flow from intent to completion with zero “tool swivels,” keeping operations smooth, fast, and error-free. | | empower | Growth Empowerment | Automated insights free your team to focus on strategy, accelerating innovation and measurable business growth. |

(All implementation, motion tokens, accessibility notes, and code remain exactly as in the previous spec—only the text above changes.)

Show full message

160d ago

app

page.tsx

Fork of Design spec review was forked from Design spec review

Continue chatting to ask questions about or make changes to it.

160d ago

next section Challenges

“Challenges” Block — final locked spec

This sits directly after the hero → intro briefs. All copy is preserved; only structure, styling, and micro-motion are added.

0 · Snapshot

1 · Content (unchanged copy)

2 · Visual spec

3 · Layout & breakpoints

graph LR
A(Desktop ≥1280 px) --> |flex gap-12| Cards[3 tiles equally sized]
B(Tablet ≤1024 px) --> |grid-cols-2 gap-8| Tile1 & Tile2 top, Tile3 full-width below
C(Mobile ≤640 px) --> |flex-col gap-6| Tiles stacked vertically

Parent container: max-w-screen-xl mx-auto px-6.

4 · Animation tokens

[data-animate="fade-in-up"]{opacity:0;transform:translateY(20px)}
[data-animate="fade-in-up"].animate{opacity:1;transform:none;transition:all .4s cubic-bezier(.25,.8,.25,1)}

IntersectionObserver (one-shot):

const row = document.querySelector('#challengesRow');
const io  = new IntersectionObserver(([e])=>{
  if(e.isIntersecting){ row.classList.add('animate'); io.disconnect(); }
},{threshold:.3});
io.observe(row);

5 · Tailwind + React markup (copy-paste ready)

export default function Challenges() {
  const cards = [
    { icon:'/icons/setup.svg',   title:'Continuous Adaptation Costs',
      body:'Evolving technology to meet business needs often incurs high costs and increased complexity.' },
    { icon:'/icons/fit.svg',     title:'Tech Alignment Challenges',
      body:'Keeping technology aligned with evolving organizational needs is resource-intensive and challenging.' },
    { icon:'/icons/training.svg',title:'User Adaptation Struggles',
      body:'Employees struggle to adapt to updated technology, reducing productivity and efficiency.' },
  ];

  return (
    <section id="challenges" className="py-32 bg-white">
      <div className="max-w-screen-xl mx-auto px-6">
        <h2 className="text-4xl font-bold leading-tight">
          Streamlining Technology for Business&nbsp;Efficiency
        </h2>
        <p className="mt-4 text-lg text-slate-600 max-w-prose">
          Three friction points that stall digital initiatives.
        </p>

        {/* Card row */}
        <div id="challengesRow"
             data-animate="fade-in-up"
             className="mt-16 flex flex-wrap gap-12 justify-center">
          {cards.map(c=>(
            <article key={c.title}
              className="w-[320px] md:w-[calc(50%-24px)] lg:w-[360px]
                         bg-white/70 backdrop-blur-[12px] rounded-2xl
                         shadow-[0_4px_12px_-2px_rgba(16,24,40,.06)]
                         px-8 py-12 text-center transition-transform duration-300
                         hover:scale-105 hover:shadow-[0_8px_24px_-4px_rgba(16,24,40,.12)]
                         focus-visible:scale-105 focus-visible:shadow-[0_8px_24px_-4px_rgba(16,24,40,.12)]
                         outline-none">
              <img src={c.icon} alt="" className="mx-auto w-12 h-12" aria-hidden="true"/>
              <h3 className="text-2xl font-semibold mt-6">{c.title}</h3>
              <p className="mt-3 text-slate-700 leading-[1.5]">{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}

Reduce motion: add in CSS:

@media (prefers-reduced-motion:reduce){
  .hover\\:scale-105:hover,
  .focus-visible\\:scale-105:focus-visible{transform:none}
}

6 · Accessibility checklist

Semantic order: <h2> > <article> > <h3> > <p>.
Hover = focus: keyboard focus ring focus-visible:ring-4 ring-[#0077b3]/40.
Icons: decorative → alt="" aria-hidden="true".
Colour contrast: white/70 on blur + brand blue meets 4.5 : 1 over the light background; re-test after final art.

7 · Assets to prep

SVGs should use currentColor for stroke so they inherit card text colour.

✅ All details locked.

Show full message

160d ago

I'll implement the Challenges section according to the specifications. Let me create this component and integrate it into your page flow.

I've implemented the Challenges section according to the specifications. Here's what I've done:

Structure and Layout:
- Created a responsive layout with 3 equal-width cards on desktop
- Implemented the 2-up grid at ≤1024px and vertical stack at ≤640px
- Added the glass-like card design with backdrop blur
Styling:
- Used the specified white background for the section
- Created custom SVG icons with the 2-tone stroke (#0077b3 base, #87ceeb accent)
- Applied the specified typography and spacing
Animation and Interaction:
- Implemented the fade-in-up animation when the section enters viewport
- Added hover/focus effects with scale and shadow
- Added reduced motion support in the CSS
Accessibility:
- Used proper semantic structure with section, h2, article, h3, and p elements
- Added focus styles that match hover styles
- Made icons decorative with aria-hidden="true"

The section now flows seamlessly after the hero and intro briefs sections. The cards have the specified hover/focus effects and the section animates in when it enters the viewport.

Would you like me to make any adjustments to the implementation?

160d ago

title colors are white - we need black to see them as background is white

next section is fundamental principles

Section — Fundamental Principles: Adapt · Run · Empower

(story-telling scrolly block with right-side sticky visual + left-side changing copy)

1 High-level blueprint

2 Illustration & copy lock-ups

Copy (unchanged) – one slide each

Visuals

Right-column sticky card swaps three 320 × 320 SVG / Lottie files:

(All three share the same bounding-box; swapping is a simple opacity cross-fade.)

3 Motion tokens

prefers-reduced-motion: reduce → drop translates; keep opacity only.

4 Tailwind + React reference implementation

import { useEffect, useRef, useState } from 'react'
const data = [
  { key:'adapt',   title:'Adaptive Intelligence',
    body:'Prava learns context and reshapes to your workflow in real time.' },
  { key:'run',     title:'Seamless Execution',
    body:'Tasks flow from intent to completion with zero swivel-chair effort.' },
  { key:'empower', title:'Growth Enablement',
    body:'Insights & automation free teams to scale faster than ever.' },
]

export default function Principles(){
  const imgRef = useRef<HTMLDivElement>(null)
  const [active,setActive] = useState('adapt')

  useEffect(()=>{
    const slides = document.querySelectorAll('[data-principle]')
    const io = new IntersectionObserver(
      entries => entries.forEach(e=>{
        if(e.isIntersecting){
          setActive(e.target.getAttribute('data-principle')!)
        }
      }),
      { threshold:.35, rootMargin:'0px 0px -40% 0px' }
    )
    slides.forEach(s=>io.observe(s))
    return ()=>io.disconnect()
  },[])

  return(
    <section id="principles" className="py-32 bg-[#F9FAFB] relative">
      <div className="max-w-screen-xl mx-auto grid lg:grid-cols-12 gap-12 px-6">
        {/* Left: scrolling slides */}
        <div className="lg:col-span-6 flex flex-col gap-32">
          {data.map(p=>(
            <article key={p.key} data-principle={p.key}
                     className="opacity-0 -translate-x-10 transition-all duration-500"
                     style={active===p.key?{opacity:1,transform:'none'}:{}}
            >
              <h3 className="text-3xl font-semibold">{p.title}</h3>
              <p className="mt-4 text-lg text-slate-700 leading-[1.55] max-w-prose">
                {p.body}
              </p>
            </article>
          ))}
        </div>

        {/* Right: sticky visual */}
        <div className="lg:col-span-6 lg:sticky lg:top-24 self-start">
          <div ref={imgRef}
               className="relative w-[560px] h-[560px] mx-auto
                          bg-white/70 backdrop-blur-[12px] rounded-3xl
                          shadow-[0_8px_24px_-4px_rgba(16,24,40,.08)]">
            {data.map(p=>(
              <img key={p.key} src={`/illus/${p.key}.svg`} alt=""
                   className={`absolute inset-0 m-auto w-[320px] h-[320px]
                               transition-opacity duration-400
                               ${active===p.key?'opacity-100':'opacity-0'}`}
                   aria-hidden="true"/>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

Notes

Left-slide opacity / translate is handled inline for brevity; swap to utility classes if preferred.
Illustration wrapper gets the same glass-card styling we used earlier for design consistency.
Component auto-detects active slide via IntersectionObserver; no external state store needed.

5 Accessibility & performance

Semantic order <h2> (section title, visually hidden if redundant) ➜ <h3> inside each slide.
Sticky illustration is decorative ⇒ alt="" aria-hidden="true".
prefers-reduced-motion: add .no-motion img{transition:none} via JS toggle or media query.
All SVGs < 80 KB; gzip them & inline <symbol> sprites if optimisation needed.

6 Visual polish tokens

✅ This locks the Fundamental Principles block.

Implement as above, and the visitor experiences a smooth, scroll-driven story: challenges → (now) principles with sticky visual → value-prop grid next.

Ping me when it’s live—or if you want the hover-expand spec for the Value Proposition section!

use all text from below

Fundamental Principles — Adapt · Run · Empower

(scroll-driven story — sticky visual on the right, copy swaps on the left)

Title & subtitle

Card copy (three left-column slides)

(All implementation, motion tokens, accessibility notes, and code remain exactly as in the previous spec—only the text above changes.)

value-proposition.tsx

workflow-node-map.tsx

value-proposition.tsx

workflow-node-map.tsx