amnannn/rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add not found

Browse Source
This commit is contained in:
Yogamnan 2025-03-03 10:46:29 +07:00
parent 15478bd369
commit e8e44e4d5d
8 changed files with 65 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.jsx
View File

@ -5,17 +5,27 @@ import FormSection from "./components/contact/FormSection"
import SolusiPersonal from "./pages/SolusiPersonal" import SolusiPersonal from "./pages/SolusiPersonal"
import SolusiStartup from "./pages/SolusiStartup" import SolusiStartup from "./pages/SolusiStartup"
import SolusiCorporate from "./pages/SolusiCorporate" 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() { function App() {
return ( return (
<Router> <Router>
<Routes> <Routes>
<Route path='/' element={<Home/>}/> <Route path='/' element={<Home />} />
<Route path='/Contact' element={<Contact/>}/> <Route path='/Contact' element={<Contact />} />
<Route path='/FormSection' element={<FormSection/>}/> <Route path='/FormSection' element={<FormSection />} />
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/> <Route path='/SolusiPersonal' element={<SolusiPersonal />} />
<Route path='/SolusiStartup' element={<SolusiStartup/>}/> <Route path='/SolusiStartup' element={<SolusiStartup />} />
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/> <Route path='/SolusiCorporate' element={<SolusiCorporate />} />
<Route path='/004' element={
<>
<Header />
<NotFound />
<WhatsAppButton/>
</>
} />
</Routes> </Routes>
</Router> </Router>

14
src/components/NotFound/NotFound.jsx Normal file
View 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;

BIN
src/components/NotFound/asset/Black Blue and Pink Modern Twibbon Instagram Post 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

4
src/components/NotFound/asset/index.js Normal file
View File

@ -0,0 +1,4 @@
import logonf from './Black Blue and Pink Modern Twibbon Instagram Post 1.png';
export { logonf, }

14
src/components/beranda/Header.jsx
View File

@ -95,13 +95,13 @@ const Header = () => {
</button> </button>
{isProdukOpen && ( {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="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8"> <div className="flex justify-center gap-8">
{/* HR */} {/* HR */}
<button <button
onClick={() => { onClick={() => {
navigate("/SolusiPersonal"); navigate("/004");
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}} }}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100" 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 */} {/* DOKU */}
<button <button
onClick={() => { onClick={() => {
navigate("/SolusiStartup"); navigate("/004");
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}} }}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100" 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 */} {/* LLM */}
<button <button
onClick={() => { onClick={() => {
navigate("/SolusiCorporate"); navigate("/004");
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}} }}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100" 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 */} {/* VERI */}
<button <button
onClick={() => { onClick={() => {
navigate("/SolusiCorporate"); navigate("/004");
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}} }}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100" 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> </button>
{isSolusiOpen && ( {isSolusiOpen && (
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]"> <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"> <div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
<div className="flex justify-center gap-8"> <div className="flex justify-center gap-8">
{/* Personal */} {/* Personal */}
<button <button

4
src/components/beranda/Hero.jsx
View File

@ -42,8 +42,8 @@ function Hero() {
initial={{ opacity: 0, x: -50 }} initial={{ opacity: 0, x: -50 }}
animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }} animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
transition={{ duration: 0.8 }} 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" /> <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"> <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. Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.

38
src/components/beranda/Kenapa.jsx
View File

@ -12,24 +12,24 @@ function Kenapa() {
return ( return (
<div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen"> <div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
<motion.div <motion.div
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
animate={sectionInView ? { opacity: 1, y: 0 } : {}} animate={sectionInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52" className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
> >
{/* Decorative Circles */} {/* Decorative Circles */}
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4"> <div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
<motion.img <motion.img
src={circle1} alt="Circle 1" src={circle1} alt="Circle 1"
className="w-auto h-auto" className="w-auto h-auto"
initial={{ opacity: 0, scale: 0.5 }} initial={{ opacity: 0, scale: 0.5 }}
animate={sectionInView ? { opacity: 1, scale: 1 } : {}} animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.6, delay: 0.3 }} transition={{ duration: 0.6, delay: 0.3 }}
/> />
<motion.img <motion.img
src={circle2} alt="Circle 2" src={circle2} alt="Circle 2"
className="w-auto h-auto" className="w-auto h-auto"
initial={{ opacity: 0, scale: 0.5 }} initial={{ opacity: 0, scale: 0.5 }}
animate={sectionInView ? { opacity: 1, scale: 1 } : {}} animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.6, delay: 0.5 }} transition={{ duration: 0.6, delay: 0.5 }}
@ -37,7 +37,7 @@ function Kenapa() {
</div> </div>
{/* Image Section */} {/* Image Section */}
<motion.div <motion.div
ref={textRef} ref={textRef}
className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start" className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
initial={{ opacity: 0, x: -50 }} initial={{ opacity: 0, x: -50 }}
@ -49,10 +49,10 @@ function Kenapa() {
alt="Woman with Tablet" alt="Woman with Tablet"
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]" className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
/> />
</motion.div> </motion.div>
{/* Text Section */} {/* Text Section */}
<motion.div <motion.div
ref={listRef} 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" 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 }} initial={{ opacity: 0, x: 50 }}
@ -73,8 +73,8 @@ function Kenapa() {
"Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.", "Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
"Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data." "Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
].map((text, index) => ( ].map((text, index) => (
<motion.li <motion.li
key={index} key={index}
className="flex items-center" className="flex items-center"
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={listInView ? { opacity: 1, x: 0 } : {}} animate={listInView ? { opacity: 1, x: 0 } : {}}
@ -87,8 +87,8 @@ function Kenapa() {
</ul> </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"> <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 <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" 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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: 0.8 }} 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]" /> <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
Konsultasi Gratis Konsultasi Gratis
</motion.button> </motion.button>
<Link to={"/Contact#form"}>
<Link to={"/Contact#form"} className="w-full md:w-[270px]">
<motion.button <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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: 1 }} transition={{ duration: 0.5, delay: 1 }}
@ -107,6 +108,7 @@ function Kenapa() {
</motion.button> </motion.button>
</Link> </Link>
</div> </div>
</motion.div> </motion.div>
</motion.div> </motion.div>
</div> </div>

2
src/components/contact/CustomerService.jsx
View File

@ -22,7 +22,7 @@ const CustomerService = () => {
{/* LEFT SECTION - Informasi */} {/* LEFT SECTION - Informasi */}
<motion.div <motion.div
ref={leftRef} 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" initial="hidden"
animate={leftInView ? "visible" : "hidden"} animate={leftInView ? "visible" : "hidden"}
variants={fadeInLeft} variants={fadeInLeft}