Merge pull request #8 from Runroom/feature/styles-initial-page

Enter initial design

src/Shared/ui/components/LanguageSwitcher/LanguageSwitcher.module.css

@@ -1,8 +1,8 @@
 .language-switcher {
+    align-items: center;
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    align-items: center;
-    min-height: var(--language-bar-height);
     width: 100%;
 }
 
@@ -15,20 +15,37 @@
     margin: 0 0.5rem;
 }
 
-.language-switcher li a {
-    color: var(--color-text);
+.language-switcher li button {
+    color: var(--colors-surface-primary);
     text-decoration: none;
     font-size: 1rem;
     font-weight: 500;
     text-transform: uppercase;
-    transition: color 0.2s ease-in-out;
-
-    &:hover {
-        text-decoration: underline;
-    }
+    transition:
+        color 0.5s ease-in-out,
+        background-color 0.2s ease-in-out;
+    border: 2px solid var(--colors-surface-primary);
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.8rem;
+    background: transparent;
 
     &.active {
         font-weight: 700;
-        text-decoration: underline;
+        color: coral;
+        border-color: coral;
     }
 }
+
+.language-switcher li button:hover:not(.active) {
+    cursor: pointer;
+    background-color: coral;
+    color: var(--colors-surface-primary);
+    border-color: var(--colors-surface-primary);
+}
+
+.language__title {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+    color: var(--colors-surface-primary);
+    padding-bottom: 0.25rem;
+}

src/Shared/ui/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -6,7 +6,8 @@ import i18nConfig from 'i18nConfig';
 import styles from './LanguageSwitcher.module.css';
 
 export const LanguageSwitcher = (): JSX.Element => {
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
+
   const languages = i18nConfig.locales;
   const currentLocale = i18n.language;
 
@@ -28,6 +29,7 @@ export const LanguageSwitcher = (): JSX.Element => {
 
   return (
     <div data-testid="language-switcher" className={styles['language-switcher']}>
+      <p className={styles.language__title}>{t('language')}</p>
       <ul role="listbox">
         {languages.map(language => (
           <li key={language}>

src/Shared/ui/components/Welcome/Welcome.module.css

@@ -0,0 +1,51 @@
+.language-switcher {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+}
+
+.language-switcher ul {
+    display: flex;
+}
+
+.language-switcher li {
+    list-style: none;
+    margin: 0 0.5rem;
+}
+
+.language-switcher li button {
+    color: var(--colors-surface-primary);
+    text-decoration: none;
+    font-size: 1rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    transition:
+        color 0.5s ease-in-out,
+        background-color 0.2s ease-in-out;
+    border: 2px solid var(--colors-surface-primary);
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.8rem;
+    background: transparent;
+
+    &.active {
+        font-weight: 700;
+        color: coral;
+        border-color: coral;
+    }
+}
+
+.language-switcher li button:hover:not(.active) {
+    cursor: pointer;
+    background-color: coral;
+    color: var(--colors-surface-primary);
+    border-color: var(--colors-surface-primary);
+}
+
+.language__title {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+    color: var(--colors-surface-primary);
+    padding-bottom: 0.25rem;
+}

src/Shared/ui/components/Welcome/Welcome.tsx

@@ -0,0 +1,19 @@
+'use client';
+import styles from '@/styles/Welcome.module.css';
+
+import { useTranslation } from 'react-i18next';
+
+export const Welcome = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.welcome}>
+      <h1 className={styles.welcome__title}>
+        <span className={styles.welcome__gradient}>Runroom Starter</span>
+        <span className={`${styles.welcome__gradient} ${styles.welcome__below}`}>
+          {t(`welcome`)}
+        </span>
+      </h1>
+    </div>
+  );
+};

src/Shared/ui/components/Welcome/index.ts

@@ -0,0 +1 @@
+export * from './Welcome';

src/app/[locale]/page.tsx

@@ -1,15 +1,13 @@
 'use client';
-import { LanguageSwitcher } from '@/Shared/ui/components/LanguageSwitcher';
 
-import { useTranslation } from 'react-i18next';
+import { LanguageSwitcher } from '@/Shared/ui/components/LanguageSwitcher';
+import { Welcome } from '@/Shared/ui/components/Welcome';
 
 export default function Home() {
-  const { t } = useTranslation('common');
   return (
-    <main>
-      <h1>Runroom - NextJS Starter</h1>
-      <p>{t('language')}</p>
+    <>
+      <Welcome />
       <LanguageSwitcher />
-    </main>
+    </>
   );
 }

src/locales/ca/common.json

@@ -1,4 +1,5 @@
 {
     "locale": "ca",
-    "language": "Català"
+    "language": "Català",
+    "welcome": "Starter amb Next JS"
 }

src/locales/en/common.json

@@ -1,4 +1,5 @@
 {
     "locale": "en",
-    "language": "English"
+    "language": "English",
+    "welcome": "with Next JS"
 }

src/locales/es/common.json

@@ -1,4 +1,5 @@
 {
     "locale": "es",
-    "language": "Español"
+    "language": "Español",
+    "welcome": "Starter con Next JS"
 }

src/styles/Welcome.module.css

@@ -0,0 +1,54 @@
+.welcome {
+    --main-size: 3.125rem;
+}
+
+.welcome__title {
+    color: var(--colors-surface-primary);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--main-size);
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 1em;
+    text-align: center;
+}
+
+@property --i {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: white;
+}
+
+.welcome__gradient {
+    --i: white;
+
+    background: linear-gradient(to bottom, var(--i) 20%, var(--colors-surface-secondary));
+    background-clip: text;
+    color: transparent;
+    transition: background 0.5s;
+}
+
+.welcome__title:hover .welcome__gradient {
+    --i: coral;
+
+    cursor: crosshair;
+}
+
+.welcome__below {
+    font-size: calc(var(--main-size) - 1.5rem);
+    margin-top: -0.25rem;
+}
+
+@media (width >= 768px) {
+    .welcome {
+        --main-size: 6rem;
+    }
+
+    .welcome__title {
+        max-width: 14ch;
+    }
+
+    .welcome__below {
+        margin-top: -1.25rem;
+    }
+}

src/styles/globals.css

@@ -11,12 +11,16 @@ body {
 }
 
 main {
+    --accent-color: coral;
+
+    align-items: center;
+    background: var(--colors-surface-secondary);
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 6rem;
+    justify-content: space-between;
     min-height: 100vh;
+    padding: 8rem 0;
+    width: 100%;
 }
 
 /* stylelint-disable-next-line */

tests/cypress/e2e/page.cy.ts

@@ -2,7 +2,7 @@ describe('Page', () => {
   it('should navigate between pages', () => {
     cy.visit('/');
 
-    cy.get('h1').contains('Runroom - NextJS Starter');
+    cy.get('h1').contains('Runroom Starter');
   });
 });