d8d-yefushi-website-lu29IEMf/src/pages/ContactPage.tsx

import React from 'react';

const ContactPage: React.FC = () => {
  return (
    <div className="bg-gray-50 min-h-screen py-16">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-center mb-12">联系我们</h1>
        
        <div className="flex flex-wrap -mx-4">
          <div className="w-full md:w-1/2 px-4 mb-8">
            <h2 className="text-2xl font-semibold mb-4">联系方式</h2>
            <p className="mb-2"><strong>地址：</strong>上海市静安区南京西路1788号</p>
            <p className="mb-2"><strong>电话：</strong>+86 123 4567 8900</p>
            <p className="mb-2"><strong>邮箱：</strong>info@yefashion.com</p>
            <p className="mb-6"><strong>营业时间：</strong>周一至周五 9:00-18:00</p>
            
            <h3 className="text-xl font-semibold mb-3">关注我们</h3>
            <div className="flex space-x-4">
              <a href="#" className="text-gray-600 hover:text-gray-800">微博</a>
              <a href="#" className="text-gray-600 hover:text-gray-800">微信</a>
              <a href="#" className="text-gray-600 hover:text-gray-800">小红书</a>
            </div>
          </div>
          
          <div className="w-full md:w-1/2 px-4">
            <h2 className="text-2xl font-semibold mb-4">给我们留言</h2>
            <form>
              <div className="mb-4">
                <label htmlFor="name" className="block text-gray-700 font-semibold mb-2">姓名</label>
                <input type="text" id="name" name="name" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required />
              </div>
              <div className="mb-4">
                <label htmlFor="email" className="block text-gray-700 font-semibold mb-2">邮箱</label>
                <input type="email" id="email" name="email" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required />
              </div>
              <div className="mb-4">
                <label htmlFor="message" className="block text-gray-700 font-semibold mb-2">留言</label>
                <textarea id="message" name="message" rows={4} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required></textarea>
              </div>
              <button type="submit" className="bg-primary text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition duration-300">发送留言</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactPage;