import React from 'react';

import Header from './components/header/Header';
import Footer from './components/footer/Footer';
import Hero from './components/hero/Hero';
import Education from './components/education/Education';

import styles from './App.module.css';

function App() {
  return (
    <div className={styles.app}>
      <Header />
      <main className={styles.main}>
        <Hero />
        <section className={styles.section} style={{backgroundColor: '#333', color: '#fff'}}>
          <div className={styles.content}>
            <h1>Welcome to My Portfolio</h1>
            <p>This is where you'll add your portfolio content.</p>
          </div>
        </section>
        <section className={styles.section} style={{backgroundColor: '#f0f0f0'}}>
          <div className={styles.content}>
            <h2>Another Section</h2>
            <p>This section has a different background color.</p>
          </div>
        </section>
        <Education />
        {/* Add more sections as needed */}
      </main>
      <Footer />
    </div>
  );
}

export default App;