Design to code, hand-audited.

– raw Locofy output

export const Frame_1 = () => {
  return (
    <div style={{ padding: '24px' }}>
      <div style={{
        fontSize: '32px',
        fontWeight: 700
      }}>Rectangle_2</div>
      <div style={{ marginTop: 8 }}>
        Body_Text_1
      </div>
      <div onClick={() => {}}
           style={{ background: '#7AA7FF',
                    color: '#0E1116',
                    padding: 12 }}>
        Button_Primary
      </div>
    </div>
  );
};

+ shipped by Designs 2 HTML

import { Button } from '@/ui/button';

export function Hero({ title, body, cta }: HeroProps) {
  return (
    <section
      aria-labelledby="hero-title"
      className="px-6 py-16"
    >
      <h1 id="hero-title" className="text-4xl font-bold">
        {title}
      </h1>
      <p className="mt-2 text-base text-chalk">{body}</p>
      <Button variant="primary" href={cta.href}>
        {cta.label}
      </Button>
    </section>
  );
}