\n \n Y\n \n Yorab Photography\n

\n );\n}\n\nfunction Navigation({ setCurrentPage }) {\n return (\n

\n \n

\n \n \n \n \n

\n );\n}\n\nfunction NikonCameraBanner() {\n return (\n

\n $\"Nikon$ \n

\n );\n}\n\nfunction HomePage({ photos, setPhotos }) {\n const [newPhoto, setNewPhoto] = useState({\n title: '',\n description: '',\n price: '',\n imageUrl: ''\n });\n\n const handlePhotoUpload = (e) => {\n const file = e.target.files[0];\n const reader = new FileReader();\n reader.onloadend = () => {\n setNewPhoto(prev => ({\n ...prev,\n imageUrl: reader.result\n }));\n };\n reader.readAsDataURL(file);\n };\n\n const handleAddPhoto = () => {\n if (newPhoto.title && newPhoto.description && newPhoto.price && newPhoto.imageUrl) {\n setPhotos([\n ...photos, \n { \n ...newPhoto, \n id: photos.length + 1,\n price: parseFloat(newPhoto.price)\n }\n ]);\n // Reset form\n setNewPhoto({\n title: '',\n description: '',\n price: '',\n imageUrl: ''\n });\n }\n };\n\n return (\n

\n \n

\n Yorab Photography Gallery\n

\n \n

\n {photos.map(photo => (\n

\n ${photo.title}\n$ \n

{photo.title}

{photo.description}

\n KES {photo.price.toLocaleString()}\n

\n ))}\n

\n\n

Upload New Photo

\n setNewPhoto(prev => ({\n ...prev, \n title: e.target.value\n }))}\n style={{ padding: '10px' }}\n />\n

setNewPhoto(prev => ({\n              ...prev, \n              description: e.target.value\n            }))}\n            style={{ padding: '10px', minHeight: '100px' }}\n          />\n          <input \n            type=\"number\" \n            placeholder=\"Price (KES)\"\n            value={newPhoto.price}\n            onChange={(e) => setNewPhoto(prev => ({\n              ...prev, \n              price: e.target.value\n            }))}\n            style={{ padding: '10px' }}\n          />\n          <input \n            type=\"file\" \n            accept=\"image/*\"\n            onChange={handlePhotoUpload}\n          />\n          <button \n            onClick={handleAddPhoto}\n            style={{ \n              padding: '10px', \n              backgroundColor: '#ff6b6b', \n              color: 'white', \n              border: 'none',\n              borderRadius: '5px'\n            }}\n          >\n            Add Photo\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction AboutPage() {\n  return (\n    <div style={{ \n      maxWidth: '800px', \n      margin: '0 auto', \n      padding: '20px',\n      textAlign: 'center'\n    }}>\n      <h1>About Brian Matei</h1>\n      <img \n        src=\"https://maxm-imggenurl.web.val.run/brian-matei-portrait\" \n        alt=\"Brian Matei\" \n        style={{ \n          width: '300px', \n          height: '300px', \n          borderRadius: '50%', \n          objectFit: 'cover',\n          marginBottom: '20px'\n        }}\n      />\n      <p>\n        Brian Matei started his photography journey in 2021 with a simple \n        point-and-shoot camera and a passion for capturing moments. What \n        began as a hobby quickly transformed into a professional career \n        as he honed his skills, invested in professional equipment, and \n        developed a unique style that captures the essence of each moment.\n      </p>\n      <p>\n        Through dedication, continuous learning, and a keen eye for detail, \n        Brian has established Yorab Photography as a premier photography \n        service, specializing in various types of shoots from weddings to \n        personal portraits.\n      </p>\n    </div>\n  );\n}\n\nfunction ServicesPage() {\n  const services = [\n    { name: \"Outdoor Shoots\", price: 150 },\n    { name: \"Studio Shoots (Normal)\", price: 200 },\n    { name: \"Studio Shoots (Wraps)\", price: 250 },\n    { name: \"Traditional Shoots\", price: 200 },\n    { name: \"Unlimited Shoot (1 hour)\", price: 2000 },\n    { name: \"Wedding Shoots\", price: \"From 8000\" },\n    { name: \"Birthday Shoots\", price: \"Varies\" },\n    { name: \"Baby Bump Shoots\", price: \"Varies\" },\n    { name: \"Baby Shower Shoots\", price: \"Varies\" },\n    { name: \"Funeral Shoots\", price: \"Varies\" }\n  ];\n\n  return (\n    <div style={{ \n      maxWidth: '800px', \n      margin: '0 auto', \n      padding: '20px' \n    }}>\n      <h1 style={{ textAlign: 'center' }}>Our Services</h1>\n      <div style={{ \n        display: 'grid', \n        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', \n        gap: '20px' \n      }}>\n        {services.map((service, index) => (\n          <div \n            key={index} \n            style={{ \n              border: '1px solid #ddd', \n              padding: '15px', \n              borderRadius: '8px',\n              textAlign: 'center'\n            }}\n          >\n            <h3>{service.name}</h3>\n            <p style={{ color: '#ff6b6b', fontWeight: 'bold' }}>\n              KES {service.price}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction ContactsPage() {\n  const contacts = [\n    { \n      icon: '📱', \n      type: 'WhatsApp', \n      value: '0792366984' \n    },\n    { \n      icon: '📸', \n      type: 'Instagram', \n      value: '@yorab Bayor' \n    },\n    { \n      icon: '💼', \n      type: 'LinkedIn', \n      value: 'Yorab Photography' \n    }\n  ];\n\n  return (\n    <div style={{ \n      maxWidth: '600px', \n      margin: '0 auto', \n      padding: '20px',\n      textAlign: 'center'\n    }}>\n      <h1>Contact Us</h1>\n      {contacts.map((contact, index) => (\n        <div \n          key={index} \n          style={{ \n            display: 'flex', \n            alignItems: 'center', \n            justifyContent: 'center',\n            margin: '20px 0',\n            padding: '15px',\n            backgroundColor: '#f8f9fa',\n            borderRadius: '8px'\n          }}\n        >\n          <span style={{ fontSize: '24px', marginRight: '15px' }}>\n            {contact.icon}\n          </span>\n          <div>\n            <h3>{contact.type}</h3>\n            <p>{contact.value}</p>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction App() {\n  const [currentPage, setCurrentPage] = useState('home');\n  const [photos, setPhotos] = useState(initialPhotos);\n\n  const renderPage = () => {\n    switch(currentPage) {\n      case 'home':\n        return <HomePage photos={photos} setPhotos={setPhotos} />;\n      case 'about':\n        return <AboutPage />;\n      case 'services':\n        return <ServicesPage />;\n      case 'contacts':\n        return <ContactsPage />;\n      default:\n        return <HomePage photos={photos} setPhotos={setPhotos} />;\n    }\n  };\n\n  return (\n    <div style={{ fontFamily: 'Arial, sans-serif' }}>\n      <Navigation setCurrentPage={setCurrentPage} />\n      {renderPage()}\n      <footer style={{\n        backgroundColor: '#333',\n        color: 'white',\n        textAlign: 'center',\n        padding: '20px',\n        marginTop: '20px'\n      }}>\n        <p>© 2023 Yorab Photography. All Rights Reserved.</p>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>Yorab Photography</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>\n          body { margin: 0; }\n          * { box-sizing: border-box; }\n          button:hover { opacity: 0.8; }\n        </style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: {\n      \"content-type\": \"text/html\",\n    },\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/mophs/careerCongratsApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>