Answers to: Convert the image to React Component

WRKAIAnswers

WRKAI

AI Tools

Files

Pricing

Design to Code

Convert the image to React Component

Asked on 11/20/2025, 3 pageviews

Converted Designs

import React from 'react';

export default function WelcomeScreen() {
  const styles = {
    container: {
      fontFamily: '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial',
      backgroundColor: '#ffffff',
      color: '#333',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      padding: '20px 16px 40px',
    },
    header: {
      textAlign: 'center',
      marginTop: 28,
    },
    welcomeText: {
      fontSize: 28,
      color: '#555',
      margin: 0,
    },
    brandText: {
      fontSize: 40,
      fontWeight: 800,
      margin: '6px 0 0',
      color: '#111',
    },
    illustrationWrap: {
      width: '100%',
      display: 'flex',
      justifyContent: 'center',
      marginTop: 20,
      marginBottom: 10,
    },
    // simple inline SVG will scale with container
    svg: {
      width: '86%',
      maxWidth: 800,
      height: '240px',
    },
    formContainer: {
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      marginTop: 10,
    },
    label: {
      fontWeight: 700,
      fontSize: 18,
      marginBottom: 8,
      textAlign: 'center',
    },
    input: {
      width: '86%',
      maxWidth: 520,
      height: 48,
      borderRadius: 8,
      border: '1px solid #e5e5e5',
      padding: '0 14px',
      fontSize: 16,
      outline: 'none',
      textAlign: 'center',
      backgroundColor: '#fff',
    },
    button: {
      width: '86%',
      maxWidth: 520,
      height: 48,
      borderRadius: 8,
      border: 'none',
      backgroundColor: '#e9e9e9',
      color: '#9a9a9a',
      fontWeight: 600,
      fontSize: 16,
      marginTop: 12,
      cursor: 'not-allowed',
    },
    disclaimer: {
      fontSize: 12,
      textAlign: 'center',
      color: '#555',
      marginTop: 18,
      padding: '0 16px',
      lineHeight: 1.6,
    },
    link: {
      color: '#d12c2c',
      textDecoration: 'none',
      fontWeight: 700,
    },
    placeholder: {
      color: '#bbb',
    },
  };

return (
    <div style={styles.container}>
      <div style={styles.header}>
        <p style={styles.welcomeText}>Welcome to</p>
        <h1 style={styles.brandText}>Red Taxi!</h1>
      </div>

<div style={styles.illustrationWrap} aria-label="Illustration">
        <svg
          className="illustration"
          style={styles.svg}
          viewBox="0 0 900 260"
          role="img"
          aria-label="Taxi with person illustration"
        >
          {/* light blob background */}
          <path d="M0,180 C120,140 260,120 380,150 C520,184 690,190 900,170 L900,260 L0,260 Z"
                fill="#f0f2f5" opacity="0.9" />
          {/* car */}
          <g>
            <rect x="60" y="170" width="320" height="52" rx="14" fill="#fff" stroke="#e5e5e5" />
            <rect x="100" y="140" width="240" height="40" rx="8" fill="#fff" stroke="#e5e5e5" />
            <rect x="420" y="170" width="56" height="52" rx="14" fill="#fff" stroke="#e5e5e5" />
            <rect x="60" y="170" width="320" height="10" fill="#f7f7f7" />
            <circle cx="110" cy="222" r="14" fill="#333" />
            <circle cx="290" cy="222" r="14" fill="#333" />
            <rect x="180" y="150" width="42" height="26" rx="6" fill="#e74c3c" />
            <text x="170" y="170" fontSize="10" fill="#fff" fontFamily="Arial" alignmentBaseline="middle">R</text>
          </g>

{/* person silhouette (stylized) */}
          <g>
            <circle cx="560" cy="110" r="18" fill="#2f3e54" />
            <rect x="548" y="128" width="24" height="60" rx="8" fill="#e74c3c" />
            {/* arms */}
            <path d="M520 140 Q560 110 590 128" stroke="#e74c3c" strokeWidth="14" strokeLinecap="round" fill="none" />
            <path d="M520 140 Q560 170 590 152" stroke="#e74c3c" strokeWidth="14" strokeLinecap="round" fill="none" />
          </g>
        </svg>
      </div>

<div style={styles.formContainer}>
        <div style={styles.label}>Login with your Phone Number</div>
        <input
          className="phone-input"
          placeholder="eg. 9999912345"
          style={styles.input}
          inputMode="tel"
          aria-label="Phone number"
        />
        <button style={styles.button} disabled aria-disabled="true">
          Send OTP
        </button>
      </div>

<p style={styles.disclaimer}>
        By Continuing, You Agree to the Red Taxi's{' '}
        <a href="#" style={styles.link}>
          Terms &amp; Conditions
        </a>{' '}
        And{' '}
        <a href="#" style={styles.link}>
          Privacy Policy
        </a>
      </p>

{/* Placeholder style tag for placeholder alignment in inputs (center text) */}
      <style>
        {`
          .phone-input::placeholder { color: #bbb; text-align: center; }
        `}
      </style>
    </div>
  );
}

by GPT-5 Nano

1 reply

Converted Designs

Request another