) {
+ vi.resetModules();
+ vi.doMock('./translations', () => ({ translations }));
+ return import('./use-translation');
+}
+
+describe('use-translation', () => {
+ beforeEach(() => {
+ storageState = {};
+
+ Object.defineProperty(window, 'localStorage', {
+ configurable: true,
+ value: createStorageMock(),
+ });
+
+ window.history.pushState({}, '', '/');
+ setNavigatorLanguage('en-US');
+ document.documentElement.lang = '';
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.restoreAllMocks();
+ vi.doUnmock('./translations');
+ });
+
+ it('throws when the hook is used outside the provider', async () => {
+ const { useTranslation } = await loadI18nModule();
+ const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+ function OutsideProvider(): JSX.Element {
+ useTranslation();
+ return outside
;
+ }
+
+ expect(() => render({locale}
+ {t('siteContent.navigation.cta.label')}
+
+ );
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('locale')).toHaveTextContent('sv');
+ expect(screen.getByText('Låt oss prata')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(document.documentElement.lang).toBe('sv');
+ expect(window.localStorage.getItem('sprout-locale')).toBe('sv');
+ });
+ });
+
+ it('prefers the locale from the current path over storage and navigator defaults', async () => {
+ storageState['sprout-locale'] = 'en';
+ setNavigatorLanguage('en-US');
+ window.history.pushState({}, '', '/sv/');
+
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ return {useTranslation().locale}
;
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('locale')).toHaveTextContent('sv');
+ });
+
+ it('falls back to the stored locale when the path does not contain one', async () => {
+ storageState['sprout-locale'] = 'sv';
+ window.history.pushState({}, '', '/missing-page');
+
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ return {useTranslation().locale}
;
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('locale')).toHaveTextContent('sv');
+ });
+
+ it('falls back to the browser language when neither path nor storage chooses a locale', async () => {
+ setNavigatorLanguage('sv-SE');
+ window.history.pushState({}, '', '/missing-page');
+
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ return {useTranslation().locale}
;
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('locale')).toHaveTextContent('sv');
+ });
+
+ it('updates the localized path while preserving search parameters and the hash', async () => {
+ const user = userEvent.setup();
+ window.history.pushState({}, '', '/en/services/consultancy/?source=ad#top');
+
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ const { locale, setLocale } = useTranslation();
+
+ return (
+ <>
+ {locale}
+ setLocale('sv')}>
+ switch
+
+
+ );
+ }
+
+ render(
+
+ ,
+ );
+
+ await user.click(screen.getByRole('button', { name: 'switch' }));
+
+ await waitFor(() => {
+ expect(window.location.pathname).toBe('/sv/tjanster/konsultverksamhet/');
+ expect(window.location.search).toBe('?source=ad');
+ expect(window.location.hash).toBe('#top');
+ expect(screen.getByTestId('locale')).toHaveTextContent('sv');
+ });
+ });
+
+ it('does not push a new history entry when the localized url stays the same', async () => {
+ const user = userEvent.setup();
+ const pushStateSpy = vi.spyOn(window.history, 'pushState');
+ window.history.pushState({}, '', '/en/');
+
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ const { setLocale } = useTranslation();
+
+ return (
+ setLocale('en')}>
+ keep locale
+
+ );
+ }
+
+ render(
+
+ ,
+ );
+
+ pushStateSpy.mockClear();
+
+ await user.click(screen.getByRole('button', { name: 'keep locale' }));
+
+ expect(pushStateSpy).not.toHaveBeenCalled();
+ });
+
+ it('returns the key itself when no translation exists', async () => {
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ return {useTranslation().t('siteContent.this.key.does.not.exist')}
;
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByText('siteContent.this.key.does.not.exist')).toBeInTheDocument();
+ });
+
+ it('falls back to the English translation when the active locale misses a key', async () => {
+ const { I18nProvider, useTranslation } = await loadI18nModuleWithTranslations({
+ en: {
+ greeting: 'Hello',
+ },
+ sv: {},
+ });
+
+ function Probe(): JSX.Element {
+ return {useTranslation().t('greeting')}
;
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByText('Hello')).toBeInTheDocument();
+ });
+
+ it('handles an invalid localStorage implementation gracefully', async () => {
+ Object.defineProperty(window, 'localStorage', {
+ configurable: true,
+ value: {},
+ });
+
+ const { I18nProvider, useTranslation } = await loadI18nModule();
+
+ function Probe(): JSX.Element {
+ return {useTranslation().locale}
;
+ }
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('locale')).toHaveTextContent('en');
+ });
+});
diff --git a/src/i18n/use-translation.tsx b/src/i18n/use-translation.tsx
new file mode 100644
index 0000000..b871e24
--- /dev/null
+++ b/src/i18n/use-translation.tsx
@@ -0,0 +1,142 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+ type ReactNode,
+} from 'react';
+import { buildLocalizedPath, getLocaleFromPath } from './site-pages';
+import { translations, type Locale } from './translations';
+
+type TranslationValue =
+ | string
+ | number
+ | boolean
+ | null
+ | TranslationValue[]
+ | { [key: string]: TranslationValue };
+
+interface TranslationContextValue {
+ locale: Locale;
+ setLocale: (locale: Locale) => void;
+ t: (key: string) => T;
+}
+
+interface I18nProviderProps {
+ children: ReactNode;
+ initialLocale?: Locale;
+}
+
+const TranslationContext = createContext(null);
+const localeStorageKey = 'sprout-locale';
+
+function resolveValue(source: unknown, path: string): TranslationValue | undefined {
+ return path.split('.').reduce((current, segment) => {
+ if (current === null || current === undefined || typeof current !== 'object') {
+ return undefined;
+ }
+
+ return (current as Record)[segment];
+ }, source) as TranslationValue | undefined;
+}
+
+function getStorage(): Storage | null {
+ if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+ return null;
+ }
+
+ const storage = window.localStorage;
+
+ if (typeof storage.getItem !== 'function' || typeof storage.setItem !== 'function') {
+ return null;
+ }
+
+ return storage;
+}
+
+function detectInitialLocale(): Locale {
+ if (typeof window === 'undefined') {
+ return 'en';
+ }
+
+ const localeFromPath = getLocaleFromPath(window.location.pathname);
+
+ if (localeFromPath) {
+ return localeFromPath;
+ }
+
+ const storage = getStorage();
+ const storedLocale = storage?.getItem(localeStorageKey);
+
+ if (storedLocale === 'en' || storedLocale === 'sv') {
+ return storedLocale;
+ }
+
+ return window.navigator.language.toLowerCase().startsWith('sv') ? 'sv' : 'en';
+}
+
+export function I18nProvider({ children, initialLocale }: I18nProviderProps): JSX.Element {
+ const [locale, setLocaleState] = useState(() => initialLocale ?? detectInitialLocale());
+
+ useEffect(() => {
+ document.documentElement.lang = locale;
+ getStorage()?.setItem(localeStorageKey, locale);
+ }, [locale]);
+
+ const setLocale = useCallback(
+ (nextLocale: Locale): void => {
+ if (typeof window !== 'undefined') {
+ const nextPath = buildLocalizedPath(window.location.pathname, nextLocale);
+ const nextUrl = `${nextPath}${window.location.search}${window.location.hash}`;
+ const currentUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
+ if (nextUrl !== currentUrl) {
+ window.history.pushState({}, '', nextUrl);
+ }
+ }
+
+ setLocaleState(nextLocale);
+ },
+ [],
+ );
+
+ const t = useCallback(function t(key: string): T {
+ const localizedValue = resolveValue(translations[locale], key);
+
+ if (localizedValue !== undefined) {
+ return localizedValue as T;
+ }
+
+ const fallbackValue = resolveValue(translations.en, key);
+
+ if (fallbackValue !== undefined) {
+ return fallbackValue as T;
+ }
+
+ return key as T;
+ }, [locale]);
+
+ const value = useMemo(
+ () => ({
+ locale,
+ setLocale,
+ t,
+ }),
+ [locale, setLocale, t],
+ );
+
+ return {children} ;
+}
+
+/* Reads locale state and translation helpers from context. */
+export function useTranslation(): TranslationContextValue {
+ const context = useContext(TranslationContext);
+
+ if (!context) {
+ throw new Error('useTranslation must be used within an I18nProvider.');
+ }
+
+ return context;
+}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 9919d0d..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,385 +0,0 @@
-@font-face {
- font-family: Sen;
- src:
- local("Sen"),
- url("./fonts/Sen-Regular.ttf") format("truetype");
- font-weight: bold;
-}
-
-@font-face {
- font-family: Inter;
- src:
- local("Inter"),
- url("./fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
- font-weight: 100 400;
-}
-
-@font-face {
- font-family: Bayon;
- src:
- local("Bayon"),
- url("./fonts/Bayon-Regular.ttf") format("truetype");
- font-weight: bold;
-}
-
-@font-face {
- font-family: AzeretMono;
- src:
- local("AzeretMono"),
- url("./fonts/AzeretMono-VariableFont_wght.ttf") format("truetype");
- font-weight: 400 700;
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-body {
- -webkit-overflow-scrolling: touch;
-}
-
-html,
-body {
- padding: 0;
- margin: 0;
- overflow-y: auto;
- background-color: black;
-
- .circle {
- width: 20px;
- height: 20px;
- top: 0;
- left: 0;
- border-radius: 50%;
- pointer-events: none;
- z-index: 99999;
- position: fixed;
- }
-}
-
-body * {
- font-family: Inter, sans-serif;
- box-sizing: border-box;
- outline: none;
- -webkit-tap-highlight-color: transparent;
- user-select: none;
- -webkit-user-drag: none;
-}
-
-:root {
- line-height: 1.5;
- font-weight: 400;
- color-scheme: light dark;
- font-synthesis: none;
- text-rendering: optimizelegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-size-adjust: 100%;
- color: black;
- overflow-x: hidden;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- }
-
- a,
- a:visited {
- color: #fdfdfd;
- }
-
- a:hover {
- color: #fff;
- }
-
- button {
- background-color: #f9f9f9;
- }
-}
-
-@font-face {
- font-family: SproutLogoGlyphA;
- src: url("/custom-fonts/sprout-logo/Sprout-logo-glyph.eot");
- src:
- url("/custom-fonts/sprout-logo/Sprout-logo-glyph.eot?#iefix") format("embedded-opentype"),
- url("/custom-fonts/sprout-logo/Sprout-logo-glyph.woff") format("woff"),
- url("/custom-fonts/sprout-logo/Sprout-logo-glyph.ttf") format("truetype"),
- url("/custom-fonts/sprout-logo/Sprout-logo-glyph.svg#Sprout-logo-glyph") format("svg");
- font-weight: normal;
- font-style: normal;
- font-display: block;
-}
-
-@keyframes pulse {
- 0% {
- transform: translate(-50%, -50%) scale(0.5);
- opacity: 1;
- }
-
- 100% {
- transform: translate(-50%, -50%) scale(1);
- opacity: 0;
- }
-}
-
-@keyframes blink {
- from {
- opacity: 1;
- }
-
- to {
- opacity: 0;
- }
-}
-
-.progress-wrap {
- height: 46px;
- width: 46px;
- cursor: pointer;
- display: block;
- border-radius: 50px;
- box-shadow: inset 0 0 0 2px rgba(255 255 255 / 20%);
- z-index: 10000;
- transition: all 200ms linear;
-}
-
-.progress-wrap svg path {
- fill: none;
-}
-
-.progress-wrap svg.progress-circle path {
- stroke: var(--grey);
- stroke-width: 4;
- box-sizing: border-box;
- transition: all 200ms linear;
-}
-
-@keyframes border-transform {
- 0%,
- 100% {
- border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
- }
-
- 14% {
- border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
- }
-
- 28% {
- border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
- }
-
- 42% {
- border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
- }
-
- 56% {
- border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
- }
-
- 70% {
- border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
- }
-
- 84% {
- border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
- }
-}
-
-.animation-wrap {
- font-size: clamp(1.5rem, 1.75vw, 2rem);
- width: 100%;
- display: flex;
- justify-content: center;
- overflow: auto;
- overflow-x: hidden;
- scroll-snap-type: y mandatory;
-
- .text-enter {
- color: white;
- }
-
- .char {
- display: inline-block;
- animation-delay: calc(0.15s + var(--char-index) * 0.05s);
- transition: all 0.15s calc(0.15s + var(--char-index) * 0.05s);
- }
-
- .text-enter .char {
- opacity: 1;
- transform: translate(0, 0);
- }
-
- .text-karaoke .char {
- color: rgba(229 219 209 / 15%);
- transition-duration: 0.05s;
- }
-
- .text-karaoke .char::after {
- color: rgba(229 219 209 / 100%);
- visibility: visible;
- }
-
- .text-enter [data-scroll="out"] .char {
- opacity: 0;
- transform: translate(0, -150%);
- }
-
- .text-karaoke [data-scroll="in"] .char::after {
- clip-path: inset(0 0 0 0);
- }
-
- .text-karaoke [data-scroll="out"] .char::after {
- clip-path: inset(0 100% 0 0);
- }
-}
-
-/* NETFLIX EFFECT */
-
-.fade {
- animation: fadeInOut 2s ease-in-out forwards;
-}
-
-@keyframes fadeInOut {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-/* FADE SETUPS */
-
-.scroll-container {
- height: 100%;
- width: 100%;
- display: flex;
- align-items: center;
- box-sizing: border-box;
-}
-
-.scroll-container:nth-of-type(1) {
- background-color: #bdd0c4;
-}
-.scroll-container:nth-of-type(2) {
- background-color: #f5d2d3;
-}
-.scroll-container:nth-of-type(3) {
- background-color: #9ab7d3;
-}
-.scroll-container:nth-of-type(4) {
- background-color: #dfccf1;
-}
-
-.scroll-container:nth-of-type(even) {
- flex-direction: row-reverse;
-}
-
-.scroll-element,
-.scroll-caption {
- width: 50%;
-}
-
-.scroll-element {
- min-height: 300px;
- height: 100%;
- background-color: #eaeaea;
-}
-
-.scroll-caption {
- margin: 1rem;
-}
-
-@media screen and (max-width: 650px) {
- .scroll-container,
- .scroll-container:nth-of-type(even) {
- flex-direction: column;
- align-content: inherit;
- }
-
- .scroll-element {
- height: 100%;
- }
-
- .scroll-element,
- .scroll-caption {
- width: 100%;
- }
-}
-/**Styling scrollable elements*/
-
-.js-scroll {
- opacity: 0;
- transition: opacity 500ms;
-}
-
-.js-scroll.scrolled {
- opacity: 1;
-}
-
-.scrolled.fade-in {
- animation: fade-in 1s ease-in-out both;
-}
-
-.scrolled.fade-in-bottom {
- animation: fade-in-bottom 1s ease-in-out both;
-}
-
-.scrolled.slide-left {
- animation: slide-in-left 1s ease-in-out both;
-}
-
-.scrolled.slide-right {
- animation: slide-in-right 1s ease-in-out both;
-}
-
-@keyframes slide-in-left {
- 0% {
- -webkit-transform: translateX(-100px);
- transform: translateX(-100px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- opacity: 1;
- }
-}
-
-@keyframes slide-in-right {
- 0% {
- -webkit-transform: translateX(100px);
- transform: translateX(100px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- opacity: 1;
- }
-}
-
-@keyframes fade-in-bottom {
- 0% {
- -webkit-transform: translateY(50px);
- transform: translateY(50px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- opacity: 1;
- }
-}
-
-@keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
diff --git a/src/main.test.tsx b/src/main.test.tsx
new file mode 100644
index 0000000..3827d54
--- /dev/null
+++ b/src/main.test.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => {
+ const render = vi.fn();
+ const createRoot = vi.fn(() => ({ render }));
+ const App = vi.fn(() => null);
+ const GlobalStyles = vi.fn(() => null);
+ const I18nProvider = vi.fn(({ children }: { children: React.ReactNode }) => <>{children});
+ const ThemeModeProvider = vi.fn(({ children }: { children: React.ReactNode }) => <>{children});
+
+ return {
+ App,
+ GlobalStyles,
+ I18nProvider,
+ ThemeModeProvider,
+ createRoot,
+ render,
+ };
+});
+
+vi.mock('react-dom/client', () => ({
+ default: {
+ createRoot: mocks.createRoot,
+ },
+ createRoot: mocks.createRoot,
+}));
+
+vi.mock('./App', () => ({
+ default: mocks.App,
+}));
+
+vi.mock('./globalStyles', () => ({
+ GlobalStyles: mocks.GlobalStyles,
+}));
+
+vi.mock('./i18n/use-translation', () => ({
+ I18nProvider: mocks.I18nProvider,
+}));
+
+vi.mock('./theme/theme-provider', () => ({
+ ThemeModeProvider: mocks.ThemeModeProvider,
+}));
+
+describe('main', () => {
+ beforeEach(() => {
+ vi.resetModules();
+ mocks.createRoot.mockClear();
+ mocks.render.mockClear();
+ mocks.App.mockClear();
+ mocks.GlobalStyles.mockClear();
+ mocks.I18nProvider.mockClear();
+ mocks.ThemeModeProvider.mockClear();
+ document.body.innerHTML = '
';
+ });
+
+ it('mounts the app into the root element with the expected provider tree', async () => {
+ await import('./main');
+
+ expect(mocks.createRoot).toHaveBeenCalledWith(document.getElementById('root'));
+ expect(mocks.render).toHaveBeenCalledTimes(1);
+
+ const renderTree = mocks.render.mock.calls[0][0];
+ expect(renderTree.type).toBe(React.StrictMode);
+
+ const i18nProvider = renderTree.props.children;
+ expect(i18nProvider.type).toBe(mocks.I18nProvider);
+
+ const themeModeProvider = i18nProvider.props.children;
+ expect(themeModeProvider.type).toBe(mocks.ThemeModeProvider);
+
+ const themeChildren = React.Children.toArray(themeModeProvider.props.children);
+ expect(themeChildren).toHaveLength(2);
+ expect((themeChildren[0] as React.ReactElement).type).toBe(mocks.GlobalStyles);
+ expect((themeChildren[1] as React.ReactElement).type).toBe(mocks.App);
+ });
+});
diff --git a/src/main.tsx b/src/main.tsx
index 90a67f2..697c021 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,17 +1,17 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.css";
-import { BrowserRouter } from "react-router-dom";
-import ScrollToAnchor from "./components/ScrollToAnchor";
-import ScriptInit from "./scripts/ScriptInit";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { GlobalStyles } from './globalStyles';
+import { I18nProvider } from './i18n/use-translation';
+import { ThemeModeProvider } from './theme/theme-provider';
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
-
-
- ,
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+ ,
);
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
new file mode 100644
index 0000000..e7f0fd9
--- /dev/null
+++ b/src/pages/home-page.tsx
@@ -0,0 +1,45 @@
+import { Page } from '../components/atoms/layout-primitives/layout-primitives';
+import { CasesSection } from '../components/organisms/cases-section/cases-section';
+import { ContactBlock } from '../components/organisms/contact-block/contact-block';
+import { FamilySection } from '../components/organisms/family-section/family-section';
+import { FooterBlock } from '../components/organisms/footer-block/footer-block';
+import { Hero } from '../components/organisms/hero/hero';
+import { IndustryShowcase } from '../components/organisms/industry-showcase/industry-showcase';
+import { NavigationBar } from '../components/organisms/navigation-bar/navigation-bar';
+import { QuoteBlock } from '../components/organisms/quote-block/quote-block';
+import { ServicesSection } from '../components/organisms/services-section/services-section';
+import { StatsStrip } from '../components/organisms/stats-strip/stats-strip';
+import { WhoWeAreSection } from '../components/organisms/who-we-are-section/who-we-are-section';
+import { Ticker } from '../components/molecules/ticker/ticker';
+import type { SiteContent } from '../i18n/site-content';
+
+interface HomePageProps {
+ content: SiteContent;
+}
+
+export function HomePage({ content }: HomePageProps): JSX.Element {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ (
+ 'meta[name="description"]',
+ );
+
+ description?.setAttribute('content', pageDescription);
+ }, [content, page]);
+}
diff --git a/src/styled.d.ts b/src/styled.d.ts
new file mode 100644
index 0000000..acd4320
--- /dev/null
+++ b/src/styled.d.ts
@@ -0,0 +1,191 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+ export interface DefaultTheme {
+ mode: 'light' | 'dark';
+ color: {
+ background: string;
+ surface: string;
+ border: string;
+ borderBright: string;
+ primary: string;
+ primaryDim: string;
+ text: string;
+ textBody: string;
+ textMuted: string;
+ textDim: string;
+ overlay: string;
+ };
+ effect: {
+ scrim: string;
+ scrimSoft: string;
+ shadowLg: string;
+ shadowMd: string;
+ modalPanelSurface: string;
+ modalTopBar: string;
+ modalButtonSurface: string;
+ heroVignetteStart: string;
+ heroVignetteMid: string;
+ heroVignetteEnd: string;
+ heroLineOpacityScale: number;
+ };
+ status: {
+ success: string;
+ danger: string;
+ primaryHover: string;
+ };
+ typography: {
+ mono: string;
+ heading1: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ heading2: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ heading3: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ bodySmall: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ body: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ bodyLarge: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ eyebrow: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ textTransform: 'uppercase';
+ };
+ labelSmall: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ textTransform: 'uppercase';
+ };
+ label: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ textTransform: 'uppercase';
+ };
+ labelLarge: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ textTransform: 'uppercase';
+ };
+ captionSmall: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ caption: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ captionLarge: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ button: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ textTransform: 'uppercase';
+ };
+ brand: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ textTransform: 'uppercase';
+ };
+ sectionNumber: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ metricHero: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ metricIndustry: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ metricStat: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ quote: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ quoteMark: {
+ fontSize: string;
+ lineHeight: string;
+ fontWeight: number;
+ letterSpacing: string;
+ };
+ };
+ breakpoints: {
+ laptop: string;
+ tablet: string;
+ mobile: string;
+ };
+ spacing: {
+ xxs: string;
+ xs: string;
+ sm: string;
+ md: string;
+ lg: string;
+ xl: string;
+ '2xl': string;
+ '3xl': string;
+ '4xl': string;
+ '5xl': string;
+ '6xl': string;
+ };
+ }
+}
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/src/theme.ts b/src/theme.ts
index 0de1109..ea19711 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,73 +1,244 @@
-import { Theme } from "@emotion/react";
+import type { DefaultTheme } from 'styled-components';
-const theme: Theme = {
- breakpoints: {
- xxl: "2565",
- xl: "1920",
- lg: "1280",
- md: "1024",
- sm: "640",
- xs: "450",
- },
- fontFamily: {
- inter: "Inter",
- bayon: "Bayon",
- azeretMono: "AzeretMono",
- },
- fontSize: {
- /*
- xxs: "0.5rem",
- xs: "1rem",
- sm: "clamp(0.5rem, 5vw, 1.5rem)",
- md: "clamp(1.5rem, 8vw, 4rem)",
- lg: "clamp(4rem, 10vw, 6rem)",
- xl: "clamp(6rem, 12vw, 8rem)",
- */
- xxs: "0.5rem" /* 8px */,
- xs: "1rem" /* 16px */,
- sm: "1.125rem" /* 18px */,
- md: "1.5rem" /* 24px */,
- lg: "2.625rem" /* 42px */,
- xl: "4.5rem" /* 72px */,
- },
- spacing: {
- xs: "0.5rem",
- sm: "1rem",
- md: "2rem",
- lg: "4rem",
- xl: "8rem",
- },
- lineHeight: {
- /*
- xs: "1.5rem",
- sm: "3.5rem",
- md: "4rem",
- */
- xxs: "0.525rem",
- xs: "1.4rem",
- sm: "1.75rem",
- md: "2.8rem",
- lg: "3.51rem",
- xl: "4.5rem",
- },
- colors: {
- blueWhale: "#3457A5",
- summerCurtains: "#FDFDFD",
- oldTypewriter: "#5E5E5E",
- nightSky: "#0E0E0E",
- },
+export type ThemeMode = 'light' | 'dark';
+
+const typography: DefaultTheme['typography'] = {
+ mono: "'JetBrains Mono', monospace",
+ heading1: {
+ fontSize: 'clamp(36px, 5vw, 72px)',
+ lineHeight: '1.1',
+ fontWeight: 700,
+ letterSpacing: '-0.05em',
+ },
+ heading2: {
+ fontSize: 'clamp(24px, 3vw, 40px)',
+ lineHeight: '1.1',
+ fontWeight: 700,
+ letterSpacing: '-0.02em',
+ },
+ heading3: {
+ fontSize: 'clamp(20px, 2.5vw, 32px)',
+ lineHeight: '1.3',
+ fontWeight: 700,
+ letterSpacing: '-0.02em',
+ },
+ bodySmall: {
+ fontSize: '13px',
+ lineHeight: '1.8',
+ fontWeight: 400,
+ letterSpacing: '0',
+ },
+ body: {
+ fontSize: '14px',
+ lineHeight: '1.9',
+ fontWeight: 400,
+ letterSpacing: '0',
+ },
+ bodyLarge: {
+ fontSize: '16px',
+ lineHeight: '1.9',
+ fontWeight: 400,
+ letterSpacing: '0',
+ },
+ eyebrow: {
+ fontSize: '11px',
+ lineHeight: '1',
+ fontWeight: 500,
+ letterSpacing: '0.2em',
+ textTransform: 'uppercase',
+ },
+ labelSmall: {
+ fontSize: '10px',
+ lineHeight: '1.2',
+ fontWeight: 500,
+ letterSpacing: '0.15em',
+ textTransform: 'uppercase',
+ },
+ label: {
+ fontSize: '11px',
+ lineHeight: '1.2',
+ fontWeight: 500,
+ letterSpacing: '0.15em',
+ textTransform: 'uppercase',
+ },
+ labelLarge: {
+ fontSize: '12px',
+ lineHeight: '1.2',
+ fontWeight: 500,
+ letterSpacing: '0.15em',
+ textTransform: 'uppercase',
+ },
+ captionSmall: {
+ fontSize: '11px',
+ lineHeight: '1.6',
+ fontWeight: 400,
+ letterSpacing: '0.05em',
+ },
+ caption: {
+ fontSize: '12px',
+ lineHeight: '1.8',
+ fontWeight: 400,
+ letterSpacing: '0.05em',
+ },
+ captionLarge: {
+ fontSize: '13px',
+ lineHeight: '1.8',
+ fontWeight: 400,
+ letterSpacing: '0.04em',
+ },
+ button: {
+ fontSize: '12px',
+ lineHeight: '1',
+ fontWeight: 700,
+ letterSpacing: '0.1em',
+ textTransform: 'uppercase',
+ },
+ brand: {
+ fontSize: '15px',
+ lineHeight: '1',
+ fontWeight: 700,
+ letterSpacing: '0.12em',
+ textTransform: 'uppercase',
+ },
+ sectionNumber: {
+ fontSize: '40px',
+ lineHeight: '1',
+ fontWeight: 700,
+ letterSpacing: '-0.04em',
+ },
+ metricHero: {
+ fontSize: 'clamp(56px, 8vw, 80px)',
+ lineHeight: '1',
+ fontWeight: 700,
+ letterSpacing: '-0.04em',
+ },
+ metricIndustry: {
+ fontSize: 'clamp(64px, 8vw, 96px)',
+ lineHeight: '1',
+ fontWeight: 700,
+ letterSpacing: '-0.04em',
+ },
+ metricStat: {
+ fontSize: '48px',
+ lineHeight: '1',
+ fontWeight: 700,
+ letterSpacing: '-0.04em',
+ },
+ quote: {
+ fontSize: 'clamp(20px, 2.5vw, 32px)',
+ lineHeight: '1.5',
+ fontWeight: 300,
+ letterSpacing: '-0.01em',
+ },
+ quoteMark: {
+ fontSize: '80px',
+ lineHeight: '0.8',
+ fontWeight: 700,
+ letterSpacing: '0',
+ },
+};
+
+const breakpoints: DefaultTheme['breakpoints'] = {
+ laptop: '1024px',
+ tablet: '900px',
+ mobile: '768px',
};
-const indexedBreakpoints = theme.breakpoints as { [id in string]: string };
+const spacing: DefaultTheme['spacing'] = {
+ xxs: '0.25rem',
+ xs: '0.5rem',
+ sm: '0.75rem',
+ md: '1rem',
+ lg: '1.5rem',
+ xl: '2rem',
+ '2xl': '3rem',
+ '3xl': '4rem',
+ '4xl': '6rem',
+ '5xl': '8rem',
+ '6xl': '10rem',
+};
+
+function createTheme(theme: Pick): DefaultTheme {
+ return {
+ ...theme,
+ typography,
+ breakpoints,
+ spacing,
+ };
+}
+
+export const darkTheme = createTheme({
+ mode: 'dark',
+ color: {
+ background: '#0a0a08',
+ surface: '#111110',
+ border: '#1e1e1b',
+ borderBright: '#2a2a26',
+ primary: '#2b75d4',
+ primaryDim: '#0660d6',
+ text: '#e8e6df',
+ textBody: '#a8a59d',
+ textMuted: '#9e9b93',
+ textDim: '#918f87',
+ overlay: '#0d1220',
+ },
+ effect: {
+ scrim: 'rgba(10, 10, 8, 0.84)',
+ scrimSoft: 'rgba(10, 10, 8, 0.72)',
+ shadowLg: '0 24px 80px rgba(0, 0, 0, 0.35)',
+ shadowMd: '0 24px 64px rgba(0, 0, 0, 0.28)',
+ modalPanelSurface:
+ 'linear-gradient(180deg, #111110 0%, #0a0a08 100%)',
+ modalTopBar:
+ 'linear-gradient(180deg, rgba(17, 17, 16, 0.98) 0%, rgba(17, 17, 16, 0.78) 72%, rgba(17, 17, 16, 0) 100%)',
+ modalButtonSurface: 'rgba(10, 10, 8, 0.82)',
+ heroVignetteStart: 'rgba(10, 10, 8, 0)',
+ heroVignetteMid: 'rgba(10, 10, 8, 0.08)',
+ heroVignetteEnd: 'rgba(10, 10, 8, 0.34)',
+ heroLineOpacityScale: 1,
+ },
+ status: {
+ success: '#2b75d4',
+ danger: '#f87171',
+ primaryHover: '#5ee8b0',
+ },
+});
-export const mq = Object.keys(theme.breakpoints)
- .map((key) => [key, indexedBreakpoints[key]])
- .reduce(
- (prev, [key, breakpoint]) => {
- prev[key] = `@media (width >= ${breakpoint}px) and (height >= 480px)`;
- return prev;
- },
- {} as { [index: string]: string },
- );
+export const lightTheme = createTheme({
+ mode: 'light',
+ color: {
+ background: '#f2f0eb',
+ surface: '#e8e4db',
+ border: '#ada697',
+ borderBright: '#777063',
+ primary: '#2b75d4',
+ primaryDim: '#0660d6',
+ text: '#171714',
+ textBody: '#49453f',
+ textMuted: '#5d584f',
+ textDim: '#70695f',
+ overlay: '#ddd7cd',
+ },
+ effect: {
+ scrim: 'rgba(23, 23, 20, 0.30)',
+ scrimSoft: 'rgba(23, 23, 20, 0.20)',
+ shadowLg: '0 24px 80px rgba(23, 23, 20, 0.16)',
+ shadowMd: '0 24px 64px rgba(23, 23, 20, 0.13)',
+ modalPanelSurface:
+ 'linear-gradient(180deg, #e8e4db 0%, #f2f0eb 100%)',
+ modalTopBar:
+ 'linear-gradient(180deg, rgba(232, 228, 219, 0.98) 0%, rgba(232, 228, 219, 0.82) 72%, rgba(232, 228, 219, 0) 100%)',
+ modalButtonSurface: 'rgba(242, 240, 235, 0.96)',
+ heroVignetteStart: 'rgba(242, 240, 235, 0)',
+ heroVignetteMid: 'rgba(242, 240, 235, 0.03)',
+ heroVignetteEnd: 'rgba(242, 240, 235, 0.12)',
+ heroLineOpacityScale: 0.7,
+ },
+ status: {
+ success: '#2b75d4',
+ danger: '#d94848',
+ primaryHover: '#1f66c7',
+ },
+});
-export default theme;
+export const theme = darkTheme;
diff --git a/src/theme/theme-provider.test.tsx b/src/theme/theme-provider.test.tsx
new file mode 100644
index 0000000..d5702bb
--- /dev/null
+++ b/src/theme/theme-provider.test.tsx
@@ -0,0 +1,202 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useTheme } from 'styled-components';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { darkTheme, lightTheme } from '../theme';
+import { ThemeModeProvider, themeStorageKey, useThemeMode } from './theme-provider';
+
+let storageState: Record = {};
+
+function createStorageMock(overrides: Partial = {}): Storage {
+ return {
+ get length() {
+ return Object.keys(storageState).length;
+ },
+ clear(): void {
+ storageState = {};
+ },
+ getItem(key: string): string | null {
+ return key in storageState ? storageState[key] : null;
+ },
+ key(index: number): string | null {
+ return Object.keys(storageState)[index] ?? null;
+ },
+ removeItem(key: string): void {
+ delete storageState[key];
+ },
+ setItem(key: string, value: string): void {
+ storageState[key] = value;
+ },
+ ...overrides,
+ } as Storage;
+}
+
+function Probe(): JSX.Element {
+ const { mode, setMode, toggleMode } = useThemeMode();
+ const theme = useTheme();
+
+ return (
+ <>
+ {mode}
+ {theme.mode}
+ {theme.color.background}
+
+ toggle theme
+
+ setMode('dark')}>
+ set dark
+
+
+ );
+}
+
+describe('theme-provider', () => {
+ beforeEach(() => {
+ storageState = {};
+
+ Object.defineProperty(window, 'localStorage', {
+ configurable: true,
+ value: createStorageMock(),
+ });
+
+ Object.defineProperty(window, 'matchMedia', {
+ configurable: true,
+ value: vi.fn().mockImplementation((query: string) => ({
+ matches: query === '(prefers-color-scheme: light)',
+ media: query,
+ onchange: null,
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ })),
+ });
+
+ document.documentElement.dataset.theme = '';
+ document.documentElement.style.colorScheme = '';
+ document.head.innerHTML = 'outside
;
+ }
+
+ expect(() => render(
+ ,
+ );
+
+ expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+ expect(screen.getByTestId('theme-mode')).toHaveTextContent('dark');
+ expect(screen.getByTestId('theme-background')).toHaveTextContent(darkTheme.color.background);
+
+ await waitFor(() => {
+ expect(document.documentElement.dataset.theme).toBe('dark');
+ expect(document.documentElement.style.colorScheme).toBe('dark');
+ expect(window.localStorage.getItem(themeStorageKey)).toBe('dark');
+ expect(document.querySelector('meta[name="theme-color"]')).toHaveAttribute(
+ 'content',
+ darkTheme.color.background,
+ );
+ });
+ });
+
+ it('prefers a stored theme mode when no explicit initial mode is provided', () => {
+ storageState[themeStorageKey] = 'light';
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('mode')).toHaveTextContent('light');
+ expect(screen.getByTestId('theme-background')).toHaveTextContent(lightTheme.color.background);
+ });
+
+ it('falls back to the system theme when there is no stored preference', () => {
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('mode')).toHaveTextContent('light');
+ expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: light)');
+ });
+
+ it('falls back to dark mode when matchMedia is unavailable', () => {
+ Object.defineProperty(window, 'matchMedia', {
+ configurable: true,
+ value: undefined,
+ });
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+ });
+
+ it('toggles and sets the active theme mode', async () => {
+ const user = userEvent.setup();
+
+ render(
+
+ ,
+ );
+
+ await user.click(screen.getByRole('button', { name: 'toggle theme' }));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('mode')).toHaveTextContent('light');
+ expect(screen.getByTestId('theme-background')).toHaveTextContent(lightTheme.color.background);
+ expect(window.localStorage.getItem(themeStorageKey)).toBe('light');
+ });
+
+ await user.click(screen.getByRole('button', { name: 'set dark' }));
+
+ await waitFor(() => {
+ expect(screen.getByTestId('mode')).toHaveTextContent('dark');
+ expect(window.localStorage.getItem(themeStorageKey)).toBe('dark');
+ });
+ });
+
+ it('handles an invalid localStorage implementation gracefully', () => {
+ Object.defineProperty(window, 'localStorage', {
+ configurable: true,
+ value: {},
+ });
+
+ render(
+
+ ,
+ );
+
+ expect(screen.getByTestId('mode')).toHaveTextContent('light');
+ expect(screen.getByTestId('theme-mode')).toHaveTextContent('light');
+ });
+});
diff --git a/src/theme/theme-provider.tsx b/src/theme/theme-provider.tsx
new file mode 100644
index 0000000..41e6a5a
--- /dev/null
+++ b/src/theme/theme-provider.tsx
@@ -0,0 +1,107 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+ type ReactNode,
+} from 'react';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { darkTheme, lightTheme, type ThemeMode } from '../theme';
+
+interface ThemeModeContextValue {
+ mode: ThemeMode;
+ setMode: (mode: ThemeMode) => void;
+ toggleMode: () => void;
+}
+
+interface ThemeModeProviderProps {
+ children: ReactNode;
+ initialMode?: ThemeMode;
+}
+
+const themeStorageKey = 'sprout-theme';
+const ThemeModeContext = createContext(null);
+
+function getStorage(): Storage | null {
+ if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+ return null;
+ }
+
+ const storage = window.localStorage;
+
+ if (typeof storage.getItem !== 'function' || typeof storage.setItem !== 'function') {
+ return null;
+ }
+
+ return storage;
+}
+
+function getStoredThemeMode(): ThemeMode | null {
+ const storedMode = getStorage()?.getItem(themeStorageKey);
+
+ if (storedMode === 'light' || storedMode === 'dark') {
+ return storedMode;
+ }
+
+ return null;
+}
+
+function getSystemThemeMode(): ThemeMode {
+ if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+ return 'dark';
+ }
+
+ return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+
+function detectInitialThemeMode(): ThemeMode {
+ return getStoredThemeMode() ?? getSystemThemeMode();
+}
+
+export function ThemeModeProvider({ children, initialMode }: ThemeModeProviderProps): JSX.Element {
+ const [mode, setMode] = useState(() => initialMode ?? detectInitialThemeMode());
+ const activeTheme = mode === 'light' ? lightTheme : darkTheme;
+
+ useEffect(() => {
+ document.documentElement.dataset.theme = mode;
+ document.documentElement.style.colorScheme = mode;
+ getStorage()?.setItem(themeStorageKey, mode);
+
+ const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+ themeColorMeta?.setAttribute('content', activeTheme.color.background);
+ }, [activeTheme.color.background, mode]);
+
+ const toggleMode = useCallback((): void => {
+ setMode((currentMode) => (currentMode === 'dark' ? 'light' : 'dark'));
+ }, []);
+
+ const value = useMemo(
+ () => ({
+ mode,
+ setMode,
+ toggleMode,
+ }),
+ [mode, toggleMode],
+ );
+
+ return (
+
+ {children}
+
+ );
+}
+
+/* Reads and updates the active theme mode from context. */
+export function useThemeMode(): ThemeModeContextValue {
+ const context = useContext(ThemeModeContext);
+
+ if (!context) {
+ throw new Error('useThemeMode must be used within a ThemeModeProvider.');
+ }
+
+ return context;
+}
+
+export { themeStorageKey };
diff --git a/src/views/Contact.tsx b/src/views/Contact.tsx
deleted file mode 100644
index 68dd10e..0000000
--- a/src/views/Contact.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import styled from "@emotion/styled";
-import SectionLayout from "../components/SectionLayout";
-import Article from "../components/Article";
-import ViewContainer from "../components/ViewContainer";
-import Footer from "@components/Footer";
-import { mq } from "../theme";
-
-function Contact() {
- return (
-
-
-
-
- We want to hear more about your projects, your journey and your dreams! Let’s have a chat about how we can collaborate and help you
- achieve them. Drop an e-mail, give us a call or book a meeting - become a part of our ecosystem.
-
-
-
-
- hello@wearesprout.se
-
- CEO
-
-
- Head of Recruitment
-
-
-
-
-
-
- );
-}
-
-export default Contact;
-
-const ArticlesWrapper = styled.div`
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- gap: 0;
- margin-bottom: 2rem;
-
- ${mq["sm"]} {
- gap: 5rem;
- flex-direction: row;
- }
-`;
-
-const MainContact = styled.span`
- display: block;
- margin-bottom: ${(props) => props.theme.spacing.sm};
- word-break: break-all;
-`;
-
-const ContactPerson = styled.span`
- display: block;
- background: #ebebeb;
- color: #141517;
- padding: 5px;
- margin-bottom: ${(props) => props.theme.spacing.xs};
- word-break: break-all;
-`;
diff --git a/src/views/Hero.tsx b/src/views/Hero.tsx
deleted file mode 100644
index 4f62957..0000000
--- a/src/views/Hero.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import styled from "@emotion/styled";
-import SectionLayout from "../components/SectionLayout";
-import Heading from "../components/Heading";
-import { mq } from "../theme";
-import ViewContainer from "../components/ViewContainer";
-
-function Hero() {
- return (
- <>
-
-
-
-
-
- Welcome to our universe.
- A growing ecosystem of
-
- collaborating people
-
- ideas and initiatives
-
-
-
-
-
-
- );
-}
-
-export default Hero;
-
-const HeroContent = styled.div`
- display: flex;
- width: 100%;
- flex-direction: column;
- align-items: center;
- margin-top: 18svh;
- gap: ${({ theme }) => theme.spacing.sm};
- padding-bottom: ${({ theme }) => theme.spacing.md};
-
- ${mq["sm"]} {
- margin-top: initial;
- height: 100%;
- gap: ${({ theme }) => theme.spacing.lg};
- }
-`;
-
-const SubheadingWrapper = styled.div`
- all: unset;
- width: 100%;
- display: flex;
- align-items: center;
- flex-direction: column;
- gap: ${({ theme }) => theme.spacing.md};
- margin-bottom: ${({ theme }) => theme.spacing.md};
-
- ${mq["sm"]} {
- align-items: flex-start;
- gap: ${({ theme }) => theme.spacing.sm};
- }
-`;
-
-const Subheading = styled.h2`
- all: unset;
- display: inline;
- justify-items: center;
- flex-direction: column;
- color: ${({ theme }) => theme.colors.blueWhale};
- text-transform: uppercase;
-
- & * {
- font-family: ${({ theme }) => theme.fontFamily.bayon};
- line-height: ${({ theme }) => theme.lineHeight.md};
- font-size: ${({ theme }) => theme.fontSize.lg};
- }
-
- ${mq["sm"]} {
- display: flex;
-
- & * {
- font-family: ${({ theme }) => theme.fontFamily.bayon};
- line-height: 3.125rem;
- font-size: 3.125rem;
- }
- }
-
- & > div {
- display: flex;
- flex-direction: column;
-
- align-items: baseline;
- flex-wrap: wrap;
-
- ${mq["sm"]} {
- display: flex;
- }
-
- em {
- display: block;
- line-height: ${({ theme }) => theme.lineHeight.lg};
- overflow-wrap: anywhere;
- font-size: ${({ theme }) => theme.lineHeight.lg};
-
- ${mq["sm"]} {
- display: inline;
- font-size: 5.938rem;
- line-height: 5.938rem;
- }
-
- /* media exception */
- @media only screen and (min-width: 732px) {
- margin-left: ${({ theme }) => theme.fontSize.xl};
- }
- }
- }
-`;
diff --git a/src/views/OurCases.tsx b/src/views/OurCases.tsx
deleted file mode 100644
index b4ec058..0000000
--- a/src/views/OurCases.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from "@emotion/styled";
-import SectionLayout from "@components/SectionLayout";
-import Article from "@components/Article";
-import ViewContainer from "@components/ViewContainer";
-import CaseBanner from "@components/CaseBanner";
-import { mq } from "../theme";
-
-function OurCases() {
- return (
-
- } bgColor="white">
-
-
-
- Hiring us is not like hiring anyone else. We hit the ground running and make an impact from day one. We bring{" "}
- energy positivity and professionalism to any project. And if you hire a whole Sprout team - watch that energy
-
-
-
-
-
- );
-}
-
-export default OurCases;
-
-const ArticlesWrapper = styled.div`
- display: flex;
- justify-content: space-between;
- gap: 5rem;
- flex-direction: column;
- margin-bottom: 2rem;
-
- ${mq["sm"]} {
- flex-direction: row;
- width: 50%;
- }
-`;
diff --git a/src/views/OurVision.tsx b/src/views/OurVision.tsx
deleted file mode 100644
index c85302a..0000000
--- a/src/views/OurVision.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import styled from "@emotion/styled";
-import SectionLayout from "../components/SectionLayout";
-import Article from "../components/Article";
-import ViewContainer from "../components/ViewContainer";
-import { mq } from "../theme";
-import { WaveEffect } from "../components/Intro/Index";
-
-function OurVision() {
- return (
-
-
-
-
-
- We thrive together and, powered by our chemistry and passion , we want to build exciting things. Using our collective as a
- platform, we aim to expand our capabilities with new people, ideas and perspectives. That's where you come in,{" "}
- evolving Sprout into an even better version.
-
-
-
-
- As a Sprout partner, this means having the full power of Sprout at your side , in business ventures, projects or product
- development efforts. With an experienced set of professionals to back you, no dream is too big! When we join forces,{" "}
- anything is possible .
-
-
-
-
-
-
-
- );
-}
-
-export default OurVision;
-
-const ArticlesWrapper = styled.div`
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- gap: 0rem;
- margin-bottom: 2rem;
-
- ${mq["sm"]} {
- flex-direction: row;
- gap: 5rem;
- }
-`;
-
-const StyledSectionLayout = styled(SectionLayout)`
- background-position: bottom;
- background-size: 100% auto;
- z-index: 10;
-`;
-
-const WaveHolder = styled.div`
- width: 100%;
- justify-content: center;
- align-items: center;
- height: 20vh;
- position: absolute;
- bottom: 0;
-
- ${mq["sm"]} {
- height: 40vh;
- }
-`;
diff --git a/src/views/Wave.tsx b/src/views/Wave.tsx
deleted file mode 100644
index 2b8f135..0000000
--- a/src/views/Wave.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useEffect } from "react";
-import styled from "@emotion/styled";
-import ViewContainer from "../components/ViewContainer";
-import { Intro } from "../components/Intro/Index";
-import { useNavigate } from "react-router-dom";
-import Cursor from "@components/Cursor";
-
-function Wave() {
- const navigate = useNavigate();
-
- const proceed = () => {
- // setIntroVisited(true);
- navigate("#Home");
- };
-
- useEffect(() => {
- const onKeyUp = (e: { key: string }) => {
- if (e.key === "Enter") proceed();
- };
-
- window.addEventListener("keyup", onKeyUp);
-
- return () => window.removeEventListener("keyup", onKeyUp);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- return (
-
-
-
-
- );
-}
-
-export default Wave;
-
-const Enter = styled.div`
- position: absolute;
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
- color: ${({ theme }) => theme.colors.blueWhale};
- z-index: 10;
-`;
-
-const Link = styled.div`
- cursor: pointer;
-`;
diff --git a/src/views/WeAreSprout.tsx b/src/views/WeAreSprout.tsx
deleted file mode 100644
index 76db0fc..0000000
--- a/src/views/WeAreSprout.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from "@emotion/styled";
-import SectionLayout from "../components/SectionLayout";
-import Article from "../components/Article";
-import ViewContainer from "../components/ViewContainer";
-import ImageBanner from "../components/ImagesBanner";
-import { mq } from "../theme";
-
-function WeAreSprout() {
- return (
-
- } bgColor="white">
-
-
-
- As trends and technology have emerged and evolved, projects and colleagues have come and gone, we've stayed on our path,
- following our passion for software .
-
-
- Somewhere along that path, we met people that made a mark.
-
-
-
-
- People that challenged us, made us better or simply put a smile on our face. We've realized it's all about them .
- Those people. Us .
-
-
- Sprout is a collaborative, creative platform that builds upon that insight.
-
-
-
-
-
- );
-}
-
-export default WeAreSprout;
-
-const ArticlesWrapper = styled.div`
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- gap: 0;
- margin-bottom: 2rem;
-
- ${mq["sm"]} {
- flex-direction: row;
- gap: 5rem;
- }
-`;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/sv/tjanster/ai-agenter/index.html b/sv/tjanster/ai-agenter/index.html
new file mode 100644
index 0000000..8d45269
--- /dev/null
+++ b/sv/tjanster/ai-agenter/index.html
@@ -0,0 +1,45 @@
+
+
+
+ AI & agenter — Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/sv/tjanster/konsultverksamhet/index.html b/sv/tjanster/konsultverksamhet/index.html
new file mode 100644
index 0000000..64d392e
--- /dev/null
+++ b/sv/tjanster/konsultverksamhet/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Konsultverksamhet — Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/sv/tjanster/projektatagande/index.html b/sv/tjanster/projektatagande/index.html
new file mode 100644
index 0000000..665452a
--- /dev/null
+++ b/sv/tjanster/projektatagande/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Projektåtagande — Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/sv/tjanster/radgivning/index.html b/sv/tjanster/radgivning/index.html
new file mode 100644
index 0000000..44ab860
--- /dev/null
+++ b/sv/tjanster/radgivning/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Rådgivning — Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/sv/tjanster/startups/index.html b/sv/tjanster/startups/index.html
new file mode 100644
index 0000000..2df78bf
--- /dev/null
+++ b/sv/tjanster/startups/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Startups — Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/sv/tjanster/team/index.html b/sv/tjanster/team/index.html
new file mode 100644
index 0000000..50d3d39
--- /dev/null
+++ b/sv/tjanster/team/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Team — Sprout — Mjukvaruutvecklare, konsulter & investeringsbolag
+
+
+
+
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..6d516bc
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": false,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "types": ["vite/client", "vitest/globals"]
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 0a6c926..ea9d0cd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,27 +1,11 @@
{
- "compilerOptions": {
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ESNext"],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": false,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsxImportSource": "@emotion/react",
- "noEmit": true,
- "jsx": "react-jsx",
- "paths": {
- "@components/*": ["./src/components/*"],
- "@hooks": ["./src/hooks"],
- "@hooks/*": ["./src/hooks/*"],
- },
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json"
},
- "include": ["src"],
- "references": [{ "path": "./tsconfig.node.json" }],
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 13b35d0..0c06a1b 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,9 +1,14 @@
{
- "compilerOptions": {
- "composite": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "allowSyntheticDefaultImports": true
- },
- "include": ["vite.config.ts"]
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "target": "ES2022",
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "noEmit": true,
+ "types": ["node"]
+ },
+ "include": ["vite.config.ts", "scripts/**/*.ts", "src/i18n/site-pages.ts", "src/i18n/translations.ts"]
}
diff --git a/vite.config.ts b/vite.config.ts
index a78fe81..9a35b32 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,36 +1,41 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import { getIndexablePages } from './src/i18n/site-pages';
+
+const htmlInputs = Object.fromEntries([
+ ['index', resolve(__dirname, 'index.html')],
+ ...getIndexablePages().map((page: ReturnType[number]) => {
+ const entryKey = `${page.path.slice(1)}index`.replace(/\/$/, '').replace(/\/+/g, '/');
+ const entryPath = resolve(__dirname, page.path.slice(1), 'index.html');
+
+ return [entryKey, entryPath];
+ }),
+]);
-// https://vitejs.dev/config/
export default defineConfig({
- server: {
- open: true,
+ plugins: [react()],
+ build: {
+ rollupOptions: {
+ input: htmlInputs,
},
- plugins: [
- tsconfigPaths(),
- react({
- jsxImportSource: "@emotion/react",
- plugins: [
- [
- "@swc/plugin-emotion",
- {
- // default is true. It will be disabled when build type is production.
- sourceMap: false,
- // default is 'dev-only'.
- // autoLabel: "never" | "dev-only" | "always",
- autoLabel: "dev-only",
-
- // default is '[local]'.
- // Allowed values: `[local]` `[filename]` and `[dirname]`
- // This option only works when autoLabel is set to 'dev-only' or 'always'.
- // It allows you to define the format of the resulting label.
- // The format is defined via string where variable parts are enclosed in square brackets [].
- // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
- // labelFormat: string,
- },
- ],
- ],
- }),
- ],
+ },
+ test: {
+ environment: 'jsdom',
+ setupFiles: './src/test/setup.ts',
+ css: true,
+ coverage: {
+ provider: 'v8',
+ reporter: ['text', 'html'],
+ all: true,
+ include: ['src/**/*.{ts,tsx}'],
+ exclude: ['**/*.test.*', '**/*.spec.*', 'src/test/**', '**/*.d.ts'],
+ thresholds: {
+ lines: 80,
+ functions: 80,
+ branches: 80,
+ statements: 80,
+ },
+ },
+ },
});
+ 
+
+![]({"sprout-logo.png"}){kind=logo}
-
-