forked from amnannn/rekan_ai
add not found
This commit is contained in:
Yogamnan
parent
15478bd369
commit
e8e44e4d5d
24
src/App.jsx
24
src/App.jsx
@ -5,17 +5,27 @@ import FormSection from "./components/contact/FormSection"
|
||||
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||
import SolusiStartup from "./pages/SolusiStartup"
|
||||
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||
|
||||
import NotFound from "./components/NotFound/NotFound"
|
||||
import Header from './components/beranda/Header';
|
||||
import WhatsAppButton from './components/beranda/WhatsAppButon';
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/Contact' element={<Contact/>}/>
|
||||
<Route path='/FormSection' element={<FormSection/>}/>
|
||||
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
||||
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
||||
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
|
||||
<Route path='/' element={<Home />} />
|
||||
<Route path='/Contact' element={<Contact />} />
|
||||
<Route path='/FormSection' element={<FormSection />} />
|
||||
<Route path='/SolusiPersonal' element={<SolusiPersonal />} />
|
||||
<Route path='/SolusiStartup' element={<SolusiStartup />} />
|
||||
<Route path='/SolusiCorporate' element={<SolusiCorporate />} />
|
||||
<Route path='/004' element={
|
||||
<>
|
||||
<Header />
|
||||
<NotFound />
|
||||
<WhatsAppButton/>
|
||||
</>
|
||||
|
||||
} />
|
||||
</Routes>
|
||||
</Router>
|
||||
|
||||
|
||||
14
src/components/NotFound/NotFound.jsx
Normal file
14
src/components/NotFound/NotFound.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { logonf } from "./asset";
|
||||
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<div className="justify-center text-center items-center flex flex-col mt-32 gap-4">
|
||||
<img src={logonf} alt="404" />
|
||||
<h1 className="font-bold text-[1.5rem]">Halaman Dalam Proses Pengembangan</h1>
|
||||
<p className="text-[1rem] font-medium w-[50rem]">Terima kasih atas kunjungan Anda! Halaman ini sedang dalam tahap pengembangan untuk memberikan pengalaman terbaik. Nantikan segera pembaruan dari kami! </p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
4
src/components/NotFound/asset/index.js
Normal file
4
src/components/NotFound/asset/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
import logonf from './Black Blue and Pink Modern Twibbon Instagram Post 1.png';
|
||||
|
||||
|
||||
export { logonf, }
|
||||
@ -95,13 +95,13 @@ const Header = () => {
|
||||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="absolute md:left-[350px] 2xl:left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* HR */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
navigate("/004");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
@ -118,7 +118,7 @@ const Header = () => {
|
||||
{/* DOKU */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
navigate("/004");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
@ -135,7 +135,7 @@ const Header = () => {
|
||||
{/* LLM */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
navigate("/004");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
@ -149,7 +149,7 @@ const Header = () => {
|
||||
{/* VERI */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
navigate("/004");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
@ -188,8 +188,8 @@ const Header = () => {
|
||||
</button>
|
||||
|
||||
{isSolusiOpen && (
|
||||
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="absolute md:left-[235px] 2xl:left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px] ">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
<button
|
||||
|
||||
@ -42,8 +42,8 @@ function Hero() {
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"
|
||||
>
|
||||
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
|
||||
>
|
||||
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
|
||||
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
|
||||
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
|
||||
|
||||
@ -12,24 +12,24 @@ function Kenapa() {
|
||||
|
||||
return (
|
||||
<div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
||||
>
|
||||
{/* Decorative Circles */}
|
||||
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
||||
<motion.img
|
||||
src={circle1} alt="Circle 1"
|
||||
className="w-auto h-auto"
|
||||
<motion.img
|
||||
src={circle1} alt="Circle 1"
|
||||
className="w-auto h-auto"
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
/>
|
||||
<motion.img
|
||||
src={circle2} alt="Circle 2"
|
||||
className="w-auto h-auto"
|
||||
<motion.img
|
||||
src={circle2} alt="Circle 2"
|
||||
className="w-auto h-auto"
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
@ -37,7 +37,7 @@ function Kenapa() {
|
||||
</div>
|
||||
|
||||
{/* Image Section */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
ref={textRef}
|
||||
className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
@ -49,10 +49,10 @@ function Kenapa() {
|
||||
alt="Woman with Tablet"
|
||||
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Text Section */}
|
||||
<motion.div
|
||||
<motion.div
|
||||
ref={listRef}
|
||||
className="w-full md:w-[40%] p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
@ -73,8 +73,8 @@ function Kenapa() {
|
||||
"Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
|
||||
"Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
|
||||
].map((text, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
<motion.li
|
||||
key={index}
|
||||
className="flex items-center"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
||||
@ -87,8 +87,8 @@ function Kenapa() {
|
||||
</ul>
|
||||
|
||||
<div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
|
||||
<motion.button
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
<motion.button
|
||||
className="flex items-center justify-center w-full md:w-[350px] 2xl:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
@ -96,9 +96,10 @@ function Kenapa() {
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</motion.button>
|
||||
<Link to={"/Contact#form"}>
|
||||
|
||||
<Link to={"/Contact#form"} className="w-full md:w-[270px]">
|
||||
<motion.button
|
||||
className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
||||
className="flex items-center justify-center w-full h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 1 }}
|
||||
@ -107,6 +108,7 @@ function Kenapa() {
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@ const CustomerService = () => {
|
||||
{/* LEFT SECTION - Informasi */}
|
||||
<motion.div
|
||||
ref={leftRef}
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-90px]"
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-165px]"
|
||||
initial="hidden"
|
||||
animate={leftInView ? "visible" : "hidden"}
|
||||
variants={fadeInLeft}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user