Feedback Section Completed

src/components/Feedbacks.jsx

@@ -1,9 +1,59 @@
-import React from 'react'
+import { motion } from "framer-motion";
+import { styles } from "../Style";
+import { SectionWrapper } from "../hoc";
+import { fadeIn, textVariant } from "../utils/motion";
+import { testimonials } from "../constants";
+
+const FeedbackCard=({index, testimonial, name, designation, company, image})=>{
+  return(
+    <motion.div
+    variants={fadeIn("", "spring", index*0.5, 0.75)}
+    className="bg-black-200 p-10 rounded-3xl xs:w-[320px] w-full "
+    >
+      <p className="text-white font-black text-[48px] ">"</p>
+   <div className="mt-1">
+   <p className="text-white tracking-wider text-[18px]" >{testimonial}</p>
+
+    <div className="mt-7 flex justify-between items-center gap-1">
+      <div className="flex-1 flex flex-col">
+        <p className="text-white font-medium text-[16px]">
+          <span className="blue-text-gradient">@ </span>{name}
+        </p>
+        <p className="mt-1 text-secondary text-[12px]"
+        >{designation} of {company}</p>
+      </div>
+      <img src={image} alt={`feedback by ${name}`}
+      className="w-10 h-10 rounded-full object-cover" />
+    </div>
+   </div>
+    </motion.div>
+  )
+}
 
 const Feedbacks = () => {
   return (
-    <div>Feedbacks</div>
+    <div className="mt-12 bg-black rounded-[20px]">
+      <div className={`${styles.padding}
+      bg-tertiary rounded-2xl min-h-[300px] `}>
+        <motion.div
+        variants={textVariant()}>
+          <p className={`${styles.sectionSubText}`} >
+            What others say
+          </p>
+          <h2 className={`${styles.sectionHeadText}`}>Testimonials</h2>
+        </motion.div>
+      </div>
+      <div className={`${styles.paddingX} mt-20 pb-14 flex flex-wrap gap-7 `}>
+      {testimonials.map((testimonial, index)=>(
+        <FeedbackCard
+          key={testimonial.name}
+          index={index}
+          {...testimonial} 
+        />
+      ))}
+      </div>
+    </div>
   )
 }
 
-export default Feedbacks
+export default SectionWrapper(Feedbacks,"feedbacks");

src/components/Works.jsx

@@ -5,6 +5,66 @@ import {github} from "../assets";
 import {SectionWrapper} from "../hoc";
 import {projects} from "../constants";
 import { fadeIn, textVariant } from "../utils/motion";
+import { p } from "framer-motion/client";
+
+const ProjectCard=({index, name, description, tags, image, source_code_link}) =>{
+  return (
+    <motion.div variants={fadeIn("up","spring",index*0.5,0.75)}>
+      <Tilt
+      options={{
+        max:45,
+        scale:1,
+        speed:450
+      }}
+      className="bg-tertiary p-5 rounded-2xl
+      sm:w-[360px] w-full"
+      >
+        <div className="relative w-full h-[230px]">
+        <img src={image} alt={name}
+        className="w-full h-full object-cover rounded-2xl"
+        />
+        <div className="absolute inset-0 flex justify-end m-3 card-img_hover">
+          <div
+          onClick={()=> window.open(
+            source_code_link, "_blank"
+          )}
+          className="black-gradient w-10 h-10 rounded-full flex justify-center items-center cursor-pointer"
+          >
+            <img src={github} alt="github"
+            className="w-1/2 h-1/2 object-contain" />
+          </div>
+          {/* If you have live url of the project just uncomment the following block of code and 
+          change the github icon !! */}
+
+          {/*
+           <div
+          onClick={()=> window.open(
+            source_code_link, "_blank"
+          )}
+          className="black-gradient w-10 h-10 rounded-full flex justify-center items-center cursor-pointer"
+          >
+            <img src={github} alt="github"
+            className="w-1/2 h-1/2 object-contain" />
+          </div>
+          */}
+
+        </div>
+        </div>
+        <div className="mt-5">
+          <h2 className="text-white font-bold text-[24px]">{name}</h2>
+          <p className="text-secondary text-14px">{description}</p>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {tags.map((tag)=>(
+            <p key={tag.name} className={
+              `text-[14px] ${tag.color}`
+            } > #{tag.name}</p>
+          ))}
+        </div>
+      </Tilt>
+    </motion.div>
+  )
+}
 
 const Works = () => {
   return (
@@ -24,6 +84,15 @@ className="mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]"
 </motion.p>
 </div>
 
+    <div className="mt-20 flex flex-wrap gap-7">
+      {projects.map((project, index)=>(
+        <ProjectCard
+        key ={`project-${index}`}
+        index={index}
+        {...project}
+        />
+      ))}
+    </div>
     </>
   )
 }