property-match/src/pages/Home.tsx

import { Container, Typography, Button, Card, CardContent, Chip } from '@mui/material'
import HomeIcon from '@mui/icons-material/Home'
import SearchIcon from '@mui/icons-material/Search'

export default function Home() {
  return (
    <Container maxWidth="lg" className="py-12">
      <div className="mb-8 text-center">
        <Typography variant="h3" component="h1" className="font-bold text-gray-800">
          Property Match
        </Typography>
        <Typography variant="subtitle1" className="mt-2 text-gray-500">
          Find your ideal property
        </Typography>
      </div>

      <div className="flex items-center gap-4 mb-10 max-w-2xl mx-auto">
        <Button variant="contained" size="large" startIcon={<SearchIcon />}>
          Search
        </Button>
        <Button variant="outlined" size="large" startIcon={<HomeIcon />}>
          Browse
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {(['Buy', 'Rent', 'Invest'] as const).map((category) => (
          <Card key={category} elevation={2} className="hover:shadow-lg transition-shadow duration-200">
            <CardContent className="p-6">
              <Chip label={category} color="primary" size="small" className="mb-3" />
              <Typography variant="h6" className="font-semibold mb-2">
                {category} a Property
              </Typography>
              <Typography variant="body2" className="text-gray-500">
                Browse listings available for {category.toLowerCase()} in your area.
              </Typography>
            </CardContent>
          </Card>
        ))}
      </div>
    </Container>
  )
}