From 72cb78c3ff0753311f6452114f9fbc15574cf287 Mon Sep 17 00:00:00 2001 From: Anton Kupriianov Date: Wed, 7 May 2025 10:55:55 -0700 Subject: [PATCH] services section with cyberpunk theme and animations --- package-lock.json | 49 +++++++++++ package.json | 1 + public/images/battlesnake.png | Bin 0 -> 22889 bytes src/components/Navbar.jsx | 2 +- src/components/Services.jsx | 24 ++++-- src/components/ServicesCard.jsx | 97 +++++++++++++++++++-- src/scss/components/Services.scss | 26 ------ src/scss/components/ServicesCard.scss | 32 ------- src/scss/components/_navbar.scss | 2 +- src/scss/components/_services.scss | 77 +++++++++++++++++ src/scss/components/_servicesCard.scss | 115 +++++++++++++++++++++++++ 11 files changed, 351 insertions(+), 74 deletions(-) create mode 100644 public/images/battlesnake.png delete mode 100644 src/scss/components/Services.scss delete mode 100644 src/scss/components/ServicesCard.scss create mode 100644 src/scss/components/_services.scss create mode 100644 src/scss/components/_servicesCard.scss diff --git a/package-lock.json b/package-lock.json index 889d019..381103d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@monaco-editor/react": "^4.7.0", "@uiw/codemirror-theme-vscode": "^4.21.9", "@uiw/react-codemirror": "^4.21.9", + "framer-motion": "^12.9.7", "monaco-editor": "^0.52.2", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -2676,6 +2677,33 @@ "dev": true, "license": "ISC" }, + "node_modules/framer-motion": { + "version": "12.9.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.9.7.tgz", + "integrity": "sha512-Eo5TYU6sEPPy82GDx32PJm++G+AkBCrzxtEQOWLnpQX896Q3LFrsYhMZ5YO5ct4wL7wyHU6hqlrpYXeexKAevg==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.9.6", + "motion-utils": "^12.9.4", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2977,6 +3005,21 @@ "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==", "license": "MIT" }, + "node_modules/motion-dom": { + "version": "12.9.6", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.9.6.tgz", + "integrity": "sha512-IK9pm5zU8BIp3FCoUGF3T7AHVLVOlXxlwco/bIbcnpBtyYb2gDQhdOzUh2KSDJVjYl1MZ9vdq8tnFTTahX2lfg==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.9.4" + } + }, + "node_modules/motion-utils": { + "version": "12.9.4", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.9.4.tgz", + "integrity": "sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -3427,6 +3470,12 @@ "node": ">=8.0" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index a8ec0eb..964af04 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@monaco-editor/react": "^4.7.0", "@uiw/codemirror-theme-vscode": "^4.21.9", "@uiw/react-codemirror": "^4.21.9", + "framer-motion": "^12.9.7", "monaco-editor": "^0.52.2", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/public/images/battlesnake.png b/public/images/battlesnake.png new file mode 100644 index 0000000000000000000000000000000000000000..1f3206adb911c0e57d7c9d704c38a810a208321b GIT binary patch literal 22889 zcmY(q19U9W5-xmV+qO<@=ft*c+qP{@tP|U|ZQHhUlKi>%zJIOvX02JfXL@%R_t&+n zsw3oO#o(Z^p@04Q1t%dctoZ8}5axfrkl;W6gvFjk|N5oDAR#QE?4EU*4dJdmwDj`5 z(O9wVbu-m`NcUoEWNjpE2d;#I4B1H<&#t%r5lU)@Oh^Pe?;mW*piihD)KM4HVO{aE z-O-q+T5+|*Y}Qmiu4FPi^j@$J7Nfu98ZheOOP|NjjU|GOd3|3e%5f3nT9{y+TwZ)&Sg!hci) zZubAkWXt+Lfm!~mhySCFJ{cva|H}P8l7c_VHG1zqxZAxZ3s9{X+Vw})gkvY^HNg2% zg#mUpJiadSqy{=fw?6{F8PSIq#N6sqKud?61-q)jYLsybiPVE;2aIrd4Q($yharD{ zj#9+D@sIY_(Cwpxka!V6L1Liz>7xsreFj{Z1gHf51P9Q70s2rLv`$qQWYiNxZq14Z z7%<zDdr9PAuwHkpHp;tybQIod!x{SoiO!gvOzWkD|7%c@r(#u-H-a}4 zGJzU`)<4pEHZZoc0z}(|BWUQGO%b+!&F) zk>EHaaQ?3cRf@g-eBwv9i8JPJ{ThWHiOFz&D;tbt#}u8L7^8PW@x6WhYN+J3rEx-hmFKUnxffU@)4{pjKC7V0+7pDQ8i zR~H_W<2-hET5F^^o5dmLFnmH3B9OuMEzCWs0Nb+{0)ZM!a!XRL({sZv{0Bi+#2}DH z9BznNIis7*eCthmDpC@9M6%9!!&-cENJ*DHU!Fg}{W4q}Up^3}Z z3lLwy!frwbEBQ_6>Vm}{%e%Tei%^5Z&NRf>_DE=V)DWX&xNxhM?Gu(ovvPm%DamgjX|b=Xbdv`cuU^fn@L zTDdwCt}m`lRvx&qVGH`zMqHUisQhLK&RlpIzc&;B3k;pjlpO1Eswz?&@4I*$Z)G>p zDiK0a6i>`3(jW_PGK%J`n&!&bn(MQ=J2Fpu_Iz3XZL&!1kcg;fRxS6x=~fD>O95ZS zhz@m#R2p@swr4{r17zXSa01$*pjB=elyt~QP_$ByFR*#9)~ue~?-bs&@E^TbGCp|7 zs7GPJU<%2D8~8VRL~7?D6XErNB%g%HP;)C~dIQR8tI^$bSWGMA3tSXp`+HZRV43r? zsv9BYouaVfNAO+vVHO;4$6SJx$b>c;Jiu3_Z48I=0?{!gjt{6wY;B-9u@}n%^bcl98l#Y=8EqV%k_nx3n6ya+Iqr2R zXy;F8tZFU_u(GzF`Cy+B1S^)|_0pOPo*abugX4rQ455on$Y>)&0L}f_uT@LpS@prrzs?+u9VuObjG3*n>wS$4s3mMzRrzH zt_A-T@lcuQWP%I-<6R=|gi3_Ix};>z8ItM4r~qW9zbjdk0&`!t2rnWkvb^U}npry8 zR>-nJZQv4Pks_rLg9^BXNRV&h+K6!Z@o^bEbQL*Wd!Uo7pm8%o?~$OOnn=;Zj2Y=` zd*+n3f6evbKlZ$X(g$ow&4wKNO#*Mh{t=0Bgz@hEKp$j+MLuKGvdh z`MQQOCsYG<2Js+fV(nd8PMT*>uLtDYXmDKq0Q8i-b{A=S6S;?C6l9HCk&RDjJIhm_ z-wH@p1WS;E1De5e25H!E+i9cbEp8{r9H4QcCtZPrY2rF`M3(SeVMBp;~ z@|z29-LhRiZ6|m(m_N8=D!LV2>-6GO%*TLvi-MubF-|EaH!7y!I3$>^ijUUE_Qi`s!)~!CyCo6 zPb~I1Ll$)Sb>qoXDMGah$WK_B5QkCtzTP&5!!Uh_&a6=kdX1(t7U#WYcL{ zxp_YEgsL}iFjcwCv|7Wz^p~sEql4JgJXNM}IjsrHkNA zEHa;&NEtkMBE7;bQ;yVr3!8t15!tmr4b(qh8lo7l- z1%`B%?@AqKLDv=*S(zbVQDt7TnABGX1R0CqKWpN=FlXT+Kc0e_Oht5qSJVR#1s$KE z&WqU|yf(~GbsMZq6a6dTA}%b1)UH{D-sBPE+QSxR(OP9>hFH{f`{o+K zrZTQV$)gCIEot>+zP+<7CwBCPEzUEP9IREiELf#1#HjCsS{YRle&6r@+A%ON1BdT> zt-LMl_{79qn%{~=dvrB$5k9;fCr(J;l_5ec;6pPSZf+I8b9VsOVm^Z3ol;n7?=)cABRPk=5>A?t(dz|v)s70)6fvpEYRj;FRC9QO-51yR>)t+hG-mC~kw) zd;Q?}0NSgILZqkP)?^JuO%7^FYMDgrXsz5rLkxc7CqOX$^{lxl?m)b-_+4;{BP^vs z&FR`CIn`K65_V<3u*mG6Fg-Iyh$wS~PTriSU@7lVyuP-yTg$vjGY`v8xVvE^j1dtc zPrc~+J0@s=C(9oIbbE<8uy=hBxxIXLc6!wM{2ypx-u%2`CmHH9fRYUY0LklWbEh2P z9Y&zrW-7;08A>MlLQsGcd#Dr~(6dZYa%%uBm6dDHbE|d!T2I-=Qv+1{( zz|=DMN>#A`5r3|%{@VnvbT>XL8aK?|-Org2*Th1o(XWwMvANTEpwJ0zp!#k`zPIJP z{+z%o?NWv~@*h8DLRK3znnCy@vX^hT`Sp=W^(18U)ztH+DJm0k?xE2B{%N7qxzXRj z{LJX}X&+-&ah@wBEz9v0n9o<`R_XlLI1m~7R>Ln^6Ps6?<)~!kjpce@$9JqjnsC8u zj5n5bW82&qdfzuRGM5Zk5i!YG-YHdOEusB;cb=y2JB8e?k1k#mOSKwFy&}Jk^Y(-n z6(YqIii6yjFC53S!<;K;3Q{u6KiuD!$=XpfIE+$zqaaGocxD6u_Nh?0boTDI4GEey zJ0z3*jn7ZsS&K%tw4v#@T?hiDjL_8~#?o$ip)-7x)M4579ET`FN}ipynTcf(qxE^? z^`%j#xUP4&t_l+b8rOGTt^-c4b4p5w z(i4mr=iVK4af)kXN=uYrJ7ObtP=W_I0GU^q=PI`a)P2RXxfWI#9@Eg^R(M2zdJ!LC zO;2q*LACt5Hl^wI;+yVv>Vt2}=JDo3==k#a!(^Ak{BJGerfQHN^&1I~H5=tOGbNw@ zSN5b+Ln;*#gG|U&^8RfA`?V1NvJ5 zcJ;1w$^?Z_W~Ppoi;EnV&~&0qJTogbrK&1l0121A7tr}!EhmDz!VMoLUFQ=(ft zwC^C-uMalPPFUit;AFqK za&{H|^fDV3`c4NV+K#GWp4U4J)=jSc6g(#q=f~;PFOnhJfGC>kl5rpV8s@u+-@C7BZe7p1Lc)mU#M``H{4{ zHMwqnz03oW_BS3p2DGqFt=N_uKa86{&6(0+VlO<=Yg(onHq(r7{HMg2PXKwEK-ns% zW)EoytN0us{KtC$VZ6IU{O2B7sj;N_q2+qD5z|paeL6TQA2)1M+65&Yxs4I@QAYM< zU$EZ&Iq7TYhob5CnKvfeJ_W@7><$Voj8H|ZMatW(Q}?Scn@{&?PKd0XQm8A!fZ!6+ zm2SnnrjF?Purkl{-2kKvOyBj5ufH3CC&6cxkJ9{2i8cC|y|JG?RE_NywWgGo!@`4B z-NjWlWGKvZ<_5kM2QMy`->><(grjFI)`?#ZT5bMC^tG{F#|6TZuIRg z|HkI#dbUxo!$xe)%X6kOtJ->XfP+RI%f0imGZ8Tfu&uA{GnPfL_aI$_z+->u-e&8< zlYc}Hg(CcgKlIsd=}Fd$2wxyF2vP^-`q_)7V{34^$3_%)d?y!D)QwI!nA=oK`Igsf z$HDQ=b}(MgMr`W7YNzi<=ID+Z!`~-2$#!sy2Gkqgb{q`^n&I)A>fTSgtHG9<+~Kp8 znRMwS_rsw=7OTeVvnG~vrUn0OrP?0-@rys`&;4(}eD!}uMGrT{EwgezU!B(J!>`973X{B4 z19UT%#L{gM!tCs%n5#rL_`P3xmm@8H-{=Mnf^`>N5R~(?i)}%QoJDZFh2!?e3H5A% z;K{L`EK+7l2NmK-1T>+FdH%H;LLj3WtFuMTWLzqN)k+5F{t7-VnXe>&b-%F9Of!Fo z#1(QP7S_SD84u+T#=95camK8gQyknUojJ9TBB&x8NtgG}`FxNjujMb9PjUvjUkKeT zQNa`JeqZ1Of9{aD!h$DmdF32>0Erq!b)#G+Mb&NZ?Sbr%I}S-aYcD-k7K6xM&MmFkVCEJ;u(Ei~|7LQ2ic{nE5nKM~~e*}zHg zf|nt7CK>$a^K3BaWW88g0%8OB03B$OX=xdw(k#iW(d)s_8Xauju_htX^(dd`TX96? z+AX}f?yIWV44vFyq7pqHA5lA{e#(RPsq&HMHZYSaISw*lpI+>y?b(i8lB*)`8S4Ii zAp-;AY|ve<-|Y@5ia{fwBv;9ZdDQ!QlrjfbK~393+dqo`Xl>-i(aPD8j6F&e8lr3= zf~WK~0Y+9O`$57gt)U3$c2h4C?sdtH;Wt0utcRVX-#v%&P+t$5C*(b9 zNXX-8qj}WkxW$?2L#r&M5K{D~7OZM_bHGY7u7SbxbQoT|PlV=;**=|74ADnsoi58( z=q+7DbN3(ef*Rn9fp{DqC6MV#zVB%HzP|8FAyQ;3;%LJ%Yp4NYoVnUSdc6bdW-9{A zYjO2LWbrSs{Fmf`@`EKi(4ai)JX6%GD13X{hdd_Vo?)JSB)!?)4M*#L!y?bHrFt4* zT`(-Eh*E5T(9?zOL%+1U^cL^Ws_kawyE zXN)TBLy`6YR}P5!mERz=M{p9?Jg@3Jb6aL(NDV)#qq%P|9#0cJZD~=rQH_&$br%VQFx+P_fLwQ^@9+tcH_W`QR>j@eC-lG-8 znbWf*LVq{=1bB@eQUZ z^mVR|D*$)81zpueXuVtf_1}GUEM1*93P+*ZuT&4Kxoo8X}2;Qdo8aKvgD6)X%r zn0}ft11xyOP|?EsWCE*M_C;IivfuX}oeD0eR*8vas9fBzzH`2qr^)&EnU2ucPUM%q z42`_w!rZ(xpQgecwT~MS+ETI&S!y*3uOfUQAf(k&j-DILF6JuO;%mK?^U<~xQ(f*x z7dxYB?k_zzLi_7wU13y9Wd~{$``ud|vm2yCnHyiRx+qb2fU`ZUeO8;PqQ|O+*_HXI z)PB>+4lf`J`lXTz^NggjQo#t9R5N);hR=y>b_S}^Q@hiSL4M0k{JxyRZtl+(rJ|uC z>-m#^Dv#9i4wYG^;aM{BmJESPLb!^}h3rFSN7Q1IwX8>M1ts|q4YnBvvlp`90ph=2 zkeKyJ5?n@aXK-|d++;9ZeQyboS19B(x`KH&>N#Z7Jzi)BX=}CuuG{H4{a&;%&C~h@ z{QiOL!MxtWJ_Yx}&(%0W6cPR$3(kk4qWS>hl4Hum*OEh11IZ~p59Q$~sXnsg32QOg z`!Md2643=oqGYQ?+(kh(A2MaWwwET*?k4uB${VRl0)jQ{bP&ej(TuivVH^(CAVS%d zt;TEu&B7`AnfiC}u9?emkNgwASZPEXzy@vr{CKs5gRpnZ*I(DA+-gEkP3R^)z&fVI ztu9<$QG>ItXS(F8u`=1*tF&Q*MwHFs6$2?-7OaN&9h{^clWC>`loq}z!SAG4d@ zo4Z)264haKl%C*s(^q!;+glyA7YAbY=P7pfkL(Z>ozPpFxO_5K=NFMSew|(dw=uw&SqCAMJx)F z8*^qk4Q{cp@=PHrmxzC2>4a7~EV#6DLaT;KjWZcSpV#iTomS4`SDg%7V1hjyY3TaMjeWN4uMO%1LQM<2GTB-lSsF(39%_$~K1{(WW= zd^w@=4o9MM@HP&He+}vLxB0R=_xJ{)xq6lWE9(_A_7elW;mV$|& zr~kOwazRD8k)Xot@DIEw3=5hunn0CA;{o&O5m=+2O0azxPh@`g8YZra`QD{$ol~Mh znLonKMCYw#O^?IFI*%f@F=U{RHla1iD^iiG3L__|n1oKp<~0$~ddLjqvYxQ@Pt9Z( zH`|ou4k`(rcRKP%4DD!`-o1e9iCg(Hb28cZ;4`F?qWp`|i~iGpA`)nKtgTMzx7kGg zY76DG!%Uke#`o`g8=Q)+$0-2R%UQK@Ydw8$^!pT=^Bm)Hyj}}%?R$L-eZLqMu-ewW zj4P`lBLgAV)2MxEo4YieoN^V)l1xBHRAy7-$t19Ud=fev&0rZfa<<*P4A~OL5la-u$!U&8`Q0Ph3}sGX%S?)23O3L}XOR8cgS`HH zL<*jXBa9i|X6Q4yU>im;8OPwBpZDc1b~C2=+LpWzL-omtGg#q6K(#idMz(_@ZYT&d z3-T`bq-?FeRr+i+J}fYIENw<-OM33dxDQK0)#zVZi79T78EXHjj5x12pM#;#Jo7Ci zt^@}^QKfr*|HNL0hemZKT1mwdaElhaLR~f;x1^96XqL*o(r9x+R0K48`*fj$BPm?u zR%+6O?qcu6wlc`&m$f#rQDHFPT<>F~)LUxd$62DrymioRH*pBO=@J~Q1kt?V8rlBg zAquaTdt19P>FlUpl9c7k=z}?igH;l^WDM!gf(;@ew2k-N?y8vQGb%|!vL(y?LrT_1 z=J2qt2)mIfcbq65^js;Sla=8jb1Wt^7`F=TJ@Hwy!{Y>QaM|!rW>yKUR72*9R5>wE z4ae-)zP7g!_W_O7Bi>syizWqE?$3BmXSE@*^QxEKPcopFAMnT5+ToVmkeFju>LaMJh;-Gywvf{B zqDyy*{DmU(F=vN)w&T?#S0Ot5q)4)@4sxLR!scw99aJ5u!G`ZwP7ZH+C-JR}SVwvo z2$@nwKBNb;=0sIzg7WXLF2c>5CA8Um#;%y27d3RYO~;zU|9G44(;jzXCC#t#&VqvB zsEjpd+MTxTADO*eId8Ok|FX{*-l0%4eoT9?0L6dkvZ;PsqW~)f&MM5a1z<;u?jJ#W zocz+Mxjn$G{K&P%;xXoRClyD z0>5j>v4ykhl#iTY#2MyEg-&L}DE!mF2XtV)tWyl;>VyFdV6#P|nCS_`{=FNM+BnGS z7x5zYw^e*lh}@@YkX}uEDg7GoxqY3bS8V8;8fee4Yb40S`^@(fB&_cc&xK8SjS6o)F-0BhlQE85DCc=ovF#-PznT1tQ#$V*0iTz>AQm`C`k z13IO&>G7odSQ%t47|Ix~Hh7hWn0T?7vJ)k|OV-c(`+eS)x_&fzKeZXf`Lp4Qe>(h4 z<8ECxmNJ@`O#@D3bsgj?9~FR(g*~%G%tQ^&m4Y6Fae>%G1MhvC*Cd2*QCETK*u=+H z=B09eWLMb{O_>SJW8Y>eu`!1 zPExN}0$^!RtM-%d=0akmK2UHeP5!q%N4@_P;15plx@vKO^eX%Ys3Jfpp2?=P?Y=%; z)`5#_QT`fz&+JHZIDvA1q?xy!;eQ-=uTZ^uX?ZN*?8wQK+a?Qet>!lPqO(kxA<%+cg1O?)xU1S)Nwp>TCv zkwBMnebZ{qYDaNPI1oB~x^Q*mpmf%VaGh-Zhfftex}o7ewj(JkGem^Epc-;j1vA() zD~1nNEpwBl{jsKhD{^s^K@{IVCU4>r{WZRJF3gJk0THs>;g#l|r%NN_7RHR5L90sE zPsw#a5jE7D!6Wnb?HQ(u1);@^0CM}gr6lnVBf8^1&8Q(>bcGGh_p!Vn*F-tuJx=(W z|F-fK$|Wk8!2BpnXK-oLa1h&A(Ce&FBziF!CgDSjg9Ui=NW&QAMoTU{Lp=abORMXu zG@m(JBq)JgRjKC+KCRZTJVqy>({Xt$sGqbxs@xtcUpuO#Hc~BZI?={+DAeNmW}hp+ zLCt~--R9&*NKn<5YD+@hldK_$?$D=b-$7z=~raR{3%9!9pN_9Pu7+>DVFuB?Rj~&Nn zA<=lI2!bbK#CyYyd$RhfHY-3LH@c1Go1qU);@fO6_(VCR>g^TP;5T!yfCK=s6~MZ~ z0FT)r%2zdZ1S5WCY?H-(yvoV`q2oni`uKr9H*Y}M=T(reV1<;>R|y&~35hQHdK`YR zN{&428}J8rDB_zpocozi_{ILTOisb6ar2rv;_~wm!Ni;AIq6e;n=x$tGbeMq_8|o~ zYL?C*TnSR?ZY^BdBQG5ugqR%zatJuHaDj&g^dJV637LTXu+szn?M6>V% zFk;rYm}xmYUH=Z6y{anuZ;M3v43-s`OM~FbuuycnSr8PIdsd7526E3lEY(9kMPsn*hnvC5Wq$H)KUez6dbknbzGwI z|%%zVZutlrUYUYtKjFTQR1Hl zmPWnUalmd&jGld9;$5}KIo~}khwWB~?2!mB!mO%f1x?^|4YpZ6H??+{uer%9)eo2# zMG6=5$Vz~aG#C#lZsp+XH90hh&0R6q?=!9W=si{baqRWq#^7D4vo%hPqB*o)9q1r> zNe%1d;(@30uRYgzRj#|tE61}LTtmC068N(7r7ENv7l!&i}!NS>kNR#WwB4skD|5Fz;Eny#qptpznZo{ zFuGs{-c@q`?)feHG^gk;@|swf7DFRKa3cRcso^$L!Vz0{@;dyMWPkSCt^|NLke@7L z?We!wkKAULEvDx)(`v;y6$_OZPR3ZsXE$M0u$Z-<-&G+Nd%3*X@>AoL*f5P@V%`km ziGQ0l^a-RTIZ3D9P?l84ub60c0!a+2eOP^wfd~Gi?HcHLiM`E9wpVzjwm)_YySpy$ z*?pDk7JkY{run?%3Z{=8e*5DS^sbcBdS~a>%TD*}M3*P_Ukm+g&YxK8i%ShgfrdLd z?%G2!tJ1B8=bKAD^9e>0kgM+1H~crD^xvJ&2<#fLe9R%Mp>PLl;zKNe@&U3UDB&8} zyl68p0_}pb8IL%+5Vy%w1r9>mWNh0#h&1_k4gB%1Bsrh}x@*JCi*c@n6u%q+xu;i= zcxz|5&2ofc?2a)ly A@pUf*aRiaoeo99saI@eGCACR-2t7*v&0*Bcn}c#l>=@6< z3@TTGjhzjN6-Mv{N-a_2n<(sc_!ZUm3a+~=JA}QirW)dx9Sq9l@Ps#ebVb`S{yU1c zQNI)76i2wF!Zy}|0P)^yiU*q+5?g~-?3 z3Izm8Yk|-iBmYdhYV9Iy60XD#fQXPy!1<38rM2!NQQoJ>c@do;b+$Z4Y%pR|%$xz3 z&-Tq6Ll8qagXU!81R+sg5>xUY=}qnSqtaMP=|?dznU|Box6RVhYF_?H+dqs<@z!MT z#Hge{J8?@rTaqvB-w6m3P6qu$o3`1{hT8`dwYOs_Ea^;p{p+977d6a^y_g)gTXCZi z8E>bG=Ytp{lQio6sUeZz!Nfq8ac5?5`=MMm180`TJ)X#CFLZ=NO1HXf+8~=2Y^6_< zAZxeQjV)ygmM)ar;7uBRlT!h&3n}&6xCuz-byp6^4aOl%KTB!cOm%{1KYFwtgLa<>8Gp_=ojPXhSI&57qFGK#oi1gpY+GUQVStmmtMO*(NnE9 z)ejcQmP}5f(5ZC{23==O8%R9#z$ah!s2<;ZaVax)0^>GV9M78=t@kf>dsutSxC&R| zO!(6UFH^y|3yZ7ze}6iS&OZUeljsc6thQ-;hcnM}$@pGWuvQ_H#%yjl)W(~EJPLI+ z_UfbVp=VCzt4uoMjkOas*~B*D%!WfO%wXyivOQ*e1!`pRLW{hE3&ut>?&f#3^gt{s zbW9#HGxBzmeuhJ>GgLnQfG1Ayf5<`R@9x&yfKrt^NF5d~WI(eEqXI?^rQT-UH{<&X z>ioLx<<=KCAd06?CBbpz>n6R5gt;y8XEPke_$Wo^j@TAu{|ezX=FJ3|b}-`;aG568 z%RKKj9s*;vBAsM%yd#ZDmwrZ$OiA@XnEvE*|9w^X6G%IHqX65#t3ix#!jCYmQHl1& zw+)7G#S1pzh1{4Vr6xFTyhghmpHf=)eL=Vtz8PlE-OztOp(YDq%@C`RrQ2L;rl8NS zS1cTF&-oU!2OpfV7T1BAX|{wRFGv!njpV=Is?ZkSX~&F(>$m(m5R8JNe9@;*64cvf z^^ddr2Vwk!vCODfoG~1qJrJiK;VF0ItktPeKcyaOlsqDs!dae1Gqoc%k<+S+;b#Q= zymag!`#Zya6X?l;MeY;D586*sjFQmcsLHameFsy^KiPM{;6j3?c{2V+Gv1+Ee14!~ zEylAjoOek+rZWvAT}k9lrO8~%lkLVuJ1zcPjkJsSv;*6jp`xZJJr;a=FcyD(!N<7i zaI|*XW{N_IZW8ky2m3qH;l@zK3}9WS#u=j?(<9K>8a+3$`%{MtOoRQ)UJLv|J~u{@-~p3AAXB&-=DwnxhQj5|~$EJ!x8y`k2jL%1@*a05L=G_IHJGp9wQi zXs1V2cpE^}6Vo^DNu0d_2K&RcHZWyhs`q zFjrA&;?nlG(#m>Y``Y{0nQED@WMS?=jB^IEAQ&o08gp=d!dK4YWJ2vZJR=J^#nIzc z&h><67wrVF028?}LC~`^1_0L~`i==W(`qFwJMW(+dBsddYt#h1Ypq&Y_9<1A+B)HD z1j5kc4nz?62{4<#AHl?yTsa=hS{spe8hwswVUSn0L{7QYJr zyrQ1_KAis*%_pidtCxp-ITxEvRy#eQj2<7fkYa|Ff5$pX!8|+QpEXvT( z-j(~rq^$VX8ZJM;DvbYbyqOfSFN1%d=91P#^6~fJ(7gHN9$u<8;Gp;CJ)E~Hue$e; zt5RNNE@l$_7{b-?p^nvGmzR;!=-uM}THW5LwgUL84eu(AC+vd8M24wrD@J1bQ27fp z%C&PN)e=I69;>O^;US4^d^+H$WuV0b}KgQC}^agB%&a?XyVNXJEQ+3bMEUeWN(ywYdiS! zo-+Q!b75m&JIFOS!Gp5#Jqz6g0IQ^QkUgNcTY|&@__w7GQ-8f7IZF)HbD})QSEWvr z1$hx!2Y%4iC;3I?InLm`-nPC2G{9y0dfpWopU>gTxB#>8*`Dg%vg6F7E(j_h*rs7* zjX;`u((izVj9cxAityP9?_?7Fqm|gug9l2}OQd~xD_!(X_@LcGh2kJQ)pl*T$hwA#^pBScm#%2fl8 z>pr9Qw#~)(Sj|u6@X?ob?H~h@!MaiV<3!8h&P^=-rDb6tw;{Ce(l0-1_SD0Wfc?A_ z#nWDpuRm>w_$}6>2+Ad`IseTX?q6b1m}bmXZR{8*9J5V3v{tmP+WtkT3jMaViU$u7 zLDkyRtrT29O@#iRV4yNNgK#*Gwg_ZJ%O3lGiNj|Da|>hW$+e$Ii{%9ld80Hagx|BA~-6y zsltz|-mW4O$|=n{lThMzk(d1vFy zJ^wrx-6pLW*%N-=2Gd57Rgn>rY?iZNkQki%Zq+#|ep3h@ zmV?gs7pY|1-=)g`B4IYE%)gUnbL+OAN)LO;iA%m%=(iO&ypGEePH|s zu!e82!Hjf&GkRKeP$>I3F*L+2E5eCTqaIhNU3SmgE#D_d%Dx)m1ugXINBk}5 zKjqpPNV`XNaf=Lk(XN#S`ONXZB-v@JkSV&l=aK-{zIVkGgaD=DD4 zgFD$=t!72^ZDzuv z>whm@rJU-~Fg<)M|bU-spgTT&PfX>fo+)fF-w#oCugX zCY2R*S-yQ@L+lN9)dlz@xR0I{(-+;48572@K1WpQsdtGb4XJ{Lo*x$qrN3A{`b;_} zVY%eG5p*FsLso5J$LDFwoI_VOI|T}-g>V7>{A(EBeKlUtxuDkV0_`fSwd$ zSb^pDpNXKxawBa~`Qoc({NDmg-M~x%D0VZ#o6XLsT`oW&b~z1HCLvUVKeZklZ0Q0i zdOWe!dyYvTM>23tPlvmfFbbcTGEw^h*sNms44i-sxqrWcbeO!m&u$922!B%FV$H52 zBE|S|XbjfDaJrZ=$sH#NW3ve>;qwUeg(NL=hO%00iqu6xo(o3OBq~p5*-=X$Fb>Zc zdPMrJn4N~w^wfx69f`T4vkCx@+Cx8fEf>AzS(Ww3*nh`+-y^oNA(;_mV9ouFE#2+5 zi@rL+$4V+JI&_XseSriu>{wolT3ZnhJ)F{CEYDwq-L^@xt1?Y~!ml2{$S-}$0F z)1>e^HX?AApK)nse=+>nQ}A6!%^=DbJ!Xa^U?jNK&y%tf1$dN*yV~oaygKo*_{qw^cJ~5L)j~n#i4Qe~+2UzJgpE!D9r~{Kp_EO7~A1IC7N0 zksz^j_MvYEqLSqCyRmUK`wMnC!-wmSyS{%IL{=HEiP2@I!%*pPcH3|*`t;t-*Q||M z6>aMR?vtQ*On|-}RB1B2%XlJJD=uPH3VC~7Jt2hO-!9YTbAc8#&y>+Vr$D>(JSjt#8?HWbXc=EINl zyf6kHixFPs(-i%w2aRx>6#3fe7CD1R8>xb60LT7mFb@TTLQ&P*xkJAm|01$o_4&ic z&Xmun15iL3bJ#E=*=v^8{x>CX9}*oLV=Y*BrO;L_fIs^B1wCjhQ8HJ!zo3o!(;ir0 zZ=eZtp>Lg>V_qG*E203IZsKcTuoJ!oGAPOxjw2zai{d)t17t#=*L?oo1R*u+`xofQ zt2&-}8TIg#M>(>2;)&y7!KZXhkA(-MWZ^Xa^MgcmrZ7F0D4j4;JyUpQ0&|k5-jo8> z)mKjj!*hInZfBO+8b690i@`$Q`do&b5LHOfnnwBpP7@WZE*EE=j&(Ql#xGEad#CWZ z_V(Lm@EC!>KNG3X3QoF|5pMjKSL(_4$uDA6GQ!U}GL+v7Sd*A=!$TWr)OyXqRy?2DSr8&P7)NcQc<@^Sm11R>%R z8!^j5TP6Ok@^JYbFim(texaW@8E7&Mk|L>Iar8p-IuG^>7;y!+F%6Vk zK4Yd0W3;m%J|N?J5rO}De4_@rPlzx4*b7bdh~6(Q36hNLf;+M5@76N!%ak!2@1mZ!49l5U(#&UDbKt$wT-?`L@$L0QZxI*aRh_gNAz-DN*1E&;#hK3f|oK44zFJ? zv+Sk_J#ij0RYH0?7~S2UdK^!WB`nB~s4akK=2_VCyi;6% zMJ|prjPc2=N3k>_OQZ6k9oMwRg0ImfVOfuw9F~ud=gr~0o|*4`YUhkK%&HpK$7hOT zRTnojHmypli?<3d@)dlVK(j{r0=BcG9O(ukj z9vc2_D~dS{eGg{N;VoLq>Z^P9 zf8O^zpWgF+yEA9zo;mm4IWuSOZ|3$>H}^#{gpCS?TE%ph5fR$PEw>FTy_6^W{s{GJ zI-?!dNAZoDAyoKciEWeU+Ib3o$%DYy+76Q%z4xi^`UFidzF3b ze&su~UGhrs=@olu(^WZE)9U)SD42tjHQjN{tBUq$u|n;M*A}s?myN{{hA=(-PGh&& zmE7VwhqrLICP_YD^O3s!ioM(mm7kSt_k0ag!S#giXEEw5SVEXAzK-0$@l|ZbY+0sF z=AsaA9~_jEqt)FkUAlv2i}&kOQ$S!@dvpG*0d3%0J#0^s0W)z1UKV2LD%>&GyZJb> z>T}7(lt@Jifrs)981b!j{A&Z#0`xOr&3zqiKmV+8dx81>3k>Gc#@l(5KCg~d(j=Pxhw z0IekP^r{(IbfM`**+V=ZSKe%ewIhV8?W=@N*KJqE4`=SiTAsOE>!5Mcare~}Gd5Qv2K=;cAnobH=S3Jmzpri@ESu+3 zvp$6oWAwbrZiLj)WLHAnSr(@ZUr^|DDeatk6uiz1{nsZf=5RY|$(*;V9QxobI{VJ` zGXJJlHl#AVR$3QMF+!o)W`l`O1&aRw)kP=98On^EY{d#IL(qV>Lh54wbE%m&KU9fJ z%V~Q5N(S)Tff-{LC!4Xhj>exI9xHPE$=m%FRlsdL9=js;NMwkkozTu zM&tgGpFmt}P!WV3xi^bc-I+AZ^jfnNi#06iziGD#shaShu4&}^@Nh^na+X;P9*D|tu+e(M?58aQvy18NNwdY! zD4UrmnNHEFh|FY5a}-sr1MIb(*C4Vhq`7XSt)X|BkbdbsmZlhkM2GpJvbnJhVu)bU zYR-lIO&`7sjdtQL&li@JtS;>xWq*@bymBpy$W&s^Rr>_eHg23zEQpB|&qxe%1+pV_~;!o+luWuH56ERi1; zEV#jTa&&F@unk(JWR{OUSQG3}?88mDnBN-t7}?Hl{>>Xe5Oqe2b(fAt0 z*fy8~p$O_{YBf4j2DHwswWbZ>+9#TLjYSg_o$%pvDQ!RcyC2BBj2j2$l{e8NWl zS}79HEtRa)+EnV>5Bj`nYYc>$7WmuHnv`!Y@)ob$maJEKoJ#7`aPpKKgxSM zbLHG`YzO%tBH(Y*cPLU$ehacWVBmB$=AZbFWRR%%Lg7*~>5HT7kbF+iGS(>fiN{pU z(@NHGSq?W4&lgH*M&8Shv@;TOxr5nRGB8CM29yEGW@7^&?@<)$=&iv_5HY>Q2m$N&rLW+R8%ibpOP(e#YAFN|1^c-m_FE~qQXfnr*a4NBS*D@T@l^x;!R;cCl zTv$l6lmY8ayRPeyErI?70Aq9f`ey&Wpyp9TDL=PqTfGqt;_9q(?@j12sw{)UvWe~9ZsSfuG(eUUpZTrmd6{vQE)W!$f)+h6#Z#dVRp#_0%)Dmo{ z(0p3}NEA5u`ye$qI_Gsz<_dFv=;OoWa-*eaP)7COF3=Qth4J~}#yP3Old8E>PGqn3 zzs%?QW-0Z|%sw}s&v`e+j0N>blHZt@6*Q!sj2{idj%=%UpJS1TSK>%UK>zmos`?(i z;-fGxCoetoN}E#~45({kq(qu1A5vfM3_Gx!zewfSnd{TnexM`JJ%{F}aS(V? z6IQs}%B+r;itRM%Ms7I{|JaLPtp98shI;QdN#J@JbztH?<91`;FSA07i?BALw_Ly> zzw`+_LA`L?Rk>JZI8SO|wNjByU^Wg4@Fc4QONF94r^$QX#ml#=-A=gA0Cma9}6&Pdb+}5s(w!NsjbN zGm?*GrR;M#Xc`Bl^$IsyY1;`T3a4W5_}koxb?SNC1V~48wi-o;as6YtY-m>Zw&1wN z^ZpKUI!c3&JLQIV*jUfP*5%}ne@SNgSiKrvmbI^1tf8F*XVT)^@$BO zWR)unyTe#MJBVmLcrHK=$4j4ZUU>7VYYlm?;-!)5fe)3WK6c^`=W=MdNo2TPiX%Q=c1nn#XnH{a0s^8J;Agt$Ddee-84gxquG_Cz zkk8cAv8qFW6+fUf*2P?hL}r6(Q*UaEttLnV($QwrSTg|n|yuy36ESnmU8l;{>^H}ud3OlL9X1N zdR;xLh>T3ApVBQ5{wN>xLlt2qnPBN^;jXSBfySeAGy;Kd!+z*J(z<#YDtrl#0vT&>L?C?_(834-VQDMR!(o zk7OKG{ao|mZf-o!#h7J9j9Vs{E_&5F&`>?``JUg?ma_~!G}z$BP8`co_O+EoeO6g! zf{hfqOCxnY@qF;@9oPEf3rE^^pyEGXx)gbh>8dWU{Yo94dxNr#8zau*4Qb2kPj=K( zqq-Xv?Y47flB+`gYL@UTo^Scn@v8ZIj3J;Vc*!S$m!_5DgVPj)10!{La{j@4fRt)4 zxRRLGtS7`G#s-usLLMRbZ~gDOx4Hn6=NnFskHM8+VAgnt2G2q-b>81|{*gC%MTeq% z@mWbEg!7Vm4dcyjV@^5FRN`WMcl`0e-=hPQY`rOCqABQvyZ{qf2^YRoF}GQ;5cB8V z-tKyTg|4+79?u7TPH@y_{U*MLQ{*{Eh8}w4frkFrsd+7==!fmT($exr>?&Y@chata zd6n9nw}YI1bfDM0bl&crpW2a{)ibfL(^G$|NH*Sr7oz6iSyZkB*ghgF#BdWc76Iw8 zcRJAl&ejC{v$~GQp|YCqOLv%rS}S(66+}yv5rM28g`v8#q3yv9)^x^&bcfsa6QD_v z!(SC?J>tJz-hxV^Q~pe z$al_P!q?s;{7M1Tx~YJXOk$;um7Q8mob!ygb&@9N3SNyywtc}SMySe+y_+B+D{7V! zqnafZO#jfpH9Y3G{Ti!+WSE3@)C~v)WHvesQH=KL;NoO>PtZigJ@JPPwK;e zd1C;czS$9gWC?GL8@9a-IyBt^?@wiLsyZv?WX#;Mn%EE8wGJYXGJ*+W>AUHRGap=e zi5GMX<~fX~({znz$mo&tSoPWpoNE`ubxYK{=_j!Lj!mlhr)eog^=23{#E6_7*ert=RAmQ@fRl6=|m%m_LV6!DLi887w< zL;dI6D418zb@)Nf+x>E}-xu4-=eLU|=o?f#CQ~wEsYp;kKbITbOmQzraGt||GhSSv z9wa6(UQ`;Z`HP<`UYW7L<7G6alsYaJ@+Rq2W)lG=+` zrA22WYvTMIK$CtuUoP}Pnd>b__V}IBeG6LNUn|#d*%P9M_Lz@$gW!6Ek44juM`nLI zL2}&j*2={bu>Q*$Q@F}=y@*ZzLn6{Y98iQUI~l@MBV|2~+M8joiP#=RwM@JELhxHO!qn(yecfLyRPYxFwjTE9(JA=2){>LBSOaSVP zjOnL@ak+;P-fw5^Y4WdCqy=<;TWxLcc4#w0R}jSC;A5s^!%Dq*i?=@}ic$%4B=(!)G4< zR=!a#F6tP0;^4&k^px{M6^+hLv9p1Qmf|;3cl*6*fLm*ZLGXCWl<~u`&i+k)UZziT z1)sa%ZCcmK?`47A_cvcbBFul2{tC`S9bk!!O8wM45k!eAt<$#9Vd4NXBGu|=$37v` z7J9Lyt}V)MUE1$N;3@sRd8X#qN!LzB#cc!irk`joDwOU!O)1q+o^U+(lAwBy}#wZ+(GGHj0SOMTTTUSNOU^sTeL13D^~6 z=MN`X5LxMQzUBnPDG$`!nYZ7rhe&|vWj9|m)`?e=`i>EevNZ8_57yR!f$GC}eWbV) z&rDsk`rb^N6|&ORrb^YPV3QuX-t@AtiYd}XcN*zwdZQE((&176LFZ9I#Lr1Wh+&ko z@OVgIXc@E%8Mv(GeSFXZ_D;sK`-827b|Sr9Pnt$@0olL0t7P6jEW+MB)bQ;_KdqT@ zRR1bo6=?IW?YqEe7CGcI(_YM%?ATRO@Hq8$@%I>|OlE3YEfgh;&`#`jcVy8Txi5{( zG)$~#->7TCdzkYgbt0T{7EGhzs)iK=RJ(%}Z^K>b930GinBcv(!Z^Vl(;c@OBFq9g zjDKk1APb$FB2zM)7=vKk{#YU$-?QO2kS|P{Tlrt85}VT26PZ(3yTC7!9katPj)Jn4 zZ7Qf+TFZTlK*u6u!QJvci^-?k84J25uY@~9<#s_m6s*DBU71UhMx{y3wd`a1u<`Xz zXeTQ?y@+9_5@{)rgVh#Tew|>n2A;>B?&c_OToyQDi8i19X9A{^gkO!ph@0^eN z;@Z^xU?H)UlZ`9*iq`rA+HHK@CmVx#6c?XIg)yt2-2x&C)}HJ14a}61A)8>@L!N@c&g6p~2{n>&6fY z3w1-=)`4E24Hd>lbN| {
- BATTLESNAKE + ByteCamp
diff --git a/src/components/Services.jsx b/src/components/Services.jsx index c4e59ce..bc25437 100644 --- a/src/components/Services.jsx +++ b/src/components/Services.jsx @@ -1,17 +1,29 @@ -import React from 'react'; -import '../scss/components/Services.scss'; -import ServiceCard from '../components/ServicesCard.jsx'; +import React from "react"; +import "../scss/components/_services.scss"; +import ServiceCard from "../components/ServicesCard.jsx"; +import battlesnakeLogo from "../../public/images/battlesnake.png"; function Services() { return (
-

Develop your own algorithm to find food, stay alive, and eliminate others. Battlesnakes are controlled by a web server you deploy, running the code you write.

+

+ Develop your own algorithm to find food, stay alive, and eliminate + others. Battlesnakes are controlled by a web server you deploy, running + the code you write. +

+ } title="What is Battlesnake?" desc="Battlesnake is a competitive game where your code is the controller. All you need is a web server that responds to the Battlesnake API." - cta="What how it works" + cta="How it works?" + link="https://docs.battlesnake.com/" /> { + if (isInView) { + controls.start("visible"); + } + }, [isInView, controls]); + + // Different animation variants based on the card index for a staggered effect + const getVariants = () => { + // Alternate between slide-in directions based on index + const direction = index % 2 === 0 ? 1 : -1; + + return { + hidden: { + opacity: 0, + x: 60 * direction, + y: 20, + }, + visible: { + opacity: 1, + x: 0, + y: 0, + transition: { + type: "spring", + duration: 0.8, + delay: index * 0.2, // Stagger effect based on index + damping: 15, + stiffness: 100, + }, + }, + }; + }; -function ServiceCard({ icon, title, desc, cta }) { return ( - + + + {cta} → + + ); } diff --git a/src/scss/components/Services.scss b/src/scss/components/Services.scss deleted file mode 100644 index 563a6aa..0000000 --- a/src/scss/components/Services.scss +++ /dev/null @@ -1,26 +0,0 @@ -.services { - padding: 5rem 3rem; - // background-image: url("../../../public/images/grid-background-3.png"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - background-attachment: fixed; - - h2 { - font-size: 2.5rem; - font-weight: 900; - text-align: center; - margin-bottom: 3rem; - color: #fff; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); - background-color: rgba(0, 0, 0, 0.5); - padding: 1.5rem; - border-radius: 10px; - } - - .cards { - display: flex; - justify-content: space-between; - gap: 2rem; - } -} diff --git a/src/scss/components/ServicesCard.scss b/src/scss/components/ServicesCard.scss deleted file mode 100644 index f6a5848..0000000 --- a/src/scss/components/ServicesCard.scss +++ /dev/null @@ -1,32 +0,0 @@ -.service-card { - background-color: #fff; - border: 2px solid #000; - border-radius: 1rem; - padding: 2rem; - box-shadow: 6px 6px 0 #000; - flex: 1; - - .icon { - font-size: 2.5rem; - margin-bottom: 1rem; - } - - h3 { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 1rem; - } - - p { - font-size: 1rem; - line-height: 1.6; - margin-bottom: 1.5rem; - } - - .link { - font-weight: bold; - text-decoration: none; - color: #202020; - } - } - \ No newline at end of file diff --git a/src/scss/components/_navbar.scss b/src/scss/components/_navbar.scss index 117bb35..6c687a6 100644 --- a/src/scss/components/_navbar.scss +++ b/src/scss/components/_navbar.scss @@ -202,7 +202,7 @@ $mobile-breakpoint: 1160px; background-color: rgba($dark-bg, 0.7); &-text { - font-size: 2rem; + font-size: 1.2rem; color: white; letter-spacing: 2px; animation: neon-flicker 5s infinite alternate; diff --git a/src/scss/components/_services.scss b/src/scss/components/_services.scss new file mode 100644 index 0000000..84e78f8 --- /dev/null +++ b/src/scss/components/_services.scss @@ -0,0 +1,77 @@ +// Services.scss +$neon-pink: #ff2a6d; +$neon-blue: #05d9e8; +$neon-purple: #d300c5; +$neon-yellow: #f7f500; +$dark-bg: #0d0221; +$cyber-black: #1a1a1a; + +@keyframes gridMovement { + 0% { + background-position: 0 0; + } + 100% { + background-position: 0 25px; + } +} + +.services { + padding: 5rem 3rem; + background-color: $dark-bg; + position: relative; + overflow: hidden; + + // Grid background effect + .grid-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( + rgba($neon-blue, 0.1) 1px, + transparent 1px + ), + linear-gradient(90deg, rgba($neon-blue, 0.1) 1px, transparent 1px); + background-size: 25px 25px; + z-index: 0; + opacity: 0.3; + pointer-events: none; + animation: gridMovement 15s linear infinite; + } + + .services-heading { + font-size: 2rem; + font-weight: 700; + text-align: center; + margin-bottom: 4rem; + color: white; + text-shadow: 0 0 10px rgba($neon-pink, 0.5); + position: relative; + z-index: 1; + max-width: 900px; + margin-left: auto; + margin-right: auto; + + // Responsive font size + @media (max-width: 768px) { + font-size: 1.5rem; + margin-bottom: 2.5rem; + } + } + + .cards-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + position: relative; + z-index: 1; + max-width: 1200px; + margin: 0 auto; + + // Stack cards on small screens + @media (max-width: 768px) { + grid-template-columns: 1fr; + } + } +} diff --git a/src/scss/components/_servicesCard.scss b/src/scss/components/_servicesCard.scss new file mode 100644 index 0000000..8bb5ed5 --- /dev/null +++ b/src/scss/components/_servicesCard.scss @@ -0,0 +1,115 @@ +// ServicesCard.scss +$neon-pink: #ff2a6d; +$neon-blue: #05d9e8; +$neon-purple: #d300c5; +$neon-yellow: #f7f500; +$dark-bg: #0d0221; +$cyber-black: #1a1a1a; + +@keyframes scanline { + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(100%); + } +} + +@keyframes borderGlow { + 0% { + box-shadow: 0 0 5px $neon-pink; + } + 50% { + box-shadow: 0 0 15px $neon-pink, 0 0 25px $neon-pink; + } + 100% { + box-shadow: 0 0 5px $neon-pink; + } +} + +.service-card { + position: relative; + background-color: $cyber-black; + border-radius: 4px; + padding: 2rem; + color: white; + margin-bottom: 20px; + overflow: hidden; + border: 1px solid rgba($neon-pink, 0.5); + box-shadow: 0 0 10px rgba($neon-pink, 0.3); + width: 100%; + + // The card border effect + .card-border { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + opacity: 0; + transition: opacity 0.5s ease; + } + + // Scanline effect + .card-glow { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, $neon-pink, transparent); + animation: scanline 2s linear infinite; + opacity: 0; + transition: opacity 0.5s ease; + } + + &:hover { + animation: borderGlow 1.5s infinite; + border-color: $neon-pink; + + .card-border { + opacity: 1; + } + + .card-glow { + opacity: 0.7; + } + } + + .icon { + font-size: 2.5rem; + margin-bottom: 1rem; + transition: color 0.3s ease, text-shadow 0.3s ease; + } + + h3 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1rem; + letter-spacing: 1px; + color: white; + transition: color 0.3s ease, text-shadow 0.3s ease; + } + + p { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 1.5rem; + color: #aaa; + } + + .link { + font-weight: bold; + text-decoration: none; + color: white; + transition: color 0.3s ease; + display: inline-block; + letter-spacing: 0.5px; + position: relative; + + &:hover { + color: $neon-pink; + } + } +}