import React, { useEffect, useRef, useState } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle";
import "./assets/css/style.css";
import logo from "./assets/images/Single Debt Logo Landscape.svg";
import plane from "./assets/images/SD Favicon.svg";
import { FaRupeeSign } from "react-icons/fa";
const App = () => {
const [range1, setRange1] = useState(0);
const [range2, setRange2] = useState(0);
const [missed, setMissed] = useState(null);
const [proceed, setProceed] = useState(false);
const handleRange1 = (e) => {
setRange1(parseFloat(e.target.value));
};
const handleRange2 = (e) => {
setRange2(parseFloat(e.target.value));
};
const radiobuttons = useRef([]);
radiobuttons.current = [];
const addRadioButtons = (item) => {
if (item && !radiobuttons.current.includes(item)) {
radiobuttons.current.push(item);
}
};
const activeRadioButton = (e, ans) => {
setMissed(ans);
radiobuttons.current.forEach((item) => {
item.classList.remove("active");
});
setTimeout(() => {
e.target.parentElement.classList.add("active");
}, 10);
};
useEffect(() => {
if (range1 !== 0 || range2 !== 0 || missed !== null) {
proceedButton.current.removeAttribute("disabled");
proceedButton.current.classList.remove("disabled");
}
if (range2 === 0 || range1 === 0 || missed === null) {
proceedButton.current.setAttribute("disabled", true);
proceedButton.current.classList.add("disabled");
}
}, [range1, range2, missed]);
const overlay = useRef();
const range1Ref = useRef();
const range2Ref = useRef();
const [overlayActive, setOverlayActive] = useState(true);
const proceedButton = useRef(null);
const toggleProceed = () => {
setProceed(true);
setOverlayActive(true);
overlay.current.style.zIndex = "8";
overlay.current.classList.add("show");
range1Ref.current.style.position = "static";
range2Ref.current.style.position = "static";
};
useEffect(() => {
if (overlayActive) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
}, [overlayActive]);
const [inputs, setInputs] = useState({
firstname: "",
lastname: "",
email: "",
mobile: "",
});
const handleInputs = (e) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
const toggleOverlay = () => {
overlay.current.classList.remove("show");
setOverlayActive(false);
};
return (
<>
<>
Debt-Relief is faster
{/* */}
{/* */}
{/* */}
{/* */}
);
};
export default App;
Debt-Relief is faster
with FREED
Your credit card debt
Your credit card debt
Missed any EMI in the last 3 months?
{!proceed ? (
<>
)}
Terms & conditions Apply
) : (Here's your debt relieve program
Say Hello! Please fill in the form
Please move the slider to select your outstanding balance