src/components/Home.jsx

import React from 'react';

function Home({ setActiveTab, setIsTutorialActive }) {

  const handleStartFocus = () => {
    setActiveTab('focus');
  };

  const handleStartTutorial = () => {
    setIsTutorialActive(true);
    setActiveTab('focus');
  };

  return (
    <main id="page-a" className="page">

      <h1>FocusGuard</h1>

      <p>Your productivity monitor assistant.</p>



      <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center', marginTop: '30px' }}>

        

        <button className="btn-main" onClick={handleStartFocus} style={{ width: '250px' }}>

          Start Focus

        </button>



        <button className="btn-main" onClick={handleStartTutorial} style={{ width: '250px' }}>

          Tutorial

        </button>

        

      </div>

    </main>
  );
}

export default Home;