Apple Sales Website

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <header className="header">
        <div className="container">
          <h1 className="logo">🍎 Apple Fresh</h1>
          <nav>
            <a href="#products">Products</a>
            <a href="#features">Features</a>
            <a href="#reviews">Reviews</a>
            <a href="#contact">Contact</a>
          </nav>
        </div>
      </header>

      <section className="hero">
        <div className="container">
          <div className="hero-text">
            <h2>Premium Apples, Direct from the Orchard</h2>
            <p>Fresh, crisp, and sustainably grown. Taste the difference.</p>
            <button className="btn">Shop Now</button>
          </div>
          <div className="hero-image">
            <img src="https://placehold.co/600x400/FF0000/FFFFFF?text=Apple+Basket" alt="Fresh apples" />
          </div>
        </div>
      </section>

      <section id="features" className="features">
        <div className="container">
          <h2>Why Choose Our Apples?</h2>
          <div className="feature-grid">
            <div className="feature-card">
              <img src="https://placehold.co/100x100/4CAF50/FFFFFF?text=Organic" alt="Organic" />
              <h3>100% Organic</h3>
              <p>No pesticides, just pure nature.</p>
            </div>
            <div className="feature-card">
              <img src="https://placehold.co/100x100/2196F3/FFFFFF?text=Fresh" alt="Fresh" />
              <h3>Picked at Peak</h3>
              <p>Harvested at the perfect ripeness.</p>
            </div>
            <div className="feature-card">
              <img src="https://placehold.co/100x100/FF9800/FFFFFF?text=Delivery" alt="Delivery" />
              <h3>Fast Delivery</h3>
              <p>Straight to your doorstep.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="products" className="products">
        <div className="container">
          <h2>Our Apple Varieties</h2>
          <div className="product-grid">
            <div className="product-card">
              <img src="https://placehold.co/300x300/FF6666/FFFFFF?text=Red+Delicious" alt="Red Delicious" />
              <h3>Red Delicious</h3>
              <p>Sweet and juicy.</p>
              <span className="price">$2.99/lb</span>
              <button className="btn">Add to Cart</button>
            </div>
            <div className="product-card">
              <img src="https://placehold.co/300x300/66FF66/FFFFFF?text=Granny+Smith" alt="Granny Smith" />
              <h3>Granny Smith</h3>
              <p>Tart and crisp.</p>
              <span className="price">$3.49/lb</span>
              <button className="btn">Add to Cart</button>
            </div>
            <div className="product-card">
              <img src="https://placehold.co/300x300/FFCC00/FFFFFF?text=Golden+Delicious" alt="Golden Delicious" />
              <h3>Golden Delicious</h3>
              <p>Mild and sweet.</p>
              <span className="price">$2.79/lb</span>
              <button className="btn">Add to Cart</button>
            </div>
            <div className="product-card">
              <img src="https://placehold.co/300x300/FF6600/FFFFFF?text=Honeycrisp" alt="Honeycrisp" />
              <h3>Honeycrisp</h3>
              <p>Explosively crisp.</p>
              <span className="price">$4.99/lb</span>
              <button className="btn">Add to Cart</button>
            </div>
          </div>
        </div>
      </section>

      <section id="reviews" className="reviews">
        <div className="container">
          <h2>What Our Customers Say</h2>
          <div className="review-grid">
            <blockquote>
              <p>"Best apples I've ever had! So fresh."</p>
              <cite>- Sarah M.</cite>
            </blockquote>
            <blockquote>
              <p>"My kids love the Honeycrisp. Will order again."</p>
              <cite>- David L.</cite>
            </blockquote>
            <blockquote>
              <p>"Fast delivery and great quality."</p>
              <cite>- Emily R.</cite>
            </blockquote>
          </div>
        </div>
      </section>

      <footer id="contact" className="footer">
        <div className="container">
          <div className="footer-col">
            <h4>Apple Fresh</h4>
            <p>We deliver the finest apples from our family farm to your table.</p>
          </div>
          <div className="footer-col">
            <h4>Quick Links</h4>
            <a href="#products">Products</a>
            <a href="#features">Features</a>
            <a href="#reviews">Reviews</a>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <p>info@applefresh.com</p>
            <p>+1 (555) 123-4567</p>
          </div>
        </div>
        <div className="footer-bottom">
          <p>&copy; 2025 Apple Fresh. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

export default App;