Spaces:
Sleeping
Sleeping
File size: 5,559 Bytes
36fcfee | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import React, { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { BiLogoGmail } from 'react-icons/bi';
import { BsGithub } from 'react-icons/bs';
import { IoLogoLinkedin } from 'react-icons/io5';
import { IoMdMail } from "react-icons/io";
import { FaPhone } from "react-icons/fa6";
export default function Contact() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
return (
<motion.div
ref={ref}
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8 }}
className='lg:my-16 lg:px-28 my-8 px-5'
id='contact'
>
<motion.h2
initial={{ y: -50, opacity: 0 }}
animate={isInView ? { y: 0, opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8 }}
className='text-2xl lg:text-4xl text-center'
>
Contact <span className='font-extrabold'>Me</span>
</motion.h2>
<div className='flex justify-between items-center mt-8 lg:mt-16 flex-col lg:flex-row'>
<motion.div
initial={{ x: -50, opacity: 0 }}
animate={isInView ? { x: 0, opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8 }}
className='lg:w-[40%]'
>
<form className='w-full space-y-3 lg:space-y-5'>
<input className='border-2 px-5 py-3 border-black rounded placeholder:text-[#71717A] text-sm w-full' type="text" placeholder='Your name' required />
<input className='border-2 px-5 py-3 border-black rounded placeholder:text-[#71717A] text-sm w-full' type="email" placeholder='Email' required />
<input className='border-2 px-5 py-3 border-black rounded placeholder:text-[#71717A] text-sm w-full' type="text" placeholder='Your website (If exists)' />
<textarea className='resize-none border-2 px-5 py-3 h-32 border-black placeholder:text-[#71717A] rounded text-sm w-full' placeholder='How can I help?*'></textarea>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0 }}
transition={{ duration: 0.8 }}
className='flex justify-between gap-3 lg:gap-5 flex-col lg:flex-row'
>
<motion.button
whileHover={{ scale: 1.05 }}
type='submit'
className='bg-black justify-center w-fit lg:w-auto lg:flex-1 hover:shadow-lg text-white px-3 py-2 rounded flex items-center gap-x-3 font-medium'
>
Get In Touch
</motion.button>
<div className='flex items-center gap-x-2 lg:gap-x-5'>
<motion.a
href="mailto:aditya.kumar25025@gmail.com"
className="bg-white p-2 lg:p-3 rounded border-2 border-black"
whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
whileTap={{ scale: 0.9 }}
>
<BiLogoGmail className="w-4 h-4 lg:w-5 lg:h-5" />
</motion.a>
<motion.a
href="https://www.linkedin.com/in/25-aditya-kumar"
target="_blank"
rel="noopener noreferrer"
className="bg-white p-2 lg:p-3 rounded border-2 border-black"
whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
whileTap={{ scale: 0.9 }}
>
<IoLogoLinkedin className="w-4 h-4 lg:w-5 lg:h-5" />
</motion.a>
</div>
</motion.div>
</form>
</motion.div>
<motion.div
initial={{ x: 50, opacity: 0 }}
animate={isInView ? { x: 0, opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8 }}
className='lg:w-1/2'
>
<div className='font-extrabold text-2xl lg:text-5xl mt-5 lg:mt-0 space-y-1 lg:space-y-3'>
<h2>Let's <span className='text-white' style={{ WebkitTextStroke: '1px black' }}>talk</span> for</h2>
<h2>Something special</h2>
</div>
<p className='text-[#71717A] text-sm/6 lg:text-base mt-3 lg:mt-6'>I seek to push the limits of creativity to create high-engaging, user-friendly, and memorable interactive experiences.</p>
<div className='font-semibold text-sm lg:text-xl flex flex-col mt-6 gap-2 lg:gap-4'>
<motion.a
whileHover={{ x: 5 }}
className='flex items-center gap-2 group'
href="mailto:Youremail@gmail.com"
>
<span className='border-2 transition-all border-transparent group-hover:border-black rounded-full p-1'>
<IoMdMail className="w-4 h-4 lg:w-5 lg:h-5" />
</span>
aditya.kumar25025@gmail.com
</motion.a>
<motion.a
whileHover={{ x: 5 }}
className='flex items-center gap-2 group'
href="tele:1234567890"
>
<span className='border-2 transition-all border-transparent group-hover:border-black rounded-full p-[5px]'>
<FaPhone className="w-3 h-3 lg:w-4 lg:h-4" />
</span>
8320516883
</motion.a>
</div>
</motion.div>
</div>
</motion.div>
);
}
|