Contact Section Completed

src/components/Contact.jsx

@@ -1,9 +1,74 @@
-import React from 'react'
+import {useState, useRef} from 'react';
+import { motion } from 'framer-motion';
+import emailjs from '@emailjs/browser';
+import {styles} from "../Style";
+import {EarthCanvas} from "./canvas";
+import {SectionWrapper} from "../hoc";
+import { slideIn } from '../utils/motion';
 
 const Contact = () => {
+const formRef = useRef();
+const [form, setForm] = useState({
+  name:"",
+  email:"",
+  message:""
+});
+
+const [loading, setLoading] = useState(false);
+
+const handleChange = (e) => {};
+const handleSubmit = (e) => {}
+
   return (
-    <div>Contact</div>
+    <div className='xl:mt-12 xl:flex-row flex-col-reverse flex gap-10 overflow-hidden'>
+     <motion.div 
+     variants={slideIn("left", "tween", 0.2, 1)}
+     className='flex-[0.75] bg-black-100 p-8 rounded-2xl'>
+      <p className={`${styles.sectionSubText}`}>Get in touch </p>
+        <h2 className={`${styles.sectionHeadText}`}>Contact .</h2>
+
+        <form ref={formRef}
+        onSubmit={handleSubmit}
+        className="mt-12 flex flex-col gap-8"
+        >
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Your Name</span>
+            <input type="text" name="name" value={form.name}
+            onChange={handleChange} placeholder="What's Your Name? " 
+            className='bg-tertiary py-4 px-6 placeholder:text-secondary
+            text-white rounded-lg outline-none border-none font-medium'/>
+          </label>
+
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Your Email</span>
+            <input type="email" name="email" value={form.email}
+            onChange={handleChange} placeholder="What's Your Email? " 
+            className='bg-tertiary py-4 px-6 placeholder:text-secondary
+            text-white rounded-lg outline-none border-none font-medium'/>
+          </label>
+
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Your Message</span>
+            <textarea rows="7" name="message" value={form.message}
+            onChange={handleChange} placeholder="What do you want to say? " 
+            className='bg-tertiary py-4 px-6 placeholder:text-secondary
+            text-white rounded-lg outline-none border-none font-medium'/>
+          </label>
+          <button
+          type='submit'
+          className='bg-tertiary py-3 px-8 outline-none w-fit text-white
+          font-bold shadow-md shadow-primary rounded-xl'
+          >{loading? "Sending... ": "Send"}</button>
+        </form>
+     </motion.div>
+     <motion.div
+     variants={slideIn("right", "tween", 0.2, 1)}
+     className='xl:flex-1 xl:h-auto md:h-550px h-[350px]'
+     >
+      <EarthCanvas/>
+     </motion.div>
+     </div>
   )
 }
 
-export default Contact
+export default SectionWrapper(Contact,"contact");

src/components/Works.jsx

@@ -97,4 +97,4 @@ className="mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]"
   )
 }
 
-export default SectionWrapper(Works,"works");
+export default SectionWrapper(Works,"work");

src/components/canvas/Earth.jsx

@@ -1,9 +1,43 @@
-import React from 'react'
+import {Suspense} from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Preload, useGLTF } from '@react-three/drei';
+import CanvasLoader from "../Loader";
 
 const Earth = () => {
+  const earth= useGLTF("./planet/scene.gltf")
+
   return (
-    <div>Earth</div>
+    <primitive
+    object={earth.scene}
+    scale={2.5}
+    position-y={0}
+    rotation-y={0}
+    />
+  )
+}
+
+const EarthCanvas=()=>{
+  return(
+    <Canvas
+    shadows
+    frameloop='demand'
+    gl={{preserveDrawingBuffer: true}}
+    camera={{
+      fov: 45,
+      near: 0.1,
+      far : 200,
+      position: [-4, 3, 6]
+    }}>
+      <Suspense fallback={<CanvasLoader/>}>
+        <OrbitControls
+        autoRotate
+        enableZoom={false}
+        maxPolarAngle={Math.PI/2}
+        minPolarAngle={Math.PI/2}/>
+        <Earth/>
+      </Suspense>
+    </Canvas>
   )
 }
 
-export default Earth
+export default EarthCanvas