on another universe

Author: frontendfixer

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
@@ -18,11 +19,13 @@
     "@reduxjs/toolkit": "^1.9.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2"
+    "react-redux": "^8.1.2",
+    "validator": "^13.11.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/validator": "^13.11.1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

pnpm-lock.yaml

@@ -0,0 +1,28 @@
+import heroImage from '../assets/images/hero-alt.webp';
+// import HeroIllustration from '../assets/images/hero-illustration.webp';
+
+const AltHeroSection = () => {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="mb-24 mt-32 flex flex-col px-3 pb-6 sm:mb-32 sm:mt-40">
+        <h1 className="mb-6  text-center text-4xl font-black dark:text-primary-400 md:text-6xl">
+          Frontend React Developer
+        </h1>
+        <p className="text-center text-xl text-dark-900 dark:text-white">
+          Transforming Ideas into Immersive User Experiences with the Power of
+          React
+        </p>
+      </div>
+      <div>
+        <img
+          src={heroImage}
+          alt=""
+          aria-label=""
+          className="mx-auto w-full md:w-2/3 lg:w-1/2"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AltHeroSection;

src/assets/images/hero-alt.webp

@@ -24,14 +24,15 @@ const Button = ({
       onClick={onClick}
       disabled={disabled}
       className={twJoin(
-        `rounded-lg px-5 py-2 font-medium text-white transition`,
+        `transition-color flex items-center justify-center gap-4 rounded-lg px-5 py-2 font-medium duration-300 disabled:bg-dark-500 disabled:text-white-full`,
         fullWidth && 'w-full',
-        buttonType === 'secondary' && 'bg-slate-500 hover:bg-slate-400',
+        buttonType === 'secondary' &&
+          'bg-secondary text-white hover:bg-secondary-500',
         buttonType === 'inverted' &&
-          'border border-gray-500 hover:border-gray-700 hover:bg-gray-500',
+          'border-2 border-primary text-dark hover:bg-primary hover:text-white',
         buttonType !== 'secondary' &&
           buttonType !== 'inverted' &&
-          'bg-blue-500 hover:bg-blue-400',
+          'bg-primary text-white hover:bg-primary-600 dark:bg-primary-500 dark:text-dark-800 dark:hover:bg-primary-400 ',
       )}
     >
       {children}

src/assets/images/hero-illustration.webp

@@ -0,0 +1,23 @@
+import Button from './Button';
+
+const downloadFile = () => {
+  const element = document.createElement('a');
+  element.href = '/Lakshmikanta.pdf';
+  element.download = 'Lakshmikanta.pdf';
+  document.body.appendChild(element);
+  element.click();
+};
+
+const CVDownloadButton = ({
+  buttonType,
+}: {
+  buttonType?: 'secondary' | 'inverted' | undefined;
+}) => {
+  return (
+    <Button onClick={downloadFile} buttonType={buttonType}>
+      Download CV
+    </Button>
+  );
+};
+
+export default CVDownloadButton;

src/assets/images/message_send.svg

@@ -1,24 +1,13 @@
-import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ChangeEvent, FormEvent, useState } from 'react';
-import { twJoin } from 'tailwind-merge';
+import { useSelector } from 'react-redux';
 
 import connectImg from '../assets/images/connect1.svg';
+import { RootState } from '../store/store';
+import ContactForm from './ContactForm';
+import MessageSent from './MessageSent';
 
 const Contact = () => {
-  const [inputs, setInputs] = useState({ name: '', email: '', message: '' });
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setInputs({ ...inputs, [e.target.name]: e.target.value });
-  };
-
-  const handelSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    console.log(inputs);
-  };
-
+  const { form } = useSelector((state: RootState) => state);
+  console.log(form);
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2">
       <div className="flex items-center">
@@ -28,59 +17,8 @@ const Contact = () => {
           className="mx-auto h-64 w-64 sm:h-96 sm:w-96"
         />
       </div>
-      <div className="rounded-xl bg-black/20 sm:max-w-lg">
-        <form className="flex flex-col gap-4 px-4 py-8" onSubmit={handelSubmit}>
-          <div className="input__group">
-            <input
-              type="text"
-              id="name"
-              value={inputs.name}
-              name="name"
-              onChange={handleChange}
-            />
-            <label
-              htmlFor="name"
-              className={twJoin(inputs.name.length > 0 && 'active')}
-            >
-              Enter your Name
-            </label>
-          </div>
-          <div className="input__group">
-            <input
-              type="email"
-              name="email"
-              id="email"
-              value={inputs.email}
-              onChange={handleChange}
-            />
-            <label
-              htmlFor="email"
-              className={twJoin(inputs.email.length > 0 && 'active')}
-            >
-              Enter Your Email
-            </label>
-          </div>
-          <div className="input__group">
-            <textarea
-              name="message"
-              id="message"
-              cols={30}
-              rows={5}
-              value={inputs.message}
-              onChange={handleChange}
-            />
-            <label
-              htmlFor="message"
-              className={twJoin(inputs.message.length > 0 && 'active')}
-            >
-              Message
-            </label>
-          </div>
-          <button className="flex items-center justify-center gap-4 rounded-md bg-blue-600 py-2 text-white hover:bg-blue-500 dark:bg-blue-400 dark:hover:bg-blue-300">
-            <FontAwesomeIcon icon={faPaperPlane} />
-            <span>Message</span>
-          </button>
-        </form>
+      <div className="rounded-xl bg-secondary/40 sm:max-w-lg">
+        {form.status !== 'completed' ? <ContactForm /> : <MessageSent />}
       </div>
     </div>
   );