import React, { useState } from 'react';

import src from '../App.css';

function App() {
return (
<div className="bg-gray-50 min-h-screen">
<Navbar />
<main>
<Hero />
<StatsSection />
<ServicesSection />
<PortfolioSection />
<PricingSection />
<ContactSection />
</main>
<Footer />
</div>
);
}

const Navbar = () => {

const [isMenuOpen, setIsMenuOpen] = useState(false);
const menuItems = ['Home', 'Services', 'Portfolio', 'Pricing', 'Contact'];

return (
<nav className="bg-white shadow-lg fixed w-full z-20 top-0 left-0">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="flex-shrink-0 flex items-center">
<h1 className="text-2xl font-bold text-blue-800">
PRESTIGE INDUSTRIES
</h1>
</div>
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8 sm:items-center">
{menuItems.map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm
font-medium transition duration-300 ease-in-out transform hover:scale-105"
>
{item.toUpperCase()}
</a>
))}
</div>
<div className="-mr-2 flex items-center sm:hidden">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="inline-flex items-center justify-center p-2 rounded-md
text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2
focus:ring-inset focus:ring-blue-500"
>
{isMenuOpen ? 'Close' : 'Menu'}
</button>
</div>
</div>
</div>
 {isMenuOpen && (
<div className="sm:hidden">
<div className="pt-2 pb-3 space-y-1">
{menuItems.map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="text-gray-700 hover:bg-gray-50 hover:text-blue-600 block
px-3 py-2 text-base font-medium"
>
{item}
</a>
))}
</div>
</div>
)}
</nav>
);
};

const Hero = () => {

return (
<div id="home" className="relative pt-24 pb-16 bg-gradient-to-br from-blue-100
to-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-4xl tracking-tight font-extrabold text-gray-900
sm:text-5xl md:text-6xl">
Transforming Steel,
<span className="block text-blue-600">Empowering Industries</span>
</h1>
<p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg
md:mt-5 md:text-xl md:max-w-3xl">
Leading the steel industry with innovative solutions, precision
engineering, and commitment to excellence.
</p>
</div>
</div>
</div>
);
};

const StatsSection = () => {

const stats = [
{ number: '10,000+', label: 'Happy Customers' },
{ number: 'No. 1', label: 'Steel Industry' },
{ number: '2,000+', label: 'Projects' },
{ number: '25+', label: 'Years Experience' }
];

return (
<div className="bg-white py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
{stats.map((stat, index) => (
<div key={index} className="p-6 bg-blue-50 rounded-lg shadow-md
transition duration-300 hover:shadow-xl">
<div className="text-4xl font-bold text-blue-600">{stat.number}</div>
<div className="mt-2 text-sm text-gray-600">{stat.label}</div>
 </div>
))}
</div>
</div>
</div>
);
};

const ServicesSection = () => {

const services = [
{
title: 'Steel Fabrication',
description: 'Custom steel solutions tailored to your specific
requirements.',
icon: ''
},
{
title: 'Engineering Consulting',
description: 'Expert guidance and innovative design strategies.',
icon: '🧰'
},
{
title: 'Quality Assurance',
description: 'Rigorous testing and quality control processes.',
icon: '✅'
},
{
title: 'Custom Manufacturing',
description: 'Precision manufacturing for diverse industrial needs.',
icon: '🏭'
},
{
title: 'Project Management',
description: 'End-to-end project planning and execution.',
icon: '📊'
},
{
title: 'Technical Support',
description: 'Comprehensive support throughout project lifecycle.',
icon: ''
}
];

return (
<div id="services" className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-center text-gray-900 mb-12">
Our Services
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{services.map((service, index) => (
<div
key={index}
className="bg-white p-6 rounded-xl shadow-md hover:shadow-xl
transition duration-300 transform hover:-translate-y-2"
>
<div className="text-4xl mb-4">{service.icon}</div>
<h3 className="text-xl font-semibold text-blue-800 mb-3">
{service.title}
 </h3>
<p className="text-gray-600">
{service.description}
</p>
</div>
))}
</div>
</div>
</div>
);
};

const PortfolioSection = () => {

const designs = ['Project A', 'Project B', 'Project C', 'Project D', 'Project E',
'Project F'];

return (
<div id="portfolio" className="py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-center text-gray-900 mb-12">
Our Portfolio
</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-8">
{designs.map((design, index) => (
<div
key={index}
className="bg-blue-100 rounded-lg overflow-hidden shadow-md
hover:shadow-xl transition duration-300 transform hover:scale-105"
>
<div className="p-6 text-center">
<h3 className="text-xl font-semibold text-blue-800">
{design}
</h3>
</div>
</div>
))}
</div>
</div>
</div>
);
};

const PricingSection = () => {

const pricingPlans = [
{
name: 'Basic Plan',
price: '$999',
features: ['Standard Fabrication', 'Basic Consultation', 'Quality Check']
},
{
name: 'Pro Plan',
price: '$1,999',
features: ['Advanced Fabrication', 'Comprehensive Consultation', 'Priority
Support']
},
{
name: 'Enterprise Plan',
price: '$3,999',
features: ['Custom Solutions', 'Dedicated Support', 'Full Project
Management']
}
];

return (
<div id="pricing" className="bg-gray-50 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-center text-gray-900 mb-12">
Pricing Plans
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{pricingPlans.map((plan, index) => (
<div
key={index}
className="bg-white rounded-xl shadow-lg p-6 text-center
hover:shadow-xl transition duration-300 transform hover:-translate-y-4"
>
<h3 className="text-xl font-semibold text-blue-800 mb-4">
{plan.name}
</h3>
<div className="text-4xl font-bold text-blue-600 mb-6">
{plan.price}
</div>
<ul className="space-y-4 mb-8">
{plan.features.map((feature, idx) => (
<li key={idx} className="text-gray-600">
{feature}
</li>
))}
</ul>
<button className="w-full bg-blue-600 text-white py-3 rounded-lg
hover:bg-blue-700 transition duration-300">
Select Plan
</button>
</div>
))}
</div>
</div>
</div>
);
};

const ContactSection = () => {

return (
<div id="contact" className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-center text-gray-900 mb-12">
Contact Us
</h2>
<div className="max-w-lg mx-auto bg-blue-50 p-8 rounded-xl shadow-md">
<form className="space-y-6">
<div>
<input
type="text"
placeholder="Your Name"
className="w-full px-4 py-3 rounded-lg border border-gray-300
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
 <div>
<input
type="email"
placeholder="Your Email"
className="w-full px-4 py-3 rounded-lg border border-gray-300
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<input
type="tel"
placeholder="Phone Number"
className="w-full px-4 py-3 rounded-lg border border-gray-300
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<textarea
placeholder="Your Message"
className="w-full px-4 py-3 rounded-lg border border-gray-300
focus:outline-none focus:ring-2 focus:ring-blue-500 h-32"
/>
</div>
<button
type="submit"
className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-
blue-700 transition duration-300"
>
Send Message
</button>
</form>
</div>
</div>
</div>
);
};

const Footer = () => {

return (
<footer className="bg-gray-900 text-white py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-
row justify-between items-center">
<div className="text-xl font-bold mb-4 md:mb-0">
PRESTIGE INDUSTRIES
</div>
<div className="flex space-x-6">
<a href="#" className="hover:text-blue-400 transition duration-
300">Privacy Policy</a>
<a href="#" className="hover:text-blue-400 transition duration-300">Terms
of Service</a>
<a href="#" className="hover:text-blue-400 transition duration-
300">Contact</a>
</div>
<div className="mt-4 md:mt-0">
© 2024 Prestige Industries. All Rights Reserved.
</div>
</div>
</footer>
);
};

export default App;