From e65b97fa760b56e1c69f4d222889ee23f9bc459f Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Fri, 14 Nov 2025 23:22:32 +0100
Subject: [PATCH] feat(contact): bottom screen navigation

---
 .../contact/bottom-screen/background.png      | Bin 0 -> 197467 bytes
 .../images/contact/top-screen/background.png  | Bin 0 -> 197467 bytes
 .../Contact/BottomScreen/Background.vue       |  17 +++++++
 .../Contact/BottomScreen/BottomScreen.vue     |  44 ++++++++++++++++++
 .../Contact/TopScreen/Background.vue          |  17 +++++++
 .../Contact/TopScreen/TopScreen.vue           |   7 +++
 app/pages/contact.vue                         |   8 +++-
 7 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/images/contact/bottom-screen/background.png
 create mode 100644 app/assets/images/contact/top-screen/background.png
 create mode 100644 app/components/Contact/BottomScreen/Background.vue
 create mode 100644 app/components/Contact/BottomScreen/BottomScreen.vue
 create mode 100644 app/components/Contact/TopScreen/Background.vue
 create mode 100644 app/components/Contact/TopScreen/TopScreen.vue

diff --git a/app/assets/images/contact/bottom-screen/background.png b/app/assets/images/contact/bottom-screen/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..0845d480174b6b7d6e809335750dd1ceb53cadcf
GIT binary patch
literal 197467
zcmeHQZ_HIkT0a-AZf#wKMB|I$!&^5otT75v6WoyOcGIPOp)Zu$lGRT|V=2j+UAD?r
zqJcEZ3jXV^A1F<e5)x}lj0hA+_+ZtNEVk-vQevwnLLw=zyB~^4V~By``JI>F+vm=m
zIe+e%b7t;2&m{NGzi0ma=9y=nnKNh3;m5Z<^6C43{Qe|KK0Wv7!%rm1Aay2xd*An`
zu2;VM$2U{Y;JGIr`QqT;{^6$&q@LmKhvpwjlGA_s!0lb%m-=Ua?a?RZlVtx-Cdt9y
zOOpRfgAOhx$#1PslJ7p9B%gaJNq+2WuUy=*DUJAnuRZ$9&n3yvd<MV4^MC&NeQDsQ
zesgaAOP~7h2YzVPXMXt0$G`e$nq@Ng@Iy~NKS=)I;5QBo-u;jNx|@;(Gs6qtSqN4*
z3Lf6LiCze2hQBy-U%1lKl80vLufF=~NYMKADZ6<z8#Zhh$!)9xXU?2Swr$&%5xxBK
z%gL%$t40#k^<21cVI+&O3dq=Jo_QugC1B{5wxordv}Smoe{k~T$&q2WW5<r<^5x6P
zp+kp~^XJbeSFT*iOJ6zez4zW5Ni&83;Rn^0EnAWxJRqxh>((vlt?e$&1B;7`$;`}5
za<f2AkS8Xs*;p4KBk%yswQJW3N5PRJM+z&MW#;%BtAOMIq-mW8!1*8Fxs%oRvHAIA
z|Ni}sx=$8diU&|IW^MdT9;n;rX0^w<fCOjHo=wiBXqXkK+vm)m_E-fl_F;emOzS*=
zxd1~DP{SQW4q*J#m|f5s51;}-!mNOA9vGX9*z&gQK|0@$%!X|h%yI^MzkMQT1%?~e
zJ;=(mXrs*#bLs!ot_$woy_*aMORdP7GU1=D3&!Sx;OheD1DufH{^+BRChT2%vO;|T
zg`;2^h+@cp8tDF<56p1VRI$fI@l#Jdl_9`Nw7xDN{Ipxw2LK=R0GihI0V*WW2{0X(
zG31Fdv?k3M53E_UW|?N=#*NAQ@4vt7_u(j98)8u^P3t@W?#H@dK2=Jg6$g<6oMNtD
zzb?U8cGv0i<xK85#zgTO>3V<*leKHtTK5Nh>V;z!;CcWm17tz#Jb+=y1!}N$f$S$!
zEk|6VJRl2)+g1UeJTNAR%nCH^*L6Xlb-^bcJ2-Lit)MHTPpT5eHC$Z$u=SFCt!aEz
zeE8nAaypNX!eY#0IJeI4(})-wnOCPVUBD#9!;9f?II>WYG`DZxmfq;xr%s*9t<#F!
z*qq2qmo8<oShL6<^cec3n_(`y3au*-TX;?rvZz81U<Odsxl)9C(<VHqUV5BC8rnN|
z?xZt&+yT$NeftuqFf{bjMmW-ehGDQ_WV$TC<6ogFgdyNs9J=&%kM%3g>gRuF^I!8U
zKmoP69yG~Iaf94Jml;47tXsEE21V!g0svZt@hbN&$RWO;Z?}zLDGorT%xB}=L&4)s
z8aaODm^R0=jShL_rC}Mq?Nag}uTbB6IC*7F5?6Z&Kp&vNjId|Vo@8rkuUNS<3+{ys
zK*O<fgCF*;UOIX-YdrR_Fb_|&`J{Utt&k7$K>`q900j2XY}*$xjq$9qIe&#R0DJc|
zc%FYW?R^MD=mRjm_wremFT1u3kb3{z+*}3#W&nowLI$8Wpa;Nk50g4U=Vd_FYSC~2
zA$0<&2avXm3;?ZM12ApdcA*Twx&Ve8AS(zin07s&5CGZWF1m+rUYqWDyl$rqADrp=
z_SpK*hB&)Zx8Ej6pPsZykJ^kS41RWKtVS&d3>U6mYq`j{iVO0Pq)7;>K7g5chq%c`
zw3&DC({pV$)>hW==FOh#0eyc=rZT`bE@YT_o>a!c?fXoTnSWis`5v2@U*VP*PjSkG
z*ds*v)~#EU7hZTlMn&bu3br-?Xc6}Q<XKtS%4y#aDJ28Yc=R}b5&)lW`GD1DzIk~S
z0>G!k$i(Kxt}uUS0Nk+Yrr)HYU&f;h8D7_o{EAFv8Nl(6j3EP1NonBcRu?!2Zv5mB
zGSeVE!(huTHJNu4?!p}*9%+|_Q!oO6!-o&csHofka@Ve1xpgY!0Hl_ipzuQ|;<*48
z9*vt_uiW}d$+G};>rx1YlmWKFUVH5|TW}O%W%QLo0QfAx)}rm(xA#LQur(eE2VU&z
zyiS0In$HK|cfI{A=XL3}frzj&G_JHh!V8B03gM$M76?CIhUZkqIM@t>Af;Qz!;LAD
zg4RW2rfI@os1%`4^f(&LpX3Ns9zQe)Hs^mCMjB}&U+N4@Ta-qoFXKiTMW#?E;Pn?~
zMtJiGGN2ba0p9I0jX5mL_-XMM$^gmkwnlYc51<MRg$ReGa9V_6z1bT;<9SX9hox|0
z42Pv)I<E&vw#OkUnj#gMbfM>Y*285N$^bT$FFG=#?D$+dJz_etnONp|Tis+>ApmG7
zU$n%DF&J<{21q&$x&Q#3oadn*z+kybcNP%%uaqLhI-=1Z+_;f>DF_*7+Gr#jN*grN
zZKes~F9ZO`W6@a505A&+3(EqqmA!$6Q7O~}d;g388XpanB8K&9KY)z~7;qDWUg-g7
zG#gH?D6(C8fGfNxKi~0%)1a+D3Pi-YrokdTAaAe0R%TOSr2#<Ca~Mc2Z~=e{7wG{p
z=mez!VB^s+DFfiQ89CpVaoh4}BdkylKqX}3St;CD)C)a;4eqL4iUYdZc(g0{<sPBI
z9qc(0_R_)701WTDFLV{cmOotM`JU^r&8c4caAsz;B^4flj~_F)5Kb7>bpGY5HJn*(
zd3nNd&c1xM1(Y)X&tLi1e`)C~KtZjN!NqspZQ=AoQ8hF^6avG=5A7Sgp(>>1wu?aL
z-Xn3rSM~i8S3V)ao2+~9S4AN@G^R3#R~K~(h^a%`uFG)RxA)rytZU`<{<_7kb!gT0
zs18sSv5wJ~emdl8H}4~L#pi|NsNLz)r}IcOE(ZZTv?_W-CMS6oRht210eP<*k`51s
zc`FyfR0kn4VQjBc03L`J8QVQnMQJp?IRv~&03Ii0HF2&EVLVJoH*9|5gmJDD7Cd4?
zn|afAg)@FqTjnd>ljawDIxi9coyi{>Ooo6h-FVST(p3Qmoq-<=?J{ne&ZL)q7o98%
z^j$NB2Stk-ER{fXHb*u)p6MA*KkV3FLzZ=o(Ou>>>7sgjnF3G<6hJ6=X2-Jvh=-91
zAmh{yhk!Q*V8`-RP_s#lH^XDUp4O~yZU5E(`N4mV<Sf8gTfT7c%>!OIf|n1YguIUw
zjMYE`f+OIC0qV3uHwNmUS3j+nWdXLRY-g)o)vH45%0t8bAmB{`$k!>@!3={R$^xec
ztPlC=7T3mrY#!ETHf6&VF4LBA`^u+GS+UW0kpQw$>}+;E;^1y-fn6nE(!!Q*S%112
zPk&c!FB=0K@p6>A00S)~!0ha7vU~ULsP7_iwIP=9Xf_5o+9B2{+Fc-(VG>tb4fl_L
zHyr>~;~Zb5n!Vc?r~*z4w6z&Pew@r!UwpcXA1brOYgkwWYBPXYeO$JJyN2YoI|zdx
zucVj{33MO8M6g}Iw^aZh3ShLO^I_2G^5z|c;Z-!yFdSiO!Xn^B0`Q3tZW_w&m`d$D
z1190qqB8pcd3hlYOE%j+K~Xx5Pm<aa03(`L%>hs_0Yp81lmc?Z^BykHRyACk!<KGa
zK8&};Y1k(S)Rq8H@W2E`=2*HDxI67Q7~Dd`$AwiS0PZ3IJ?|tj-Lej(m0{{0N1!$X
zAWJX-r2r%V4crjT=y*s3bi7m!NvC!=1iUZ+s?VjKspTV%w~xYYnlA4HJaOrBS7SX3
zVD<z2wV6Sl3$PWSVR0i+n*nUi<8uNtj@!pFT=xVd8tuDluL#U4yE-3qd2wbw>Td^u
zMkD~MjuDSer_FF_S6LCrbkdFGUzI(9s`Rp~uDQKS0E&5O^J!s~PO<^bbv|tA&Z9Ns
zT%9lTG}Cn1@8xWO4Ip$nI|=bv4$jTZjgaDU=9s@zGE&(HJ<*&EAU0;FGaNR)&Ve5c
zB*7$)k+a15=M@33IsiHqqMstaOijDICs3ySp=oMQ0ihe9<<~>NyAoKhI-0s|1cn#h
z*DJ)@20f<o(tD+Qez9~+y%C@;y}wvI0OnB@Ioz=B!3q_^1KuX@8?R86iAblt{$(0n
zt&R43)m`Pt`_Nr9F^5lk{mWomv5nPM0qLg|r`j}J|DXH2cfTCfS%8Y|)ej3yHFwvq
zd^KrMzdX$$G6a+XBI}U0tD~P5X&dp#%2NptS%<V;o!&4&7d{W#1atJ}<3de<*M&TX
zH_|t7dSNPVmh=LXw2{4;0+NawBz<9k^y5N(X{xr<hJb!u%7#jh!um4>^r%y-G*v$@
zRt2pN(y9dLV5e4Tk}^OQv^q$u3{ay}Kl?Y|{AyHZ0cx}bNo&0@^6IOv)+&De`t`Na
z_dW534I64hP>TTu=|;=BbLS?igkCr?5o{xgPMtb6;-AFhbvodca<+=(#o6dJtQ`bu
zNdQ|F^E&#{rAx`CO`B}VG%OGTUL`=FHfXUm5b!Pm^6G+5jmn$G^xmL6wDRM8z3Jth
z0dOY(FN%~+;M9O?WNq=1whi~roja40Cr{QY%10ixD&Qfpmni_9%MM28(#`rwKW-C|
ze$uEN27%fVz+BFub1CNOhTqodyf}*Y`N*qg07u=sh9smcgJH;<<uk0vmU*zQRr4q+
zqinpdn^$Tx06r?g4oBtD(Xz9pTTTxq<H&~l?0A_k-LfMYmS;<P>CQ_tEpc9^0NGeD
z11^e^hMyXD&Hc6x=LnPeAdKOr8+2wEX=NT&-N*y=V_v4aYJRcN*Sb39`0?Y*JAoMK
z=xD6-afLiDib8`KE*lRCQ00yxnO5CP-*ED=6Igo+U}tb-z?PlQc$*z+{<PI)+QNM4
z0N$qnib@IS?Ck9FS43pEy2B&jMFQ{>F&O=M#@qu?36O_YJ8@nZKq_}+2DAE-hH)D=
zZlrT6?6(g*x4BDa0meZ8!ofEW)Zz%dizU~6V<i*>=mCKOfC{369}qzOczbj~T{XG^
z1bi$DylaIGv{SQe5P@0@fFnX`rW=7;48W#W`D92HTIR2Ia|qN@0w=8&KR2QW1SUl=
zNqij;@FD@I2<DA$#IfVeX5&G-&A7rri#S)j43}<O8GR4)!T<!(#t5?G8Bh92ZFDM6
zcW4JsisDkb#-;#%W(1w?k_>Wd5N_@(^FafuNE-7oo$PqHWg4bqevDsga{fQd0Tt6T
z@1m{G{G9#9M*DDpVxFHFL9_Fizy(VY*o>#`%EwoDTjltwZ`pjjP66zETj6Dy06=5p
znIn<mu<16-LAcE@ocV&rblcJ)jAenoi>CGgfzzi?XSn2bz66fb0T@CL2uNhAxglYF
z>;!tz0nn*91#<cF<-%5g4$q5WIKO8e{i}q4FCD-O17I}6lpWEiyk6>8slOW|_QC+H
zT~)4B2|(n+*<Kl-YBM4}An+^y_`UCR`YeF0uWB&^L^>5bTjoV!dN!a4q5SyZX9J2Z
z5BT`bovZ~bR<5+RB=5xmYXS`%K_HqH!APxA4^9m6#Q`24ej`0c?qUQpz53fj!0V<E
zIv%4Qo&8e!b?L3CA8wo=n4h1|;@WGPmQ)4-Zww$uy(}0VFOBO&siaYNdkEB00?le-
z#M9u_A=7{v@F_fOwc-e|o((V&D({c#Y=G;OusQnCJWL4-3k$g|HJ|$B5^H2F1iVcF
zsKsOV#J#QKWi6=~$}n|@L7?^&z@;9m4<^7UFJc1Fb61d00p-&-#L?fyXZyr!QoHI7
ztgD>b3}DNcOu#tF3~+Oa$oMvFJ|1qPtZ6F4>lEN>I26KTj_39=jjNLw4v9diV7g^K
z(v7r|R>rA2{eF0Q&JK$CL<W}!oW1u{kn_LH2vY$KrGQ)o=#r4=RJSn&M6nZy-92vp
z*qGph8#j{O_fFQx&PS7}15|ImrtqZ$c$osY#VbcVx+t&nwF~1wz?%|CCZK|cr5@&9
z`tjt-e1BXeKzJtb#sF*z=X%-<x7iV$4fur}fAT=@&H|WyQi~b%-T)KMcKuPD4d7|v
zcAKuH0f8u11g@@-r-q;t%+1ZYNHshl0$x@Gvi|6J+4+cra%hIhH0lnAfOiJSYf9PU
z<av2$oL>ZLDS<^*DSAyz&ju7B=#G!-Y=Etr+{@?7BsLmXn4S%AA>%*1ktu)=V^Cep
z{gW_(|E6k=HUt`(0?a*Y*WAxtLF^t%ra?uUIvXI%qLi|Q*}#e^%*1%ox_OrXocB5E
zVdFR$mV&-2JxOEP*|cRI45KaMy6*PQ000a?aybYa%fK@G0Im*TI7TXdFs3^TwEQ8h
zq$P<N&U_i)7rXY^0M|~ST=!%2W82b{0IsQ_FW}c{C$NliCs1}g8^{Bp7<G~fr~{Br
z?eYjn9LuK~r}R1n*g9Vp2{EgqULq3S-N-5+uUTLMN&=Mtc}TSr=am7V@s}Opc$6IQ
zY`~6R`pfk7wb^9u;fJ1V2k9v&rItcC1?|%+79ikNA1EkGqa#E>86d(=X|qbo0Bxcj
zVOfJ!t5!|?!bpVe(JEC$V7TM!M=B;!@-87T^mWLfOQ7_rEvf_bskbd{O(lRORD*hh
zz;Ml~RlRAfHgp^TodU)&=~aj_K(D%cys^WXnbqT=8gdT-Y>{;P1DYxUdd}>_nboQU
zI(Z;{e4TXs6S{p_1#I2+Pv6qB08UQ77cqPA>Vd(<ciz2=wc(BQ0zb7C2jzo)je|@8
z6iEt=R|FJ+ZX%Ga3Ku`TnYB)B#Q}_<e9#|07@WBHmYxslrf}C*DFTHEENK9XA7+G$
zYEL~5coRqav3-7?R@?_iPMlE<pioXu4*?hvAN^F*E&|hv`wHy(!l>O192V351T$)X
zw%eb;eHzEnVDGn2s0NUAo&I$TfyJj@d|b~0RO!><ty@*dl~xf@1iFNP9u)0TZ)#f<
zfr<#E8i1+*6){tCMW8bX=$#>*=}K*gB2XOxy*RKsW|~3~=nMkG^wzM>G)5bu2q*&8
z5E$xZ-qiq8YDJ(+2&e|orQX!GqzJsdu=x-5EWjkJ5L6pDe*Adi`ZCodjj57m`}Xa@
z%C1sRrR^pH_y*IiUAuxeE(&d6IQ05;n?g`;-@aW)qXddT(+I?{7Z+3m$OHKL_3O(Y
z5(OPTMz(hC+PoxL+?Fj{mTC6y-=A#Sv}xI|4n-g)1Y+2Wi$Vh^(<zgF{TG77B{*;(
z3SUuBTXATU56JJT0T2m`J?Vg#SsglbDAOEdn7S2#SP)PRph8bfvIIc(*REa5O3Bj#
zK)~bCYA+oVR~(wdf#2?mK?7I;DHQ6Ljm#2%=g*(d)Of7#<r-fmWgKYB8cN_Id*{xb
zS(Y|B#M#1;z!qMW-jz?C@VxdgU)Ga0!)d$18DGXOQ;#zF*l><H9qI;ydWZf+u?K)%
z`AMDxV9=Kx@YoB0acKfsWco*@r2pi}lXPY_;-QU5BbO_rH|eC`MlbWDThbwn<;rkb
z9@9yi@eGsoKp6benDmIVl_%369_b_<;%)Vn;WCf<?tkC@{I5^%S%4U{foPuyfRV^t
z81(R)17G^-=AZ|2;fcWP>})Qd$(aP@k%5s2ei<(_VmQKN8gsBoI;OYLla98T57V0A
z($9QlI~dP=nUC}{9pXq&I@qpwmV<cY2OD8DGTs&rI@Y64_RP#o1`*p#yh7MfXahD)
z0JAm+HGsju#!oVm2^a^wWZ0tFU*=&lu#D@1n*-8pi^No7XVRH|(lTG#q+`CWaMJbF
zjzI$m`j#M11xf+H^}g+S{@Jr<lcPtEI{C$x#zu_g2TlbZK72SqCqNRzCc`q#kt0V&
z;z`#fd*8l&NgvuN`#E&~K?8{8RN&y^#f!o24Sey%7qg?eQUGA^ai%v1bQ1!AgI#S!
zpe+Q}ty`A~fW3S7wpFCFoM`s|P-8sPSEC4Y6#-}>p-mKf00cp9;BkG)INGL~&T!bS
zLqJvb0c3vaRs@<vAcj4Fs5Af$R4E9|4sZzulMa67XNzN4==GqMzqJ3-Cmba2(H+VT
zx(Bd%^X5?P)^a<8z)yT{cw>6c0<as>y*N6<*|P_)9tf%u%+1XuXU?1nf`DEY5CnED
z^d16uETEeL$_|P^j}hqorhtC=vd7%7O;-)T#sg4|nlQGdhF%h&mjtwVNdWnc{M~yE
zfIz_Jz_$%lNjIsx>HH_Hm!|740=fra^gRYY2P&fK3ImxJjv3<Mz~bU!!nZR}hQ1Wv
z+)MF_ubsd2vVeOpNrOR5gF(+9;xLH$Gigmf>0o1^Gar{Ap#-LlSL0ylFR~>)+(q<=
zH|b2jt$db4+bqWwZqnuX%hV$;y{+C#zjXA^!~s~rAUyOhs-uBRu#Eo8!Ha>NXK-pr
z&hB}%t~d@R#LH7iuJ9`P;8-JGsz+XYx!&~4{ABqIFRBOPkxtSfEy{s$g=dkDKi6?g
zSwESt40mK%FZg%A`M_^a|5<<$40JzW1P-@{LI6zW8tj<;$+S{{xN}{KF(tKRWaI}w
z^JQKPho9*g2fvI*xb&0WW!uU}9;A20QwT8LthbDp?O`~|fMGeN&3t8B=$82*4~FOE
zXXf80KY5sK22P<&)Y?FqfluH7DhEE((NCH>HU~i6JmlbDp0ts-985C2s9e%Af7(pP
zd|lzBo786clcw)ux)?NoC@u>?=VQ=vz;XbCsVFTcVG!nnd@o<Vy!<8+^0ZwR0EvuF
z31xF|hALmnZKwaif8fm+J|PtJMFCzGKmou(UU%R#AKDZI@H1};0Me+f2(*QOUKU_M
zTF(AdS1n`{2XWv}oPj1(1Uw@EjVrW?ZV!Nhph;lv-VJs`Qj^Wnyr&F-81?|B;sXLr
z_A8~Z+V<zyic2%NfTw|N=wGls0L;RVJn~4BV_Wm?8UnxZ_{p;!I}5-ris7<=p!Wpe
zs^D|y&JmAR?X6q4W;d6%TBsJL2;4&eo7B{_LV^<Aen1fzAK$r?JT^Z+LiR>_uedZT
zR<4v@bt?i<A`ruVKu`^!Ot0{R0(<uC$;h{+TEif9;V$ucLlA&~!T~}-1wjUx{zZy_
zY5+MM!+~$k?sCvm2*@x92N;B5-#<?f@V#xd^}c{M?+eHnH2qTzfJg|N10O-=;71q+
zy)^VoA;5SF1LO$}!bU?{wH1N35r{zp2=+t(VB=Jv+ypEd{ALGL8PL!Ma4?8>ienS-
z_19lFvsAw#&^Q9nHn0g8!zYBIJrjVnJlFH+5e#<oSGK39B`ho~WZx%aI!fRoo3Fsq
zHtAjACS9H%dE~{T&Klp$^ZB-MmHdaYL;j+83SisWCrA(iSPF0ubJmBSZqnLprb8ac
z3tE87n8%TAv>fcn!xfKkNe9|ay{C@`wP|*J<10VX(X#-AF^2ts;BN_HIglp|2o`M&
zY6t-ia)###2GUX(U`c@Gz_DY;m^`!jmL3D?H*H%y!c5`d5-zrImchKGE#qu%Ge28h
zWPa)ni$F|o2?o~&F!*6OTNiZ=wF8qbPdk8cz<vN9E1GGgUk)a7KubE)O<E36+N5K?
zu5i*#YP0-F(`&l+5l{`_`0;E*kU{`mfB{})AT08XO&fSNeIl@7!-kO!!NZ3SkK7Bu
z!HM-5I!A5Ap$R^SNdt)DiGUOU7}#Zm0O(9X@WG86$?o)eFKIaQ%fXL$ECC<@)F=XN
zBcS&L7>M)q9t8mhc3DACW#Ah{t5*>Sh5$6o&?fjEfCPYofME~>=gyzcyho27W$?1i
zfsa|9hU<KD#%H|Ria;y~#IOet^?Lyj2wcy@zJC4sSl=Bp9`W(e&lsU2K-c-Y&TnF!
zpT}2Z#TYbzV0!?1PXO6KZ6^Z%`M-<%JAM{`ZI9uefMoXI)dN9Q0-Oszefl&(Y1PK<
zp`prdwV_&AlnCf$0a12~R!R|Q4*}g2sDQP+13WJob_KB`h=;Fg6oHr#h+$J8s>cGh
z&XV5-v&EZXe0%^wFgG`6MvwUQk^sFVpv_AH$Zupq)c}Y@j?FW*IV9F72m;jvtk7s+
zBnYSmP@^Mo7#?aqGz6GQ1qGxsjM|DrTYLbm111IyAll0UGKA7U+gmUA$_Ur^u<=6}
zPX#e;kxdC)Wb?gW+9tg#+@#C%Baggzw53jb)A`q}U!T&WtuW}%(7)*S065SA7zQ~u
z1M%ahhPXKhKiB-+2SA!C#?&Hg!iR$$`MTl}F6lrU^0EN53*}RQpgy+xkq+@Nrhh54
z+5h|ZzV@p<ISViXWDMFs@XG?qJeTLDAO*k(io$c@!i9u_py<f}&II)3vH%QfDY#6(
zfG`sPpv|L^^y;pT046w0VljMDIC^aW@B%O}rJVV>4}kl?XgK&mE42v5m$AY4G;+`|
z%w?071BW*0nXfCHbd%aF-%M|oXU3a;<Wn_`nTPtzA)p#SdRagj4M4(4Z9s<6%~>D*
zA_2f}ilY;tCc`G<)33I^L?HRY7eB<L0R($d0D~0Q2UigQ)Bun+&rlHL2>}X#ynHlH
z5oiJdy)2+4s(G`0UKU&mfCegUo*>A}N8=QMCJ}%}5!yt%2T*plF9Hy1Jxm#`peQem
zR|I?_5W^lo&^H6~z?7R>a-%OV%_MQY)^(bX?iZBZFCd@BpaBHi1JKI?$OdWyf#3hx
zXaB5^X93vzF<cf9^h^MOP+JjD1i~N??S4QQIJ8tnpkD|?yC2Z6ZqU{$0$~tP4Im8e
zTB;%t1p>prxO^>&ifAPi0Y#vF1Xi?Pq?V`%C<3t{Fyy5Lu~bOwp$I4f?IDl~fc6U0
zk`w_GfwNEl)S*6~1u*dl>0hxXeLD_DZN)+Ppnv0FaOA`p`8~c&80eoOpa}E>fowx?
zW@dHPTD27iFhY4gSkjux(<{E!@NFJ1eIk&FKK)Y!`ia2c#KpH7S^^;3K|fKAqSbBS
z-$ofxfEln7&0@T?1Xz7fl~X(G=o!VK91iz3kQJ}#9Y2GM@4O2Uqec->1bT>oJ_gjs
zpc&h@{TTSlmD4|(E)l;q_wYkcwq3TCXMg0KF4*th{rVe!|3@zzdHY###oU*+J^WW+
IeENm|2lA6j>Hq)$

literal 0
HcmV?d00001

diff --git a/app/assets/images/contact/top-screen/background.png b/app/assets/images/contact/top-screen/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..76aeda1f7daab555694cf88f10fe37c8a777e273
GIT binary patch
literal 197467
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

literal 0
HcmV?d00001

diff --git a/app/components/Contact/BottomScreen/Background.vue b/app/components/Contact/BottomScreen/Background.vue
new file mode 100644
index 0000000..cdd3352
--- /dev/null
+++ b/app/components/Contact/BottomScreen/Background.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/contact/bottom-screen/background.png"
+    hidden
+  />
+</template>
diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue
new file mode 100644
index 0000000..0157aa2
--- /dev/null
+++ b/app/components/Contact/BottomScreen/BottomScreen.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Background from "./Background.vue";
+import ButtonSelector from "~/components/Common/ButtonSelector.vue";
+
+const { selectorPosition } = useButtonNavigation({
+  buttons: {
+    github: [26, 27, 202, 42],
+    email: [26, 59, 202, 42],
+    website: [26, 91, 202, 42],
+    cv: [26, 123, 202, 42],
+  },
+  navigation: {
+    github: {
+      down: "email",
+    },
+    email: {
+      up: "github",
+      down: "website",
+    },
+    website: {
+      up: "email",
+      down: "cv",
+    },
+    cv: {
+      up: "website",
+    },
+  },
+  initialButton: "github",
+  onButtonClick: (buttonName) => {
+    console.log("Clicked on selected button:", buttonName);
+  },
+});
+</script>
+
+<template>
+  <Background />
+
+  <ButtonSelector
+    :x="selectorPosition[0]"
+    :y="selectorPosition[1]"
+    :width="selectorPosition[2]"
+    :height="selectorPosition[3]"
+  />
+</template>
diff --git a/app/components/Contact/TopScreen/Background.vue b/app/components/Contact/TopScreen/Background.vue
new file mode 100644
index 0000000..aa37af0
--- /dev/null
+++ b/app/components/Contact/TopScreen/Background.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const backgroundImage = useTemplateRef("backgroundImage");
+
+useRender((ctx) => {
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
+});
+</script>
+
+<template>
+  <img
+    ref="backgroundImage"
+    src="/assets/images/contact/top-screen/background.png"
+    hidden
+  />
+</template>
diff --git a/app/components/Contact/TopScreen/TopScreen.vue b/app/components/Contact/TopScreen/TopScreen.vue
new file mode 100644
index 0000000..28184b4
--- /dev/null
+++ b/app/components/Contact/TopScreen/TopScreen.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Background from "./Background.vue";
+</script>
+
+<template>
+  <Background />
+</template>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index 7538657..6a99c5c 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -6,8 +6,12 @@ definePageMeta({
 
 <template>
   <NuxtLayout name="default">
-    <template #top> </template>
+    <template #top>
+      <ContactTopScreen />
+    </template>
 
-    <template #bottom> </template>
+    <template #bottom>
+      <ContactBottomScreen />
+    </template>
   </NuxtLayout>
 </template>