diff --git a/sth-frontend/src/assets/images/jed-villejo-pumko2FFxY0-unsplash.jpg b/sth-frontend/src/assets/images/jed-villejo-pumko2FFxY0-unsplash.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bc7c7ae7a63b9c06eaed5ce987026d3f0eee3450
Binary files /dev/null and b/sth-frontend/src/assets/images/jed-villejo-pumko2FFxY0-unsplash.jpg differ
diff --git a/sth-frontend/src/assets/svg/Accessibility.svg b/sth-frontend/src/assets/svg/Accessibility.svg
new file mode 100644
index 0000000000000000000000000000000000000000..af636f6680d0602da6bfbd03fb8be9c6c4e67d55
--- /dev/null
+++ b/sth-frontend/src/assets/svg/Accessibility.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="24" stroke-width="1.5" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 9L12 10M17 9L12 10M12 10V13M12 13L10 18M12 13L14 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 7C11.7239 7 11.5 6.77614 11.5 6.5C11.5 6.22386 11.7239 6 12 6C12.2761 6 12.5 6.22386 12.5 6.5C12.5 6.77614 12.2761 7 12 7Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/HdM Stuttgart.svg b/sth-frontend/src/assets/svg/HdM Stuttgart.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ad89e93f7f7d963cc78da4c385191c1199f22b97
--- /dev/null
+++ b/sth-frontend/src/assets/svg/HdM Stuttgart.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9;rotate: 180deg" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><title/><g id="_2"><path d="M5,29H3V5H5ZM9,5H7V25H9Zm5,0H12V25h2ZM24,5H22V25h2ZM17,5H15V29h2Zm4,0H19V25h2Zm8,0H27V29h2Z" id="barcode_bar_code_clean"/></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/League of Legends.svg b/sth-frontend/src/assets/svg/League of Legends.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d7d08ec7a184c33a8eca388b7c962d3fc29dbf37
--- /dev/null
+++ b/sth-frontend/src/assets/svg/League of Legends.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9" data-name="Слой 1" id="Слой_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><title/><path d="M119,106H106.67a56,56,0,0,0,14.61-37.35A57.34,57.34,0,0,0,64,11.37a29,29,0,0,0-4,.3V2a2,2,0,0,0-2-2H19.57a2,2,0,0,0-1.51,3.31L28,14.75v9.36a57.25,57.25,0,0,0,0,89.08v.06l-9.94,11.44A2,2,0,0,0,19.57,128H104.3a2,2,0,0,0,1.55-.73l14.7-18A2,2,0,0,0,119,106ZM64,15.37a53.34,53.34,0,0,1,53.28,53.28c0,13.82-5.72,27.05-16.11,37.35H60V15.71A24.83,24.83,0,0,1,64,15.37ZM10.72,68.65A53,53,0,0,1,28,29.39v78.52A53,53,0,0,1,10.72,68.65ZM103.35,124H24l7.55-8.69A2,2,0,0,0,32,114V14a2,2,0,0,0-.49-1.31L24,4H56V108a2,2,0,0,0,2,2h56.78Z"/></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/PayPal.svg b/sth-frontend/src/assets/svg/PayPal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..69b30d2833cd998bdbac8340adf5fdcb9d6d5e40
--- /dev/null
+++ b/sth-frontend/src/assets/svg/PayPal.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9" data-name="Слой 1" id="Слой_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><title/><path d="M112.8,38.34a21.66,21.66,0,0,0-4.67-4.1c.72-9.81-1.55-18-6.66-24C95.68,3.55,86.43,0,74.7,0H32.9A7,7,0,0,0,26,5.81L9.7,102.88A7,7,0,0,0,16.57,111H35.8l-1.63,8.76A7,7,0,0,0,41,128h16.5a7,7,0,0,0,6.86-5.76l4.55-25.79A3,3,0,0,1,71.87,94H81.7c19.26,0,33-11.37,36-29.68C119.49,53,117.85,44.26,112.8,38.34ZM16.57,107a3,3,0,0,1-2.92-3.46L30,6.47h0A3,3,0,0,1,32.9,4H74.7c10.53,0,18.74,3.07,23.74,8.88,4.1,4.76,6.06,11.36,5.8,19.28C99.35,30.05,93.22,29,85.7,29H56.83A7,7,0,0,0,50,34.69L36.55,107ZM53.91,35.42h0A3,3,0,0,1,56.83,33H85.7c7.55,0,13.63,1.16,18.19,3.45-.06.42-.11.83-.17,1.25-3,20.11-15.13,30.3-36,30.3H49.59a7.09,7.09,0,0,0-1.78.26Zm59.81,28.26C111.09,80.16,99.12,90,81.7,90H71.87A7,7,0,0,0,65,95.76l-4.55,25.79A3,3,0,0,1,57.53,124H41a3,3,0,0,1-2.92-3.51l2.62-14.11,5.94-32A3,3,0,0,1,49.59,72H67.7c22.66,0,36.44-11.47,39.89-33.17a17.34,17.34,0,0,1,2.17,2.11C114,45.92,115.34,53.57,113.72,63.68Z"/></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/World.svg b/sth-frontend/src/assets/svg/World.svg
new file mode 100644
index 0000000000000000000000000000000000000000..345cd251b87c06a4758435b7b41b6c975d67507a
--- /dev/null
+++ b/sth-frontend/src/assets/svg/World.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M256,48c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1,0c-0.1,0-0.2,0-0.2,0C140.8,48.3,48,141.3,48,256c0,114.7,92.8,207.7,207.5,208 c0.1,0,0.2,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c114.9,0,208-93.1,208-208C464,141.1,370.9,48,256,48z M264.3,172.5 c22.1-0.6,43.5-3.5,64.2-8.5c6.2,24.5,10.1,52.8,10.7,83.8h-74.9V172.5z M264.3,155.8V66c22.4,6.2,45.2,36.1,59.6,82 C304.7,152.6,284.8,155.2,264.3,155.8z M247.7,65.8v90.1c-20.7-0.6-40.8-3.3-60.1-8C202.2,101.7,225.1,71.6,247.7,65.8z M247.7,172.5v75.2h-75.4c0.6-31,4.5-59.3,10.7-83.8C203.8,168.9,225.5,171.9,247.7,172.5z M155.5,247.7H64.9 c1.8-42.8,17.8-82,43.3-113c18.5,10.2,38.2,18.6,58.8,24.8C160.2,186,156.2,215.9,155.5,247.7z M155.5,264.3 c0.6,31.7,4.6,61.7,11.4,88.2c-20.6,6.3-40.2,14.6-58.8,24.8c-25.5-31-41.4-70.2-43.3-113H155.5z M172.3,264.3h75.4v75.1 c-22.2,0.6-43.9,3.6-64.7,8.7C176.8,323.6,172.9,295.3,172.3,264.3z M247.7,356.1v90.2c-22.6-5.9-45.5-35.9-60.1-82.1 C206.9,359.4,227,356.7,247.7,356.1z M264.3,446v-90c20.5,0.6,40.4,3.3,59.7,7.9C309.5,409.9,286.8,439.8,264.3,446z M264.3,339.4 v-75.1h74.9c-0.6,30.9-4.5,59.2-10.7,83.7C307.8,343,286.4,340,264.3,339.4z M355.9,264.3h91.2c-1.8,42.8-17.8,81.9-43.3,113 c-18.7-10.3-38.5-18.7-59.3-25C351.3,325.8,355.3,296,355.9,264.3z M355.9,247.7c-0.6-31.7-4.6-61.6-11.3-88.1 c20.8-6.3,40.6-14.7,59.2-24.9c25.5,31,41.5,70.2,43.3,113.1H355.9z M392.4,121.9c-16.6,8.8-34,16.1-52.3,21.6 c-9.7-31.3-23.4-56.8-39.5-73.6C336,78.4,367.6,96.8,392.4,121.9z M210.8,70.1c-16.1,16.7-29.7,42.2-39.3,73.3 c-18.1-5.5-35.4-12.7-51.8-21.5C144.2,96.9,175.6,78.6,210.8,70.1z M119.6,390c16.4-8.8,33.8-16,51.8-21.5 c9.7,31.2,23.3,56.6,39.4,73.4C175.6,433.4,144.2,415.1,119.6,390z M300.6,442.1c16.2-16.8,29.8-42.3,39.6-73.7 c18.3,5.5,35.7,12.8,52.3,21.6C367.7,415.2,336,433.6,300.6,442.1z"/></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/apple.svg b/sth-frontend/src/assets/svg/apple.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b50d6f36bda60ff6a016cdebdeaaaf25d1e3b6c7
--- /dev/null
+++ b/sth-frontend/src/assets/svg/apple.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9" enable-background="new 0 0 164.3715 208.904" id="apple" version="1.1" viewBox="0 0 164.3715 208.904" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M124.9439,4.2184L124.7211,0l-4.1992,0.4528c-0.41,0.0432-41.0095,4.9376-43.7928,50.3244L76.4499,55.32l4.5428-0.3085 C81.4575,54.9804,127.4359,51.3104,124.9439,4.2184z M117.0179,9.2888C116.2524,36.6424,94.9751,44.25,85.2075,46.3024 C88.9263,19.7184,108.2035,11.6208,117.0179,9.2888z"/><path d="M164.0707,150.068l-2.5564-0.826c-15.4668-5-25.8576-19.17-25.8576-35.258c0-14.3125,8.0936-27.1132,21.1232-33.408 l3.8868-1.8768l-2.168-3.7328c-0.93-1.6012-9.6056-15.7732-27.932-20.4629c-14.5368-3.7203-30.8808-0.4295-48.5976,9.7873 c-7.498-4.5528-32.412-17.674-52.2304-4.5216c-3.8788,2.1448-45.002,26.7796-23.5996,93.254 c0.6288,1.4883,15.5528,36.4532,33.2128,49.5468c4.764,4.5528,16.9492,10.2404,30.8712,0.748 c2.412-0.994,18.5528-7.2068,28.7933,0.0664c3.7791,2.588,10.3807,5.5196,17.3531,5.5196c5.2872,0,10.7892-1.6856,15.4356-6.4845 c2.168-1.8767,21.9708-19.5527,32.2656-47.5507l0.3008-0.8164L164.0707,150.068z M126.4635,196.4608l-0.3088,0.2907 c-8.7732,9.2133-22.0703,0.4005-22.5644,0.0725c-5.2304-3.7188-11.2928-4.9316-16.9764-4.9316 c-10.3164,0-19.3868,3.994-19.9668,4.256l-0.6524,0.3688c-12.0743,8.428-20.344,1.014-21.2208,0.168l-0.4708-0.404 c-15.9724-11.6484-30.6504-46.0297-30.6716-46.0412C-6.4017,87.9684,31.9731,67.6012,33.6039,66.7712l0.4416-0.2576 c18.588-12.4804,45.3064,5.5819,45.572,5.7656l2.1312,1.4628l2.2068-1.334c16.6409-10.0584,31.6564-13.4784,44.6272-10.1544 c10.5664,2.7032,17.3044,9.3068,20.5996,13.3672c-13.3868,8.2052-21.5256,22.5196-21.5256,38.3632 c0,18.2228,10.9416,34.416,27.6096,41.4612C145.0084,180.488,126.6567,196.2968,126.4635,196.4608z"/></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/beerpong league.svg b/sth-frontend/src/assets/svg/beerpong league.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b585594cc89111bd0fc4741ede29180bd79b598a
--- /dev/null
+++ b/sth-frontend/src/assets/svg/beerpong league.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M5.596 9.356c.618.135 1.048-.188.994-.726-.053-.538-.56-.665-.913-.457-.457.27-.7 1.05-.08 1.183zm4.89-.592c.62.135 1.05-.188.995-.726-.052-.538-.56-.665-.912-.457-.457.27-.7 1.05-.08 1.184zM12.53 4.38c.617.134 1.047-.188.993-.726-.054-.538-.56-.665-.914-.457-.457.268-.7 1.048-.08 1.183zm5.912 1.748c.618.134 1.048-.188.994-.726-.054-.538-.56-.665-.914-.457-.457.27-.7 1.05-.08 1.183zm-3.198 3.336c.618.134 1.048-.188.994-.726-.054-.538-.56-.665-.914-.457-.457.27-.698 1.05-.08 1.184zm5.267.457c.62.136 1.05-.187.995-.725-.054-.538-.56-.665-.914-.457-.455.268-.697 1.048-.08 1.183zm4.677-4.007c.618.134 1.048-.188.994-.726-.053-.538-.56-.665-.913-.457-.457.27-.698 1.05-.08 1.183zm.24 2.717c-.456.27-.698 1.05-.08 1.184.618.134 1.048-.188.994-.726-.052-.54-.56-.666-.912-.458zm8.332.94c.617.135 1.047-.187.993-.725-.053-.538-.56-.665-.913-.457-.457.27-.7 1.05-.08 1.183zm.134-3.415c.618.134 1.048-.188.994-.726-.054-.54-.56-.666-.914-.458-.457.27-.7 1.05-.08 1.183zm5.482 3.174c.618.133 1.048-.19.994-.727-.054-.538-.56-.665-.914-.457-.457.27-.698 1.05-.08 1.183zm-25.154 7.45c.08 0 .054-1.13-.134-1.372-.188-.242-2.5-.296-4.192-.054s-3.708.838-3.708.995c0 .214.16 1.21.27 1.317.107.108 1.423-.188 2.982-.646 1.558-.455 4.702-.24 4.782-.24zm-5.535 3.308c-.188.296-.376 4.088-.215 7.1s2.23 26.603 2.31 27.222c.082.62 1.157 2.044 3.172 1.775s2.42-1.695 2.58-3.9c.16-2.206 0-32.143-.994-32.6-.995-.457-6.362-.37-6.853.403zm6.664 24.236c-.08 6.59-.16 10.167-1.8 10.275-1.64.107-1.585-1.453-1.8-5.57-.216-4.114-1.103-16.703-1.398-20.334-.296-3.63-.43-7.505-.27-7.72.29-.385 4.354-.403 4.462-.188.108.215.888 16.946.807 23.536zm9.944-25.688c-1.585 0-3.99.318-4.165.78-.727 1.91.026 27.113.16 29.346.134 2.233.188 6.778 3.547 6.644 3.36-.135 3.413-2.744 3.628-5.97.215-3.23.242-29.643.16-29.965-.08-.323-1.745-.834-3.33-.834zm1.64 32.466c-.028.753-1.076 2.502-2.205 2.448-1.13-.054-1.667-1.13-1.802-2.636-.134-1.506-1.075-29.642-.242-30.53.25-.266 4.058-.24 4.3.028.243.268-.026 29.937-.053 30.69zm4.944-32.116c-.403.323.054 30.233.242 32.305.188 2.072.86 4.332 3.144 4.25 2.284-.08 3.17-1.747 3.44-4.034.27-2.286.806-32.385.484-32.627-.323-.244-7.025-.123-7.31.106zm5.294 32.708c-.242 1.318-.78 2.044-1.854 1.99s-1.424-.672-1.505-2.367c-.08-1.695-.484-30.69-.215-31.094.26-.39 3.816-.323 4.004-.188.188.134-.188 30.34-.43 31.66zM61.465 19.98c-.86-4.41-13.33-3.334-13.33-3.334s.162-3.82.055-4.573c-.108-.753-2.687-1.184-2.687-1.184s1.774-2.852-.752-6.188c-2.525-3.335-6.717-1.237-6.88-1.29-.16-.055-.375-.862-1.988-1.4-1.612-.538-4.192.215-4.515.215s-.16-1.184-3.01-1.56c-2.85-.377-4.246.914-4.568.914S22.66.237 20.35.02c-2.312-.214-3.602 1.184-3.602 1.184s-.322-.323-.59-.538c-.27-.215-2.097-1.13-4.623-.27C9.01 1.26 7.29 3.682 7.29 3.682 3.633 1.476.946 5.403 1 8.308c.055 2.905 1.882 4.25 1.882 4.25s-1.612.7-1.774 1.022 1.29 6.186 1.935 13.932c.645 7.747.806 35.99 1.344 36.205.538.215 43.212.484 43.373.054.16-.43.054-8.176.108-8.5.054-.322 9.352-.107 9.997-.376.645-.27 2.204-2.313 3.225-10.006 1.02-7.692 1.235-20.496.375-24.907zM2.345 8.36c0-1.613 1.047-3.47 2.498-3.818 1.45-.35 2.15.672 2.15.672s-.214 1.345.08 1.533c.297.188 1.21.108 1.21 0s-.16-1.103.7-2.448c.86-1.346 2.095-2.234 3.896-2.637 1.8-.403 3.09.457 3.01.726-.082.268-1.828 2.366-1.72 2.635.107.27.966.323 1.128.215.16-.108 2.5-3.013 3.01-3.335.51-.323 1.88-.565 2.875-.16.994.402 1.478 1.102 1.397 1.263-.08.16-1.02 2.206-.914 2.34.107.134 1.155.323 1.236.134.08-.188.376-2.313 2.795-2.96 2.42-.645 4.38.43 4.676.89.296.456.376.618.296.752-.082.135-.62 1.372-.54 1.452s1.13.215 1.21.054c.08-.16 1.102-2.017 1.64-2.152.536-.134 3.654-.027 3.627.834-.027.86-.134 1.372.134 1.452.27.08.78.108.942.027.16-.08 1.263-1.532 3.413-1.478 2.15.054 3.332 2.367 3.413 3.524.08 1.157-.188 2.367-.51 2.582-.323.215-22.52.215-28.782.51-6.26.297-10.346.89-10.776.835-.3-.037-2.096-1.828-2.096-3.442zM43.352 46.8c.215.296 1.612 1.802 1.612 2.098s.27 2.555.054 2.367c-.216-.188-2.258-2.77-2.446-2.744-.188.026-.564 1.182-.376 1.37.188.19 2.822 2.664 2.822 2.96 0 .296.08 2.69 0 2.69s-3.09-4.41-3.36-4.384c-.268.027-.805 1.076-.644 1.345.16.27 4.112 5.192 4.192 5.596s.108 3.093 0 2.986c-.108-.108-3.762-5.702-4.085-5.702s-.645.807-.484 1.05 3.493 4.814 3.278 4.84c-.215.028-1.21.162-1.29.028-.08-.134-2.472-3.604-2.714-3.658-.242-.054-1.02.377-.94.484.08.108 2.23 3.147 1.988 3.174-.242.027-1.585-.027-1.585-.027s-1.693-2.42-2.042-2.5c-.35-.082-1.156.43-1.102.59.054.162 1.935 1.965 1.532 2.1-.403.133-17.387.24-21.337.35-3.95.107-9.083-.136-9.244-.136s-.03-9.012-.137-14.634C6.94 41.42 5.784 29.1 5.274 23.37s-.887-8.473-.78-8.66c0 0 2.473-.727 6.692-1.13 4.22-.404 26.04-.808 28.486-.727 2.445.08 5.59.323 5.697.565.106.242-.19 33.46-.27 33.407-.08-.054-1.048-1.022-1.21-1.022s-.752.7-.537.995zm15.855-8.204c-.188 3.63-2.177 13.234-2.768 13.503-.59.27-8.626.7-8.626.242 0-.458-.35-2.26-.054-2.287.296-.027 4.89.377 6.718-1.452 1.827-1.828 1.962-6.266 2.284-10.866.322-4.6.27-7.666-.215-9.656-.484-1.99-1.99-2.932-2.526-3.093-.536-.16-6.395.296-6.368-.134.027-.43.054-6.374.27-6.374.133 0 8.867-.296 10.345 1.157 1.48 1.45 1.13 15.33.94 18.96zM47.76 26.814c.23-.232 4.837-.324 5.697.752.86 1.076.806 10.383.645 13.234-.16 2.85-.59 5.65-.967 5.918-.376.27-5.213 1.076-5.32.377-.11-.7-.485-19.852-.055-20.282zm2.23-7.264c-.106.054-.402 1.318-.32 1.695.08.377 4.567.62 4.756.51.188-.107.322-1.72 0-1.936-.324-.216-4.363-.306-4.435-.27z"/></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/mercedes.svg b/sth-frontend/src/assets/svg/mercedes.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ffa6d9652ed0910dd7836f3c09bf75e42ae348f2
--- /dev/null
+++ b/sth-frontend/src/assets/svg/mercedes.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg"><title/><g id="Layer_51"><path d="M286,123.2c0-3-.91-3.1-1.15-.11l-9.56,142.59,9.52,5.57Z"/><path d="M241.35,299l40.16-22.25-9.12-5.07L240.22,298C238.43,299.54,239.23,300.18,241.35,299Z"/><path d="M286.69,46.83C159.34,46.77,56.05,149,56.05,275S159.27,503.13,286.69,503.17,517.42,401,517.42,275,414.2,46.83,286.69,46.83Zm0,447.65c-86.67,0-154.68-45.05-187.06-107l5-1.83c8.42,13.72,19.41,25.79,34.18,42.1,18.21,20,75.78,58.63,147.83,58.63A213.36,213.36,0,0,0,468.5,385.86c2.91-.82,3.84-2.08,2.87-4.61,17.32-30.51,29.08-68.84,29.08-106.29,0-23.59-3.46-42.78-8.95-59.93a236.75,236.75,0,0,0-12.38-30.86,5.42,5.42,0,0,1-.81-2.94,6.89,6.89,0,0,1,2.05,2.5c3.35,6.11,10.85,21.08,14.37,30.82,4.75,13,13.22,31,13.22,60.41C508,395,409.65,494.55,286.69,494.48ZM102,382.18l161.53-116.1-13.82-7.88L105.8,377.82c-16.16-29.29-27.39-66.89-27.39-102.65,0-113.25,90.16-204.93,204.32-205.63L253.28,252.69l13.76,8,18.5-191.12c.35-2.41,2-2.41,2,0l1.09,201.54,32.78-19.24L290,69.5c112.2,3,205.16,93.49,205.16,205.31,0,36.06-10.9,73.72-27.4,103.19L324,258.27l-13.84,7.9L464.68,378.22c3.71,2.64,2.57,3.84-1.38,1.64L289.79,279.8v37.5L463.7,383.74c-36.45,59.44-102.19,97.46-177.46,97.46-75.43,0-140.11-38-176.56-97.53L283.9,317.18V279.69L103.48,383.9C99.2,386.26,98.06,384.94,102,382.18Zm-4.44,2.22c-7.63-15.81-15.67-38.09-19-55.72a6.51,6.51,0,0,1,.12-2.79,10.11,10.11,0,0,1,1.27,2.71c5.23,16.18,9.8,30.73,21.73,52.59ZM507.62,236.29a9.4,9.4,0,0,1-1.26-2.6c-16.86-52-31.22-72.43-58.9-102.81-36.47-40-96-70.93-159.36-71C167,59.87,68.76,158.14,68.76,279.22c0,36,7.85,67.09,14.16,82.71,7.4,18.11,20.2,42.5,20.84,43.6a6.5,6.5,0,0,1,.68,2.9,8.6,8.6,0,0,1-2.07-2.4C98.7,400.7,83.66,373.61,79,361.77,68.76,336,61.24,307.89,61.24,278.39c0-124.8,101-226,225.89-226,111.56,0,201.5,77.5,220.49,181.23A6.39,6.39,0,0,1,507.62,236.29Z"/><path d="M420.56,350.93l-118.9-79.68-9.78,5.59,128.11,75C422.27,353.15,422.75,352.34,420.56,350.93Z"/></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/people.svg b/sth-frontend/src/assets/svg/people.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8b8c10c58d8bb6b686b84f78ba1c7119bf9365b4
--- /dev/null
+++ b/sth-frontend/src/assets/svg/people.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;stroke:#272525;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title/><g id="_79-users"><circle class="cls-1" cx="16" cy="13" r="5"/><path class="cls-1" d="M23,28A7,7,0,0,0,9,28Z"/><path class="cls-1" d="M24,14a5,5,0,1,0-4-8"/><path class="cls-1" d="M25,24h6a7,7,0,0,0-7-7"/><path class="cls-1" d="M12,6a5,5,0,1,0-4,8"/><path class="cls-1" d="M8,17a7,7,0,0,0-7,7H7"/></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/stars.svg b/sth-frontend/src/assets/svg/stars.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2b69d4cabfbbf4bec6b9ad1acbf38f1b2935d695
--- /dev/null
+++ b/sth-frontend/src/assets/svg/stars.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;stroke:#272525;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title/><g id="Layer_2"><g id="Interface-Light"><g id="interface-light-rating-stars"><path class="cls-1" d="M15.58.92,16.68,4a.63.63,0,0,0,.56.43l3.16.13a.65.65,0,0,1,.36,1.16L18.28,7.8a.65.65,0,0,0-.22.68l.86,3.19a.63.63,0,0,1-.94.72l-2.64-1.84a.57.57,0,0,0-.68,0L12,12.39a.63.63,0,0,1-.94-.72l.86-3.19a.65.65,0,0,0-.22-.68l-2.48-2A.65.65,0,0,1,9.6,4.59l3.16-.13A.63.63,0,0,0,13.32,4L14.42.92A.61.61,0,0,1,15.58.92Z"/><path class="cls-1" d="M7.08,17.92,8.18,21a.63.63,0,0,0,.56.43l3.16.13a.65.65,0,0,1,.36,1.16L9.78,24.8a.65.65,0,0,0-.22.68l.86,3.19a.63.63,0,0,1-.94.72L6.84,27.55a.57.57,0,0,0-.68,0L3.52,29.39a.63.63,0,0,1-.94-.72l.86-3.19a.65.65,0,0,0-.22-.68L.74,22.75a.65.65,0,0,1,.36-1.16l3.16-.13A.63.63,0,0,0,4.82,21l1.1-3.11A.61.61,0,0,1,7.08,17.92Z"/><path class="cls-1" d="M24.08,17.92,25.18,21a.63.63,0,0,0,.56.43l3.16.13a.65.65,0,0,1,.36,1.16L26.78,24.8a.65.65,0,0,0-.22.68l.86,3.19a.63.63,0,0,1-.94.72l-2.64-1.84a.57.57,0,0,0-.68,0l-2.64,1.84a.63.63,0,0,1-.94-.72l.86-3.19a.65.65,0,0,0-.22-.68l-2.48-2.05a.65.65,0,0,1,.36-1.16l3.16-.13a.63.63,0,0,0,.56-.43l1.1-3.11A.61.61,0,0,1,24.08,17.92Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/tesla motors.svg b/sth-frontend/src/assets/svg/tesla motors.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e4bc553cb7ff60d2a5da094f3581e5cb4445e4d8
--- /dev/null
+++ b/sth-frontend/src/assets/svg/tesla motors.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg style="fill: #D9D9D9" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g id="Logos"><g id="Tesla"><path d="M23.12,7.91,20,11.72,16.88,7.91A27.78,27.78,0,0,0,6.26,10.52a8.74,8.74,0,0,0,4.05,3c.06-1.54,1.39-1.95,2.8-2.1a22,22,0,0,1,2.64-.1L20,35l4.25-23.67a22,22,0,0,1,2.64.1c1.41.15,2.74.56,2.8,2.1a8.74,8.74,0,0,0,4.05-3A27.78,27.78,0,0,0,23.12,7.91Z"/><path d="M20,5A43.14,43.14,0,0,0,4.94,7.91a10.32,10.32,0,0,0,.83,1.77A34.56,34.56,0,0,1,20,6.86,34.56,34.56,0,0,1,34.23,9.68a10.32,10.32,0,0,0,.83-1.77A43.14,43.14,0,0,0,20,5Z"/></g></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/tesla.svg b/sth-frontend/src/assets/svg/tesla.svg
new file mode 100644
index 0000000000000000000000000000000000000000..68a9e1fccbcdd9d95c6670b3e8528b25135a19d7
--- /dev/null
+++ b/sth-frontend/src/assets/svg/tesla.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:#ed0714;}.cls-2{stroke:#4b4c4c;stroke-miterlimit:10;stroke-width:1.21px;fill:url(#linear-gradient);}.cls-3{fill:#f90629;}</style><linearGradient gradientUnits="userSpaceOnUse" id="linear-gradient" x1="55.6" x2="491.5" y1="311.44" y2="311.44"><stop offset="0" stop-color="#fff"/><stop offset="0.22"/><stop offset="0.38" stop-color="#c1c0c0"/><stop offset="0.72" stop-color="#212121"/><stop offset="0.98" stop-color="#d9dee2"/></linearGradient></defs><title/><g id="Short_Light"><g id="Layer_8"><path class="cls-1" d="M290.67,207.12l-18,21.56-18-21.56c-28.15-.93-92.84.91-132,15.82,5.38,9.55,29,23.26,41.9,26.25.72-18.86,29.25-22.77,56.75-22.77l51.37,257.35L324.1,226.42c27.47,0,56,3.91,56.75,22.77,12.94-3,36.45-16.7,41.92-26.25C383.52,208,318.82,206.19,290.67,207.12Z"/><path class="cls-2" d="M470.17,159.83c-3.83,22.46-8.11,45.3-14.77,69a676,676,0,0,1-38.52,104.81c-17.73,38.22-44.73,79.43-73.29,110.76s-58.84,56.15-71.79,61c-13-4.9-41.58-29.62-70.07-61S146.25,371.22,128.5,333c-15.61-33.67-27.32-66.47-37.93-104.33a649.6,649.6,0,0,1-15.46-67.75c-4.36-25.22-6.59-46.1-9.68-74.89l-9.83,9c.15,23.37,4.17,44.75,8,67.68,3.8,23.15,8.6,47,14.56,69.26,8,30.24,19.34,68.69,36.86,107.55,18.81,41.84,42,82.4,69.92,117.39,25.87,32.38,55.88,59.95,86.9,80.18,31.08-20.23,61-47.8,86.9-80.18,27.89-35,51.1-75.55,70-117.39,17.54-38.86,28.8-77.31,36.88-107.55,5.94-22.29,10.76-46.11,14.52-69.26,3.87-22.93,9.37-46,11.44-68.24l-12.38-8.75C477.55,113.92,474.46,134.61,470.17,159.83Z"/><path class="cls-3" d="M114.47,211.08c38.11-12.48,83.29-18.43,131-19.81,18-.57,36.41-.57,54.48,0,47.64,1.38,92.87,7.33,131,19.81L441,197.31c-45-14.21-92.72-18.9-140.47-20.1-18.47-.45-37.11-.45-55.56,0-47.77,1.2-95.52,5.89-140.47,20.1Z"/><path d="M123.49,324.85c10.87,23,22.31,45.12,36.06,65.94,31.35,47.65,68.65,88.55,113.14,117,44.54-28.45,81.8-69.35,113.2-117,13.68-20.82,25.18-43,36-65.94C455,254.72,475,165.24,480.49,86c-18.55-13.68-38.85-23.76-59.67-32.13a398.14,398.14,0,0,0-60.39-19.09A392.78,392.78,0,0,0,124.53,53.9C103.79,62.27,83.44,72.35,64.86,86,70.37,165.24,90.36,254.72,123.49,324.85Zm2.36-268.13c18.51-7.48,39.1-14.51,59.9-19.07a406.82,406.82,0,0,1,173.94,0c20.75,4.56,41.41,11.59,59.88,19.07,24.11,9.78,44.7,20.74,57.85,30.73-3.2,62.66-20,152.56-59.1,236.85a547.71,547.71,0,0,1-35.48,65.16c-33.2,52.22-76.92,93.82-110.15,115.11-33.2-21.29-76.94-62.89-110.16-115.11A565.53,565.53,0,0,1,127,324.3C88.05,240,71.22,150.11,68,87.45,81.17,77.46,101.68,66.5,125.85,56.72Z"/><polygon class="cls-1" points="401.18 151.87 410.19 151.87 410.19 133.06 443.02 133.06 443.02 151.87 452.04 151.87 452.04 123.64 401.18 123.57 401.18 151.87"/><path class="cls-1" d="M257.9,142.61c-4.74,1.87-8.26,5-9.26,9.07l-.16.4h50.9V123.74H257.52v-9.19h32.22c4.87-1.42,8.43-5,9.4-9.2H248.48V133h41.87v9.61Z"/><path class="cls-1" d="M374.64,142.49H334.35l.06-37.14h-9v46.23l41.35.1A12.86,12.86,0,0,0,374.64,142.49Z"/><path class="cls-1" d="M409,114.65h34.89c4.92-1.86,8.37-5.08,9.38-9.25H399.4C400.36,109.57,404.13,112.79,409,114.65Z"/><path class="cls-1" d="M177.83,114.82h34.95c4.92-1.86,8.49-5.19,9.45-9.38H168.36C169.33,109.63,173,113,177.83,114.82Z"/><path class="cls-1" d="M177.83,152h34.95c4.92-1.84,8.49-5.32,9.45-9.41H168.36C169.33,146.7,173,150.18,177.83,152Z"/><path class="cls-1" d="M96.49,114.72h14.68l.76.27v37.09h9.17V115l.83-.27h14.7c4.83-1.89,8.41-5.19,9.45-9.37v-.12H87v.12C88.08,109.53,91.64,112.83,96.49,114.72Z"/><path class="cls-1" d="M177.83,133h34.95c4.92-1.78,8.49-5.3,9.45-9.37H168.36C169.33,127.7,173,131.22,177.83,133Z"/></g></g></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/assets/svg/tournament.svg b/sth-frontend/src/assets/svg/tournament.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6c258b781d351ff1b5aeee29c3ff86e9133ecfdb
--- /dev/null
+++ b/sth-frontend/src/assets/svg/tournament.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg class="icon icon-tabler icon-tabler-tournament" fill="none" height="24" stroke="#272525" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" stroke="none"/><path d="M5 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4"/><path d="M5 14h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4"/><path d="M10 7h4a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-4"/><line x1="15" x2="20" y1="12" y2="12"/></svg>
\ No newline at end of file
diff --git a/sth-frontend/src/features/landingpage/components/Features.jsx b/sth-frontend/src/features/landingpage/components/Features.jsx
index 22c7b72344ae334805ea87fcc6e5d7bbbfb32838..914f0d2b5490e55ef4dc567656b0d40d79051bab 100644
--- a/sth-frontend/src/features/landingpage/components/Features.jsx
+++ b/sth-frontend/src/features/landingpage/components/Features.jsx
@@ -1,29 +1,34 @@
import React from "react";
+import people from "../../../assets/svg/people.svg"
+import stars from "../../../assets/svg/stars.svg"
+import tournament from "../../../assets/svg/tournament.svg"
+
+const Highlights = ({imgSrc, imgAlt, desc}) => (
+ <div className='flex flex-col items-center w-[345px] h-[250px] bg-lightGray rounded-2xl'>
+ <img src={imgSrc} alt={imgAlt} className='w-[70px] h-[70px]'/>
+ <div className='text-darkGray text-center font-outfit font-medium text-2xl'>
+ {desc}
+ </div>
+ </div>
+);
const Features = () => {
return (
- <div className='flex flex-col items-center gap-10 w-[1065px] h-[450px] ml-[15%] mt-10 bg-deepPurple'>
- <div className='flex justify-center text-darkGray font-Outfit-ExtraBold font-bold text-7xl uppercase'>
- How it works
- </div>
- <div className='flex gap-2'>
- <div className='flex flex-col w-[345px] h-[250px] bg-lightGray rounded-2xl'>
- <div className='text-darkGray text-center font-Outfit-Regular font-medium text-2xl'>
- Bring People together and Game
- </div>
- </div>
- <div className='flex flex-col w-[345px] h-[250px] bg-lightGray rounded-2xl'>
- <div className='text-darkGray text-center font-Outfit-Regular font-medium text-2xl'>
- Create your type of Tournament and let our Engine handle your Experience. Anything is possible
- </div>
+
+ <div className='flex flex-col items-center gap-10 w-[1065px] h-[450px] ml-[15%] mt-10 bg-deepPurple'>
+ <div className='flex justify-center text-darkGray font-Outfit-ExtraBold font-bold text-7xl uppercase'>
+ How it works
</div>
- <div className='flex flex-col w-[345px] h-[250px] bg-lightGray rounded-2xl'>
- <div className='text-darkGray text-center font-Outfit-Regular font-medium text-2xl'>
- Bring on your Winner of the Tournament and give out MVP Medals for the best Players
- </div>
+ <div className='flex gap-2'>
+ <Highlights imgSrc={people} imgAlt='People' desc='Bring People together and Game'/>
+ <Highlights imgSrc={tournament} imgAlt='Tournament'
+ desc='Create your type of Tournament and let our Engine handle your Experience. Anything is possible'/>
+ <Highlights imgSrc={stars} imgAlt='Stars'
+ desc='Bring on your Winner of the Tournament and give out MVP Medals for the best Players'/>
</div>
</div>
- </div>
+
+
)
}
diff --git a/sth-frontend/src/features/landingpage/components/Footer.jsx b/sth-frontend/src/features/landingpage/components/Footer.jsx
index 20d5371274891905286fd9f39dcd8a5af809ec6a..d298fc439f535fab6e8c8473a46703553ff8a981 100644
--- a/sth-frontend/src/features/landingpage/components/Footer.jsx
+++ b/sth-frontend/src/features/landingpage/components/Footer.jsx
@@ -1,10 +1,70 @@
import React from "react";
+import accessibility from '../../../assets/svg/Accessibility.svg'
+import world from '../../../assets/svg/World.svg'
+
+const DATAHUB = ['Tournament', 'MVP', 'Extras', 'Options', 'Types']
+const DATAINFO = ['Infos', 'Demo', 'Stuff', 'Options', 'Types']
+const DATAPRICE = ['Pricing', 'Features', 'Extras', 'Options', 'Specials']
+const DATALEGAL = ['Tournament', 'MVP', 'Extras', 'Options', 'Types']
+const DATASUPPORT = ['Tournament', 'MVP', 'Extras', 'Options', 'Types']
+
+const InfoBox = ({infoCategory, arrName}) => {
+
+ const list = arrName.map(value => (
+ <div>{value}</div>
+ ))
+
+ return (
+ <div className='flex flex-col gap-4 text-[16px] font-bold'>
+ {infoCategory}
+ <div className='gap-10 py-2 font-normal text-[14px]'>
+ {list}
+ </div>
+ </div>
+ )
+}
const Footer = () => {
return (
- <div className='w-[1065px] h-[325px] bg-deepPurple ml-[15%]'>
- <div className=''>
- TJONE
+ <div className='w-[1065px] h-[325px] bg-deepPurple ml-[15%] mt-10 pt-10'>
+ <div className='flex'>
+ <div className='flex justify-start ml-[5%] text-2xl'>
+ TJONE
+ </div>
+ <div className='flex justify-end w-[960px] h-[175px] mr-[5%] text-darkGray gap-10'>
+ <InfoBox infoCategory='Hub' arrName={DATAHUB}/>
+ <InfoBox infoCategory='Info' arrName={DATAINFO}/>
+ <InfoBox infoCategory='Price' arrName={DATAPRICE}/>
+ <InfoBox infoCategory='Legal' arrName={DATALEGAL}/>
+ <InfoBox infoCategory='Support' arrName={DATASUPPORT}/>
+ </div>
+ </div>
+ <div className='flex items-center w-[960px] ml-[5%] mt-10 border-t-2 border-darkGray'>
+ <div className='flex gap-[418px]'>
+ <div className='flex justify-start'>
+ @ 2023 TJONE. All rights reserved.
+ </div>
+ <div className='flex items-center justify-end gap-4'>
+ <div>
+ Terms
+ </div>
+ <div>
+ Privacy
+ </div>
+ <div>
+ Contact
+ </div>
+ <div className='flex items-center gap-5'>
+ <div className='flex items-center'>
+ <img src={world} alt='World' className='w-5 h-5'/>
+ <div>
+ EN
+ </div>
+ </div>
+ <img src={accessibility} alt='Accessibility' className='w-5 h-5'/>
+ </div>
+ </div>
+ </div>
</div>
</div>
)
diff --git a/sth-frontend/src/features/landingpage/components/Partner.jsx b/sth-frontend/src/features/landingpage/components/Partner.jsx
index 1146e386549db9f7d512f6a0fb13ad4c382b3d82..0dfabdc920a1395674e656a0696837fbfb7e1bd9 100644
--- a/sth-frontend/src/features/landingpage/components/Partner.jsx
+++ b/sth-frontend/src/features/landingpage/components/Partner.jsx
@@ -1,19 +1,49 @@
import React from "react";
+import LeagueOfLegends from "../../../assets/svg/League of Legends.svg"
+import beerpongLeague from "../../../assets/svg/beerpong league.svg"
+import apple from "../../../assets/svg/apple.svg"
+import mercedes from "../../../assets/svg/mercedes.svg"
+import paypal from "../../../assets/svg/PayPal.svg"
+import teslaMotors from "../../../assets/svg/tesla motors.svg"
+import hdmStuttgart from "../../../assets/svg/HdM Stuttgart.svg"
+
+
+const PartnerImage = ({imgSrc, altText, itemName}) => (
+ <div className='flex items-center justify-center gap-2 w-[165px] h-[24px]'>
+ <img src={imgSrc} alt={altText} className='w-6 h-6'/>
+ <div className='text-xs text-Outfit-Medium font-medium'>{itemName}</div>
+ </div>
+)
+
const Partner = () => {
return (
- <div className='flex flex-col items-center gap-10 w-[1065px] h-[285px] ml-[15%]'>
- <div className='flex justify-center text-lightGray text-7xl text-Outfit-ExtraBold font-bold'>
- Our Partner
- </div>
- <div className='flex gap-3.5 text-lightGray'>
- <div>
- League of Legends
+ <div className='w-[1065px] h-[285px] ml-[15%]'>
+ <div className='flex flex-col items-center gap-9 w-[1065px] h-[285px]'>
+ <div className='flex justify-center text-lightGray text-7xl text-Outfit-ExtraBold font-bold mt-5'>
+ Our Partner
</div>
- <div>
- Bierpong League
+ <div className='flex flex-col gap-9 text-lightGray mb-5'>
+ <div className='flex flex-row justify-evenly w-[800px]'>
+ <PartnerImage imgSrc={LeagueOfLegends} altText='Legaue of Legends'
+ itemName='Legaue of Legends'/>
+ <PartnerImage imgSrc={beerpongLeague} altText='Beerpong League' itemName='Beerpong League'/>
+ <PartnerImage imgSrc={hdmStuttgart} altText='HDM Stuttgart' itemName='HdM Stuttgart'/>
+ <PartnerImage imgSrc={mercedes} altText='Mercedes' itemName='Mercedes-Benz'/>
+ </div>
+ <div className='flex flex-row justify-evenly'>
+ <PartnerImage imgSrc={teslaMotors} altText='Tesla' itemName='Tesla Motors Inc.'/>
+ <PartnerImage imgSrc={apple} altText='Apple' itemName='Apple Inc.'/>
+ <PartnerImage imgSrc={paypal} altText='PayPal' itemName='PayPal Inc.'/>
+ </div>
</div>
</div>
+ <div className='flex justify-end mr-[5%] transform: -translate-y-16'>
+ <div className='bg-deepPurple rounded-[50%] w-[186px] h-[182px] blur-[250px] opacity-50'></div>
+ </div>
+ <div className='flex justify-start ml-[5%] transform: -translate-y-[500px]'>
+ <div className='bg-deepPurple rounded-[50%] w-[186px] h-[182px] blur-[250px] opacity-50'/>
+ </div>
</div>
)
}
diff --git a/sth-frontend/tailwind.config.js b/sth-frontend/tailwind.config.js
index bf5c54af2d9db76d6bfd00a1a9ed22673dc08fce..a9f52815b54c7267e581540d767a4b364923ecd7 100644
--- a/sth-frontend/tailwind.config.js
+++ b/sth-frontend/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
'darkGray': '#272525',
'deepPurple': '#916CFA',
'lightGray': '#D9D9D9',
- }
+ },
},
},
plugins: [],