Feat/18 verification success page

app/components/ui/success_page/Contact.tsx

@@ -0,0 +1,61 @@
+
+
+const Contact = () => {
+  return (
+    <div>
+
+        <div className='bg-black text-white'>
+            <div className="max-w-[1000px] mx-auto px-4 py-10 grid grid-cols-2 md:grid-cols-2 lg:grid-cols-5 gap-6">
+                <div className="lg:col-span-1">
+                    <h6 className='font-medium text-xl py-5'>BoilerPlate</h6>
+                    <ul>
+                        <a href="/"><li>Logo subject details and address</li></a>
+                    </ul>
+                </div>
+                <div className="lg:col-span-1">
+                    <h6 className='font-medium text-xl py-5'>Legal</h6>
+                    <ul>
+                        <a href="/"><li className='py-2 text-sm'>Privacy Policy</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Terms and conditions</li></a>
+                    </ul>
+                </div>
+                <div className="lg:col-span-1">
+                    <h6 className='font-medium text-xl py-5'>Navigation</h6>
+                    <ul>
+                        <a href="/"><li className='py-2 text-sm'>Home</li></a>
+                        <a href="/"><li className='py-2 text-sm'>About us</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Career</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Feature updates</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Blog</li></a>
+                    </ul>
+                </div>
+                <div className="lg:col-span-1">
+                    <h6 className='font-medium text-xl py-5'>Support</h6>
+                    <ul>
+                        <a href="/"><li className='py-2 text-sm'>Help Center</li></a>
+                        <a href="/"><li className='py-2 text-sm'>FAQ</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Waiting list</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Pricing Experience</li></a>
+                        <a href="/"><li className='py-2 text-sm'>Contact Us</li></a>
+                    </ul>
+                </div>
+                <div className="lg:col-span-1">
+                    <h6 className="font-medium text-xl py-5">SignUp For Newsletter</h6>
+                    <div className='bg-white rounded-md flex items-center w-[300px] h-[50px]'>
+                        <input className='mx-2 text-black' type="email" placeholder='Enter email'/>
+                        <button className='bg-orange-500 w-[90px] h-[35px] text-[13px] mx-2 rounded-md py-2 text-white'>Subscribe</button>
+                    </div>
+                </div>
+            </div>
+            <div className="bg-white h-[1px]"></div>
+            <div className=" flex justify-center items-center h-[100px]">
+                <a href="/"><p className="mx-4">2024 All Rights Reserved</p></a>
+                <a href="/"><p className="mx-4">Privacy Policy <span>Terms of Use</span></p></a>
+            </div>
+        </div>
+
+    </div>
+  )
+}
+
+export default Contact

app/components/ui/success_page/Hero.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+const Hero = () => {
+  const [showMessage, setShowMessage] = useState(true);
+
+  const handleCloseMessage = () => {
+    setShowMessage(false);
+  };
+
+  return (
+    <div>
+      <div className='mt-[-96px] w-[400px] md:w-[550px] h-screen mx-auto text-center flex flex-col justify-center'>
+        {showMessage && (
+          <div className='relative bg-green-100 border-green-500 border rounded-md w-full h-[50px] mx-auto flex items-center justify-between px-4'>
+            <p className="py-3"><span className="text-green-500 font-bold text-xl mr-2">✓</span>Email Verified Successfully</p>
+            <button 
+              className="text-green-500 font-bold text-xl"
+              onClick={handleCloseMessage}
+            >
+              &times;
+            </button>
+          </div>
+        )}
+          <div className='flex justify-center items-center'>
+            <p className='md:text-3xl sm:text-2xl text-xl font-bold py-6'>Verification Successful</p>
+          </div>
+          <p className='text-xl text-gray-600'>Your verification was successful, you can now proceed to reset your password</p>
+          <button className='bg-orange-500 text-white w-full rounded-md font-medium my-6 mx-auto py-3'>
+            Reset Password
+          </button>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

app/components/ui/success_page/Navbar.tsx

@@ -0,0 +1,29 @@
+
+
+const Navbar = () => {
+  return (
+    <div className="bg-[rgba(200,200,200,0.2)]">
+
+      <div className="text-gray-600 flex justify-between items-center max-w-[1100px] h-[70px] mx-auto">
+        <h1 className="font-bold text-[23px]">HNG Boilerplate</h1>
+        <ul className='hidden md:flex items-center'>
+          <a href="/"><li className='p-4'>Pricing</li></a>
+          <a href="/"><li className='p-4'>Home</li></a>
+          <a href="/"><li className='p-4'>Career</li></a>
+        </ul>
+
+        <div className="hidden md:flex">
+          <button className='text-black bg-white border-orange-500 mx-2 border-2 px-6 py-2 rounded-md hover:scale-105 duration-300'>
+            Log In
+          </button>
+          <button className='text-white bg-orange-500 mx-2 px-6 py-2 rounded-md hover:scale-105 duration-300'>
+            Get Started
+          </button>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default Navbar

app/components/ui/success_page/Success.tsx

@@ -0,0 +1,17 @@
+
+import Contact from "./Contact"
+import Hero from "./Hero"
+import Navbar from "./Navbar"
+
+
+const Success = () => {
+  return (
+    <div>
+        <Navbar />
+        <Hero />
+        <Contact />
+    </div>
+  )
+}
+
+export default Success