import {Body, Footer, Header, Ratio} from "./lib"
import "./page.css"

export default function Home() {
    const ratio: Ratio = new Ratio(8, 6, 88);

    return (
        <div className="page-container">
            <Header height={ratio.top()} className="bg-gray-800 flex flex-row justify-center items-center">
                <h1>My Website</h1>
            </Header>
            <Body height={ratio.middle()} className="bg-gray-700 justify-center items-center flex flex-col">
                <h1>Main Content</h1>
                <p>Your page content here...</p>
            </Body>
            <Footer height={ratio.bottom()} className="bg-gray-800 justify-center items-center flex">
                <p>© 2025 Custom Footer</p>
            </Footer>
        </div>
    );
};
