feat(card): added feature card

senthil-athiban · Jul 28, 2023 · d18584d · d18584d
1 parent 94c50a5
commit d18584d
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 80 deletions.
diff --git a/src/components/FeatureCard/index.jsx b/src/components/FeatureCard/index.jsx
@@ -2,41 +2,18 @@ import React, { useState } from "react";
 import "./style.css";
 
 function FeatureCard({ title, color, icon, desc }) {
-  const [flip, setFlip] = useState(false);
-
-  const handleCardHover = () => {
-    setTimeout(() => {
-      setFlip(true);
-    }, 100);
-  };
-
-  const handleCardLeave = () => {
-    setTimeout(() => {
-      setFlip(false);
-    }, 100);
-  };
-
   return (
-    <div className="card-grid">
-      <div
-        onMouseEnter={handleCardHover}
-        onMouseLeave={handleCardLeave}
-        className={`card ${flip ? "flip" : ""}`}
-      >
-        {/* front */}
-        <div className="front">
-          <div
-            className="flex justify-center items-center rounded-lg w-16 h-16 mx-auto"
-            style={{ backgroundColor: color }}
-          >
-            <img src={icon} alt={title} />
-          </div>
-          <div className="dark-primary font-Poppins my-6 text-2xl font-semibold text-center mx-auto px-4">
-            {title}
-          </div>
+    <div className="flex-1 w-full">
+      <div className="gap-y-10  m-5 p-6 flex flex-col justify-center align-items items-center box rounded-2xl">
+        <div className="rounded-lg w-20 h-20 mx-4">
+          <img src={icon} alt="" className="" />
+        </div>
+        <div className="font-mono text-3xl font-semibold text-center text-[#9400D3]">
+          {title}
+        </div>
+        <div className="text-secondary w-285 mx-auto px-4 leading-relaxed text-center text-[#D8BFD8]">
+          {desc}
         </div>
-        {/* back */}
-        <div className="back">{desc}</div>
       </div>
     </div>
   );

diff --git a/src/containers/HightLights/index.js b/src/containers/HightLights/index.js
@@ -4,14 +4,17 @@ export const services = [
   {
     title: "3D Visualization",
     icon: Card1,
+    desc: "Provide a dynamic and interactive viewing experience that allows customers to rotate, zoom in, and explore the 3D designs on the T-Shirts from different angles.",
   },
   {
     title: "Customization",
     icon: Card2,
+    desc: "Allow customers to personalize their 3D T-Shirts by adding custom text, graphics, or images, creating a truly unique and one-of-a-kind piece.",
   },
   {
     title: "AI-Powered 3D Design",
     icon: Card3,
+    desc: "AI-powered 3D T-Shirt website, where cutting-edge technology and stunning designs come together for an extraordinary fashion experience.",
   },
 ];
 

diff --git a/src/containers/HightLights/index.jsx b/src/containers/HightLights/index.jsx
@@ -5,55 +5,41 @@ import { motion } from "framer-motion";
 import { fadeIn, imgAnim } from "../../animation/motion";
 import { services } from ".";
 
-function HightLights() {
-  const ServiceCard = ({ index, title, icon }) => {
-    return (
-      <Tilt className="w-[300px]  mx-10">
-        <motion.div
-          variants={fadeIn}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ amount: 0.25, once: true }}
-          transition={{ delay: 0.1, duration: 0.5 }}
-          className=" p-2 rounded-lg  shadow-card"
-        >
-          <div className="rounded-lg p-4 flex min-h-[300px] flex-col shadow-card1 items-center">
-            <div className="flex justify-center items-center mt-[40px]">
-              <img src={icon} alt={title} className="mt-8 h-28 object-contain" />
-            </div>
-            <h3 className="text-white text-[23px] p-5 text-center font-bold mt-20">
-              {title}
-            </h3>
+const HightLights = ({ index, title, icon }) => {
+  return (
+    <div>
+      {/* <div>High Lights</div> */}
+      <div>
+        <div className="feature-header my-3">
+          <div className="flex items-center mb-10">
+            <h1 className="text-3xl font-semibold text-[#9400D3]  rounded-full border-2 w-[50%] items-center p-5 rounded max-[300px] mx-auto justify-center text-center">
+              ✨ Essential Product Highlights and Features
+            </h1>
           </div>
-        </motion.div>
-      </Tilt>
-    );
-  };
 
-  return (
-    <div className="flex flex-col items-center min-h-screen  overflow-hidden">
-      <motion.div
-        variants={imgAnim}
-        initial="hidden"
-        viewport={{ once: true, amount: 0.25 }}
-        whileInView={{
-          scale: [0, 1],
-          opacity: 1,
-        }}
-        transition={{ duration: 0.84, delay: 0.1 }}
-        className="mt-5  bg-primary bg-opacity-10 font-semibold rounded-lg pl-5 pr-5 py-2"
-      >
-        <h1 className="text-center text-primary">Highlights</h1>
-      </motion.div>
-      <motion.div>
-        <div className="mt-20 pb-40 flex flex-wrap gap-16 justify-center">
-          {services.map((service, index) => (
-            <ServiceCard key={service.title} index={index} {...service} />
-          ))}
+          <div className="text-[#D8BFD8] max-w-[900px] feature-desc text-center mx-auto px-4 leading-loose">
+            Revolutionize your fashion experience with our 3D T-Shirts' key features.
+            Discover unparalleled depth, vibrant colors, and dynamic designs that
+            come to life, thanks to cutting-edge AI technology. Elevate your style
+            with intelligent fashion.
+          </div>
+        </div>
+        <div className="flex m-10">
+          {services.map((item) => {
+            return (
+              <FeatureCard
+                title={item.title}
+                color={item.color}
+                icon={item.icon}
+                desc={item.desc}
+                className="rounded-2xl justify-around items-center sm:w-80 md:w-96"
+              />
+            );
+          })}
         </div>
-      </motion.div>
+      </div>
     </div>
   );
-}
+};
 
 export default HightLights;
diff --git a/src/index.css b/src/index.css
@@ -4,6 +4,37 @@
 @tailwind components;
 @tailwind utilities;
 
+.box {
+  --border-size: 3px;
+  --border-angle: 0turn;
+  width: 60vmin;
+  height: 50vmin;
+  background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213),
+    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
+  background-size: calc(100% - (var(--border-size) * 2))
+      calc(100% - (var(--border-size) * 2)),
+    cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  animation: bg-spin 3s linear infinite;
+}
+
+@keyframes bg-spin {
+  to {
+    --border-angle: 1turn;
+  }
+}
+
+.box:hover {
+  animation-play-state: paused;
+}
+
+@property --border-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0turn;
+}
+
 * {
   margin: 0;
   padding: 0;

diff --git a/src/views/app/Home/index.jsx b/src/views/app/Home/index.jsx
@@ -12,8 +12,8 @@ function Home() {
     <HomeLayout>
       {/* Hero Section */}
       <Hero />
-      {/* <HightLights />
-      <Contributor />
+      <HightLights />
+      {/* <Contributor />
       <TeamPost />
       <NewsLetter /> */}
     </HomeLayout>