web_app/frontend/src/pages/LandingPage.jsx

import React from 'react';
import { Container, Typography, Button } from '@mui/material';
import { Link } from 'react-router-dom';
import { Box } from '@mui/system';
import Footer from '../components/Footer';
import Navbar from '../components/Navbar';

const LandingPage = () => {
  return (
    <>
      <Navbar />
      <Box 
      sx={{ 
        position: 'absolute',
        top: 0,
        left: 0,
        minHeight: '100vh', 
        width: '100%',
        backgroundImage: 'linear-gradient(to bottom, #4568dc, #b06ab3)', 
        backgroundRepeat: 'no-repeat', 
        backgroundSize: 'cover',
        zIndex: -1
      }}
      />
      <Container maxWidth="md" 
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh'
      }}>
        <Typography variant="h2" align="center" color="white" gutterBottom>
          Building a sustainable Dublin
        </Typography>
        <Button variant="contained" color="primary" component={Link} to="/dashboard/chat" style={{ margin: '10px', borderRadius: '8px', backgroundColor: 'rgba(255, 255, 255, 0.2)' }}>
          <Typography style={{ textTransform: 'none', fontSize: '16px'}}>
            Try it out
          </Typography>
        </Button>
      </Container>
      <Footer />
    </>
  );
};

export default LandingPage;