1- < body class ="bg-white text-gray-800 ">
2- <!-- Header -->
3- < header class ="flex justify-between items-center px-8 py-6 shadow-md ">
4- < div class ="text-2xl font-bold text-blue-600 "> YourBrand</ div >
5- < nav class ="space-x-6 ">
6- < a href ="# " class ="text-gray-600 hover:text-blue-600 "> Home</ a >
7- < a href ="# " class ="text-gray-600 hover:text-blue-600 "> Features</ a >
8- < a href ="# " class ="text-gray-600 hover:text-blue-600 "> Pricing</ a >
9- < a href ="# " class ="text-gray-600 hover:text-blue-600 "> Contact</ a >
10- </ nav >
11- </ header >
12-
13- <!-- Hero Section -->
14- < section class ="flex flex-col items-center text-center px-6 py-24 bg-gray-50 ">
15- < h1 class ="text-4xl sm:text-5xl font-extrabold mb-6 text-gray-900 ">
16- Build Better Products with Us
17- </ h1 >
18- < p class ="text-lg sm:text-xl text-gray-600 max-w-xl mb-8 ">
19- We help startups and teams launch fast with beautifully designed, scalable templates.
20- </ p >
21- < div class ="flex flex-col sm:flex-row gap-4 ">
22- < a href ="# " class ="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ">
23- Get Started
24- </ a >
25- < a href ="# " class ="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition ">
26- Learn More
27- </ a >
28- </ div >
29- </ section >
30-
31- <!-- Features Section -->
32- < section class ="px-8 py-20 bg-white text-center ">
33- < h2 class ="text-3xl font-bold mb-10 "> Why Choose Us?</ h2 >
34- < div class ="grid grid-cols-1 sm:grid-cols-3 gap-10 max-w-6xl mx-auto ">
35- < div >
36- < div class ="text-blue-600 text-4xl mb-4 "> 🚀</ div >
37- < h3 class ="font-semibold text-xl mb-2 "> Fast Deployment</ h3 >
38- < p class ="text-gray-600 "> Deploy your projects quickly with our streamlined solutions.</ p >
39- </ div >
40- < div >
41- < div class ="text-blue-600 text-4xl mb-4 "> 💡</ div >
42- < h3 class ="font-semibold text-xl mb-2 "> Innovative Design</ h3 >
43- < p class ="text-gray-600 "> Modern and sleek UI/UX to impress your users from day one.</ p >
44- </ div >
45- < div >
46- < div class ="text-blue-600 text-4xl mb-4 "> 📞</ div >
47- < h3 class ="font-semibold text-xl mb-2 "> 24/7 Support</ h3 >
48- < p class ="text-gray-600 "> Our support team is available around the clock to help you out.</ p >
49- </ div >
50- </ div >
51- </ section >
52-
53- <!-- CTA Section -->
54- < section class ="px-8 py-20 bg-blue-600 text-white text-center ">
55- < h2 class ="text-3xl font-bold mb-4 "> Ready to get started?</ h2 >
56- < p class ="text-lg mb-8 "> Join hundreds of satisfied users launching their projects with us.</ p >
57- < a href ="# " class ="px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-100 transition ">
58- Start Free Trial
59- </ a >
60- </ section >
61-
62- <!-- Footer -->
63- < footer class ="px-8 py-6 bg-gray-100 text-center text-gray-600 text-sm ">
64- © 2025 YourBrand. All rights reserved.
65- </ footer >
66- </ body >
1+ < div class ="p-4 bg-gray-100 rounded-lg ">
2+ <!-- Start building your component here -->
3+ < p class ="text-gray-600 "> Your component content goes here...</ p >
4+ </ div >
0 commit comments