From 5b683334b8374839ab2bb7aae6a0673d025b6fc1 Mon Sep 17 00:00:00 2001 From: BFlat Date: Mon, 21 Oct 2024 23:50:13 +0700 Subject: [PATCH] seed vc countdown page (#721) * seed vc countdown page and sections as reusable component * redirects update --- src/netlify_configs/fakeyou.com/_redirects | 1 + src/website/package.json | 1 + .../public/images/landing/select-seed-vc.webp | Bin 0 -> 20944 bytes .../common/Countdown/Countdown.scss | 71 +++++++++++ .../components/common/Countdown/Countdown.tsx | 110 ++++++++++++++++++ .../src/components/common/Countdown/index.tsx | 1 + .../common/FAQSection/FAQSection.scss | 42 +++++++ .../common/FAQSection/FAQSection.tsx | 62 ++++++++++ .../components/common/FAQSection/index.tsx | 1 + .../HowToUseSection/HowToUseSection.scss | 67 +++++++++++ .../HowToUseSection/HowToUseSection.tsx | 42 +++++++ .../common/HowToUseSection/index.tsx | 1 + .../components/marketing/AITools/AITools.tsx | 35 +++--- .../marketing/AITools/AIToolsRow.tsx | 8 +- .../packages/fakeyou.com/src/index.tsx | 5 +- .../fakeyou.com/src/v2/view/PageContainer.tsx | 4 + .../src/v2/view/pages/seed_vc/SeedVC.tsx | 87 ++++++++++++++ src/website/yarn.lock | 30 +++++ 18 files changed, 546 insertions(+), 22 deletions(-) create mode 100644 src/website/packages/fakeyou.com/public/images/landing/select-seed-vc.webp create mode 100644 src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.scss create mode 100644 src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.tsx create mode 100644 src/website/packages/fakeyou.com/src/components/common/Countdown/index.tsx create mode 100644 src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.scss create mode 100644 src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.tsx create mode 100644 src/website/packages/fakeyou.com/src/components/common/FAQSection/index.tsx create mode 100644 src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.scss create mode 100644 src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.tsx create mode 100644 src/website/packages/fakeyou.com/src/components/common/HowToUseSection/index.tsx create mode 100644 src/website/packages/fakeyou.com/src/v2/view/pages/seed_vc/SeedVC.tsx diff --git a/src/netlify_configs/fakeyou.com/_redirects b/src/netlify_configs/fakeyou.com/_redirects index 7ca43b89ba..6f260714c5 100644 --- a/src/netlify_configs/fakeyou.com/_redirects +++ b/src/netlify_configs/fakeyou.com/_redirects @@ -60,6 +60,7 @@ /product-usage* /website/index.html 200 /profile* /website/index.html 200 /search* /website/index.html 200 +/seed-vc* /website/index.html 200 /set-username* /website/index.html 200 /signup* /website/index.html 200 /stream* /website/index.html 200 diff --git a/src/website/package.json b/src/website/package.json index ebb5622954..91a7a97da1 100644 --- a/src/website/package.json +++ b/src/website/package.json @@ -40,6 +40,7 @@ "local-storage": "^2.0.0", "moment": "^2.29.4", "react-easy-crop": "^5.0.7", + "react-helmet-async": "^2.0.5", "react-webcam": "^7.2.0", "universal-cookie": "^6.1.1", "yarn": "^1.22.19" diff --git a/src/website/packages/fakeyou.com/public/images/landing/select-seed-vc.webp b/src/website/packages/fakeyou.com/public/images/landing/select-seed-vc.webp new file mode 100644 index 0000000000000000000000000000000000000000..85d970ca6856579f16c421727a59fcfb2b36c12e GIT binary patch literal 20944 zcmZsiV~{Sq(ypJeZQHhO+qTx&o>^nBv2EM7?U^;UZJl@TZ|^$asX9NBU#U*goxZQG zq@pY(EQ6*Z}Zze8***^>~H3mm{5ac09XfO-mbM|t{R zeW`NO6Lj~kE)q`(uuV*s=Pbf?p*+V+5AYUBP9nN|i5j+b#Vv#`fae*d)DF z5MAor6gl{%pbOU}BRy(-O_PC_)D?|Cn)*n7_XYQGZ3kgc7}yEiC24NhgMqh#6C5gk zkMF57i@>9O-HvLa8`CW|V4t6P;zNh-ga#MOaD-Rz6>0ZUm(qd{XK-?Ywt%tKdr-GD zYPpYT|EJCa!66{o>(rd{!aJ}^SRwJNTICHX!>hcGu1Oz>+C$DY?v`XSDN-acbxp_; z8GmI+o+l#5BDpU728*>j5zZ$x9A(H3fc=&!<|p!yNKE&_PHgOEl@HTl4%uTFVO6$| zUYRU66Cwb)C1H74Ob7!j#%5B5=7ap;5)z?%Ya8UyZ!Ucy#YP-!V~`i8Z+Z3 z-h8sCxcu{~X^DKCi$d!l!~r*`DbPGYp4Ty0wP@fDLIL&Hfz>fu*{mjSV0>2ds9M(L zr5EhzDgi6*f(F$AHF?`EUft^S+h%_SORig06KfQq%%h1+yQm<{d-$r2t4%dsLGg)) zjP}-?*(*aue68Y)e6KSyTJQ;@65|1qkAUpg0Jr(Y4J&U<>EPDJh)X7Fk7OEas=jL0d0=Iwo zGxPyZ>epD8g7VJ8Dt_vZTe!gi`oiQz;pr&uU~-GF@b%SmLno3#KT#WhyOh~oSk^CB zCK*-8n^iV*Qf=PuXs+2S5ikoWEnijc{8%KVxT?^o={a%Jyhx1VU-jB)%3FDgQ9A~A?QN5IT8v@(^Y`hchda#T$wei$z5JJ!rcsC zLkkXJzlHhVqo7s6c6hu5Kq_2wCci;)Cdi=PYtZN6n;Yes~YBFx# zyiD&NO5G&dCf#M?9za%pLLpHhpwH#F?JOCjp2( zQ&Q3BD-V_H_A4o%c+LjDV6(0XY=ArX{jmWR#R~<2&5_Nyb$no3pER%@-EJjN;f{EK zT|~N^MtQ}DyRgQ&FBzl0t42AYuSUbyNK~&fF=FqZv`Bn`8t_Yfu0hlx7BuyEVv0U! zwXjR~g80OMydQYQE)* zfLL;F5iR%>CF^8n?W^Lr`M%6s5C#AB-fi635VPA8<7LKKG3s({rOal^t#+N51fz zUD9-H%*7{r)o*^rZ**!iFl?kQafzoFhixZnJO~h-?-+I65znZy#}EttMLo;$_^cPA zWNvR%PXOIU&V#sOc@IVPO@SJYlfD6QF+^Kw%(T#?`eB#8s8jcq`h4x&fEZ^jPCR3G zInLh4+(5^OXLflo!sfBcH?cMs1ZOWwI-`y1p01Mn+(LTQYP!5f4KILIR@A1nUSES* zk3afK688xrG7PO?GK|->G`xkDvz^&Vf^zzjxQP$Bf|r&09&4cNtBh zRLx7gujo;tLMcCq<^*(gi+@3vKL-l{>^xaUMO3|@gjAel1U{#Yc;Jd}NI8-wp@sit} z--@@~8pbEgi{m!EGP@zON!!QI9^vD$2J;TQHYuEjyjtd9Ytv!dWiez<2i(%lbADsU5 zWZ(mSu)|r-?az^TUf4_m?;JDC9W3T{rVZm?>)3}JLj&|O9|Ro$~ zNdBPkG^L@so?j24%Wj?}sU`vTjI*h5IAiP}v@6(fxYE7fX)iv5p$*ftQMMfWq;C`C zN6ykL)}))ChSl_zMf&L;{18k(=HfBNnT09PUB4ioDYiXaoHLb3){j$)$qVbfEiuyf zV=H5Y2G_|qcZ84du@7mbI&4p$>4U)Q;Zo}7>{vVKjym$f@S@KqIoPULP~mo-UKh_Nz7{whx38}t)*Im*0N*NQeD`E%vW z%2-?iRQoV37zH~o_m*spq$R$4#hkNzkU73$`6sl5{0+sH3)`D)t&p+jZ3)@zVE!JVz|yHq6jvDo^0le>1dq$^*GX?yV>Et5p<__=mix zRgi|pwQKTJYwlErEV^Q)XNlAiRNajb0e#pdo~MQ4x74aWH1+T_!8Vb=eGsw_fTSuH zB(>h+_;V~(Zg$wbh8dP0HKB_K$Ygi$MC&YV4=&_g$XQ(#LQ^vBdirvDs!$G^0mB?F zEB!4T%W?grNa3TK<>)D+bUyR9X@`8aQ5EX~uh+aY@Dwc*<>pDt<@TfwL!c?`0p{Gy zeSyW0l&^S2*Z66QjCopkI-ev(-#6Ngwm&;rmPZ~j^7TF|3zW8o$l5$Ke`L{I_-%eE z7A9K0IWRYi@iW*eM zPxUMXy>Tf`3}@QJ_QxXL5z4ajBK(o0@M#u}l@;IC10&v!S(^^fdun4jIcoVxd*4pe zW?0*3xoBaz6gYpY2)*%ah8=Ul%F`=VNXMKcNK7Xbnjonvm6{Jh>V;>5z3BROvl{AMma z9|sC8LiHUf7&Bx^AGi@Yj|vQjSO^7*%^*Gq`51xuL_DX;ekuBOd8jItNCjEt+4c%$hFDQDjLNvR_n27E&WK--y~lE25*A4>K=}e1%$oiTp(`Y9DXej<`%XFN`$-NjlGp^$sJ+s}$;&H;;&g zEmUa7yc8(TFs=xPEfzT^B7hBMDm}-aSMR3t`xqJOSxS*LxhElyTs4DO@a$XloI&s- zV1fZ=PL(-%B0g8$)afr8K{s@|Vd1Op^66v5YZZX|1vxi1xPp$K4eBVDp4XjKxF3H{ z3o0pxme*ElS;!i1z3Oxd=<127$0dV=TdpHZsuITKnwq=b>)w#i#j*6z zaOImg={HD1;Z7W|a$HhYRlMK@_V2_-o&ZgLN8>^YQ9yHPq}=m|;Pr@dp*^@4MmR>s zqvY>?31Jp^N_`oO^i3erMfs>H!#vOEq0@d*nsg$@i@@_r&||oU<kfTpX71z^A|Ma5oef z;-~;c^J;ZV>X?D8!F(+3)sTQ)V&hKvhz!(1{zpTOgBT?d#Esg3oM z@naag0qRxWsAouWcd7N-IcFQ)gUuM?Kn}$1DtEy3C#@SXq$a1SV%3cPNfZ!{ z1Rc+;PO5NVVsq$D_VW7q!eZY{vw4<7!_snTV6n(X4d>NiNmOxQZB$EI$4yFNTx}Vqvj&(!3N;aeymX>TE1^I@4jZ9|4)@XKFsp&u=|QeoA?)3vj=Q6 ziw1%BCUu%2DhjZAbDYw&ja}!fV9tdI6>Y#7qS8PC0d!Gok`%NY@P>1yoAB8K(q_Oj zNb+v6M;NfhDZ29)AUbyf?2r2kO8K>92Iu`-9eZq#y<_NVwl2%r76x$`8e#07H@M4t zTsgwo<~M5%v5XX8j{E1jDct!3B18zkGoB3gzKZcJPlaoBUV%DLQk__4y$e8CuzD|` zd(OLkZ$$QI;sh#*r|MxrkE+9JT_VK=9=!ijIE4|x$%f5~e$DN)$1Xg_(R?duH7ej2 zI39@%6v#cD`pH#4OV4JP_e~&)1j5Zux7E>KB75~`h&$TH6{(^M{WZ>rCz{QpQ3%OZ zS^_F+b&ItP(jr@8Nr%8Pse1aN8?3jxTDBYd1&_E}OS95#A?8~2Y~(=&lH$@aIl?X61m4Pkp()V}0*FAkNumu7WEQ-LZ587grRw-T zPF+zM1mrYH(sy>mwGP#&_%v|UsDw0Y(ar-JCL>WDU}PM@CUIhrGt$m029|o#OgLtq zL{qhp5~$(W-*fMz$d|U|fl!Z;AoX;Z3N;QEt9D{^uUgxvA!dV(&4{&P@I7?Sp< z6s_e+TIxQ4yy=_rjxSCW`rK}Z1HY1Q24hl4$9!#j*jJBrdvArU>A9=jm+7AfTZ_1nQ64RevTi+}%4K7cQ({O!~)k84zD*jw4Wj`j_&&iYu zctm?@=Pj}Ld=|?s0@vo}&_xUpz|K)g)ywB!S~hW8vu|NsYOuju6r`8wUez54x!*^j zU!^y^V=Jz$kB<)mv9_v+Nw#;h4JDLgJ?NOY*joA0s#hJZHvBqF1!)Ln-LJW%Y$HJ1 zS+%D>xMz(rzuiv=UJ=gzZVG^Q@owhRb?)=qa5ydEmByA`tdEy!#M!DKcL^YDDm>@k z;SmD>xQLqc6<$ZmU~ISW)y139&N8`*x9TxMIx)G5U|pIg8{=o+A$^suS-zj^n*?3D zHl}MsPicT#KVODTcw})@@Y=Oh1|51UZAOnt@Yr^v@*>?%pWhFBU4;hP(gy+J}-z2WnuTJ#EWDtaunt9bMiCugLL-gb_=!1 zALPq*Vn09oOrSW+tDnF-{x;xc`@M4x^kwl?s?(aclQsK;U@?28?}=UN=la8P7B+0K z@)Ppucct~LabwW7J?<&-lzYpo>ihjo@rGcRyY|xC$FSLZ`{koQUzQV~_x=_8l>Lst z`aSyrHqWM_qB#g z7E#50NPs6iltNy&G}us>kTA4@9j1^^>o{mi2_u`wFhbh8{G5Wt8d_-T zc}y;;0Vm5t%|%5kXH*_$CP5Mi7$MHm8a9w`Pu8;PXi`Zp1!bUFGPU!4KJu7O1Y_l% zbaK3CE%5CDlLYsY5v>&}NxtIxK#h;lJ`2)5hSXV5ZHT)A8} zVNH__oyrKAk4Z$D@_GOG{I4~pnP!|~0bUDwrB3gkz{z_@_=Ki)3;S;*l0H4Tdsb>d zV4{Y1F~uacg)8_w_vab$pls8OCWKr`-fy&hh`~}1Mq0cyGX_=QCt{^#P&BQrQF*g4 z1|`4EHRQxlVItQq96^)d!UhFMp*-tFbBp<5dvAUd@ey-2Jy>`5R^NUjYAX03{KZb# zt}|3TEUIS37!4=TufM!yjPEFxHFVjPCTb+jA~y5(bBcrgz96;3Xd4Bxv?MB z+L{Dqt=%GAy`-zomM%G8P%5Q#&CuWF*E7UvHkPUWV~xD7NaP7}>a)+D&VVniA=lRN zCJujOQu^G>XE;-4Ae4(SB&RIPt0Z|xs96E0-OcIeJO`ZQx|8VC(u$ zou*mT3==uzeRQ;3CVkiDipZ7obi_lys=p~L*=@|>+dtQT%_S<0$GGWSTWU$9FDed4 z6FJfYpJMShnbC*N;Tb%N80lHEZkq@l((PY9{yU0)?5TGFtEaC6Fjl6C6E(Dm46G7$ zY;h#Fof#1-{<+V5wK;$$C>(s6>JOq%a`E%;$TU<}1dm?>d9w$Ml#6wQ zzmJ9|yv8BDYfi?E_;`(HyEHvd6AYTcD2#}JxD&=$wEbsBSP=vN1SAZ;TR=*!ikPu7 zUE@MxNXkyKB7y!!2ws3Ko(zIw?|z=;wr^iwo+1MJC+k^A{L-T! z~->*$J1`Vm5oEBi0%{L;G1R-i$s&afx?Ui%R|D8(=M^8zwCq^$+{6%CQ z8cua0YGd%9W890N^8}MT}5|f^-xs~|9t`v>?!~n!BI8sof`GnUsCkl=icK&WJ3_0g+sS1=tHK!xq~TI*i$~)-xTmJBss3CRywC89kA> z?Zkw_TxQrU^%ZW)R0C$8d`=egv&Gz&MReW&0ni$b>SepLnYnMZgV)$6K{JrN6bcpp$+0M zmDf_&AT>Re7OT(7eqwsPc5lycV(*_AB@8A+{kNEAp!5|TGrQZ*x3B`UqZi4TDt29O zECKrwAu`gh5es0BU0btI!p3pt>{!XinCn}K(wetj$5aN-s50O|fX%yN@`eqqV0P{V zT9TSmh}maPNJD<&V+?mOqui}4IgT(}&c1wrpB)`J1@+W0mLqzS%lKkDPT2;O>NW1| ziiM!ql0!)&-^ed+iE##u|G=}bVU`AA$=w2iq1g9_ex|5S#7mac18AFy+>h}EOjH58= z+a!_&0$&NHWaj@v9IeD)KkA0l1GNg=xXu)4VZ=cn*1JChq3<=UqXMuCG|sdNW~#`2 zSpp}~RFDTtZ|+UO%!tVU5;ZuOlraC~zbhF@oll>a-+w-xzH)h|ARXv&0!y}vj-wzG zbT#fYm|Gk_H+c$E_P9+1!590b+c-B@B{6jWi!Tm}(%^k?Ob8sb7(9XaO6S2LXZ!Ep zL#%sAoUS1EV>U&w=))^_ZwfB^jKnWx>S6i5r=00{6Ht;~U?n|zJKV}TTo z1^I8khMBS2am-kFH;xZUEFoXOt_$AA(wYSXSZqP+#O7P0}>=mC|dB%m&omHTNdZXBi=7s@MZuskX}=TVW0P~%o_BlE6yTC z0Tc$rwzI;W0svSv2&D|aoOllkxTr+cbE9_5rQqPqba%^UkVWpy(&P+2?QNLhj&5ns zS+qh!v;}#rw7lYu!<2l_$VD|-U~hbVbTcN0c8xo#xx*i+vxGIZBuB^^Z8?B4*(`o$pdl%a@>vlJTOGY?;8zV<*<0w6S` zl%m@QANNu%VJX~^OPcRDWVC{m4eO#;kyFGHwx%}(?KA(53s>YuWq&{281w}2>$3>L zx;{peiDJXWyr@dcjogLx&DURRUkjaTbILzMfZgK!_M^$#&+MAM88bRnQ_8)+vHRnA z9WjLyz=rDRh2_jIL1^0P?6;oOtA`&hd%grnt56LYJs!43FN6YYWRg2yh+a@4ptG2=FcO-+sLp(x5>3z@b z*|Oldq)Z_SN}Oi_V$Gss?>UxDK!Ch9{e=&bzFS`I9ce!&I+B7Ig%o&4jn-A-cWD88 zT|d)}V>-clGeIWh^{*Dhqu)XS90b*32w9c1W*N4&%nm&)?0z68tk^C{XJU z>et;9cs8%?vO|~9{i)jp&k91dZ`gu{?B4NWWq)@Z8BbXOb^VF?%1klxwZ3!mRh^T- z0cXp!?RrsRwe7Z3Yq7rmriA;DcPshs<*86&Gxdl*EwjP4gJCiC?kW!BD6<^L`?&Mb z$YJFhCTZ2l`VyoIbVdXTkqt7G99}ChnVdq`#K3?`9#fWY&Fiu21bUjOt~gSH)S;}# zyfd?rw5bV4E5#+2&vIyNtZ^Fd1*~WjoTo6y37|U?^@8R zL#Pe51lgmVvi7fv*N0UQ*>4WKJ#3PVRBSj{cU5jd+Kjl}ti+xO+7aK`H}}2f{gy`e z88E_8x(X7MgobGJBiJ$LpZ`PY5`ALE&3N(CX8-5wM8K*2nIoxTswDLH?)r2WqK3ct z4Uo`5rp1`T*S=(u#c}=v%$WU0$fOB-?{V^;YFgFJ)(tPk$dDi&t1o@vwuUz~r`|F?0_J6%fEXT>_$lzu%`mJzMpw>jXCa zGfkesdd+*DqW1x5UpyVX8Hp^OSdBH2e;}b}0`B)rLsz3{?~u zmEJ?Ls6_f)!)a+s5IDEiZr`K?hDW`Zqqa~t(#xOr+RaBa+g$hodcQB~g0i6l`;zY& zqztlwk2`o9X_XnJ21P1K#KffY#q+%w*aY`$I7+b(;v&9@D+>ggKEKsvRaACrell&pS3I4&K@A+5_RKQStF;>O8 zeE>rJ>OP8{(7!ijel+s1-J*xBPANu;DI%z2G4@U*72{FU=CiY;4sKer=XO6Aii3A9 zGldK78Nm-oEzqt$mS~NYrMv*F_qiEGsOPah_({8RdiYGWcLA^MFXDRb6S_Ain*7oc z&*rcSs57V%pCN$$`_$tvnPFQ?zHQf1s#qI$cw%8(8#nPyXHqbyxrGtfwQi{}kY`2@ zP5UXfO^?P{QTwB7G`;W8vBCI1iU6}2mpy9caBCrrv$~6g-~CO${($D9!O(?xgh6NilFDhL-~yCx)|EindRW`Pn55LaZBzAOem5cbF6Pw^I6%DTfXv4^DI>6h{gYY> ztP*8e7t!UW{`@APQGpkmNU_}Zx)wn zXdfHctdRW-8w>68vA8Sd;pEP^H*6mOB$1nL>YSq%NcAl@SoipH#EWk=Ig%yzRZu=( z>@5n-Z}e?vAb9a7Q2?^Z$c*d~FQ}r3?^w1(6#b;8QE`U@4ck%x^rB?j#GRv(Uj`e3 zPV5{WfBH(OyFatU8Uk!Vh{HOzzunad?{XIAxg%vpNfJTiW&cgS#}5~^o@l3nR@Q+K{|FL% zuFBCuM$>YT?lIy$W(v+(2u^2O)0OeYXUyleUXZ^-N;G+@BDkf|)RB9k_w^Xxu47$f zu+F0{rVLiq(!yB4S3p0$gr<4E%5Nx|xe1x(K(FWh|s7>f9R>7%hi%69-gS z{@74GZv%;{#yjHgcdjj^fDi>ey+GQ7D1IUuxiUd?+(8~AI z$>c5c$QR{XrZrkdT90zHFMlh3LQc+P{5*Sp<~87Y7Ia?b}@gc)5M;3bb-N)IQMScB;S73*nVc2eUOl0Yr&ie-mjfW z%DJ|?4$~PG#FUmN>!vxIFR68w?MU5xNpP};PhE$72cj{(S9SI~^=Lur{ml`aaeHg2 z!_|HT;*Q;xQ0VU?LQ!uXsS71{zwu2`O}m@jSOAjG#_G(`6Yuk;3uqqdgHc~DzD0_L zTTYq(fW!MmclYNE>4+9UZC)qZN+#vLTS9{ws?6X=uPrmZM_sYl;O0?VcWSX@NZaxw z@MmYv*8x;lW7q97S87cyX};| zlXvN!r-7Rq#x^w3VUFPnppvWjlt-wZ~o>2Wcqf4UBsujpg9{2NGPKkN<_$aymDt6Z0?p=)j zjQSpA^U}G{sh)~*;8unVnY>a642jZI7ESOz|m~%x#l)c#@lD;l3X{Fz>?tzQ!;USpq-oWzee`g6zT_ zS(eEgZ(?|M9Bb6x?#te2J07ABG)B9G3j{1IhdsUN9Yt;dj83)JJyD93t$-vzw;HKsz6sDT`6_P`z)iH}GhBbc8T(M<`^*Y!i~jCt(453u*{d zdBHZtGffWX4L%1ql^$Em!e2tfkD$K2DvKHHd@aCLm0_xuP5x)=ytQuwbvb0y}%7neIWCfVsSXvNf*<_h? zC)cWz|J?gW#aNw4s5KORl5Rzw8xH!HAZfB>n~=43GOwfO0QNSne&C;CaZ&tWV<9Z z*TtjKdk7!dXXDLGD?X1kUAwnWOO~qaK@1KgBXHy?V!>y86!`gKRvNOD7Ojt6Izo02 z5EXA6Vmy$@tv7#vG9H~4iiq`__Ru#Sm{P5ew) zDN2lqn=00vV6t2JH$$&FNCUoOkzuS;#bxXd=@R=02Nt3y96edQ8@v?f0$R7WU6w;f zZTe;sR}-YrBPv+7%-)YhJe_T^Oe-f*+vFenztUY_&wLN|+zbKn)V-1z3Ol-#P#ri2 z&`z)CAjL4sc5v2-f)@64IyqygDaS-aqzv;Z^yO-^4u{m;@ zeD2P5MbmMUHFBpRvlk;27svN8$Yc;)>dHWPgrsd6E8Qu?%ZGz0N!p3szbNFo9wf+{ z0@1M)_F?ZZ96Bq*PGe!HZsEO|u>JR7QgsqklL8ZW$pOBar$UOk6S#j$5WCxKVumoIv0E8Z=Ms|H*Rz#9)}o?_IcwB z(7XrFe57N4-XdJR0OqEypK9Zfk&F1}@S?#fonvZ&al4IyByJF)j7Lz0@tv3!a4%r@ z$!Z>&e@ICL3BomJhf}Be1NYbKz^S;3Uy7f=0+(jRo7nLPL_TVvcxH}v*V%o+wv;w$ zik~u0LW|tbJ8IoQ2t!M?BNICW@?CgL`(_Fgwqki`odLH`kML|=BLOk;2aYav)5CMT zv030=iWhyWK6350a-M-D10vu(_U7FIW}`(l(TNmEBR zUjDn}WVF~6Gm7V$=er>JyGas^Xqx4x%Y6tXELI40iSaIpD;MRq^6yw2(w^hQPF zj`T{{n~v7vi+OV8>XxE!w|qxZpYX-~S!5BZ(DBo2MEPX+s>#nC7X5suselxxtIFTXVdCYH#l3?t{SlVa$I%D?}keGHrBo+ZV~O6N|^ea1KI4_z8(1gzg+9 z2N{LHGJD`AyVV%$Hk@#<$#Ae;eXHD(3^r8mC4 zsea%u+3&kM3`>ay(@0%#qm*%pcRv6bOh)6Ctb4p<@kR4`kM2SN9a)mI_5j$zgBFZ| z-XR7-f*HQk$FjAA`-&e`p|de?Lo3DqC4g`SbpC zxa7 z<zFVC{DK4khIS5E`%7VEIK837vm= z5k{8Lz}~Nn!aM#TJQp|bP#1$t*IzVkRs=u-yNXrqHUcf-O_wf3KX?6J;_sL7Ln`!P zCz+8T`uWUN6A#GfjQ}{J=;kX|WEHHWz?{Qi)lAw&MqIfHzfPHr;#s#mqO zHK2V@AU!AbT6^}=slk@}V#K`rsf2JDer600;p6=NMY(C(Ge)FHlUJINU@KF`EZFLQ zi6V8Nk^(ZxMOud+%~VfR26n?OX&Hp_g>3;)t;Iyw|7{i3(k!c+4(He-iUSh6zp_Cd zh#UH8zS)$9#aB<;C3KS#BgoriM>4N4zT!K-e=-Qb2S$5Z3oMJ%urQA5cFm zI`;hxeuYW&m(|t*S~<%kyFzm^1=q(Na&leTmGNDE31}xE$3#ZcWgYMLsCi=%l$P*s zZ|&bta9rT>|IDI*LDCM@lE^cQyBRTe3%vpw^=5nN6N;0(q)XV}oh4JYh3gEY3QDVb za6kK7?E+75jV9{4%*EEnlJ#7PCN`KS?fvumSN`L#IksTnw{5ZC{9Z1p!rXMlEnTp& zhNsQnGf7ZzP*>6T{Bd$gDto`LQu7y-c-HKn^axe=^F}PN17_eYXADj4d$uBtY}F(F zzIR2Q=yq`F?lTRSG=75sGL(JpNAi~Qg0;{9Gs8F!)7#Zd{rcOcY!Gh@RM3d9Wc@)n zPr0f0lE`VQBM}Ee( zE7@xI%0PA!hg(3n6|JjC-wYlwWCS-pZ0% zOUl1J@h4B?!$jok4UBauv0nZze4t0a>O|6uXjKd~|A={3*GlSoItd4XflUZ2` z>~`RRCb~TcK}9}!l=5Vfj;1acWY+KGmg+k(y8hj{E0ba3!oHz%Q%fi48Rz%4Pd@eq|0GE~7|$ETw_>%zatZe)^4|`i=-+Mw${Z$v5NYr^q7Xw7R0d z^*W@X=S`Vz+b|&u9HsFh4M~t)#N)a##40{26rNtyr0AwK#_6eDl z)Dc0!U^;%eB~7?W#7>$`?%WMrA^PjrEXNeC32q56g1m&(rT+zv_TM=Q=?Ud3O1d58 zl$WZU2Y;45+_~*20V2|q0WFMJb>(>RJLKgOGUD=)+V{~=iip^`)y#Ew%W5bSWKNXK z?$ye`m0k3ZA&R~(b73;XU>gyMG?~^ z#1w98hXy08!Ph)73q?Wjl?3mdZ zkA+cWVZM6%K1vj+NSWq11C-jGU*tPXT8{YrHKlLupT0c~J2WGIsAIt{^C#)P3$l0? zfN^!EAdTxRghU*FjuM5)|wj`Ru27N-(+HZQAr54u?VUH_(f2_~~X$ zZE>u_cg#I3hQS2-$7AcYa*FB+AIN+6WFM%Bh2&w@tAF%kS%l2@Rsfux#6>1gT7mq( zUOiG@D$8CRIW%Uwq0PVPR`(2ji)BN)ueU~}Y%{w^WV~&P`%*Qd{cLUIJ#3TcSIQd} z8&$j8i}lxz>Z+Hx>jZC?{ROPddw21>CaTjbnx+WB!boC{^GZ2*IHj)THyJ7OPK?gg zn?P%+4d?Gi5!0%=9kB7wLt1dv7vg!UcR}>IRoCLP|;r69SH#vD>91pVRG8 z1d5W{(w$POmh&uPG(xm>pKAnmkM4qKz8cYDTf`sg@k)|xjziE!#xd9 z0lovW&`2-y&Uy9WXE&c~<>1F{{JJBzj zq1gHb$K)^{9zx&T3itu1+i8^8a+j%-TD4l1es?FDWm3-PNtJtOOc_)(2z`pID#Kn+ zMNg^MLKdb&c@E`VG-Wb^Hbu?$+tW!tb*{&s; zBsLsJ#dE+Mcm^!9xvT9&yZ5d?LxB<5PTQgqx4Z-Qg==$`EXcF0Alvg0ze-}&{U@w`JhH{=G!Vl^{HKW$DXj0j3$x5gXxa}&R46oW z?gq`q{bA@Mugi_ZeSm92ygvlrW|vs^qO!qSgSvW_nma9sI3+ zl707IM^zw&Z}+>ZJN%;#FJL5 zVe~K3>*a~9Td_aAE3JLH%MG$KE_-5UiJ)AAVDGiRj`bjBSc!0oIg+iEaou`RUF{G~ z^xpywTYRg2hl|qRVz*x26p@Lf(u#r~2LUE$gNqgB6qU)=?<@FKze`6a=J6d;TT`d~ z&=#ll`r?FXiP|4dZ%Z=bU2UDu@b>2?16(kvypx+QKj_Zm)zppc=rlduwYWQe)p0-8n}4a1$o#$)H&!@$Z!-1%-1+D0wmq(q;SsEa*1?~_ z^?c@*an$<+-E+s4^^x%QKv_jlWkU~vjkoV2Lo9csJ(9Er8jrxA#2{!WZ|_!;NO5?I zF<~kZBtzYs0AhDBYfgpTn=yDV5RU0dnilZ$_;+VgiZVSC_-%7iT0_Uks;wBDh^=c| zlQH#H`5p|!4qHDwX%9kOG|k2dv=NdIbGE1$Ho`)p)p)i+Ow1$O!7jzS0<>D`aA#Q% z9r6AhP&sXgDR%{cd~ zr;vaIl-bo6iXX}P$@#s3CIExjnrPd4ALdwP4l7$gk`#T->LK(`=m2wY;^|f)uB^yQ z4~1h7&xcjh{D3O#-cjMx9@!~fTJ>>}{9{F}TYUp3nE{l-jPnIT{wp6#+OjiN{NPv$?$y1~!_z|2=mwB3l13lTB&CDnRzRH! zxHu&udVhID4*-AdDY%`9v#!kPX*g(A>D~?XF!b=|tNhh5R>9Gu^0={8m$#3ys9;EW%hl$+m1A#W0>RFWPy5%mqTrC*MG zipwuinrigW<8kM$qwYxRb|{cM!x&w*qm~mfdwyKu4N}1xctaeWW$`rsPXOW&9q*kg zFM#mpI5qu}QFdQ@tj2bOAq`tK^@4H|)%fe1Vg~Ehesvqb!jRtd^2$F$7vMJvHzHNQ zEfBYx7TTja7SBn4^6(-)!i|RphRNXo<-C}8>+7jly{^4Ar1uq5`lKLg_z&XF&XXs~}mNMBoY(qjt;4LSAjE@QU7 zkByL)u2pR6n?8A@e)Eoh}p3) z%x!oesF0BJo{EsS6j0PHu_MzOj6RL)Yu;;utbD0*Vd)HCm166I-A=@N*Bu_uteqda zBQ>z)E8`1hMbCd{L+IR#!}c60T>^~xyrJG~Y7HXKd>Pknq}3SAmFD(|{9e-ZQ0g%^ z!~z>EpKsCcj@Bv*rk={V(Sfvn25qX&hx8*zLbV`?hVen7O-LagQJB&>`=`j4Cx^8b z_~Hspc6dpIAg7G`y10b7VhCf=R!^nWHjqCCbxmzrxSLZ7YsCddVqUy9i;pHhpH`y_ z*clielNzh{#b9sIobNy~`n{+u?1`|c0+>b)!w8mM=iPTxr@0$cEYHP005`cq!6xsa znBJ0LHfsPV2LQvEl!-B_51s;`>H{_(cWPA+?iZcw;$iM|efdKti7;=5MT@!oj}GOZ zMsBU`OuVgmV`)GL0D)_Soeox}-`@_Ip5%aEpvC%AFZuNq1E3JYd|LryFFeTjbgGi7 zo1{Z+1b*uXo!p#7sB6_eeAuN2nU{)&r_0aGzgd$R!6`>W_KWN{3u4q~{zs4-`mzIs zCm>|w^H|G|vZij1i2<}H|0b|EhYcPJvJLROVTM&XdEYa#$OYv_M4T+H`%P3^~Pek*l zakLG_^@gDNP)^K%uxrkgR2GZ>Z#O0UUkvvagh3}6L^vZfw~r&9_zqr_=p3u2N> z5ssI7+dI0^v4^X_W7Yn|9*-RUFm&k2&w_*jFRAT^5k8^uLl~W3yHndupk;|j9TF%z z)yPF)GD@50gI^sgv94@44eAV!EAhz}!W+oSFu8#iF=tW~K#?SfJ@rur2FV z+Iqs9F@!G{7R`3oXt!?jtUBF!!97ewOB}V^Ykdm-Zz_0|*4jTGEvXG6PTL0oG0nv8 z(>JV$2tr<}Z}a`lYTxBD?!}&9dmy1~>R4-Z;5|MNm+-C#NaM%MPM8OQ#$wPx`K^4F zE#P;$mP)bee+x}0Z#y<))|~jp^F&K1CE;?v1VRA5F;JvI8(UL^Euxj%jFS}D+SY1=nIWqeo}b~iNrj27 z-Z`sj)LmeoDta5%QeCM9!VlqYAF)K&v9{sV{3)~}2fE^6JF|lq{ZDFaNV{@ex;coj zNB{*0jE}oPF1aCnfx}0o{ZEU9G;Z6oU)|=rFf0HR$6CO;h?@ZmSSz_O!Z7}MPI?;LGaehg(nW&atlkw)E90z$Q6Noqt^AfrLOI$^a znsuaJ0hD$t$#7G}4X0yKEjVaLyFzkNZ>gxoHuAcG1(jeB9$k+Gm)`ywlPY3isw^sU z+lCUN#gDDr^wQZ0K;goeizbi(4lu6hWp9Pb%%C$1H&qvRQq@qbRP@_hV~Sgj06yB$ z(gPp3)TZUy->ZQ_;W&6?`$L3asd{*kHv|JBFkdVwvRmlZFgxwE;9^QqV);~{Pe zz;JVa0mjQ5Mb2tErpsWgx)?pV{t=c|0iLFAYG%SYAqkPgXvaeLYrhIUL@+(3ACJ7r zy3#Km6|m+RwCtu36U(2eK@wKfpos=9H#0&!e+Jvy2HzWqTt}$hO5j?xU zW!isT!UEZ+sAs5iaPGUYNPgTjDe_D={b7fRR0aQlcte7uZtq3Oqfgv?PXa*<(2C=* z(F~>We7xNVMq2JE&B|K;fPI-2Iw(bXqJ*2dw~cLFwU?)fTEO6* zM2ZP{`dZ@ZUMYQ2 z++h9#nDGc-$xN^H{7YxmT6I=MSdJRf%mCaaR(U} zVxB`g(!=pglt@U{;;YXy*-fC1517h?jiDK*CE{W6V&N-pz2;IzP=9{{pq29z=y-d) z)xaFYAOHYiD_ z)ThEynh^W?mVc;1rRn3gW8#lumLnoSUtVj28jfC#keeQa$PD37&&R5&6bJ)1;lB4M00K)TA}A+10TN}ckSU`8Cnz{_ z7{D4PB!{1TfwLQ4+1cNIac|`?r~{OSI*?d4GX;Z|TDmfCl1*GGut5*MIWY>{j1A=3 zmDTyB8wiJ%&f_BSHNqz0XBQ#BVt+r^*eCDev9(zXLe~zR1y^+V__?|u--SA;63bC6 zV=i%RIDHytOskP~Pvm5Ds?poG(De6b+Vn=QFuV?mUJ5>VVsxIaHxvdrW4JHW09RX4 z>(iKZgy1mm*6BPJcP4&VMz7lEHZ7POpB;RTC;9M{fMD0aW--kJ_(Bh`D{DpQ;|B5= zXpi1B0FF{h;mTFMB|8nY8|$!!hx_wZAuT{O-uER7)`aNF?Vfsl;oTX>C35pn;F)ji zZPMUIx3P~)TLeR(sJ>VRA-ZPUi^yrFj*@XK6X&!+CVq!aBuft@1S9hQ1WTr%EP8aS z>|glYL)_o$<73it!t(q?-x6sQ*j))I^`?s2OL;68zF0^aN=Yd7boKTA&Lh)FDY`8S>eAa)|9d4hP1i*H3S!{ABZ z?O(FvvZnwO77x!C7$oSL6-&^%7TZJJNU*Z?aa|NvMMFIgVZg8>6Sqqe(kmwo0;FnH zXRU}Ql-_1SMf#zr%b{Uf>QPt;^pZvn$OT|pV|)lU)Zj0fd(EvJT+AMp?egEwc&gOI zi#uce&^jzocx^oX_RcEC=9AN7Y>~Vfmni=h57Bq`P~|Z`%}ruGAA57KgJErIJXTl! z8B^t{(WI}zFgMcyVY~DR8)4uBsV*&A1lR>SwP`N$a*7Kk7rq9+-U zfSN#4tq{$f`cWkRl}A>ijLZZMuGd$kg*Rxzi;#9jKVhX|TwJbU=agyXTUxiZw|k2% z%hNwhAaVZR9}N7y>@vFYvz%LaCFf!0hnNmdy+4@i$pf}WJ3zLZ~ChU3A zKfK+iFSH(RB(xwu23e! zeeNUsO?|OU@htC>B1b*GUYfND*et)QJd}{m8o@Ale>ZK{hr(cF=P4~=nf56Dm0#DH zD<@~=g=93goAzBqTB;b0;JZ3T-~iZuA(PHMm%LDyVAXq$a+3t^iu z0I6r%6P-pU^R)AimBNv_HSE#Skyb}V0^6-fmOFRh`OS(L^D~o~=O)a%9XLU9+=Ref zA<$QH!CC0VG-YIj?V)1|rcu_Suh#=!@>+bR!ntnH98 z!O{jc7Zq>Xe=EcDSDg19CA58H{9#9`M6dQ=YH_*Hdu!sSff6LJ zl*l?p0U~k(Cy5d*$7mX}mDKCo^V_1{{-sdt>3}c%0jq!j00000000000000000000 H00000d+4(f literal 0 HcmV?d00001 diff --git a/src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.scss b/src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.scss new file mode 100644 index 0000000000..f5fdbb2e3a --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.scss @@ -0,0 +1,71 @@ +@import "scss/colours.scss"; + +.countdown-container { + border-radius: 12px; + padding: 20px; + width: 300px; + color: white; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + text-align: center; + + @media (max-width: 768px) { + padding: 20px 0px; + } + + .title { + font-size: 18px; + margin-bottom: 0px; + } + + .description { + font-size: 20px; + color: rgba($white, 0.6); + margin-bottom: 32px; + text-align: center; + font-weight: 500; + } + + .countdown-icon { + height: 80px; + width: 80px; + font-size: 36px; + background-color: $secondary; + border-radius: 16px; + display: flex; + justify-content: center; + align-items: center; + border: 3px solid rgba($white, 0.2); + } + + .countdown-wrapper { + display: flex; + justify-content: space-around; + width: 100%; + background-color: $secondary; + border-radius: 8px; + padding: 24px 10px; + border: 3px solid $primary; + user-select: none; + pointer-events: none; + + .countdown-item { + display: flex; + flex-direction: column; + align-items: center; + + .countdown-value { + font-size: 46px; + font-weight: bold; + margin-top: -10px; + } + + .countdown-label { + font-size: 16px; + color: rgba($white, 0.6); + } + } + } +} diff --git a/src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.tsx b/src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.tsx new file mode 100644 index 0000000000..a62f3b56fe --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/Countdown/Countdown.tsx @@ -0,0 +1,110 @@ +import { faArrowRight, IconDefinition } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Button, Container, Panel } from "components/common"; +import { AppStateContext } from "components/providers/AppStateProvider"; +import React, { useState, useEffect, useContext } from "react"; +import "./Countdown.scss"; + +interface TimeLeft { + days?: number; + hours?: number; + minutes?: number; + seconds?: number; +} + +interface CountdownProps { + endDate: Date; + title: string; + description: string; + icon?: IconDefinition; +} + +export default function Countdown({ + endDate, + title, + description, + icon, +}: CountdownProps): JSX.Element { + const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()); + const [localEndTime, setLocalEndTime] = useState(""); + const { sessionWrapper } = useContext(AppStateContext); + + useEffect(() => { + updateLocalEndTime(); + + const timer = setInterval(() => { + setTimeLeft(calculateTimeLeft()); + }, 1000); + + return () => clearInterval(timer); + }); + + function calculateTimeLeft(): TimeLeft { + const difference = +endDate - +new Date(); + let timeLeft: TimeLeft = {}; + + if (difference > 0) { + timeLeft = { + days: Math.floor(difference / (1000 * 60 * 60 * 24)), + hours: Math.floor((difference / (1000 * 60 * 60)) % 24), + minutes: Math.floor((difference / 1000 / 60) % 60), + seconds: Math.floor((difference / 1000) % 60), + }; + } + + return timeLeft; + } + + function updateLocalEndTime() { + const options: Intl.DateTimeFormatOptions = { + day: "numeric", + month: "long", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + timeZoneName: "short", + }; + setLocalEndTime(endDate.toLocaleDateString("en-US", options)); + } + + return ( + + +
+ {icon && ( +
+ +
+ )} +

{title}

+

{description}

+
+ {Object.entries(timeLeft).map(([interval, value]) => ( +
+ {value} + {interval} +
+ ))} +
+
+ Countdown ends local time: {localEndTime} +
+ + {!sessionWrapper.isLoggedIn() && ( +
+ + + ); +} diff --git a/src/website/packages/fakeyou.com/src/components/common/Countdown/index.tsx b/src/website/packages/fakeyou.com/src/components/common/Countdown/index.tsx new file mode 100644 index 0000000000..fe3ad4c24c --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/Countdown/index.tsx @@ -0,0 +1 @@ +export { default } from "./Countdown"; diff --git a/src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.scss b/src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.scss new file mode 100644 index 0000000000..51dae4cde7 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.scss @@ -0,0 +1,42 @@ +@import "scss/colours.scss"; + +.faq-section { + background-color: rgba($secondary, 0.8); + border-radius: 12px; + padding-bottom: 2rem; + margin-bottom: 2rem; + border: 3px solid rgba($secondary, 0.8); + + .faq-item { + h3 { + color: lighten($primary, 5%); + font-size: 20px; + margin-bottom: 10px; + font-weight: bold; + } + + p { + color: rgba($white, 0.8); + font-size: 16px; + line-height: 1.6; + } + } +} + +@media (max-width: 768px) { + .faq-section { + padding: 20px; + padding-top: 2.5rem; + border-radius: 0px; + + .faq-item { + h3 { + font-size: 18px; + } + + p { + font-size: 14px; + } + } + } +} diff --git a/src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.tsx b/src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.tsx new file mode 100644 index 0000000000..b109b993cd --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/FAQSection/FAQSection.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import { Container, Panel } from "components/common"; +import "./FAQSection.scss"; +import { Helmet } from "react-helmet-async"; + +interface FAQItem { + question: string; + answer: string; +} + +interface FAQSectionProps { + title?: string; + faqItems: FAQItem[]; + className?: string; +} + +const FAQSection: React.FC = ({ + title = "Frequently Asked Questions", + faqItems, + className, +}) => { + const structuredData = { + "@context": "https://schema.org", + "@type": "FAQPage", + mainEntity: faqItems.map(item => ({ + "@type": "Question", + name: item.question, + acceptedAnswer: { + "@type": "Answer", + text: item.answer, + }, + })), + }; + + return ( + <> + + + + + +

{title}

+
+ {faqItems.map((item, index) => ( + +
+

{item.question}

+

{item.answer}

+
+ {index < faqItems.length - 1 &&
} + + ))} +
+ + + + ); +}; + +export default FAQSection; diff --git a/src/website/packages/fakeyou.com/src/components/common/FAQSection/index.tsx b/src/website/packages/fakeyou.com/src/components/common/FAQSection/index.tsx new file mode 100644 index 0000000000..10ab02388c --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/FAQSection/index.tsx @@ -0,0 +1 @@ +export { default } from "./FAQSection"; diff --git a/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.scss b/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.scss new file mode 100644 index 0000000000..87f1238948 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.scss @@ -0,0 +1,67 @@ +@import "scss/colours.scss"; + +.how-to-use-section { + background-color: rgba($secondary, 0.8); + border-radius: 12px; + padding-bottom: 2rem; + margin-top: 3rem; + margin-bottom: 3rem; + border: 3px solid rgba($white, 0.2); + + .how-to-use-icon { + height: 24px; + width: 24px; + padding: 14px; + background-color: lighten($secondary, 10%); + color: $white; + border-radius: 12px; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 24px; + border: 3px solid lighten($secondary, 20%); + + @media (max-width: 768px) { + margin-bottom: 16px; + height: 16px; + width: 16px; + padding: 8px; + border-radius: 8px; + } + } + + .how-to-use-item { + margin-bottom: 30px; + + h3 { + color: lighten($primary, 6%); + font-size: 20px; + margin-bottom: 12px; + font-weight: bold; + } + + p { + color: rgba($white, 0.8); + font-size: 16px; + line-height: 1.6; + } + } +} + +@media (max-width: 768px) { + .how-to-use-section { + padding: 20px; + padding-top: 2.5rem; + border-radius: 0px; + + .how-to-use-item { + h3 { + font-size: 18px; + } + + p { + font-size: 14px; + } + } + } +} diff --git a/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.tsx b/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.tsx new file mode 100644 index 0000000000..ae769cb560 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/HowToUseSection.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Container } from "components/common"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import "./HowToUseSection.scss"; + +interface StepItem { + icon: IconDefinition; + title: string; + description: React.ReactNode; +} + +interface HowToUseSectionProps { + title?: string; + steps: StepItem[]; + className?: string; +} + +const HowToUseSection: React.FC = ({ + title = "How to Use", + steps, + className, +}) => { + return ( + +
+

{title}

+
+ {steps.map((step, index) => ( +
+ +

{step.title}

+

{step.description}

+
+ ))} +
+
+ + ); +}; + +export default HowToUseSection; diff --git a/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/index.tsx b/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/index.tsx new file mode 100644 index 0000000000..057dae0b48 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/HowToUseSection/index.tsx @@ -0,0 +1 @@ +export { default } from "./HowToUseSection"; diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx index c404548820..99309475e9 100644 --- a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx +++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx @@ -13,7 +13,7 @@ export default function AITools() { to?: string; externalLink?: string; title: string; - text: string; + text?: string; imgSrc?: string; imgAlt: string; videoSrc?: string; @@ -107,6 +107,13 @@ export default function AITools() { imgSrc: "/images/landing/select-f5-tts.webp", imgAlt: "Voice Cloning", }, + { + to: "/seed-vc", + title: "Seed-VC Voice Conversion", + text: "Zero-shot voice conversion", + imgSrc: "/images/landing/select-seed-vc.webp", + imgAlt: "Zero-shot Voice Conversion", + }, { to: "/voice-designer", title: t("productVdTitle"), @@ -130,7 +137,8 @@ export default function AITools() { currentPath.includes("/live-portrait") || currentPath.includes("/dev-lp") || currentPath.includes("/beta/") || - currentPath.includes("/face-animator") + currentPath.includes("/face-animator") || + currentPath.includes("/webcam-acting") ) { items.push({ externalLink: "https://discord.gg/fakeyou", @@ -178,6 +186,8 @@ export default function AITools() { // ); // } + const discordItem = items.find(item => item.imgAlt === "Discord Link"); + if (currentPath.includes("/tts")) { items = items.filter(item => item.to !== "/tts"); } @@ -186,19 +196,6 @@ export default function AITools() { items = items.filter(item => item.to !== "/voice-conversion"); } - if (currentPath.includes("/beta/")) { - items = items.filter( - item => - item.to !== "/tts" && - item.to !== "/voice-conversion" && - item.to !== "/voice-designer" && - item.to !== "/face-animator" && - item.to !== "/beta/2d-video-compositor" && - item.to !== "/beta/3d-video-compositor" && - item.to !== "/beta/webcam-acting" - ); - } - if (currentPath.includes("/tts")) { items = [items[0], items[1], items[2], items[3], items[4], items[5]]; } @@ -212,15 +209,15 @@ export default function AITools() { } if (currentPath.includes("/style-video")) { - items = [items[1], items[2], items[8]]; + items = [items[1], items[2], discordItem].filter(Boolean) as Item[]; } if (currentPath.includes("/face-animator")) { - items = [items[0], items[1], items[8]]; + items = [items[0], items[1], discordItem].filter(Boolean) as Item[]; } if (currentPath.includes("/webcam-acting")) { - items = [items[0], items[1], items[8]]; + items = [items[0], items[1], discordItem].filter(Boolean) as Item[]; } if ( @@ -229,7 +226,7 @@ export default function AITools() { currentPath.includes("/live-portrait") || currentPath.includes("/dev-lp") ) { - items = [items[0], items[2], items[8]]; + items = [items[0], items[2], discordItem].filter(Boolean) as Item[]; } return ; diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx index 002a4c794d..fb5d4664f2 100644 --- a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx +++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx @@ -107,13 +107,17 @@ export function AIToolsItem({

{title}

-
{text}
+ {text && ( +
{text}
+ )} )} {!badgeContent && ( <>

{title}

-
{text}
+ {text && ( +
{text}
+ )} )} diff --git a/src/website/packages/fakeyou.com/src/index.tsx b/src/website/packages/fakeyou.com/src/index.tsx index da8e998167..33365e13af 100644 --- a/src/website/packages/fakeyou.com/src/index.tsx +++ b/src/website/packages/fakeyou.com/src/index.tsx @@ -3,6 +3,7 @@ import ReactDOM from "react-dom"; // import * as serviceWorker from "./serviceWorker"; // import AppTranslated from "./AppTranslated"; import { App } from "./App"; +import { HelmetProvider } from "react-helmet-async"; const designSystemClass = "fakeyou-refresh"; @@ -24,7 +25,9 @@ document.getElementsByTagName("html")[0].classList.add(designSystemClass); ReactDOM.render( - + + + , document.getElementById("root") ); diff --git a/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx index b367377798..a914bf348e 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -445,6 +445,10 @@ const routes = [ path: "/f5-tts", component: lazy(() => import("./pages/f5_tts/F5TTS")), }, + { + path: "/seed-vc", + component: lazy(() => import("./pages/seed_vc/SeedVC")), + }, { path: "/style-video/:mediaToken?", component: lazy(() => import("./pages/style-video")), diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/seed_vc/SeedVC.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/seed_vc/SeedVC.tsx new file mode 100644 index 0000000000..998541a3f6 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/seed_vc/SeedVC.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import { faWaveform } from "@fortawesome/pro-solid-svg-icons"; +import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; +import Countdown from "components/common/Countdown"; +import FAQSection from "components/common/FAQSection"; +// + +const endDate = new Date("2024-10-23T12:00:00-04:00"); + +export default function SeedVC() { + usePrefixedDocumentTitle("Seed-VC Zero-shot Voice Conversion"); + + return ( + <> +
+ +
+ + {/* */} + + + + ); +} + +const faqItems = [ + { + question: "What is Seed-VC Zero-shot Voice Conversion?", + answer: + "Seed-VC Zero-shot Voice Conversion is an advanced AI-powered tool designed for state-of-the-art voice conversion and singing voice conversion. It uses in-context learning to transform one voice into another without any prior training, making it an ideal choice for projects that require versatile voice modification.", + }, + { + question: "How does Seed-VC work?", + answer: + "Seed-VC leverages cutting-edge AI techniques, including zero-shot learning, to convert voices with just a short audio reference (1–30 seconds). It can adapt to both speaking and singing voices, creating natural-sounding results without the need for extensive data or training.", + }, + { + question: "What kind of voice quality can I expect from Seed-VC?", + answer: + "Seed-VC delivers high-quality, natural-sounding voice conversions, suitable for professional applications like dubbing, voice-overs, and even singing voice transformations. The AI is designed to retain the unique qualities of the target voice while maintaining clear and lifelike output.", + }, + { + question: "Can Seed-VC be used for voice-over and dubbing work?", + answer: + "Definitely! Seed-VC's zero-shot capabilities make it perfect for voice-over and dubbing. Whether you need to create different voices for various characters or adapt a voice to a new language, it can handle the task seamlessly. It also supports singing voice conversion, adding flexibility to musical projects.", + }, +]; + +// const howToUseSteps = [ +// { +// icon: faWaveformLines, +// title: "Step 1: Upload Your Audio", +// description: +// "In the panel above, start by adding a reference audio, either record your own voice or upload an audio file. This audio will be used by F5-TTS to clone the voice, enabling the generation of speech that closely resembles the reference voice. For optimal results, ensure the audio is clear and of high quality.", +// }, +// { +// icon: faTextSize, +// title: "Step 2: Enter Your Text", +// description: +// "Next, input the text you wish to convert into speech. This text will be synthesized using the voice from your reference audio, allowing you to create personalized audio content. Ensure your text is clear and concise for the best results.", +// }, +// { +// icon: faArrowDownToLine, +// title: "Step 3: Generate and Save", +// description: ( +// <> +// With your audio and text prepared, click 'Generate Speech' to activate +// F5-TTS and transform your text into lifelike speech. Once the process is +// complete, you can listen to the synthesized audio directly in the output +// panel above. If you're happy with the result, click the download button +// to save the audio file and use it in your projects! +// +// ), +// }, +// ]; diff --git a/src/website/yarn.lock b/src/website/yarn.lock index 1f96efa0c0..3e730a232a 100644 --- a/src/website/yarn.lock +++ b/src/website/yarn.lock @@ -4489,6 +4489,7 @@ __metadata: prettier: ^3.1.0 pretty-quick: ^3.1.3 react-easy-crop: ^5.0.7 + react-helmet-async: ^2.0.5 react-webcam: ^7.2.0 universal-cookie: ^6.1.1 yarn: ^1.22.19 @@ -12559,6 +12560,15 @@ __metadata: languageName: node linkType: hard +"invariant@npm:^2.2.4": + version: 2.2.4 + resolution: "invariant@npm:2.2.4" + dependencies: + loose-envify: ^1.0.0 + checksum: cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14 + languageName: node + linkType: hard + "ip@npm:^1.1.0, ip@npm:^1.1.5": version: 1.1.5 resolution: "ip@npm:1.1.5" @@ -17925,6 +17935,13 @@ __metadata: languageName: node linkType: hard +"react-fast-compare@npm:^3.2.2": + version: 3.2.2 + resolution: "react-fast-compare@npm:3.2.2" + checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704 + languageName: node + linkType: hard + "react-fast-marquee@npm:^1.3.5": version: 1.3.5 resolution: "react-fast-marquee@npm:1.3.5" @@ -17945,6 +17962,19 @@ __metadata: languageName: node linkType: hard +"react-helmet-async@npm:^2.0.5": + version: 2.0.5 + resolution: "react-helmet-async@npm:2.0.5" + dependencies: + invariant: ^2.2.4 + react-fast-compare: ^3.2.2 + shallowequal: ^1.1.0 + peerDependencies: + react: ^16.6.0 || ^17.0.0 || ^18.0.0 + checksum: cc2d13496f6fdee6b5f9472d3f7369db3e70e4fc1a55793708c2bbd90d48b0dedc725fd066f987c7a3d74b03a29bd5e65b9f40fa29bd8239e7cfb526aff4d4b6 + languageName: node + linkType: hard + "react-i18next@npm:^11.15.4": version: 11.15.4 resolution: "react-i18next@npm:11.15.4"