diff --git a/frontend/landing/src/components/index/Features.astro b/frontend/landing/src/components/index/Features.astro index 55dd464d5..c6a99e397 100644 --- a/frontend/landing/src/components/index/Features.astro +++ b/frontend/landing/src/components/index/Features.astro @@ -61,18 +61,16 @@ const features = [ ]; --- -
-
- Features +
+
+

Features

-

- Analytics that feels like it’s from the future -

+

+ Explore our bot's awesome features +

- Powerful, self-serve product and growth analytics to help you convert, engage, and retain - more users. Trusted by over 4,000 startups. + Uncover a treasure trove of features that'll take your stream to the next level. Our bot got + the tools to transform your stream adventure!

    @@ -80,13 +78,13 @@ const features = [ features.map((f) => (
  • - +
    {f.title} - {f.description} +

    {f.description}

    • )) }
-
+ diff --git a/frontend/landing/src/components/index/Footer.astro b/frontend/landing/src/components/index/Footer.astro index 19a19c1ff..9ee5aee43 100644 --- a/frontend/landing/src/components/index/Footer.astro +++ b/frontend/landing/src/components/index/Footer.astro @@ -7,41 +7,54 @@ import Github from '../../assets/social/github.svg?component'; import { navLinks } from '../navLinks.js'; --- -
-
-
-
- - Twir -
-
- {navLinks.map((item) => - {item.label} - )} -
-
-
-
-
Β© {new Date().getFullYear()} Twir. All rights reserved.
-
-
- - - - - - - - - -
- -
-
-
-
-
+ diff --git a/frontend/landing/src/components/index/Hero.astro b/frontend/landing/src/components/index/Hero.astro index bf0dbefb7..e703d9ab6 100644 --- a/frontend/landing/src/components/index/Hero.astro +++ b/frontend/landing/src/components/index/Hero.astro @@ -7,154 +7,147 @@ import ChatMessageTail from '../../assets/chat-message-tail.svg?component'; import TwitchAvatar from '../TwitchAvatar.astro'; type ChatItem = - | { - type: 'redemption'; - title: string; - input: string; -} - | { - type: 'message'; - sender: 'bot' | 'user'; - message: string; -}; + | { + type: 'redemption'; + title: string; + input: string; + } + | { + type: 'message'; + sender: 'bot' | 'user'; + message: string; + }; const messages: ChatItem[] = [ - { - sender: 'bot', - message: 'Message from timer: follow to my socials!', - type: 'message', - }, - { - sender: 'user', - message: '!title Playling League of Legends with my friend', - type: 'message', - }, - { - sender: 'bot', - message: 'βœ… Title succesfully changed.', - type: 'message', - }, - { - type: 'redemption', - title: 'melkam activated channel reward: timeout chatter (1000 πŸͺ™)', - input: 'Satont', - }, - { - sender: 'bot', - message: 'melkam disabled chat for Satont for 5 minutes', - type: 'message', - }, - { - sender: 'user', - message: '!song', - type: 'message', - }, - { - sender: 'bot', - message: 'Linkin Park β€” Numb', - type: 'message', - }, - { - sender: 'user', - message: '!category LOL', - type: 'message', - }, - { - sender: 'bot', - message: 'βœ… Category changed to League of Legends.', - type: 'message', - }, + { + sender: 'bot', + message: 'Message from timer: follow to my socials!', + type: 'message', + }, + { + sender: 'user', + message: '!title Playling League of Legends with my friend', + type: 'message', + }, + { + sender: 'bot', + message: 'βœ… Title succesfully changed.', + type: 'message', + }, + { + type: 'redemption', + title: 'melkam activated channel reward: timeout chatter (1000 πŸͺ™)', + input: 'Satont', + }, + { + sender: 'bot', + message: 'melkam disabled chat for Satont for 5 minutes', + type: 'message', + }, + { + sender: 'user', + message: '!song', + type: 'message', + }, + { + sender: 'bot', + message: 'Linkin Park β€” Numb', + type: 'message', + }, + { + sender: 'user', + message: '!category LOL', + type: 'message', + }, + { + sender: 'bot', + message: 'βœ… Category changed to League of Legends.', + type: 'message', + }, ]; --- -
-
-
-
- - πŸš€ View latest updates - - -

- Engage your audience like never before -

+
+
+
+
+ + πŸš€ View latest updates + + +

+ Engage your audience like never before +

-

- Our Twitch bot is the ultimate all-in-one solution for streamers looking to take their - channel to the next level. -

+

+ Our Twitch bot is the ultimate all-in-one solution for streamers looking to take their + channel to the next level. +

-
- - -
-
-
- { - messages.map((item) => ( -
- {item.type === 'message' && item.sender === 'bot' && ( - - )} - {item.type === 'message' && item.sender === 'user' && ( - - )} - {item.type === 'message' && ( -
- - -
- )} - {item.type === 'redemption' && ( -
+ + +
+
+
+ { + messages.map((item) => ( +
+ {item.type === 'message' && item.sender === 'bot' && ( + + )} + {item.type === 'message' && item.sender === 'user' && ( + + )} + {item.type === 'message' && ( +
+ + +
+ )} + {item.type === 'redemption' && ( +
- - {item.input} - -
- )} -
- )) - } -
-
-
-
+ "> + + {item.input} + +
+ )} +
+ )) + } +
+
+
+ diff --git a/frontend/landing/src/components/index/Integrations.astro b/frontend/landing/src/components/index/Integrations.astro index 81a8e94ac..4ee840273 100644 --- a/frontend/landing/src/components/index/Integrations.astro +++ b/frontend/landing/src/components/index/Integrations.astro @@ -28,9 +28,9 @@ const integrations = [
- +

Power-up your stream with seamless integrations - +

Connect with your favorite tools and platforms to supercharge your stream's performance and engagement. Twir's integrations provide endless possibilities. @@ -40,6 +40,7 @@ const integrations = [ { integrations.map((i) => ( diff --git a/frontend/landing/src/components/index/Reviews.vue b/frontend/landing/src/components/index/Reviews.vue index fe854ef2f..b962e1a5e 100644 --- a/frontend/landing/src/components/index/Reviews.vue +++ b/frontend/landing/src/components/index/Reviews.vue @@ -7,46 +7,52 @@ import { onMounted, ref, computed, watch } from 'vue'; const plugins = [new AutoPlay({ stopOnHover: true })]; const reviews = [ -{ - id: '139336353', - username: '7ssk7', + { + id: '139336353', + username: '7ssk7', roles: ['Streamer', 'pro player'], - comment: `I've been using Twir for a few years now. There are useful integrations with Volaroant, Spotify. I am pleased with its stability and functionality.`, - avatarUrl: - 'https://static-cdn.jtvnw.net/jtv_user_pictures/66cb7060-1a8a-4fca-9ccd-f760b70af636-profile_image-70x70.png', - rating: 5, - }, - { - id: '104435562', - username: 'qrushcsgo', + comment: `I've been using Twir for a few years now. There are useful integrations with Volaroant, Spotify. I am pleased with its stability and functionality.`, + avatarUrl: + 'https://static-cdn.jtvnw.net/jtv_user_pictures/66cb7060-1a8a-4fca-9ccd-f760b70af636-profile_image-70x70.png', + rating: 5, + }, + { + id: '104435562', + username: 'qrushcsgo', roles: ['Streamer', 'player'], - comment: `Good, handy bot for streaming. Easy to set all the settings and everything works clearly. Recommended πŸ‘`, - avatarUrl: - 'https://static-cdn.jtvnw.net/jtv_user_pictures/a477bccc-9b23-44d7-a379-fe64f67898c3-profile_image-70x70.png', - rating: 4, - }, + comment: `Good, handy bot for streaming. Easy to set all the settings and everything works clearly. Recommended πŸ‘`, + avatarUrl: + 'https://static-cdn.jtvnw.net/jtv_user_pictures/a477bccc-9b23-44d7-a379-fe64f67898c3-profile_image-70x70.png', + rating: 4, + }, { id: '48385787', username: 'promotive', roles: ['Streamer'], - comment: 'Started used Twir in 2017, now it\'s a robust, feature-rich bot for streamers β€” complete automation for advanced chat functionality.', - avatarUrl: 'https://static-cdn.jtvnw.net/jtv_user_pictures/6808c622-2cf0-4319-a2ac-d91ae5212928-profile_image-70x70.png', + comment: + 'Started used Twir in 2017, now it\'s a robust, feature-rich bot for streamers β€” complete automation for advanced chat functionality.', + avatarUrl: + 'https://static-cdn.jtvnw.net/jtv_user_pictures/6808c622-2cf0-4319-a2ac-d91ae5212928-profile_image-70x70.png', rating: 5, }, { id: '155644238', username: 'le_xot', roles: ['Streamer'], - comment: 'Twir combines a simple and clear interface, extensive customization and integration options, making this bot an indispensable assistant on my broadcasts.', - avatarUrl: 'https://static-cdn.jtvnw.net/jtv_user_pictures/423e40e6-9534-46ac-9ed8-5714657dd03b-profile_image-70x70.png', + comment: + 'Twir combines a simple and clear interface, extensive customization and integration options, making this bot an indispensable assistant on my broadcasts.', + avatarUrl: + 'https://static-cdn.jtvnw.net/jtv_user_pictures/423e40e6-9534-46ac-9ed8-5714657dd03b-profile_image-70x70.png', rating: 5, }, { id: '189703483', username: 'daetojekara', roles: ['Streamer', 'viewer'], - comment: 'Streamline broadcasts: bot controls, configures & monitors. Integrated 3rd-party tools enable dashboard-based basic setup.', - avatarUrl: 'https://static-cdn.jtvnw.net/jtv_user_pictures/b73f81e7-3fe1-415b-a543-4fe164d16e56-profile_image-70x70.png', + comment: + 'Streamline broadcasts: bot controls, configures & monitors. Integrated 3rd-party tools enable dashboard-based basic setup.', + avatarUrl: + 'https://static-cdn.jtvnw.net/jtv_user_pictures/b73f81e7-3fe1-415b-a543-4fe164d16e56-profile_image-70x70.png', rating: 5, }, ]; @@ -55,10 +61,10 @@ const twitchUsers = ref([]); onMounted(async () => { if (typeof window === 'undefined') return; - const { browserUnProtectedClient } = await import('../../api/twirp-browser.js'); + const { browserUnProtectedClient } = await import('../../api/twirp-browser.js'); const request = await browserUnProtectedClient.twitchGetUsers({ - ids: reviews.map(r => r.id), + ids: reviews.map((r) => r.id), names: [], }); twitchUsers.value = request.response.users; @@ -67,8 +73,8 @@ onMounted(async () => { const mappedReviews = computed(() => { if (!twitchUsers.value.length) return reviews; - return reviews.map(r => { - const twitchUser = twitchUsers.value.find(u => u.id === r.id); + return reviews.map((r) => { + const twitchUser = twitchUsers.value.find((u) => u.id === r.id); return { ...r, @@ -142,9 +148,9 @@ async function sendFeedBack() {
-

+

Reviews from streamers and viewers -

+ @@ -251,18 +263,19 @@ async function sendFeedBack() { @import '@egjs/vue3-flicking/dist/flicking.css'; .slider-review-card { - width: 380px; - margin: 0 12px; + width: 380px; + margin: 0 12px; height: 230px; opacity: 1 !important; - @media screen and (max-width: 565.98px) { - width: calc(100vw - 24px * 2); - } + @media screen and (max-width: 565.98px) { + width: calc(100vw - 24px * 2); + } } .reviews-bg { - background: radial-gradient(ellipse at top, #270a3b, transparent), radial-gradient(ellipse at bottom, #000, transparent); + background: radial-gradient(ellipse at top, #270a3b, transparent), + radial-gradient(ellipse at bottom, #000, transparent); } #feedback-dialog::backdrop { @@ -270,7 +283,6 @@ async function sendFeedBack() { opacity: 0.7; } - #feedback-dialog { box-shadow: 0 4px 5px rgb(0 0 0 / 90%); border-radius: 5px; diff --git a/frontend/landing/src/components/index/Team.astro b/frontend/landing/src/components/index/Team.astro index 28c8aef7d..eefeeb410 100644 --- a/frontend/landing/src/components/index/Team.astro +++ b/frontend/landing/src/components/index/Team.astro @@ -4,62 +4,78 @@ import Instagram from '../../assets/social/instagram.svg?component'; import Telegram from '../../assets/social/telegram.svg?component'; import Twitch from '../../assets/social/twitch.svg?component'; -const developers = [ - { - username: 'Satont', - avatarUrl: 'https://avatars.githubusercontent.com/u/42675886?v=4', - description: 'Founder and Backend, Frontend developer', - social: { - telegram: 'https://t.me/satont', - github: 'https://github.com/satont', - }, - }, - { - username: 'MelKam', - description: 'UI-UX Designer, Frontend developer', - avatarUrl: 'https://avatars.githubusercontent.com/u/51422045?v=4', - social: { - twitch: 'https://www.twitch.tv/mellkam', - telegram: 'https://t.me/mellkam', - github: 'https://github.com/MellKam/', - instagram: 'https://www.instagram.com/mel._.kam/', - }, - }, +type Social = 'telegram' | 'github' | 'twitch' | 'instagram'; +type Developer = { + username: string; + avatarUrl: string; + description: string; + social: Partial>; +}; + +const socialLinkLabels: Record = { + github: 'GitHub Profile', + instagram: 'Instagram Profile', + telegram: 'Telegram Profile', + twitch: 'Twitch Channel', +}; + +const developers: Developer[] = [ + { + username: 'Satont', + avatarUrl: 'https://avatars.githubusercontent.com/u/42675886?v=4', + description: 'Founder and Backend, Frontend developer', + social: { + telegram: 'https://t.me/satont', + github: 'https://github.com/satont', + }, + }, + { + username: 'MelKam', + description: 'UI-UX Designer, Frontend developer', + avatarUrl: 'https://avatars.githubusercontent.com/u/51422045?v=4', + social: { + twitch: 'https://www.twitch.tv/mellkam', + telegram: 'https://t.me/mellkam', + github: 'https://github.com/MellKam/', + instagram: 'https://www.instagram.com/mel._.kam/', + }, + }, ]; ---
-
-

Our team

-

Great developers and big community

-
+
+

Our team

+

Great developers and big community

+
-
- {developers.map(d => -
- -
- {d.username} - {d.description} -
- {Object.keys(d.social).map(s => - {s === 'twitch' && - } - {s === 'telegram' && - } - {s === 'github' && - } - {s === 'instagram' && - } - )} -
-
-
)} -
+
+ { + developers.map((d) => ( +
+ +
+ {d.username} + {d.description} +
+ {Object.keys(d.social).map((s) => ( + + {s === 'twitch' && } + {s === 'telegram' && } + {s === 'github' && } + {s === 'instagram' && } + + ))} +
+
+
+ )) + } +
diff --git a/frontend/landing/src/layouts/Layout.astro b/frontend/landing/src/layouts/Layout.astro index cb1793ea2..f0d74e1b0 100644 --- a/frontend/landing/src/layouts/Layout.astro +++ b/frontend/landing/src/layouts/Layout.astro @@ -72,6 +72,7 @@ const description = url('/fonts/Inter-Regular.woff') format('woff'); font-weight: 400; font-style: normal; + font-display: swap; } @font-face { @@ -80,6 +81,7 @@ const description = url('/fonts/Inter-Medium.woff') format('woff'); font-weight: 500; font-style: normal; + font-display: swap; } @font-face { @@ -88,6 +90,7 @@ const description = url('/fonts/Inter-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; + font-display: swap; } @font-face { @@ -96,6 +99,7 @@ const description = url('/fonts/Inter-Bold.woff') format('woff'); font-weight: 700; font-style: normal; + font-display: swap; }