From 8cec9e90a0923b6d1a58ef320e2af35b9c654c43 Mon Sep 17 00:00:00 2001
From: nikkichins <qinnikki2002@gmail.com>
Date: Thu, 19 Sep 2024 10:04:16 +1000
Subject: [PATCH] completed key features component

---
 client/src/assets/calendarIcon.png            | Bin 0 -> 705 bytes
 client/src/assets/dragIcon.png                | Bin 5998 -> 678 bytes
 client/src/assets/peopleIcon.png              | Bin 0 -> 1069 bytes
 .../KeyFeaturesSection/FeaturesSection.tsx    |  70 ++++++------------
 4 files changed, 24 insertions(+), 46 deletions(-)
 create mode 100644 client/src/assets/calendarIcon.png
 create mode 100644 client/src/assets/peopleIcon.png

diff --git a/client/src/assets/calendarIcon.png b/client/src/assets/calendarIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cf565b7df94f53152e6d7dd3b3e81d5b1f37538
GIT binary patch
literal 705
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9GG!XV7ZFl&wk0|QgB
zr;B4q#hkZuz4Hz^2(ZpS!gxYyzjLcUA4AgAn1&dJhdKfBR-01HR1UIruQaPu{rWHT
zdqrEssR*NE63Ka|o0n`|vT9}TlI1SG=jW~8e#b9p&K18)Q~1mqYW7C{S1ey6Dx1gf
zvnqJ5;GN44*(R(vzZhh4^Yh)k2`cByzc)>^xqp}2?NiO#Jzh~Bx4eG6Q!x4RD=+5x
zq_`8u{8jdPTd8DtIfU-kpB*QX|1Z6X&1KRr4cnIQESDy(d6m24#ytCHx$6H`I<GWN
zoakUS>Drnj4EuyS+%B!EmtFYY?^s-DC*y@l6ZhCKR5JX~;<0C}Q9cwcaKDG)RC<FA
zLyc(Le1?634|O~8-58!4JIFEY<2vlmaKA(1wOGk}mbd-v4F~^zWH8uaFUP?4{W$Z1
z2mdM<B<{%bGc^Bx%$QJ6Z^OXzjx0qn761LC?|HvxKLj*C{NDe|VX+Xl?YsY(tFH?D
z`N&}YM}FI15JNZS_Mde>3+rthxaAmpesF$Z$m`m!@RP@)eY?Vp50VcUdw%h(_|q<N
zdf9P?SJx$8iYv%1Xk9L+|5&d5K|lM816wLLZhQaZU;5pRKQ)2I5#gKK!qqqW|K(V(
zY1(*g+YyFmoG!|ld#6e`)Vl6ozyA9AXV+~j!xX1+hDEEau1eQ9w&Z6HyRK~V-<Few
z9NiQ1-P_Ziis%1(InyA!j<M&Vde+q)=U$wTkWB6|1f~}d!P_P8e6rZ@j>5m~z%<F=
M>FVdQ&MBb@07`>BEdT%j

literal 0
HcmV?d00001

diff --git a/client/src/assets/dragIcon.png b/client/src/assets/dragIcon.png
index 339d9222c7dccc8a615edb43f3b4f058bd643ab0..070858d7545cc43d22472670901f2699772a11fa 100644
GIT binary patch
literal 678
zcmV;X0$KfuP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h00009a7bBm000XU
z000XU0RWnu7ytkQSV=@dRCt{2oIPtBK@f%?P!U{(G_gpN&P^JVGM$af$X|_nW1K&r
zlqn+oLB#y%aIl3Cwy~|9+nK%hfoaYl&&+ePcY<Ak5JCtcgb+dqA%qamV{eS9eZD){
z8)On70XvcX4mC}H1nfliJJd7*60j55?@-G=0YV5Ngb+fA>CxL47t2;px`cbHCtbq5
z)srsa-s(x0aBuabOSrds(k0wmJ?Rqet)AKm&w(>w2|T>w^IOM5$@LW2C$WGTZ~?3X
zH1)kP<bGaiNhM%N_*Z}i){5IPCDagb5uj;SIfi941@q*~jy)6WR?mdDau%Rj<`fGO
z@H;@G%qfPqqww4ZXp}j{P+NGc^9WDt2AKr3Z<1*O+BeFwE<w8{;N5^D31};T#uAwN
z1khN5J6Qy@lHg7z0WBoBlTE<b65PosU`z?_WEC)$1a~qE7(;?P*#&q@aHj_Wo)X;Y
zMSz!t@I(^eAt5}`1k{!go`?c!N(fI>0ktHACxU=4z<1ynxCE}tj)pr4U=#tzK_{@w
z3HSsYZe81R+#VC2F$K(lKfqt$!`9!1U2GD7pMbBxYUBFwfZgOH@J|zfi-2#y<JR@n
z6H{;{0aO?8<AvSVCmYQ_aN4KJ)Sm(NLafTtbmRCx!egCBcv?5eB%pnhOcT()Q8v{j
zsOJM3cO+mLpiwsEBTA<M8f8xLlLYK{d`$H-NjMMCFsmHHWT#<Pj`v$9G3rkh)M8c+
zZD(GN*5%Gm*Zl2g!lJxEWOzlrFS#zV{4{|OLI@#*5JCtcgdha}0aejr^{V~9$^ZZW
M07*qoM6N<$f}Hjx)&Kwi

literal 5998
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
S#&F;V0Nv!iF>eF?mwy8#x-pvo

diff --git a/client/src/assets/peopleIcon.png b/client/src/assets/peopleIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cd22f6970fb109b0488b1ce6d44baaf77366eb2
GIT binary patch
literal 1069
zcmV+|1k(G7P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h00009a7bBm000XU
z000XU0RWnu7ytkR-$_J4RCt{2oZC;-KorKmO5zoK08EG=kwBt}T-11bgD8TAHR6j#
z2oF2~1_cw`MH7vPt4o+a+DvlRMA&U-y3?8I`u&pgQrg*bY0o(`(*h7e2qA<JLI@#*
z5JCtcgv3JvU<AM-fGq$u0KY`4a!mhiIJBbO==d3NxH1%d?zCJ>I$!|62Mfoal=lGo
z8G(F^0r=j5^PBPmzyyO}#{_^Q2hMMb9&4OIFr(kmo!{z77-SIANjl8=CN+VDIfdH=
zI=?BpJ0flF{+fpX=s5#v!8H%gZwe=CEqLZJ01JEsPP64P0GnkGK#vs6)e~znH90mT
z=h#s57=T&?_U1-+5uXi=)aOiDj9d2@fO-V>T5|@#iyX#Q414c-WC1AJUTg9w)0Cyi
zQcyJld##vuVDx0hZ)`?Xgnig+Opjp>%#tq|g=*1b0G>u*Z;<5y-7U0Z*kb^$MqsZo
zs}2=fiC`(>QzZ5pv+uG0p7s!c$%yPVqVBQ%OJvEoDCch*w1__K^&Wtqfj49ZBD6P?
zT7XA#ynrpqv54*UR+Qda{O<KYoAROTZOcr+-KhQ!Yr=Mp*HS{-Tj<1OKj*|G5ksn$
zt>#oo?QO}F1BGrm&|_FOQ#K_ab&;wZTgaGXmCfFNsKm55<$>tzO>!!=RMJ;Ll34AX
zG@LE&7x5SdAWD0Cq+3{Nk&9QPXnNbC^T7XRFCl~wf=jY6_fT5GbpX3EQ#}CC5IK-z
zyK+uNt{Imxh#{Ay+gKK79y^$kDhZBW7<&X@sHF3f!Wfbz1e>)U7aQiw7E9D!M<0NB
z0DB&t-cI&JmtK^}d3OQ41TboOt=^G(BY9gzCR(T0IhL<S#TR$PH-(_@jyYMIZ{}rP
z>`XZi;FaTDE>(~mNqW*co3bv~9?KrYtg9z#M0SWyI<9W<12+MDi@>qUQoaJXVQ6D-
zi@oHA_%7GSAXfmarF0>t%dJlwb}}k}Xx$$h+FD5&W6ksn%|ud7T8?fQ=DOz*I8Zqf
z{q;^3eHkgXA*rct3w*)w1=$S)W$s7dH04<C8Q8sH=)Y6-<syI`Lq%o{?u5e#9Ht!0
zp+Vi7GaPG2Zuq|+BD}LuM87VQ#(V_MQUys?Js7hXYfF5O2bM}?y<PS(0!OKWMBlk-
z3|Nk*Q?>QK1~{9cL^q}%C8BLh<DBJqdR~R!mKSBAx?Hlb8B6;<r~;~l;@bY;3aF9^
z0{{kqPe2MxL0}3Bo~IRSKzK(f7UA&DQtX1dPqMHcFSG)xWWoS|0pJsm0#gu5mVyW&
ngb+dqA%qY@2qA<Jg0AKd%?GJjPO`uN00000NkvXXu0mjfLj2UE

literal 0
HcmV?d00001

diff --git a/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx b/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx
index 8e9a4e649..b17da1e5b 100644
--- a/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx
+++ b/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx
@@ -1,6 +1,7 @@
 import keyFeatures from '../../../assets/blobFeaturesBackground.svg';
+import calendarIcon from '../../../assets/calendarIcon.png';
 import dragIcon from '../../../assets/dragIcon.png';
-import S from './styles';
+import peopleIcon from '../../../assets/peopleIcon.png';
 
 const FeaturesSection = () => {
   return (
@@ -8,38 +9,39 @@ const FeaturesSection = () => {
       <div className="flex-col justify-center items-between text-5xl w-[800px] font-semibold text-neutral-50">
         <p className="text-center text-[#0070f3]">Introducing our Features</p>
         <div className="flex items-center justify-around min-h-40 mt-16 mb-[200px] gap-[30px]" >
-        <div className="transition duration-200 bg-white w-[250px] h-[250px] py-[35px] px-[25px] rounded-xl hover:drop-shadow-2xl">
-          <div className="flex justify-center rounded-[10px] bg-[#B0C0DE] align-center h-[65px] w-[65px] mb-[5px]">
+        <div className="transition duration-200 bg-white w-[250px] h-[250px] py-[25px] px-[25px] rounded-xl hover:drop-shadow-2xl shadow-lg">
+          <div className="flex justify-center rounded-[10px] bg-[#B0C0DE] align-center h-[65px] w-[65px]">
           <img src={dragIcon} className="object-contain" width={50} height={50} />
           </div>
-          <p className="text-xl text-[#5373B8] font-bold my-2">Drag N' Drop</p>
-          <hr className="w-4/5 h-5 fill-[#5373B8] rounded-l">
-          </hr>
-          <p className="text-left text-gray-500 text-sm font-light">
+          <p className="text-2xl text-[#5373B8] font-bold my-2.5">Drag N' Drop</p>
+          <div className="w-4/5 h-[5px] bg-[#5373B8] rounded-md">
+          </div>
+          <p className="text-left text-gray-500 text-sm font-light my-3">
             Drag and drop functionality to make planning an intuitive and easy process
           </p>
         </div>
-        <div className="transition duration-200 bg-white w-[250px] h-[250px] py-[35px] px-[25px] rounded-xl hover:drop-shadow-2xl">
-          <div className="flex justify-center rounded-[10px] bg-[#B0C0DE] align-center h-[65px] w-[65px] mb-[5px]">
-          <img src={dragIcon} className="object-contain" width={50} height={50} />
+        <div className="transition duration-200 bg-white w-[250px] h-[250px] py-[25px] px-[25px] rounded-xl hover:drop-shadow-2xl shadow-lg">
+          <div className="flex justify-center rounded-[10px] bg-[#70c49c] align-center h-[65px] w-[65px]">
+          <img src={peopleIcon} className="object-contain" width={45} height={50} />
           </div>
-          <p className="text-xl text-[#5373B8] font-bold my-2">Add Friends</p>
-          <hr className="w-4/5 h-5 fill-[#5373B8] rounded-l">
-          </hr>
-          <p className="text-left text-gray-500 text-sm font-light">
+          <p className="text-2xl text-[#53b887] font-bold my-2.5">Add Friends</p>
+          <div className="w-4/5 h-[5px] bg-[#3f916a] rounded-md">
+          </div>
+          <p className="text-left text-gray-500 text-sm font-light my-3">
             Easily coordinate your schedules with friends to plan and attend classes together
           </p>
         </div>
-        <div className="transition duration-200 bg-white w-[250px] h-[250px] py-[35px] px-[25px] rounded-xl hover:drop-shadow-2xl">
-          <div className="flex justify-center rounded-[10px] bg-[#B0C0DE] align-center h-[65px] w-[65px] mb-[5px]">
-          <img src={dragIcon} className="object-contain" width={50} height={50} />
+        <div className="transition duration-200 bg-white w-[250px] h-[250px] py-[25px] px-[25px] rounded-xl hover:drop-shadow-2xl shadow-lg">
+          <div className="flex justify-center rounded-[10px] bg-[#a96f92] align-center h-[65px] w-[65px]">
+          <img src={calendarIcon} className="object-contain" width={50} height={50} />
           </div>
-          <p className="text-xl text-[#5373B8] font-bold my-2">Plan Ahead</p>
-          <hr className="w-4/5 h-5 fill-[#5373B8] rounded-l">
-          </hr>
-          <p className="text-left text-gray-500 text-sm font-light">
+          <p className="text-2xl text-[#b75391] font-bold my-2.5">Plan Ahead</p>
+          <div className="w-4/5 h-[5px] bg-[#964274] rounded-md">
+          </div>
+          <p className="text-left text-gray-500 text-sm font-light my-3">
             Plan in advance to secure your preferred classes and avoid conflicts
           </p>
+          
         </div>
         </div>
       </div>
@@ -47,28 +49,4 @@ const FeaturesSection = () => {
   );
 };
 
-export default FeaturesSection;
-
-
-
-// {/* <div className="flex items-center justify-around min-h-40 mt-16" >
-//         {/* <img 
-//           src={keyFeatures}
-//           // className="w-full absolute transform -translate-x-1/2 -translate-y-1/2 top-[65%] left-1/2 md:top-1/2"
-//         /> */}
-//         <div className="transition duration-200 bg-white w-52 h-56 rounded-xl hover:drop-shadow-2xl">
-//         <div>
-//         </div>
-//         <p className="text-2xl text-neutral-800">Drag N' Drop</p>
-//       </div>
-//       <div className="transition duration-200 bg-white w-52 h-56 rounded-xl hover:drop-shadow-2xl">
-//         <div>
-//         </div>
-//         <p>Add Friends</p>
-//       </div>
-//       <div className="transition duration-200 bg-white w-52 h-56 rounded-xl hover:drop-shadow-2xl">
-//         <div>
-//         </div>
-//         <p>Plan Ahead</p>
-//       </div>
-//     </div> */}
+export default FeaturesSection;
\ No newline at end of file