generated_code_67c700e11aaea15b7f2f2616.js

import React from 'react';
import {
  Menu,
  Facebook,
  Twitter,
  Linkedin,
  Github,
  Instagram,
} from 'lucide-react';

const Navbar = () => {
  return (
    <nav className="bg-white shadow-md py-4">
      <div className="container mx-auto flex justify-between items-center">
        <div className="flex items-center">
          <a href="/" className="text-2xl font-bold text-gray-800">
            Pixora
          </a>
        </div>
        <div className="hidden md:flex space-x-6">
          <a href="/" className="text-gray-700 hover:text-gray-900">
            Home
          </a>
          <a href="/" className="text-gray-700 hover:text-gray-900">
            How It Works
          </a>
          <a href="/" className="text-gray-700 hover:text-gray-900">
            Features
          </a>
          <a href="/" className="text-gray-700 hover:text-gray-900">
            Pricing
          </a>
          <a href="/" className="text-gray-700 hover:text-gray-900">
            Get Started
          </a>
          <a href="/" className="text-gray-700 hover:text-gray-900">
            Support
          </a>
        </div>
        <div className="hidden md:flex">
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Start Now
          </button>
        </div>
        <div className="md:hidden">
          <Menu className="h-6 w-6 text-gray-800 cursor-pointer" />
        </div>
      </div>
    </nav>
  );
};

const HeroSection = () => {
  return (
    <div className="bg-gradient-to-r from-gray-900 to-gray-800 py-20">
      <div className="container mx-auto flex flex-col md:flex-row items-center justify-between">
        <div className="md:w-1/2">
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
            Welcome to Pixora - Sketch. Convert. Deploy.
          </h1>
          <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg">
            Start Designing
          </button>
        </div>
        <div className="md:w-1/2">
          <img
            src="https://cdn3d.iconscout.com/3d/premium/thumb/teenage-girl-doing-namaste-3d-illustration-download-in-png-blend-fbx-gltf-file-formats--cute-welcome-gratitude-pack-people-illustrations-6581909.png?f=webp"
            alt="3D Girl Doing Namaste"
            className="w-full h-auto"
          />
        </div>
      </div>
    </div>
  );
};

const FeatureCard = ({ title, description }) => {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <img
        src="https://www.svgrepo.com/show/508699/landscape-placeholder.svg"
        alt={title}
        className="w-12 h-12 mb-4"
      />
      <h3 className="text-lg font-bold text-gray-800 mb-2">{title}</h3>
      <p className="text-sm text-gray-600">{description}</p>
    </div>
  );
};

const FeaturesSection = () => {
  const features = [
    {
      title: 'Instant Conversion',
      description: 'Convert sketches to code instantly.',
    },
    {
      title: 'AI-Powered',
      description: 'Leverage AI for accurate conversions.',
    },
    {
      title: 'Supports Multiple Formats',
      description: 'Works with various sketch formats.',
    },
    {
      title: 'Easy Deployment',
      description: 'Deploy your projects with a single click.',
    },
  ];

  return (
    <div className="py-16">
      <div className="container mx-auto text-center">
        <h2 className="text-3xl font-bold text-gray-800 mb-8">Why Pixora?</h2>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <FeatureCard
              key={index}
              title={feature.title}
              description={feature.description}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

const HowItWorksSection = () => {
    const steps = [
        { title: 'Sketch', description: 'Create your design sketch.' },
        { title: 'Upload', description: 'Upload your sketch to Pixora.' },
        { title: 'Convert', description: 'Convert your sketch to code.' },
        { title: 'Deploy', description: 'Deploy your project instantly.' },
    ];

    return (
        <div className="py-16 bg-gray-100">
            <div className="container mx-auto text-center">
                <h2 className="text-3xl font-bold text-gray-800 mb-8">How Pixora Works</h2>
                <div className="flex flex-col md:flex-row justify-center items-center gap-8">
                    {steps.map((step, index) => (
                        <div
                            key={index}
                            className="bg-white rounded-lg shadow-md p-6 border-2 border-purple-200  hover:shadow-lg transition duration-300 relative" style={{
                                backgroundImage: 'linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05))',
                            }}
                        >

                            
                            <div className='absolute inset-0 rounded-lg border-[1.5px] border-purple-400 opacity-70 -z-10' ></div>
                            <h3 className="text-lg font-bold text-gray-800 mb-2">{step.title}</h3>
                            <p className="text-sm text-gray-600">{step.description}</p>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

const Footer = () => {
  return (
    <footer className="bg-gray-900 py-8">
      <div className="container mx-auto text-center text-white">
        <div className="flex justify-center space-x-4 mb-4">
          <a href="/" className="hover:text-gray-400">
            Privacy Policy
          </a>
          <a href="/" className="hover:text-gray-400">
            Terms of Service
          </a>
          <a href="/" className="hover:text-gray-400">
            Contact
          </a>
        </div>
        <div className="flex justify-center space-x-4">
          <a href="/" className="hover:text-gray-400">
            <Twitter className="h-6 w-6" />
          </a>
          <a href="/" className="hover:text-gray-400">
            <Linkedin className="h-6 w-6" />
          </a>
          <a href="/" className="hover:text-gray-400">
            <Github className="h-6 w-6" />
          </a>
          <a href="/" className="hover:text-gray-400">
            <Instagram className="h-6 w-6" />
          </a>
            <a href="/" className="hover:text-gray-400">
            <Facebook className="h-6 w-6" />
          </a>
        </div>
      </div>
    </footer>
  );
};

const App = () => {
  return (
    <div>
      <Navbar />
      <HeroSection />
      <FeaturesSection />
      <HowItWorksSection />
      <Footer />
    </div>
  );
};

export default App;