Laqnun Page - Copy this React, Tailwind Component to your project

Import React, { useState } from "react"; import { FaLeaf, FaHeart, FaSun, FaEnvelope, FaUser, FaPencilAlt, FaTrophy, FaGraduationCap, FaBriefcase } from "react icons/fa"; const LaqnunPage = () => { const [formData, setFormData] = useState({ name: "", email: "", message: "" }); const [errors, setErrors] = useState({}); const features = [ { icon: <FaTrophy />, title: "الإنجازات", description: "حصلت على العديد من الجوائز في مجال الأقنون" }, { icon: <FaGraduationCap />, title: "المؤهلات", description: "خبرة أكثر من 10 سنوات في مجال الأقنون" }, { icon: <FaBriefcase />, title: "الخبرات", description: "عملت مع العديد من المراكز المتخصصة" } ]; const achievements = [ "https://images.unsplash.com/photo 1589829545856 d10d557cf95f", "https://images.unsplash.com/photo 1562654501 a0ccc0fc3fb1", "https://images.unsplash.com/photo 1557425955 df376b5903c8", "https://images.unsplash.com/photo 1559136555 9303baea8ebd", "https://images.unsplash.com/photo 1517245386807 bb43f82c33c4", "https://images.unsplash.com/photo 1517048676732 d65bc937f952" ]; const handleSubmit = (e) => { e.preventDefault(); const newErrors = {}; if (!formData.name) newErrors.name = "الاسم مطلوب"; if (!formData.email) newErrors.email = "البريد الإلكتروني مطلوب"; if (!formData.message) newErrors.message = "الرسالة مطلوبة"; setErrors(newErrors); if (Object.keys(newErrors).length === 0) { console.log("تم إرسال النموذج:", formData); } }; const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); if (errors[e.target.name]) { setErrors({ ...errors, [e.target.name]: "" }); } }; return ( <div className="min h screen bg gradient to b from gray 50 to gray 100" dir="rtl"> <header className="bg white shadow md fixed w full top 0 z 50"> <nav className="container mx auto px 6 py 4"> <div className="flex items center justify between"> <h1 className="text 3xl font bold text gray 800">الأقنون</h1> <div className="hidden md:flex space x 8"> <a href="#about" className="text gray 600 hover:text gray 900 ml 8">عني</a> <a href="#features" className="text gray 600 hover:text gray 900 ml 8">مؤهلاتي</a> <a href="#gallery" className="text gray 600 hover:text gray 900 ml 8">إنجازاتي</a> <a href="#contact" className="text gray 600 hover:text gray 900">تواصل معي</a> </div> </div> </nav> </header> <main className="pt 20"> <section className="container mx auto px 6 py 16 text center"> <h2 className="text 5xl font bold text gray 800 mb 4">مرحباً بكم في عالم الأقنون</h2> <p className="text xl text gray 600 mb 8">اكتشف معي أسرار وفوائد الأقنون التقليدي</p> </section> <section id="about" className="bg white py 16"> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text gray 800 mb 8 text center">من أنا</h2> <div className="grid md:grid cols 2 gap 12 items center"> <div> <img src="https://images.unsplash.com/photo 1552733407 5d5c46c3bb3b" alt="صورة شخصية" className="rounded lg shadow lg" /> </div> <div> <p className="text gray 600 leading relaxed mb 6"> أنا متخصص في مجال الأقنون مع خبرة تمتد لسنوات عديدة. أقدم خدمات متميزة في مجال العلاج التقليدي والطب البديل. </p> <p className="text gray 600 leading relaxed"> حاصل على شهادات معتمدة وخبرة واسعة في مجال الأقنون، وأسعى دائماً لتقديم أفضل الخدمات لعملائي. </p> </div> </div> </div> </section> <section id="features" className="py 16 bg gray 50"> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text gray 800 mb 12 text center">مؤهلاتي وخبراتي</h2> <div className="grid md:grid cols 3 gap 8"> {features.map((feature, index) => ( <div key={index} className="bg white p 8 rounded lg shadow md transition transform hover:transform hover:scale 105"> <div className="text 4xl text blue 500 mb 4">{feature.icon}</div> <h3 className="text xl font semibold mb 2">{feature.title}</h3> <p className="text gray 600">{feature.description}</p> </div> ))} </div> </div> </section> <section id="gallery" className="py 16"> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text gray 800 mb 12 text center">إنجازاتي</h2> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> {achievements.map((image, index) => ( <div key={index} className="overflow hidden rounded lg shadow lg"> <img src={image} alt={`إنجاز ${index + 1}`} className="w full h 64 object cover transform hover:scale 110 transition transform duration 300" /> </div> ))} </div> </div> </section> <section id="contact" className="py 16 bg gray 50"> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text gray 800 mb 12 text center">تواصل معي</h2> <div className="max w lg mx auto bg white rounded lg shadow md p 8"> <form onSubmit={handleSubmit}> <div className="mb 6"> <label className="block text gray 700 mb 2" htmlFor="name"> <FaUser className="inline ml 2" />الاسم </label> <input type="text" id="name" name="name" value={formData.name} onChange={handleChange} className={`w full px 4 py 2 border rounded lg focus:outline none focus:border blue 500 ${errors.name ? "border red 500" : "border gray 300"}`} /> {errors.name && <p className="text red 500 text sm mt 1">{errors.name}</p>} </div> <div className="mb 6"> <label className="block text gray 700 mb 2" htmlFor="email"> <FaEnvelope className="inline ml 2" />البريد الإلكتروني </label> <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} className={`w full px 4 py 2 border rounded lg focus:outline none focus:border blue 500 ${errors.email ? "border red 500" : "border gray 300"}`} /> {errors.email && <p className="text red 500 text sm mt 1">{errors.email}</p>} </div> <div className="mb 6"> <label className="block text gray 700 mb 2" htmlFor="message"> <FaPencilAlt className="inline ml 2" />الرسالة </label> <textarea id="message" name="message" value={formData.message} onChange={handleChange} rows="4" className={`w full px 4 py 2 border rounded lg focus:outline none focus:border blue 500 ${errors.message ? "border red 500" : "border gray 300"}`} ></textarea> {errors.message && <p className="text red 500 text sm mt 1">{errors.message}</p>} </div> <button type="submit" className="w full bg blue 500 text white py 2 px 4 rounded lg hover:bg blue 600 transition colors" > إرسال </button> </form> </div> </div> </section> </main> <footer className="bg gray 800 text white py 8"> <div className="container mx auto px 6 text center"> <p>جميع الحقوق محفوظة © 2024 الأقنون</p> </div> </footer> </div> ); }; export default LaqnunPage;