Landing Page - Copy this React, Tailwind Component to your project

import React, { useState, useEffect } from "react"; import { Link, useLocation } from "react-router-dom"; import imageUrl from "../assets/img/landing.jpg"; import { GiHorizonRoad } from "react-icons/gi"; import { IoDocumentText } from "react-icons/io5"; import { FaMapLocationDot } from "react-icons/fa6"; import { toast, ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import logo from "../assets/img/logo.jpeg"; import logoBitField from "../assets/img/newLogo.jpeg"; import logoBitFieldSN from "../assets/img/newLogo_sinFondo.png"; import axios from "axios"; import "weather-icons/css/weather-icons.css"; const Landing = () => { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [weatherData, setWeatherData] = useState(null); const [weatherIcon, setWeatherIcon] = useState(""); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const iconMap = { "01d": "wi-day-sunny", "01n": "wi-night-clear", "02d": "wi-day-cloudy", "02n": "wi-night-cloudy", "03d": "wi-day-cloudy-high", "03n": "wi-night-cloudy-high", "04d": "wi-day-cloudy", "04n": "wi-night-cloudy", "09d": "wi-day-showers", "09n": "wi-night-showers", "10d": "wi-day-rain", "10n": "wi-night-rain", "11d": "wi-day-thunderstorm", "11n": "wi-night-thunderstorm", "13d": "wi-day-snow", "13n": "wi-night-snow", "50d": "wi-day-fog", "50n": "wi-night-fog", }; const mapWindDirection = function (degrees) { var text = ""; if (inRange(degrees, 11.25, 33.75)) { text = "NNE"; } else if (inRange(degrees, 33.75, 56.25)) { text = "NE"; } else if (inRange(degrees, 56.25, 78.75)) { text = "ENE"; } else if (inRange(degrees, 78.75, 101.25)) { text = "E"; } else if (inRange(degrees, 101.25, 123.75)) { text = "ESE"; } else if (inRange(degrees, 123.75, 146.25)) { text = "SE"; } else if (inRange(degrees, 146.25, 168.75)) { text = "SSE"; } else if (inRange(degrees, 168.75, 191.25)) { text = "S"; } else if (inRange(degrees, 191.25, 213.75)) { text = "SSO"; } else if (inRange(degrees, 213.75, 236.25)) { text = "SW"; } else if (inRange(degrees, 236.25, 258.75)) { text = "OSO"; } else if (inRange(degrees, 258.75, 281.25)) { text = "O"; } else if (inRange(degrees, 281.25, 303.75)) { text = "ONO"; } else if (inRange(degrees, 303.75, 326.25)) { text = "NO"; } else if (inRange(degrees, 326.25, 348.75)) { text = "NNO"; } else if (inRange(degrees, 348.75, 11.25)) { text = "N"; } return text; function inRange(val, min, max) { if (max < min) { if (val >= min && val < 360) { return true; } if (val > 0 && val < max) { return true; } return false; } if (val >= min && val <= max) { return true; } return false; } }; useEffect(() => { // Solicitud API Clima axios .get("https://api.openweathermap.org/data/2.5/weather", { params: { q: "Olavarría", lang: "es", units: "metric", appid: "489c3d104ae5fa52cce724e52a84621a", }, }) .then((response) => { setWeatherData(response.data); setLoading(false); if (response.data.weather && response.data.weather[0]) { setWeatherIcon(response.data.weather[0].icon); } }) .catch((err) => { setError(err); setLoading(false); }); }, []); // Asignar la clase del ícono correspondiente const iconClass = iconMap[weatherIcon] || "wi-day-sunny"; // Default icon if not found const handleClick = () => { toast.warn(`Herramienta en desarrollo...`); }; const toggleDropdown = () => { setIsDropdownOpen(!isDropdownOpen); }; return ( <div className="h-screen"> <div className="flex flex-col w-full h-screen md:h-screen"> <div className="flex justify-between p-4 items-center h-18 bg-gradient-to-r from-slate-800 to-slate-500 text-lg text-slate-300 flex-wrap"> <img className=" rounded-sm md:w-52 w-48" src={logo} alt="" /> </div> <div data-aos="fade-in" data-aos-duration="1500" className="flex-1 relative" > <img src={imageUrl} alt="Landing" className="w-full h-full object-cover" /> <div className="h-screen absolute inset-0 bg-gradient-to-r from-slate-800/90 to-slate-500/50 flex flex-col pt-8 px-4"> <div data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="1000" className="flex p-4 flex-wrap" > <Link to={`/map`}> <button className="flex items-center bg-slate-500 hover:bg-slate-700 text-white p-4 m-2 md:p-4 md:m-2 rounded"> <GiHorizonRoad style={{ marginRight: "10px", fontSize: "30px" }} /> Mapa </button> </Link> {/* <Link to={`/map`}> */} <button className="flex items-center bg-slate-500 hover:bg-slate-700 text-white p-4 m-2 md:p-4 md:m-2 rounded" onClick={handleClick}> <IoDocumentText style={{ marginRight: "10px", fontSize: "30px" }} /> Informe Técnico </button> {/* </Link> */} </div> {/* Footer image aligned to the bottom right */} <footer className="fixed bottom-0 right-0 mb-4 mr-4 z-50"> <img className="rounded w-44 opacity-60" src={logoBitField} alt="Logo" /> </footer> </div> </div> </div> <ToastContainer position="top-center" /> </div> ); }; export default Landing; Ese es mi codigo, podes adaptarlo a las alternativas?