Personal Branding Page - Copy this React, Tailwind Component to your project
Create this code import React, { useState, useEffect } from "react"; import { FaBars, FaTimes, FaDiscord, FaYoutube, FaTwitter, FaInstagram, FaTwitch } from "react icons/fa"; import { HiUsers, HiChartBar, HiStar } from "react icons/hi"; import { BiChevronLeft, BiChevronRight } from "react icons/bi"; import { BsSun, BsMoon } from "react icons/bs"; const PersonalBrandingPage = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [currentSlide, setCurrentSlide] = useState(0); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [isDarkMode, setIsDarkMode] = useState(false); const toggleTheme = () => { setIsDarkMode(!isDarkMode); }; const testimonials = [ { id: 1, name: "Sarah Johnson", text: "The community here is absolutely amazing! I've learned so much from the Discord server.", role: "Community Member" }, { id: 2, name: "Mike Williams", text: "The YouTube content keeps getting better and better. Such valuable insights!", role: "Subscriber" }, { id: 3, name: "Emily Davis", text: "Being part of this community has helped me grow both personally and professionally.", role: "Discord Moderator" } ]; useEffect(() => { const interval = setInterval(() => { setCurrentSlide((prev) => (prev === testimonials.length 1 ? 0 : prev + 1)); }, 5000); return () => clearInterval(interval); }, []); return ( <div className={`min h screen ${isDarkMode ? "bg gray 900 text white" : "bg gray 50 text black"}`}> {/* Updated Header with bottom red border and rounded corners */} <header className={`fixed w full ${isDarkMode ? "bg gray 800" : "bg white"} shadow md z 50 border b 2 border red 600 rounded bl lg rounded br lg`}> <nav className="container mx auto px 6 py 3"> <div className="flex items center justify between"> <div className="flex 1"> <button onClick={toggleTheme} className={`p 2 rounded full ${isDarkMode ? "bg gray 700" : "bg gray 200"}`} > {isDarkMode ? <BsSun className="text yellow 500" /> : <BsMoon className="text gray 600" />} </button> </div> <div className="flex 1 text center"> <span className="text 4xl font bold tracking wider hover:text gray 700 transition colors duration 300 text red 600 font ['Changa ExtraLight']">SHoNgxBoNg</span> </div> <div className="flex 1 flex justify end"> <button className="bg blue 600 text white px 6 py 2 rounded full flex items center space x 2 hover:bg blue 700"> <FaDiscord className="text xl" /> <span>Join Discord</span> </button> </div> </div> </nav> </header> <main className="pt 20"> <section className={`min h [60vh] py 12 ${isDarkMode ? "bg gray 800" : "bg white"} relative flex items center justify center bg gradient to br from red 500/20 to purple 500/20`}> <div className="container mx auto px 6 relative"> <div className={`max w md mx auto ${isDarkMode ? "bg gray 700" : "bg white"} rounded lg shadow lg p 6 backdrop blur sm`}> <h2 className="text 2xl font bold text center mb 6">Login</h2> <form className="space y 4"> <div> <label className="block text sm font medium mb 1">Email</label> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w full px 3 py 1.5 rounded lg border focus:ring 2 focus:ring red 500 focus:border transparent" placeholder="Enter your email" /> </div> <div> <label className="block text sm font medium mb 1">Password</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w full px 3 py 1.5 rounded lg border focus:ring 2 focus:ring red 500 focus:border transparent" placeholder="Enter your password" /> </div> <button type="submit" className="w full bg red 600 text white py 1.5 rounded lg hover:bg red 700 transition colors duration 300" > Sign In </button> </form> </div> </div> </section> <section className={`py 20 ${isDarkMode ? "bg gray 800" : "bg white"} relative`}> <div className="container mx auto px 6 relative"> <div className="flex flex col md:flex row items center justify center py 16"> <div className="max w 3xl text center"> <h2 className="text 4xl font bold mb 8">About Us</h2> <p className="text lg mb 6">Welcome to SHoNgxBoNg, where gaming meets community! We are passionate about creating an inclusive space for gamers worldwide to connect, learn, and grow together.</p> <p className="text lg mb 6">Founded in 2020, our platform has grown into a vibrant community of dedicated gamers, content creators, and gaming enthusiasts. We specialize in providing top tier gaming content, educational resources, and a supportive environment for players of all skill levels.</p> <p className="text lg">Our mission is to foster meaningful connections through gaming while promoting positive gaming culture and helping players achieve their full potential.</p> </div> </div> </div> </section> <section className={`py 16 ${isDarkMode ? "bg gray 900" : "bg gray 100"}`}> <div className="container mx auto px 6"> <div className="grid grid cols 1 md:grid cols 3 gap 8"> <div className="text center"> <HiUsers className="text 5xl mx auto mb 4 text red 600" /> <h3 className="text 2xl font bold mb 2">10K+</h3> <p>Community Members</p> </div> <div className="text center"> <HiChartBar className="text 5xl mx auto mb 4 text red 600" /> <h3 className="text 2xl font bold mb 2">500+</h3> <p>Videos Created</p> </div> <div className="text center"> <HiStar className="text 5xl mx auto mb 4 text red 600" /> <h3 className="text 2xl font bold mb 2">50+</h3> <p>Awards Won</p> </div> </div> </div> </section> <section className={`py 16 ${isDarkMode ? "bg gray 800" : "bg white"}`}> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text center mb 12">What Our Community Says</h2> <div className="relative"> <div className="overflow hidden"> <div className="flex transition transform duration 500" style={{ transform: `translateX( ${currentSlide * 100}%)` }}> {testimonials.map((testimonial) => ( <div key={testimonial.id} className="w full flex shrink 0 px 4"> <div className={`p 8 rounded lg ${isDarkMode ? "bg gray 700" : "bg gray 100"}`}> <p className="text lg mb 4">{testimonial.text}</p> <div className="font bold">{testimonial.name}</div> <div className="text sm text gray 500">{testimonial.role}</div> </div> </div> ))} </div> </div> <button onClick={() => setCurrentSlide((prev) => (prev === 0 ? testimonials.length 1 : prev 1))} className="absolute left 0 top 1/2 transform translate y 1/2 p 2 bg red 600 text white rounded full" > <BiChevronLeft className="text 2xl" /> </button> <button onClick={() => setCurrentSlide((prev) => (prev === testimonials.length 1 ? 0 : prev + 1))} className="absolute right 0 top 1/2 transform translate y 1/2 p 2 bg red 600 text white rounded full" > <BiChevronRight className="text 2xl" /> </button> </div> </div> </section> <section className={`py 16 ${isDarkMode ? "bg gray 900" : "bg gray 100"}`}> <div className="container mx auto px 6"> <h2 className="text 3xl font bold text center mb 12">Connect With Us</h2> <div className="flex justify center space x 8"> <a href="#" className="text 4xl hover:text red 600 transition colors duration 300"><FaYoutube /></a> <a href="#" className="text 4xl hover:text red 600 transition colors duration 300"><FaDiscord /></a> <a href="#" className="text 4xl hover:text red 600 transition colors duration 300"><FaTwitter /></a> <a href="#" className="text 4xl hover:text red 600 transition colors duration 300"><FaTwitch /></a> <a href="#" className="text 4xl hover:text red 600 transition colors duration 300"><FaInstagram /></a> </div> </div> </section> </main> <footer className={`py 8 ${isDarkMode ? "bg gray 800" : "bg gray 100"}`}> <div className="container mx auto px 6 text center"> <p>© 2024 SHoNgxBoNg. All rights reserved.</p> </div> </footer> </div> ); }; export default PersonalBrandingPage;
