Landing page gpt 1

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import axios from 'axios';
import Navbar from './Navbar';
import { Card, CardBody, CardFooter, CardHeader } from '@material-tailwind/react';
import { TbCurrencyRupeeNepalese } from 'react-icons/tb';
import { BiMap } from 'react-icons/bi';
import { Typography } from '@material-tailwind/react';

function LandingPage() {
  const { user } = useSelector(state => state);
  const [postList, setPostList] = useState([]);
  const [recommendations, setRecommendations] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:8000/post/").then(res => {
      setPostList(res.data);
    });

    axios.get(`http://localhost:8000/recommendation/${user.userState.id}`).then(res => {
      setRecommendations(res.data);
    });
  }, []);

  return (
    <div>
      <Navbar />
      <div className="flex justify-between">
        <div className="flex flex-col gap-12 mt-14 ml-36">
          {postList.map(post => (
            <Card key={post.id} className="w-[96] h-[400px]">
              <CardHeader
                color="blue"
                className="relative h-72"
                style={{
                  backgroundImage: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fhouses%2F&psig=AOvVaw3zUVQWy4pyWV7lu67CNLrE&ust=1683308930554000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCMCxm8ic3P4CFQAAAAAdAAAAABAE",
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}
              />
              <CardBody className="text-left p-6">
                <Typography variant="h6" gutterBottom>
                  {post.title}
                </Typography>
                <Typography variant="body2" gutterBottom>
                  {post.content.substring(0, 100)}...
                </Typography>
                <div className="flex items-center justify-between">
                  <Typography variant="body1">
                    <TbCurrencyRupeeNepalese className="inline-block mr-1" />
                    {post.price}
                  </Typography>
                  <Typography variant="body1" color="textSecondary">
                    <BiMap className="inline-block mr-1" />
                    {post.location.split(',')[2]}
                  </Typography>
                </div>
              </CardBody>
            </Card>
          ))}
        </div>

        <div className="flex flex-col gap-12 mt-14 ml-36 h-[500px] w-1/2 overflow-auto">
          <Typography variant="h5" gutterBottom>
            Recommendation List
          </Typography>
          {recommendations.map(post => (
            <Card key={post.id} className="w-96">
              <CardHeader
                color="blue"
                className="relative h-56"
                style={{
                  backgroundImage: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fhouses%2F&psig=AOvVaw3zUVQWy4pyWV7lu67CNLrE&ust=1683308930554000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCMCxm8ic3P4CFQAAAAAdAAAAABAE",
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}
              />
              <CardBody className="text-left p-6">
                <Typography variant="h6" gutterBottom>
                  {post.title}
                </Typography>
                <Typography variant="body2" gutterBottom>
                  {post.content.substring(0, 100)}...
                </Typography>
                <div className="flex items-center justify-between">
                  <Typography variant="body1">
                    <TbCurrencyRupeeNepalese className="inline-block mr-1" />
                    {post.price}
                  </Typography>
                  <Typography variant="body1" color="textSecondary">
                    <BiMap className="inline-block mr-1" />
                    {post.location.split(',')[2]}

                    </Typography>
                </div>
              </CardBody>
            </Card>
          ))}
        </div>
        </div>
        </div>)}
export default LandingPage