SoundShare音乐平台

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="bg-gray-900 text-white p-6">
        <h1 className="text-3xl font-bold">SoundShare</h1>
        <p className="text-gray-400">Discover new music, share your talent</p>
      </header>

      <section className="p-6">
        <h2 className="text-2xl font-semibold mb-4">Key Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">For Artists</h3>
            <ul className="list-disc list-inside">
              <li>Free Uploads</li>
              <li>Artist Profiles</li>
              <li>Analytics Dashboard</li>
              <li>Monetization Options</li>
              <li>Collaboration Tools</li>
            </ul>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">For Listeners</h3>
            <ul className="list-disc list-inside">
              <li>Free Streaming</li>
              <li>Personalized Recommendations</li>
              <li>Playlists</li>
              <li>Social Features</li>
              <li>Offline Listening</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="bg-gray-100 p-6">
        <h2 className="text-2xl font-semibold mb-4">Technical Specifications</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Platforms</h3>
            <p>iOS, Android, Web</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Backend</h3>
            <p>Cloud storage, scalable database</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Audio Quality</h3>
            <p>128kbps (free), 320kbps (premium)</p>
          </div>
        </div>
      </section>

      <section className="p-6">
        <h2 className="text-2xl font-semibold mb-4">Business Model</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Freemium</h3>
            <p>Free basic service with premium options</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Advertising</h3>
            <p>Non-intrusive audio ads</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Tipping System</h3>
            <p>Support your favorite artists</p>
          </div>
        </div>
      </section>

      <section className="bg-gray-100 p-6">
        <h2 className="text-2xl font-semibold mb-4">Competitive Advantage</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Focus on Emerging Artists</h3>
            <p>A platform dedicated to new talent</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Simple & Intuitive</h3>
            <p>Clean interface, easy to use</p>
          </div>
        </div>
      </section>

      <section className="p-6">
        <h2 className="text-2xl font-semibold mb-4">Development Timeline</h2>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Phase 1</h3>
            <p>Core streaming functionality (3 months)</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Phase 2</h3>
            <p>Artist upload tools and profiles (2 months)</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Phase 3</h3>
            <p>Social features and recommendations (2 months)</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-xl font-bold mb-2">Phase 4</h3>
            <p>Monetization systems (1 month)</p>
          </div>
        </div>
      </section>

      <footer className="bg-gray-900 text-white p-6">
        <p className="text-gray-400">© 2025 SoundShare. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;