Initial commit

resources/js/app.tsx

@@ -0,0 +1,20 @@
+import '../css/app.css';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(<App {...props} />);
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});

resources/js/components/ActionButtons/ActionButtons.module.css

@@ -0,0 +1,74 @@
+.phone {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #f7941f;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+.phone-fixed {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #f7941f;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+
+.onlineorder {
+    margin: 5px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #ED561A;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+.onlineorder-fixed {
+    position: fixed;
+    right: 20px;
+    bottom: 84px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    background-color: #ED561A;
+    border-radius: 20px;
+    padding: 5px 10px;
+    width: fit-content;
+    font-weight: 400;
+}
+
+.onlineorder:hover, .onlineorder-fixed:hover {
+    background-color: #d12600;
+}
+
+.phone-icon {
+    margin-right: 7px;
+}
+
+.cart-icon {
+    margin-right: 7px;
+}
+
+.phone-link:hover {
+    text-decoration: none;
+}

resources/js/components/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faCartShopping, faPhone } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styles from './ActionButtons.module.css';
+import { Link } from '@inertiajs/react';
+
+const SolidIcons = {
+    faCartShopping,
+    faPhone,
+}
+
+interface ButtonData {
+    type: 'link';
+    data: {
+        name: string;
+        icon: keyof typeof SolidIcons;
+        btn_style: 'primary' | 'secondary';
+        link: string;
+        external: boolean;
+        new_tab: boolean;
+    };
+}
+
+interface ActionButtonsProps {
+    variant?: 'default' | 'floating';
+}
+
+export const ActionButtons: React.FC<ActionButtonsProps> = ({ variant = 'default' }) => {
+    const [buttons, setButtons] = React.useState<ButtonData[]>([]);
+
+    React.useEffect(() => {
+        fetch('/api/buttons')
+            .then(res => res.json())
+            .then(response => {
+                if (response.status === 'success') {
+                    setButtons(response.data);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching buttons:', error);
+            });
+    }, []);
+
+
+
+    return (
+        <div>
+            {buttons && buttons.length > 0 && buttons.map((button, index) => {
+                const icon: IconDefinition | null = button.data.icon ? (SolidIcons[button.data.icon] as IconDefinition) : null;
+                const isPrimary = button.data.btn_style === 'primary';
+
+                const buttonClass = variant === 'floating' 
+                ? isPrimary ? styles['onlineorder-fixed'] : styles['phone-fixed']
+                : isPrimary ? styles.onlineorder : styles.phone;
+
+                return button.data.external ? (
+                    <div className={buttonClass} key={index}>
+                        <a
+                            href={button.data.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles['phone-link']}
+                        >
+                            {icon && <FontAwesomeIcon className={isPrimary ? styles['cart-icon'] : styles['phone-icon']} icon={icon} />}
+                            <span>{button.data.name}</span>
+                        </a>
+                    </div>
+                ) : (
+                    <div className={buttonClass} key={index}>
+                        <Link  
+                            href={button.data.link}
+                            className={styles['phone-link']}
+                        >
+                            {icon && <FontAwesomeIcon className={isPrimary ? styles['cart-icon'] : styles['phone-icon']} icon={icon} />}
+                            <span>{button.data.name}</span>
+                        </Link>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

resources/js/components/Footer/Footer.module.css

@@ -0,0 +1,40 @@
+.footer {
+    font-size: 2rem;
+    text-align: center;
+    font-weight: 300;
+    position: relative;
+    color: white;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #242422;
+    padding: 20px 0;
+}
+
+.footer a {
+    color: #edb265;
+}
+
+.footer-icons {
+    margin-right: 5px;
+}
+
+.links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    font-size: 2.5rem;
+}
+
+.links a {
+    margin-right: 20px;
+    color: white;
+    display: block;
+}
+
+.links a > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

resources/js/components/Footer/Footer.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faFacebook, faGoogle } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from '@inertiajs/react';
+import styles from './Footer.module.css';
+
+const BrandsIcons = {
+    faFacebook,
+    faGoogle,
+}
+
+interface FooterLink {
+    type: 'link';
+    data: {
+        name: string;
+        icon?: keyof typeof BrandsIcons;
+        link: string;
+        external: boolean;
+    };
+}
+
+export default function Footer() {
+    const [links, setLinks] = React.useState<FooterLink[]>([]);
+
+    React.useEffect(() => {
+        fetch('/api/footer')
+            .then(res => res.json())
+            .then(response => {
+                if (response.status === 'success') {
+                    setLinks(response.data);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching footer links:', error);
+            });
+    }, []);
+    return (
+        <footer className={styles.footer}>
+            <div className={styles.links}>
+                {links && links.length > 0 && links.map((link, index) => {
+                    const icon: IconDefinition | null = link.data.icon ? BrandsIcons[link.data.icon] : null;
+
+                    const linkContent = (
+                        <>
+                            {icon && <FontAwesomeIcon icon={icon} className={styles['footer-icons']} />}
+                            {link.data.name}
+                        </>
+                    );
+
+                    return link.data.external ? (
+                        <a
+                            key={index}
+                            href={link.data.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center text-white/80 hover:text-accent transition-colors"
+                        >
+                            {linkContent}
+                        </a>
+                    ) : (
+                        <Link
+                            key={index}
+                            href={link.data.link}
+                            className="flex items-center text-white/80 hover:text-accent transition-colors"
+                        >
+                            {linkContent}
+                        </Link>
+                    );
+                })}
+            </div>
+            <div>© {new Date().getFullYear()} GHOST PIZZA Krzysztof Szymański. Wszelkie prawa zastrzeżone.</div>
+            <div>Wykonane przez <a target="_blank" rel="noreferrer" href='https://bwitek.dev'>BWitek.dev</a></div>
+        </footer>
+    );
+}

resources/js/components/Header/Header.module.css

@@ -0,0 +1,64 @@
+.header ul {
+    list-style-type: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: black;
+    margin-bottom: 45px;
+    font-weight: 400;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 3;
+}
+
+.header ul a {
+    color: white;
+    display: block;
+    text-decoration: none;
+    padding: 10px 20px;
+    font-size: 3rem;
+}
+
+.header ul a:hover {
+    text-decoration: underline;
+}
+
+.header {
+    margin: 0 auto;
+}
+
+.logo {
+    width: 100%;
+    max-width: 2000px;
+    height: auto;
+}
+
+.logo-small {
+    margin-top: 20px;
+    width: 90%;
+    max-width: 650px;
+}
+
+.img-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+@media (max-width: 480px) {
+    .header ul a {
+        font-size: 2.4rem;
+    }
+    .logo {
+        width: 100%;  
+        height: unset;
+    }
+}
+
+@media (max-width: 280px) {
+    .header ul a {
+        font-size: 1.6rem;
+    }
+}

resources/js/components/Header/Header.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from '@inertiajs/react';
+import styles from './Header.module.css';
+
+interface HeaderData {
+    status: string;
+    data: {
+        photo: string | null;
+        photo_mobile: string | null;
+        photo_menu: string | null;
+        title: string | null;
+    };
+}
+
+interface NavigationLink {
+    id: number;
+    sort_order: number;
+    name: string;
+    link: string;
+    external: number;
+    created_at: string;
+    updated_at: string;
+}
+
+export default function Header({isSmall=false}) {
+    const [innerWidth, setInnerWidth] = useState(0);
+    const [links, setLinks] = React.useState<NavigationLink[]>([]);
+    const [data, setData] = useState<HeaderData['data'] | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        Promise.all([
+            fetch('/api/homepage').then(res => res.json()),
+            fetch('/api/navigation').then(res => res.json())
+        ])
+            .then(([headerResponse, navigationResponse]) => {
+                setData(headerResponse.data);
+                setLinks(navigationResponse.data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                setLoading(false);
+            });
+
+
+        setInnerWidth(prevState => prevState = window.innerWidth);
+
+        function handleResize() {
+            setInnerWidth(prevState => prevState = window.innerWidth);
+        }
+        
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        }
+    }, []);
+
+    if (loading) {
+        return (
+            <></>
+        );
+    }
+
+    return (
+        <header className={styles.header}>
+          <nav>
+            <ul>
+                {links.map((link) => {
+                    return link.external ? (
+                        <li key={link.id}>
+                        <a
+                            href={link.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            {link.name}
+                        </a>
+                        </li>
+                    ) : (
+                        <li key={link.id}>
+                        <Link
+                            href={link.link}
+                        >
+                            {link.name}
+                        </Link>
+                        </li>
+                    );
+                })}
+            </ul>
+          </nav>
+          <div className="image-column">
+          {isSmall ? (
+            <>
+                {data && data.photo && data.photo_menu ? (
+                    <div className="image-container">
+                        <img className={styles['logo-small']} fetchPriority="high" src={data.photo_menu} alt="Logo pizzeri GhostPizza" />
+                    </div>
+                ) : null}
+            </>    
+            ) : (
+            (data && data.photo && data.photo_mobile) ? (
+                <div className="image-container">
+                {innerWidth > 1450 ? (
+                    <div className={styles['img-container']}>
+                    <img
+                        style={{ objectFit: "contain" }}
+                        className={styles.logo}
+                        src={data.photo}
+                        alt={data.title || 'Ghost Pizza'}
+                        fetchPriority="high"
+                    />
+                    </div>
+                ) : (
+                    <div className={styles['img-container']}>
+                    <img
+                        style={{ objectFit: "contain" }}
+                        className={styles.logo}
+                        src={data.photo_mobile}
+                        alt={data.title || 'Ghost Pizza'}
+                        fetchPriority="high"
+                    />
+                    </div>
+                )}
+                </div>
+            ) : null
+            )}
+          </div>
+        </header>
+    );
+}

resources/js/layouts/AppLayout.tsx

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { Head } from '@inertiajs/react';
+
+interface AppLayoutProps {
+    children: ReactNode;
+}
+
+export default ({ children }: AppLayoutProps) => 
+(<>
+    <Head>
+    </Head>
+    {children}
+</>);

resources/js/pages/Gallery/Gallery.module.css

@@ -0,0 +1,62 @@
+.bg {
+    padding-top: 65px;
+    background: rgb(232,97,39);
+    background: linear-gradient(180deg, #0077ad 0%, #242422 40%);
+    background-position: center;
+    background-size: cover;
+}
+
+.logo {
+    margin-top: 20px;
+    width: 90%;
+    max-width: 650px;
+}
+
+.main h2 {
+    text-align: center;
+    font-weight: 400;
+    font-size: 4.5rem;
+    margin: 30px 0;
+}
+
+.container {
+    min-height: 100vh;
+    max-width: 1200px;
+    margin: 0 auto 50px auto;
+    padding: 0 30px;
+    line-height: 0;
+    column-count: 3;
+    column-gap: 20px;  
+}
+
+.image {
+    position: relative;
+    margin: 10px 0;
+    border-radius: 15px;
+    width: 100%;
+    height: auto;
+}
+
+@media (max-width: 915px) {
+    .container {
+        column-count: 2;
+    }
+
+    .main h2 {
+        font-size: 3rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .bg {
+      background: linear-gradient(180deg, #0077ad 0%, #242422 50%);
+    }
+
+    .container {
+        column-count: 1;
+    }
+
+    .main h2 {
+        font-size: 2.4rem;
+    }
+}

resources/js/pages/Gallery/Gallery.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/AppLayout';
+import styles from './Gallery.module.css';
+import { ActionButtons } from '@/components/ActionButtons/ActionButtons';
+import Header from '@/components/Header/Header';
+import Footer from '@/components/Footer/Footer';
+
+interface Photo {
+    id: number;
+    sort_order: number;
+    name: string;
+    description: string | null;
+    photo: string;
+    created_at: string;
+    updated_at: string;
+}
+
+interface PhotosResponse {
+    status: string;
+    data: Photo[];
+}
+
+export default function Gallery() {
+    const [photos, setPhotos] = useState<Photo[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetch('/api/photos')
+            .then(res => res.json())
+            .then((response: PhotosResponse) => {
+                if (response.status === 'success') {
+                    setPhotos(response.data);
+                }
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('Error fetching photos:', error);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) {
+        return (
+            <></>
+        );
+    }
+
+    return (
+        <AppLayout>
+            <Head title="Galeria - Ghost Pizza" />
+            <div className={styles.bg}>
+                <Header isSmall={true} />
+                <main className={styles.main}>
+                <h2>Poniżej znajdziesz kilka zdjęć naszej przepysznej pizzy.</h2>
+                    <div className={styles.container}>
+                        {photos.map((photo, index) => (
+                            <img
+                                key={index}
+                                src={photo.photo}
+                                alt={photo.description ? photo.description : ""}
+                                className={styles.image}
+                            />
+                        ))}
+                    </div>
+                </main>
+                <ActionButtons variant="floating" />
+                <Footer />
+            </div>
+        </AppLayout>
+    );
+}

resources/js/pages/Home.module.css

@@ -0,0 +1,146 @@
+.container {
+    padding-top: 65px;
+    background: #242422;
+    background-position: center;
+    background-size: cover;
+}
+
+.container h1 {
+    font-weight: 400;
+    font-size: 3rem;
+}
+
+.container h1 span {
+    text-transform: uppercase;
+}
+
+.text {
+    font-size: 2rem;
+}
+
+.main {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 10px;
+    max-width: 1200px;
+    margin: 50px auto;
+}
+
+.main > div {
+    width: 50%;
+}
+
+.mapouter {
+    position: relative;
+    text-align: right;
+    height: 300px;
+    width: 500px;
+    margin: 20px 0;
+    border-radius: 20px;
+}
+
+.gmap_canvas {
+    overflow: hidden;
+    background: none !important;
+    height: 300px;
+    width: 500px;
+    border-radius: 20px;
+}
+
+.big {
+    font-weight: 400;
+    font-size: 2.8rem;
+}
+
+.big > h1, .big > h2, .big > h3, .big > h4, .big > h5, .big > h6 {
+    font-weight: normal;
+}
+
+.bold {
+    font-weight: 400;
+}
+
+.hours {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    font-size: 1.7rem;
+}
+
+.hours > div {
+    width: 33%;
+}
+
+.left {
+    padding: 0 60px;
+}
+
+.special {
+    font-size: 1.9rem;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 2px dashed rgba(0, 0, 0, 0.45);
+}
+
+.special strong {
+    text-transform: uppercase;
+    font-weight: 400;
+    font-size: 2.1rem;
+    color: #edb265;
+}
+
+.promo {
+    text-transform: uppercase;
+    font-weight: 400;
+    font-size: 1.8rem;
+}
+
+.promo strong {
+    color: #edb265;
+    font-size: 2rem;
+    font-weight: 400;
+}
+
+@media (max-width: 930px) {
+    .main {
+        flex-direction: column;
+    }
+
+    .main > div {
+        width: 100%;
+    }
+
+    .left {
+        padding: 0 20px;
+    }
+
+    .right {
+        margin-top: 50px;
+        padding: 0 20px;
+    }
+}
+
+@media (max-width: 660px) {
+    .mapouter,
+    .gmap_canvas {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding-top: 55px;
+    }
+
+    .container h1 {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+
+    .main {
+        margin: 10px auto 50px auto;
+    }
+}

resources/js/pages/Home.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import Header from '../components/Header/Header';
+import Footer from '../components/Footer/Footer';
+import { Head } from '@inertiajs/react';
+import styles from './Home.module.css';
+import AppLayout from '@/layouts/AppLayout';
+import { ActionButtons } from '../components/ActionButtons/ActionButtons';
+import classNames from 'classnames';
+
+interface OpeningHour {
+    type: 'opening_hour';
+    data: {
+        name: string;
+        time: string;
+    };
+}
+
+interface Promotion {
+    id: number;
+    sort_order: number;
+    title: string;
+    description: string;
+    additional_info: string | null;
+    created_at: string;
+    updated_at: string;
+}
+
+interface HomepageData {
+    status: string;
+    data: {
+        photo: string | null;
+        photo_mobile: string | null;
+        title: string | null;
+        body: string | null;
+        delivery: string | null;
+        address: string | null;
+        opening_hours: OpeningHour[];
+        widget_link: string | null;
+    };
+}
+
+export default function Home() {
+    const [data, setData] = useState<HomepageData['data'] | null>(null);
+    const [promotions, setPromotions] = useState<Promotion[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        Promise.all([
+            fetch('/api/homepage').then(res => res.json()),
+            fetch('/api/promotions').then(res => res.json())
+        ])
+            .then(([homepageResponse, promotionsResponse]) => {
+                setData(homepageResponse.data);
+                setPromotions(promotionsResponse.data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) {
+        return (
+            <></>
+        );
+    }
+
+    return (
+        <AppLayout>
+            <Head title={data?.title || 'Ghost Pizza'}/>
+            
+            <div className={styles.container}>
+            <Header />
+            <main className={styles.main}>
+            <div className={styles.left}>
+                {data?.body && (
+                    <div className={classNames(styles.text)}>
+                        <div  
+                            dangerouslySetInnerHTML={{ __html: data.body }} 
+                        />
+                    </div>
+                )}
+                <div className={classNames(styles.text, styles.promo)}>
+                    {promotions.map((promotion) => (
+                        <div key={promotion.id}>
+                            <strong>{promotion.title}</strong> {promotion.description} {promotion.additional_info}
+                        </div>
+                    ))}
+                </div>
+                {data?.delivery && (
+                    <div className={classNames(styles.text, styles.special)}>
+                        <div  
+                            dangerouslySetInnerHTML={{ __html: data.delivery }} 
+                        />
+                    </div>
+                )}
+
+                <ActionButtons variant="default" />
+            </div>
+            <div className={styles.right}>
+                {data?.address && (
+                    <div className={classNames(styles.big)} dangerouslySetInnerHTML={{ __html: data.address }} />
+                )}
+
+                <div className={styles.big}>Godziny otwarcia:</div>
+                <div className={styles.hours}>  
+                    {data?.opening_hours.map((hour, index) => (
+                        <div key={index}><div>{hour.data.name}</div> <div className={styles.bold}>{hour.data.time}</div></div>
+                    ))}
+                </div>
+
+                <div className={styles.mapouter}>
+                    <div className={styles['gmap_canvas']}>
+                        {data?.widget_link ? (
+                            <iframe
+                                title="Mapa"
+                                src={data.widget_link}
+                                width="600" 
+                                height="500"
+                                frameBorder="0" 
+                                scrolling="no"
+                                id="gmap_canvas"
+                                loading="lazy"
+                                referrerPolicy="no-referrer-when-downgrade"
+                            />
+                        ) : null}
+                    </div>
+                </div>
+            </div>
+            </main>
+            <Footer />
+        </div>
+        </AppLayout>
+    );
+}

resources/js/pages/Menu/Menu.module.css

@@ -0,0 +1,145 @@
+.bg {
+    padding-top: 65px;
+    background: rgb(232,97,39);
+    background: linear-gradient(180deg, #0077ad 0%, #242422 40%);
+    background-position: center;
+    background-size: cover;
+}
+
+@media (max-width: 480px) {
+    .bg {
+      background: linear-gradient(180deg, #0077ad 0%, #242422 50%);
+    }
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    font-size: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
+.main h2 {
+    text-align: center;
+    font-size: 5rem;
+    font-weight: 400;
+}
+
+.product {
+    width: 30%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 5px 5px 12px 5px;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 10px;
+    margin: 10px;
+    text-align: center;
+}
+
+.product:nth-last-child(1) {
+    margin-bottom: 10px;
+}
+
+.pepper-icon {
+    color: #d73c41;
+}
+
+.name {
+    color: #feea03;
+    font-weight: 400;
+    font-size: 2.6rem;
+    text-transform: uppercase;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.vege {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.8rem;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+}
+
+.vege > .circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #84b341;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 7px;
+}
+
+.circle > .leaf {
+    font-size: 2.5rem;
+    color: white;
+}
+
+.legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    margin: 0 auto;
+    border-radius: 10px;
+    padding: 5px;
+    font-size: 2.5rem;
+    font-weight: 400;
+}
+
+.legend div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 20px;
+}
+
+.legend div:nth-last-child(1) {
+    margin-right: 0;
+}
+
+.price {
+    margin-top: 12px;
+}
+
+.price span {
+    margin-right: 10px;
+}
+
+@media (max-width: 915px) {
+    .product {
+        width: 45%;
+    }
+
+}
+
+@media (max-width: 480px) {
+    .product {
+        width: 100%;
+    }
+
+    .legend {
+        flex-direction: column;
+        width: fit-content;
+    }
+  
+    .legend div {
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+
+    .legend div:nth-last-child(1) {
+        margin-bottom: 0;
+    }
+}

resources/js/pages/Menu/Menu.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useState } from 'react';
+import { Head } from '@inertiajs/react';
+import AppLayout from '@/layouts/AppLayout';
+import { faLeaf } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ActionButtons } from '@/components/ActionButtons/ActionButtons';
+import Header from '@/components/Header/Header';
+import Footer from '@/components/Footer/Footer';
+import styles from './Menu.module.css';
+
+interface Ingredient {
+    id: number;
+    name: string;
+    description?: string;
+}
+
+interface SizeInfo {
+    description: string;
+    photo: string | null;
+}
+
+interface Sizes {
+    small: SizeInfo;
+    medium: SizeInfo;
+    large: SizeInfo;
+}
+
+interface ProductItem {
+    name: string;
+    description?: string;
+    ingredients: Ingredient[];
+    price_small?: number;
+    price_medium?: number;
+    price_large?: number;
+    spicy?: number;
+}
+
+interface Product {
+    id: number;
+    category: string;
+    description?: string;
+    products: Array<{
+        type: 'product';
+        data: ProductItem;
+    }>;
+}
+
+interface ProductsResponse {
+    status: string;
+    data: Product[];
+}
+
+const SizeIcon = ({ size, sizes }: { size: 'small' | 'medium' | 'large', sizes: Sizes | null }) => {
+    const sizeClasses = {
+        small: 'h-7 object-cover object-center',
+        medium: 'h-7 object-cover object-center',
+        large: 'h-7 object-cover object-center'
+    };
+
+    const getPhotoUrl = () => {
+        if (!sizes) return '/img/placeholder.png';
+        return sizes[size]?.photo || '/img/placeholder.png';
+    };
+
+    return (
+        <img 
+            src={getPhotoUrl()} 
+            className={sizeClasses[size]} 
+            alt={`${size} size`}
+        />
+    )
+};
+
+export default function Menu() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [sizes, setSizes] = useState<Sizes | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        Promise.all([
+            fetch('/api/products').then(res => res.json()),
+            fetch('/api/sizes').then(res => res.json())
+        ])
+        .then(([productsResponse, sizesResponse]) => {
+            setProducts(productsResponse.data);
+            setSizes(sizesResponse.data);
+            setLoading(false);
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+            setLoading(false);
+        });
+    }, []);
+
+    if (loading) {
+        return (
+            <></>
+        );
+    }
+
+    const PepperIcon = function PepperIcon() {return (
+        <img src="/storage/static_images/pepper.png" alt="" width="37px" height="29px" />
+    )}
+
+    function getPepperIcons(length: number) {
+        const arr = [];
+        for(let pepper=0; pepper < length; pepper++) {
+            arr.push(<PepperIcon key={pepper} />)
+        }
+        return arr;
+    }
+
+    return (
+        <AppLayout>
+            <Head title="Menu - Ghost Pizza" />
+            <div className={styles.bg}>
+
+
+                <Header isSmall={true} />
+                <main className={styles.main}>
+                    <h2>Pizza:</h2>
+                    <div className={styles.vege}><div className={styles.circle}><FontAwesomeIcon icon={faLeaf} className={styles.leaf} /></div>VEGE? Zapytaj obsługę</div>
+                    <div className={styles.legend}>
+                    {sizes && (
+                        <>
+                            {(['small', 'medium', 'large'] as const).map((size) => (
+                                <div key={size} className="flex items-center gap-2">
+                                    <SizeIcon size={size} sizes={sizes} />
+                                    {sizes[size].description}
+                                </div>
+                            ))}
+                        </>
+                    )}
+                    </div>
+
+                    {products ? products.map((category, categoryIndex) => (
+                        <div key={categoryIndex}>
+                            {categoryIndex != 0 ? <h2>{category.category}</h2> : null}
+                            <div className={styles.container}>
+                                {category.products.map((item, index) => (
+                                <div key={index} className={styles.product}>
+                                    <div className={styles.name}>{categoryIndex === 0 ? `${index + 1}. ` : ''}{item.data.name} {item.data.spicy ? getPepperIcons(item.data.spicy) : null}</div>
+                                    <div>{item.data.ingredients.map(i => i.name).join(', ')}</div>
+                                    {item.data.price_small && item.data.price_medium && item.data.price_large ? 
+                                    <div className={styles.price}><span><SizeIcon size="small" sizes={sizes} />{item.data.price_small}zł</span> <span><SizeIcon size="medium" sizes={sizes} />{item.data.price_medium}zł</span><span><SizeIcon size="large" sizes={sizes} />{item.data.price_large}zł</span></div>
+                                    : item.data.price_small ? <div className={styles.price}><span>{item.data.price_small}zł</span></div> : null}
+                                </div>
+                                ))}
+                            </div>
+                        </div>
+                    )) : null}
+                </main>
+                <ActionButtons variant="floating" />
+                <Footer />
+            </div>
+        </AppLayout>
+    );
+}

resources/js/ssr.tsx

@@ -0,0 +1,30 @@
+import { createInertiaApp } from '@inertiajs/react';
+import createServer from '@inertiajs/react/server';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import ReactDOMServer from 'react-dom/server';
+import { type RouteName, route } from 'ziggy-js';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createServer((page) =>
+    createInertiaApp({
+        page,
+        render: ReactDOMServer.renderToString,
+        title: (title) => `${title} - ${appName}`,
+        resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
+        setup: ({ App, props }) => {
+            /* eslint-disable */
+            // @ts-expect-error
+            global.route<RouteName> = (name, params, absolute) =>
+                route(name, params as any, absolute, {
+                    // @ts-expect-error
+                    ...page.props.ziggy,
+                    // @ts-expect-error
+                    location: new URL(page.props.ziggy.location),
+                });
+            /* eslint-enable */
+
+            return <App {...props} />;
+        },
+    }),
+);

resources/js/types/global.d.ts

@@ -0,0 +1,5 @@
+import type { route as routeFn } from 'ziggy-js';
+
+declare global {
+    const route: typeof routeFn;
+}

resources/js/types/index.d.ts

@@ -0,0 +1,19 @@
+import { LucideIcon } from 'lucide-react';
+import type { Config } from 'ziggy-js';
+
+export interface BreadcrumbItem {
+    title: string;
+    href: string;
+}
+
+export interface NavGroup {
+    title: string;
+    items: NavItem[];
+}
+
+export interface NavItem {
+    title: string;
+    href: string;
+    icon?: LucideIcon | null;
+    isActive?: boolean;
+}

resources/js/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />