Code Detail

Prompt

2025年3月26日 15:10

Designed in a neo-futuristic style, reflecting the cutting-edge aesthetics of contemporary architecture and product design. Forms should emphasize streamlined curves and organic geometric shapes, avoiding right angles and static forms. Colors should use metallic tones such as silver, titanium white and chrome yellow with one or two highly saturated accent colors. Material expression is key and should mimic high-tech materials such as brushed metal, carbon fiber and frosted glass. Typography should be dynamic and fluid, using modern sans-serif fonts, either curved or radial. Decorative elements should contain parametrically generated patterns, hydrodynamic forms and bionic structures. The overall design should present a highly developed technological aesthetic and a sense of dynamism, as if it were a high-end product from the near-future, referencing the design language of Zaha Hadid's architecture, the Tesla Cybertruck and Apple products.

Generated Result

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gradient-to-br from-slate-900 to-slate-800 min-h-screen text-white">
      <header className="flex justify-between items-center p-6 bg-opacity-90 bg-slate-800">
        <h1 className="text-3xl font-bold text-chrome-yellow">NeoFuturist</h1>
        <nav>
          <ul className="flex space-x-6">
            <li><a href="#home" className="hover:text-titanium-white">Home</a></li>
            <li><a href="#features" className="hover:text-titanium-white">Features</a></li>
            <li><a href="#about" className="hover:text-titanium-white">About</a></li>
            <li><a href="#contact" className="hover:text-titanium-white">Contact</a></li>
          </ul>
        </nav>
      </header>

      <section id="home" className="flex flex-col items-center justify-center h-screen bg-opacity-50 bg-slate-700">
        <h2 className="text-5xl font-bold text-titanium-white mb-4">Welcome to the Future</h2>
        <p className="text-xl text-slate-300">Experience the cutting-edge of design and technology.</p>
      </section>

      <section id="features" className="p-12 bg-slate-800">
        <h2 className="text-4xl font-bold text-chrome-yellow mb-8">Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-slate-700 p-6 rounded-lg">
            <h3 className="text-2xl font-bold text-titanium-white mb-4">Streamlined Curves</h3>
            <p className="text-slate-300">Organic geometric shapes that flow seamlessly.</p>
          </div>
          <div className="bg-slate-700 p-6 rounded-lg">
            <h3 className="text-2xl font-bold text-titanium-white mb-4">High-Tech Materials</h3>
            <p className="text-slate-300">Mimicking brushed metal, carbon fiber, and frosted glass.</p>
          </div>
          <div className="bg-slate-700 p-6 rounded-lg">
            <h3 className="text-2xl font-bold text-titanium-white mb-4">Dynamic Typography</h3>
            <p className="text-slate-300">Modern sans-serif fonts with a fluid, dynamic feel.</p>
          </div>
        </div>
      </section>

      <section id="about" className="p-12 bg-slate-900">
        <h2 className="text-4xl font-bold text-chrome-yellow mb-8">About Us</h2>
        <p className="text-xl text-slate-300">We are a team of visionary designers and engineers, dedicated to creating the future of design. Our work is inspired by the neo-futuristic aesthetics of contemporary architecture and product design, blending form and function in ways that push the boundaries of what's possible.</p>
      </section>

      <section id="contact" className="p-12 bg-slate-800">
        <h2 className="text-4xl font-bold text-chrome-yellow mb-8">Contact Us</h2>
        <form className="max-w-lg mx-auto">
          <div className="mb-6">
            <label className="block text-slate-300 mb-2">Name</label>
            <input type="text" className="w-full p-2 bg-slate-700 rounded-lg" />
          </div>
          <div className="mb-6">
            <label className="block text-slate-300 mb-2">Email</label>
            <input type="email" className="w-full p-2 bg-slate-700 rounded-lg" />
          </div>
          <div className="mb-6">
            <label className="block text-slate-300 mb-2">Message</label>
            <textarea className="w-full p-2 bg-slate-700 rounded-lg" rows="4"></textarea>
          </div>
          <button type="submit" className="bg-chrome-yellow text-slate-900 px-6 py-2 rounded-lg hover:bg-opacity-90">Send</button>
        </form>
      </section>

      <footer className="p-6 bg-slate-900 text-center text-slate-300">
        <p>&copy; 2025 NeoFuturist. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;

Open Sandbox