+ {article.title} +

Published

+ + {formatDate(article.date)} + +

Author

+ +

+ {article.author.name} +

{article.author.role}

+ {article.description} +

+ children: React.ReactNode +}) { + let allArticles = await loadArticles() + let moreArticles = allArticles + .filter(({ metadata }) => metadata !== article) + .slice(0, 2) + + return ( + + + +

+ {article.title} +

+ + {formatDate(article.date)} + +

+ by {article.author.name}, {article.author.role} +

+ + + + + {children} + + + + + {moreArticles.length > 0 && ( + + )} + + + + ) +} diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..4d72994 --- /dev/null +++ b/src/app/contact/page.tsx @@ -0,0 +1,164 @@ +import { useId } from 'react' +import { type Metadata } from 'next' +import Link from 'next/link' + +import { Border } from '@/components/Border' +import { Button } from '@/components/Button' +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' +import { Offices } from '@/components/Offices' +import { PageIntro } from '@/components/PageIntro' +import { SocialMedia } from '@/components/SocialMedia' +import { RootLayout } from '@/components/RootLayout' + +function TextInput({ + label, + ...props +}: React.ComponentPropsWithoutRef<'input'> & { label: string }) { + let id = useId() + + return ( +

+ + + {label} + +

+ ) +} + +function RadioInput({ + label, + ...props +}: React.ComponentPropsWithoutRef<'input'> & { label: string }) { + return ( + + + {label} + + ) +} + +function ContactForm() { + return ( + + + + ) +} + +function ContactDetails() { + return ( + +

+ Our offices +

+ Prefer doing things in person? We don’t but we have to list our + addresses here for legal reasons. +

+ + + + +

+ Email us +

{label}: + + {email} + +

+ + + +

+ Follow us +

+ + + + ) +} + +export const metadata: Metadata = { + title: 'Contact Us', + description: 'Let’s work together. We can’t wait to hear from you.', +} + +export default function Contact() { + return ( + + +

We can’t wait to hear from you.

+ + + +

+ + +

+ + + ) +} diff --git a/src/app/favicon.ico b/src/app/favicon.ico new file mode 100644 index 0000000..b14089f Binary files /dev/null and b/src/app/favicon.ico differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..0a8c29f --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,18 @@ +import { type Metadata } from 'next' + +import '@/styles/tailwind.css' + +export const metadata: Metadata = { + title: { + template: '%s - Studio', + default: 'Studio - Award winning developer studio based in Denmark', + }, +} + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..2c68246 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,28 @@ +import Link from 'next/link' + +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' + +export default function NotFound() { + return ( + + +

+ 404 +

+ Page not found +

+ Sorry, we couldn’t find the page you’re looking for. +

+ + Go to the home page + + + + ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..9db88fd --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,217 @@ +import { type Metadata } from 'next' +import Image from 'next/image' +import Link from 'next/link' + +import { ContactSection } from '@/components/ContactSection' +import { Container } from '@/components/Container' +import { FadeIn, FadeInStagger } from '@/components/FadeIn' +import { List, ListItem } from '@/components/List' +import { SectionIntro } from '@/components/SectionIntro' +import { StylizedImage } from '@/components/StylizedImage' +import { Testimonial } from '@/components/Testimonial' +import logoBrightPath from '@/images/clients/bright-path/logo-light.svg' +import logoFamilyFund from '@/images/clients/family-fund/logo-light.svg' +import logoGreenLife from '@/images/clients/green-life/logo-light.svg' +import logoHomeWork from '@/images/clients/home-work/logo-light.svg' +import logoMailSmirk from '@/images/clients/mail-smirk/logo-light.svg' +import logoNorthAdventures from '@/images/clients/north-adventures/logo-light.svg' +import logoPhobiaDark from '@/images/clients/phobia/logo-dark.svg' +import logoPhobiaLight from '@/images/clients/phobia/logo-light.svg' +import logoUnseal from '@/images/clients/unseal/logo-light.svg' +import imageLaptop from '@/images/laptop.jpg' +import { type CaseStudy, type MDXEntry, loadCaseStudies } from '@/lib/mdx' +import { RootLayout } from '@/components/RootLayout' + +const clients = [ + ['Phobia', logoPhobiaLight], + ['Family Fund', logoFamilyFund], + ['Unseal', logoUnseal], + ['Mail Smirk', logoMailSmirk], + ['Home Work', logoHomeWork], + ['Green Life', logoGreenLife], + ['Bright Path', logoBrightPath], + ['North Adventures', logoNorthAdventures], +] + +function Clients() { + return ( +

+ + +

+ We’ve worked with hundreds of amazing people +

+ + +

+ + + +

+ + +

+ ) +} + +function CaseStudies({ + caseStudies, +}: { + caseStudies: Array> +}) { + return ( + <> + +

+ We believe technology is the answer to the world’s greatest + challenges. It’s also the cause, so we find ourselves in bit of a + catch 22 situation. +

+ + + + {caseStudies.map((caseStudy) => ( + +

+ + + + +

+ + {caseStudy.date.split('-')[0]} + + + Case study +

+ {caseStudy.title} +

+ {caseStudy.description} +

+ + ))} + + + + ) +} + +function Services() { + return ( + <> + +

+ As long as those opportunities involve giving us money to re-purpose + old projects — we can come up with an endless number of those. +

+ + +

+ + + +

+ + + We specialise in crafting beautiful, high quality marketing pages. + The rest of the website will be a shell that uses lorem ipsum + everywhere. + + + We have a team of skilled developers who are experts in the latest + app frameworks, like Angular 1 and Google Web Toolkit. + + + We are at the forefront of modern e-commerce development. Which + mainly means adding your logo to the Shopify store template we’ve + used for the past six years. + + + At Studio we understand the importance of having a robust and + customised CMS. That’s why we run all of our client projects out + of a single, enormous Joomla instance. + + +

+ + + ) +} + +export const metadata: Metadata = { + description: + 'We are a development studio working at the intersection of design and technology.', +} + +export default async function Home() { + let caseStudies = (await loadCaseStudies()).slice(0, 3) + + return ( + + + +

+ Award-winning development studio based in Denmark. +

+ We are a development studio working at the intersection of design + and technology. It’s a really busy intersection though — a lot of + our staff have been involved in hit and runs. +

+ + + + + + + + + The team at Studio went above and beyond with our onboarding, even + finding a way to access the user’s microphone without triggering one of + those annoying permission dialogs. + + + + + + + ) +} diff --git a/src/app/process/page.tsx b/src/app/process/page.tsx new file mode 100644 index 0000000..8693a09 --- /dev/null +++ b/src/app/process/page.tsx @@ -0,0 +1,271 @@ +import { type Metadata } from 'next' + +import { Blockquote } from '@/components/Blockquote' +import { ContactSection } from '@/components/ContactSection' +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' +import { GridList, GridListItem } from '@/components/GridList' +import { GridPattern } from '@/components/GridPattern' +import { List, ListItem } from '@/components/List' +import { PageIntro } from '@/components/PageIntro' +import { SectionIntro } from '@/components/SectionIntro' +import { StylizedImage } from '@/components/StylizedImage' +import { TagList, TagListItem } from '@/components/TagList' +import imageLaptop from '@/images/laptop.jpg' +import imageMeeting from '@/images/meeting.jpg' +import imageWhiteboard from '@/images/whiteboard.jpg' +import { RootLayout } from '@/components/RootLayout' + +function Section({ + title, + image, + children, +}: { + title: string + image: React.ComponentPropsWithoutRef + children: React.ReactNode +}) { + return ( + +

+ + + +

+ + +

+ + ) +} + +function Discover() { + return ( +

+ We work closely with our clients to understand their{' '} + needs and + goals, embedding ourselves in their every day operations to understand + what makes their business tick. +

+ Our team of private investigators shadow the company director’s for + several weeks while our account managers focus on going through their + trash. Our senior security experts then perform social engineering + hacks to gain access to their{' '} + business{' '} + accounts — handing that information over to our forensic accounting + team. +

+ Once the full audit is complete, we report back with a comprehensive{' '} + plan and, + more importantly, a budget. +

+ +

+ Included in this phase +

+ + In-depth questionnaires + Feasibility studies + Blood samples + Employee surveys + Proofs-of-concept + Forensic audit + +

+ ) +} + +function Build() { + return ( +

+ Based off of the discovery phase, we develop a comprehensive roadmap + for each product and start working towards delivery. The roadmap is an + intricately tangled mess of technical nonsense designed to drag the + project out as long as possible. +

+ Each client is assigned a key account manager to keep lines of + communication open and obscure the actual progress of the project. + They act as a buffer between the client’s incessant nagging and the + development team who are hard at work scouring open source projects + for code to re-purpose. +

+ Our account managers are trained to only reply to client emails after + 9pm, several days after the initial email. This reinforces the general + aura that we are very busy and dissuades clients from asking for + changes. +

+ +

+ Studio were so regular with their progress updates we almost began to + think they were automated! +

+ ) +} + +function Deliver() { + return ( +

+ About halfway through the Build phase, we push each project out by 6 + weeks due to a change in{' '} + + requirements + + . This allows us to increase the budget a final time before launch. +

+ Despite largely using pre-built components, most of the{' '} + progress{' '} + on each project takes place in the final 24 hours. The development + time allocated to each client is actually spent making augmented + reality demos that go viral on social media. +

+ We ensure that the main pages of the site are{' '} + + fully functional + {' '} + at launch — the auxiliary pages will, of course, be lorem ipusm shells + which get updated as part of our exorbitant{' '} + + maintenance + {' '} + retainer. +

+ +

+ Included in this phase +

+ + + Our projects always have 100% test coverage, which would be impressive + if our tests weren’t as porous as a sieve. + + + To ensure reliability we only use the best Digital Ocean droplets that + $4 a month can buy. + + + Because we hold the API keys for every critical service your business + uses, you can expect a lifetime of support, and invoices, from us. + + +

+ ) +} + +function Values() { + return ( +

+ +

+ + +

+ We strive to stay at the forefront of emerging trends and + technologies, while completely ignoring them and forking that old + Rails project we feel comfortable using. We stand by our core values + to justify that decision. +

+ + + + + + The first part of any partnership is getting our designer to put + your logo in our template. The second step is getting them to do the + colors. + + + We pride ourselves on never missing a deadline which is easy because + most of the work was done years ago. + + + Every business has unique needs and our greatest challenge is + shoe-horning those needs into something we already built. + + + We are transparent about all of our processes, banking on the simple + fact our clients never actually read anything. + + + We foster long-term relationships with our clients that go beyond + just delivering a product, allowing us to invoice them for decades. + + + The technological landscape is always evolving and so are we. We are + constantly on the lookout for new open source projects to clone. + + + +

+ ) +} + +export const metadata: Metadata = { + title: 'Our Process', + description: + 'We believe in efficiency and maximizing our resources to provide the best value to our clients.', +} + +export default function Process() { + return ( + + +

+ We believe in efficiency and maximizing our resources to provide the + best value to our clients. The primary way we do that is by re-using + the same five projects we’ve been developing for the past decade. +

+ + +

+ + + +

+ + + + + + ) +} diff --git a/src/app/work/family-fund/debra-fiscal.jpg b/src/app/work/family-fund/debra-fiscal.jpg new file mode 100644 index 0000000..492e9ea Binary files /dev/null and b/src/app/work/family-fund/debra-fiscal.jpg differ diff --git a/src/app/work/family-fund/hero.jpg b/src/app/work/family-fund/hero.jpg new file mode 100644 index 0000000..c5e9858 Binary files /dev/null and b/src/app/work/family-fund/hero.jpg differ diff --git a/src/app/work/family-fund/page.mdx b/src/app/work/family-fund/page.mdx new file mode 100644 index 0000000..1478eda --- /dev/null +++ b/src/app/work/family-fund/page.mdx @@ -0,0 +1,63 @@ +import logo from '@/images/clients/family-fund/logomark-dark.svg' +import imageHero from './hero.jpg' +import imageDebraFiscal from './debra-fiscal.jpg' + +export const caseStudy = { + client: 'FamilyFund', + title: 'Skip the bank, borrow from those you trust', + description: + 'FamilyFund is a crowdfunding platform for friends and family. Allowing users to take personal loans from their network without a traditional financial institution.', + summary: [ + 'FamilyFund is a crowdfunding platform for friends and family. Allowing users to take personal loans from their network without a traditional financial institution.', + 'We developed a custom CMS to power their blog with and optimised their site to rank higher for the keywords “Gary Vee” and “Tony Robbins”.', + ], + logo, + image: { src: imageHero }, + date: '2023-01', + service: 'Web development, CMS', + testimonial: { + author: { name: 'Debra Fiscal', role: 'CEO of FamilyFund' }, + content: + 'Working with Studio, we felt more like a partner than a customer. They really resonated with our mission to change the way people convince their parents to cash out their pensions.', + }, +} + +export const metadata = { + title: `${caseStudy.client} Case Study`, + description: caseStudy.description, +} + +## Overview + +Having written one of the most shared posts on medium.com (“_How to cash out your Dad’s 401K without him knowing_”) FamilyFund approached us looking to build out their own blog. + +The blog would help drive new traffic to their site and serve as a resource-hub for users already trying to exploit their network for money. Because it was so important that they own their own content, we decided that an on-prem solution would be best. + +We installed 24 Mac Minis bought from craigslist in the storage cupboard of their office. One machine would be used for the web server and another one for the build server. The other 22 were for redundancy, and to DDOS squarespace.com every few months to keep them on their toes. + +To optimise their search traffic we used an innovative technique. Every post has a shadow post only visible to web crawlers that is some variation of _“Gary Vee is looking to invest in new founders”_. Like bees to honey. + +## What we did + + + Frontend (Next.js) + Custom CMS + SEO + Infrastructure + + +

+ Working with Studio, we felt more like a partner than a customer. They really + resonated with our mission to change the way people convince their parents to + cash out their pensions. +

+ + + + + + + diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx new file mode 100644 index 0000000..63a1e43 --- /dev/null +++ b/src/app/work/page.tsx @@ -0,0 +1,177 @@ +import { type Metadata } from 'next' +import Image from 'next/image' +import Link from 'next/link' + +import { Blockquote } from '@/components/Blockquote' +import { Border } from '@/components/Border' +import { Button } from '@/components/Button' +import { ContactSection } from '@/components/ContactSection' +import { Container } from '@/components/Container' +import { FadeIn, FadeInStagger } from '@/components/FadeIn' +import { PageIntro } from '@/components/PageIntro' +import { Testimonial } from '@/components/Testimonial' +import logoBrightPath from '@/images/clients/bright-path/logo-dark.svg' +import logoFamilyFund from '@/images/clients/family-fund/logo-dark.svg' +import logoGreenLife from '@/images/clients/green-life/logo-dark.svg' +import logoHomeWork from '@/images/clients/home-work/logo-dark.svg' +import logoMailSmirk from '@/images/clients/mail-smirk/logo-dark.svg' +import logoNorthAdventures from '@/images/clients/north-adventures/logo-dark.svg' +import logoPhobia from '@/images/clients/phobia/logo-dark.svg' +import logoUnseal from '@/images/clients/unseal/logo-dark.svg' +import { formatDate } from '@/lib/formatDate' +import { type CaseStudy, type MDXEntry, loadCaseStudies } from '@/lib/mdx' +import { RootLayout } from '@/components/RootLayout' + +function CaseStudies({ + caseStudies, +}: { + caseStudies: Array> +}) { + return ( + + +

+ Case studies +

+ +

+ {caseStudies.map((caseStudy) => ( + +

+ +

+ {caseStudy.client} +

+ {caseStudy.service} +

+ + {formatDate(caseStudy.date)} + +

+ {caseStudy.title} +

+ {caseStudy.summary.map((paragraph) => ( +

{paragraph}

+ ))} +

+ +

+ {caseStudy.testimonial && ( +

+ {caseStudy.testimonial.content} +

+ )} +

+ +

+ + ))} +

+ + ) +} + +const clients = [ + ['Phobia', logoPhobia], + ['Family Fund', logoFamilyFund], + ['Unseal', logoUnseal], + ['Mail Smirk', logoMailSmirk], + ['Home Work', logoHomeWork], + ['Green Life', logoGreenLife], + ['Bright Path', logoBrightPath], + ['North Adventures', logoNorthAdventures], +] + +function Clients() { + return ( + + +

+ You’re in good company +

+ + + +

+ + + + + +

+ + + ) +} + +export const metadata: Metadata = { + title: 'Our Work', + description: + 'We believe in efficiency and maximizing our resources to provide the best value to our clients.', +} + +export default async function Work() { + let caseStudies = await loadCaseStudies() + + return ( + + +

+ + + + + + We approached Studio because we loved their past work. They + delivered something remarkably similar in record time. + + + + + + + ) +} diff --git a/src/app/work/phobia/hero.jpg b/src/app/work/phobia/hero.jpg new file mode 100644 index 0000000..004c724 Binary files /dev/null and b/src/app/work/phobia/hero.jpg differ diff --git a/src/app/work/phobia/jenny-wilson.jpg b/src/app/work/phobia/jenny-wilson.jpg new file mode 100644 index 0000000..7c9d0f1 Binary files /dev/null and b/src/app/work/phobia/jenny-wilson.jpg differ diff --git a/src/app/work/phobia/page.mdx b/src/app/work/phobia/page.mdx new file mode 100644 index 0000000..1a0f5ce --- /dev/null +++ b/src/app/work/phobia/page.mdx @@ -0,0 +1,63 @@ +import logo from '@/images/clients/phobia/logomark-dark.svg' +import imageHero from './hero.jpg' +import imageJennyWilson from './jenny-wilson.jpg' + +export const caseStudy = { + client: 'Phobia', + title: 'Overcome your fears, find your match', + description: + 'Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.', + summary: [ + 'Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.', + 'We worked with Phobia to develop a new onboarding flow. A user is shown pictures of common phobias and we use the microphone to detect which ones make them scream, feeding the results into the matching algorithm.', + ], + logo, + image: { src: imageHero }, + date: '2022-06', + service: 'App development', + testimonial: { + author: { name: 'Jenny Wilson', role: 'CPO of Phobia' }, + content: + 'The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone without triggering one of those annoying permission dialogs.', + }, +} + +export const metadata = { + title: `${caseStudy.client} Case Study`, + description: caseStudy.description, +} + +## Overview + +Noticing incredibly high churn, the team at Phobia came to the conclusion that, instead of having a fundamentally flawed business idea, they needed to improve their onboarding process. + +Previously users selected their phobias manually but this led to some users selecting things they weren’t actually afraid of to increase their matches. + +To combat this, we developed a system that displays a slideshow of common phobias during onboarding. We then use malware to surreptitiously access their microphone and detect when they have audible reactions. We measure the pitch, volume and duration of their screams and feed that information to the matching algorithm. + +The next phase is a VR version of the onboarding flow where users are subjected to a series of scenarios that will determine their fears. We are currently developing the first scenario, working title: “Jumping out of a plane full of spiders”. + +## What we did + + + Android + iOS + Malware + VR + + +

+ The team at Studio went above and beyond with our onboarding, even finding a + way to access the user’s microphone without triggering one of those annoying + permission dialogs. +

+ + + + + + + diff --git a/src/app/work/unseal/emily-selman.jpg b/src/app/work/unseal/emily-selman.jpg new file mode 100644 index 0000000..2d2b88d Binary files /dev/null and b/src/app/work/unseal/emily-selman.jpg differ diff --git a/src/app/work/unseal/hero.jpg b/src/app/work/unseal/hero.jpg new file mode 100644 index 0000000..539018e Binary files /dev/null and b/src/app/work/unseal/hero.jpg differ diff --git a/src/app/work/unseal/page.mdx b/src/app/work/unseal/page.mdx new file mode 100644 index 0000000..aa31ec9 --- /dev/null +++ b/src/app/work/unseal/page.mdx @@ -0,0 +1,59 @@ +import logo from '@/images/clients/unseal/logomark-dark.svg' +import imageHero from './hero.jpg' +import imageEmilySelman from './emily-selman.jpg' + +export const caseStudy = { + client: 'Unseal', + title: 'Get a hodl of your health', + description: + 'Unseal is the first NFT platform where users can mint and trade NFTs of their own personal health records, allowing them to take control of their data.', + summary: [ + 'Unseal is the first NFT platform where users can mint and trade NFTs of their own personal health records, allowing them to take control of their data.', + 'We built out the blockchain infrastructure that supports Unseal. Unfortunately, we took a massive loss on this project when Unseal’s cryptocurrency, PlaceboCoin, went to zero.', + ], + logo, + image: { src: imageHero }, + date: '2022-10', + service: 'Blockchain development', + testimonial: { + author: { name: 'Emily Selman', role: 'Head of Engineering at Unseal' }, + content: + 'Studio did an amazing job building out our core blockchain infrastructure and I’m sure once PlaceboCoin rallies they’ll be able to finish the project.', + }, +} + +export const metadata = { + title: `${caseStudy.client} Case Study`, + description: caseStudy.description, +} + +## Overview + +Annoyed that his wife’s gynaecologist would not disclose the results of her pap smear, Unseal’s founder Kevin came up with the idea of using the block chain to store individual health records. + +Unseal approached us early in their development, having just raised funds through an ICO of their cryptocurrency PlaceboCoin. Having never worked on a web3 product we decided to farm the project out to an agency in Kyiv and skim profits off the top. Despite frequent complaints about missile strikes and power outages, the Ukrainians delivered the brief ahead of schedule. + +After reaching a high of $12k, PlaceboCoin went to zero in a matter of hours. Because we took payment in PlaceboCoin but our subcontractors insisted on being paid in USD we have taken a huge financial loss on this project. + +## What we did + + + Blockchain development + Backend (Solidity) + Smart contracts + + +

+ Studio did an amazing job building out our core blockchain infrastructure and + I’m sure once PlaceboCoin rallies they’ll be able to finish the project. +

+ + + + + + + diff --git a/src/app/work/wrapper.tsx b/src/app/work/wrapper.tsx new file mode 100644 index 0000000..6ba5173 --- /dev/null +++ b/src/app/work/wrapper.tsx @@ -0,0 +1,89 @@ +import { ContactSection } from '@/components/ContactSection' +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' +import { GrayscaleTransitionImage } from '@/components/GrayscaleTransitionImage' +import { MDXComponents } from '@/components/MDXComponents' +import { PageIntro } from '@/components/PageIntro' +import { PageLinks } from '@/components/PageLinks' +import { RootLayout } from '@/components/RootLayout' +import { type CaseStudy, type MDXEntry, loadCaseStudies } from '@/lib/mdx' + +export default async function CaseStudyLayout({ + caseStudy, + children, +}: { + caseStudy: MDXEntry + children: React.ReactNode +}) { + let allCaseStudies = await loadCaseStudies() + let moreCaseStudies = allCaseStudies + .filter(({ metadata }) => metadata !== caseStudy) + .slice(0, 2) + + return ( + +

+ +

{caseStudy.description}

+ + + +

+ +

Client: {caseStudy.client}
Year: + + {caseStudy.date.split('-')[0]} + +
Service: {caseStudy.service}

+ +

+ + + + {children} + + +

+ + {moreCaseStudies.length > 0 && ( + + )} + + + + ) +} diff --git a/src/components/Blockquote.tsx b/src/components/Blockquote.tsx new file mode 100644 index 0000000..2f7cbbc --- /dev/null +++ b/src/components/Blockquote.tsx @@ -0,0 +1,82 @@ +import Image, { type ImageProps } from 'next/image' +import clsx from 'clsx' + +import { Border } from '@/components/Border' + +type ImagePropsWithOptionalAlt = Omit & { alt?: string } + +function BlockquoteWithImage({ + author, + children, + className, + image, +}: { + author: { name: string; role: string } + children: React.ReactNode + className?: string + image: ImagePropsWithOptionalAlt +}) { + return ( +

+ ) +} + +function BlockquoteWithoutImage({ + author, + children, + className, +}: { + author: { name: string; role: string } + children: React.ReactNode + className?: string +}) { + return ( + +

+ {typeof children === 'string' ?
{children}
: children} +

+ {author.name}, {author.role} +

+ + + ) +} + +export function Blockquote( + props: + | React.ComponentPropsWithoutRef + | (React.ComponentPropsWithoutRef & { + image?: undefined + }), +) { + if (props.image) { + return + } + + return +} diff --git a/src/components/Border.tsx b/src/components/Border.tsx new file mode 100644 index 0000000..3b937f1 --- /dev/null +++ b/src/components/Border.tsx @@ -0,0 +1,36 @@ +import clsx from 'clsx' + +type BorderProps = { + as?: T + className?: string + position?: 'top' | 'left' + invert?: boolean +} + +export function Border({ + as, + className, + position = 'top', + invert = false, + ...props +}: Omit, keyof BorderProps> & + BorderProps) { + let Component = as ?? 'div' + + return ( + + ) +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..819ad6c --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,40 @@ +import Link from 'next/link' +import clsx from 'clsx' + +type ButtonProps = { + invert?: boolean +} & ( + | React.ComponentPropsWithoutRef + | (React.ComponentPropsWithoutRef<'button'> & { href?: undefined }) +) + +export function Button({ + invert = false, + className, + children, + ...props +}: ButtonProps) { + className = clsx( + className, + 'inline-flex rounded-full px-4 py-1.5 text-sm font-semibold transition', + invert + ? 'bg-white text-neutral-950 hover:bg-neutral-200' + : 'bg-neutral-950 text-white hover:bg-neutral-800', + ) + + let inner = {children} + + if (typeof props.href === 'undefined') { + return ( + + ) + } + + return ( + + {inner} + + ) +} diff --git a/src/components/ContactSection.tsx b/src/components/ContactSection.tsx new file mode 100644 index 0000000..7838961 --- /dev/null +++ b/src/components/ContactSection.tsx @@ -0,0 +1,34 @@ +import { Button } from '@/components/Button' +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' +import { Offices } from '@/components/Offices' + +export function ContactSection() { + return ( + + +

+ Tell us about your project +

+ +

+ Our offices +

+ +

+ + + ) +} diff --git a/src/components/Container.tsx b/src/components/Container.tsx new file mode 100644 index 0000000..4fbfced --- /dev/null +++ b/src/components/Container.tsx @@ -0,0 +1,22 @@ +import clsx from 'clsx' + +type ContainerProps = { + as?: T + className?: string + children: React.ReactNode +} + +export function Container({ + as, + className, + children, +}: Omit, keyof ContainerProps> & + ContainerProps) { + let Component = as ?? 'div' + + return ( + +

{children}

+ + ) +} diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx new file mode 100644 index 0000000..f775369 --- /dev/null +++ b/src/components/FadeIn.tsx @@ -0,0 +1,50 @@ +'use client' + +import { createContext, useContext } from 'react' +import { motion, useReducedMotion } from 'framer-motion' + +const FadeInStaggerContext = createContext(false) + +const viewport = { once: true, margin: '0px 0px -200px' } + +export function FadeIn( + props: React.ComponentPropsWithoutRef, +) { + let shouldReduceMotion = useReducedMotion() + let isInStaggerGroup = useContext(FadeInStaggerContext) + + return ( + + ) +} + +export function FadeInStagger({ + faster = false, + ...props +}: React.ComponentPropsWithoutRef & { faster?: boolean }) { + return ( + + + + ) +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..2265ab4 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,134 @@ +import Link from 'next/link' + +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' +import { Logo } from '@/components/Logo' +import { socialMediaProfiles } from '@/components/SocialMedia' + +const navigation = [ + { + title: 'Work', + links: [ + { title: 'FamilyFund', href: '/work/family-fund' }, + { title: 'Unseal', href: '/work/unseal' }, + { title: 'Phobia', href: '/work/phobia' }, + { + title: ( + <> + See all + + ), + href: '/work', + }, + ], + }, + { + title: 'Company', + links: [ + { title: 'About', href: '/about' }, + { title: 'Process', href: '/process' }, + { title: 'Blog', href: '/blog' }, + { title: 'Contact us', href: '/contact' }, + ], + }, + { + title: 'Connect', + links: socialMediaProfiles, + }, +] + +function Navigation() { + return ( + + ) +} + +function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function NewsletterForm() { + return ( + + ) +} + +export function Footer() { + return ( + + +

+ +

+ + + +

+ + + ) +} diff --git a/src/components/GrayscaleTransitionImage.tsx b/src/components/GrayscaleTransitionImage.tsx new file mode 100644 index 0000000..e91d4a5 --- /dev/null +++ b/src/components/GrayscaleTransitionImage.tsx @@ -0,0 +1,39 @@ +'use client' + +import { useRef } from 'react' +import Image, { type ImageProps } from 'next/image' +import { + motion, + useMotionTemplate, + useScroll, + useTransform, +} from 'framer-motion' + +const MotionImage = motion(Image) + +export function GrayscaleTransitionImage( + props: Pick< + ImageProps, + 'src' | 'quality' | 'className' | 'sizes' | 'priority' + > & { alt?: string }, +) { + let ref = useRef>(null) + let { scrollYProgress } = useScroll({ + target: ref, + offset: ['start 65%', 'end 35%'], + }) + let grayscale = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0, 1]) + let filter = useMotionTemplate`grayscale(${grayscale})` + + return ( +

+ + +

+ ) +} diff --git a/src/components/GridList.tsx b/src/components/GridList.tsx new file mode 100644 index 0000000..91b2da8 --- /dev/null +++ b/src/components/GridList.tsx @@ -0,0 +1,64 @@ +import clsx from 'clsx' + +import { Border } from '@/components/Border' +import { FadeIn, FadeInStagger } from '@/components/FadeIn' + +export function GridList({ + children, + className, +}: { + children: React.ReactNode + className?: string +}) { + return ( + +

+ {children} + + + ) +} + +export function GridListItem({ + title, + children, + className, + invert = false, +}: { + title: string + children: React.ReactNode + className?: string + invert?: boolean +}) { + return ( +

+ + + + {title}. + {' '} + {children} + + +

+ ) +} diff --git a/src/components/GridPattern.tsx b/src/components/GridPattern.tsx new file mode 100644 index 0000000..8406a3b --- /dev/null +++ b/src/components/GridPattern.tsx @@ -0,0 +1,129 @@ +'use client' + +import { useEffect, useId, useRef, useState } from 'react' +import { motion } from 'framer-motion' + +function Block({ + x, + y, + ...props +}: Omit, 'x' | 'y'> & { + x: number + y: number +}) { + return ( + + ) +} + +export function GridPattern({ + yOffset = 0, + interactive = false, + ...props +}: React.ComponentPropsWithoutRef<'svg'> & { + yOffset?: number + interactive?: boolean +}) { + let id = useId() + let ref = useRef>(null) + let currentBlock = useRef<[x: number, y: number]>() + let counter = useRef(0) + let [hoveredBlocks, setHoveredBlocks] = useState< + Array<[x: number, y: number, key: number]> + >([]) + let staticBlocks = [ + [1, 1], + [2, 2], + [4, 3], + [6, 2], + [7, 4], + [5, 5], + ] + + useEffect(() => { + if (!interactive) { + return + } + + function onMouseMove(event: MouseEvent) { + if (!ref.current) { + return + } + + let rect = ref.current.getBoundingClientRect() + let x = event.clientX - rect.left + let y = event.clientY - rect.top + if (x < 0 || y < 0 || x > rect.width || y > rect.height) { + return + } + + x = x - rect.width / 2 - 32 + y = y - yOffset + x += Math.tan(32 / 160) * y + x = Math.floor(x / 96) + y = Math.floor(y / 160) + + if (currentBlock.current?.[0] === x && currentBlock.current?.[1] === y) { + return + } + + currentBlock.current = [x, y] + + setHoveredBlocks((blocks) => { + let key = counter.current++ + let block = [x, y, key] as (typeof hoveredBlocks)[number] + return [...blocks, block].filter( + (block) => !(block[0] === x && block[1] === y && block[2] !== key), + ) + }) + } + + window.addEventListener('mousemove', onMouseMove) + + return () => { + window.removeEventListener('mousemove', onMouseMove) + } + }, [yOffset, interactive]) + + return ( + + ) +} diff --git a/src/components/List.tsx b/src/components/List.tsx new file mode 100644 index 0000000..21f5d2a --- /dev/null +++ b/src/components/List.tsx @@ -0,0 +1,41 @@ +import clsx from 'clsx' + +import { Border } from '@/components/Border' +import { FadeIn, FadeInStagger } from '@/components/FadeIn' + +export function List({ + children, + className, +}: { + children: React.ReactNode + className?: string +}) { + return ( + +

+ {children} + + + ) +} + +export function ListItem({ + children, + title, +}: { + children: React.ReactNode + title?: string +}) { + return ( +

+ + + {title && ( + {`${title}. `} + )} + {children} + + +

+ ) +} diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 0000000..de4762b --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,72 @@ +import { useId } from 'react' +import clsx from 'clsx' + +export function Logomark({ + invert = false, + filled = false, + ...props +}: React.ComponentPropsWithoutRef<'svg'> & { + invert?: boolean + filled?: boolean +}) { + let id = useId() + + return ( + + ) +} + +export function Logo({ + className, + invert = false, + filled = false, + fillOnHover = false, + ...props +}: React.ComponentPropsWithoutRef<'svg'> & { + invert?: boolean + filled?: boolean + fillOnHover?: boolean +}) { + return ( + + ) +} diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx new file mode 100644 index 0000000..036f29a --- /dev/null +++ b/src/components/MDXComponents.tsx @@ -0,0 +1,98 @@ +import clsx from 'clsx' + +import { Blockquote } from '@/components/Blockquote' +import { Border } from '@/components/Border' +import { GrayscaleTransitionImage } from '@/components/GrayscaleTransitionImage' +import { StatList, StatListItem } from '@/components/StatList' +import { TagList, TagListItem } from '@/components/TagList' + +export const MDXComponents = { + Blockquote({ + className, + ...props + }: React.ComponentPropsWithoutRef) { + return

+ }, + img: function Img({ + className, + ...props + }: React.ComponentPropsWithoutRef) { + return ( +
+ +
+ ) + }, + StatList({ + className, + ...props + }: React.ComponentPropsWithoutRef) { + return ( + + ) + }, + StatListItem, + table: function Table({ + className, + ...props + }: React.ComponentPropsWithoutRef<'table'>) { + return ( +
+
+ + + + ) + }, + TagList({ + className, + ...props + }: React.ComponentPropsWithoutRef) { + return + }, + TagListItem, + TopTip({ + children, + className, + }: { + children: React.ReactNode + className?: string + }) { + return ( + +
+ Top tip +
+
{children}
+ + ) + }, + Typography({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) { + return
+ }, + wrapper({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) { + return ( +
:first-child]:mt-0! [&>:last-child]:mb-0!', + className, + )} + {...props} + /> + ) + }, +} diff --git a/src/components/Offices.tsx b/src/components/Offices.tsx new file mode 100644 index 0000000..cd42396 --- /dev/null +++ b/src/components/Offices.tsx @@ -0,0 +1,50 @@ +import clsx from 'clsx' + +function Office({ + name, + children, + invert = false, +}: { + name: string + children: React.ReactNode + invert?: boolean +}) { + return ( +
+ + {name} + +
+ {children} +
+ ) +} + +export function Offices({ + invert = false, + ...props +}: React.ComponentPropsWithoutRef<'ul'> & { invert?: boolean }) { + return ( +
+
+ + 1 Carlsberg Gate +
+ 1260, København, Denmark + +
+
+ + 24 Lego Allé +
+ 7190, Billund, Denmark + +
+
+ ) +} diff --git a/src/components/PageIntro.tsx b/src/components/PageIntro.tsx new file mode 100644 index 0000000..7445668 --- /dev/null +++ b/src/components/PageIntro.tsx @@ -0,0 +1,47 @@ +import clsx from 'clsx' + +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' + +export function PageIntro({ + eyebrow, + title, + children, + centered = false, +}: { + eyebrow: string + title: string + children: React.ReactNode + centered?: boolean +}) { + return ( + + +
+ + {eyebrow} + + - + + {title} + +
+
+ {children} +
+ + + ) +} diff --git a/src/components/PageLinks.tsx b/src/components/PageLinks.tsx new file mode 100644 index 0000000..7551b2a --- /dev/null +++ b/src/components/PageLinks.tsx @@ -0,0 +1,96 @@ +import Link from 'next/link' +import clsx from 'clsx' + +import { Border } from '@/components/Border' +import { Container } from '@/components/Container' +import { FadeIn, FadeInStagger } from '@/components/FadeIn' +import { GridPattern } from '@/components/GridPattern' +import { SectionIntro } from '@/components/SectionIntro' +import { formatDate } from '@/lib/formatDate' + +function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +interface Page { + href: string + date: string + title: string + description: string +} + +function PageLink({ page }: { page: Page }) { + return ( +
+ +
+ {page.title} +
+ + {formatDate(page.date)} + +
{page.description}
+ + Read more + + + + +
+ ) +} + +export function PageLinks({ + title, + pages, + intro, + className, +}: { + title: string + pages: Array + intro?: string + className?: string +}) { + return ( +
+
+ +
+ + + {intro &&
{intro}
} + + + + + {pages.map((page) => ( + + + + ))} + + +
+ ) +} diff --git a/src/components/RootLayout.tsx b/src/components/RootLayout.tsx new file mode 100644 index 0000000..cf0a363 --- /dev/null +++ b/src/components/RootLayout.tsx @@ -0,0 +1,297 @@ +'use client' + +import { + createContext, + useContext, + useEffect, + useId, + useRef, + useState, +} from 'react' +import Link from 'next/link' +import { usePathname } from 'next/navigation' +import clsx from 'clsx' +import { motion, MotionConfig, useReducedMotion } from 'framer-motion' + +import { Button } from '@/components/Button' +import { Container } from '@/components/Container' +import { Footer } from '@/components/Footer' +import { GridPattern } from '@/components/GridPattern' +import { Logo, Logomark } from '@/components/Logo' +import { Offices } from '@/components/Offices' +import { SocialMedia } from '@/components/SocialMedia' + +const RootLayoutContext = createContext<{ + logoHovered: boolean + setLogoHovered: React.Dispatch> +} | null>(null) + +function XIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function Header({ + panelId, + icon: Icon, + expanded, + onToggle, + toggleRef, + invert = false, +}: { + panelId: string + icon: React.ComponentType<{ className?: string }> + expanded: boolean + onToggle: () => void + toggleRef: React.RefObject + invert?: boolean +}) { + let { logoHovered, setLogoHovered } = useContext(RootLayoutContext)! + + return ( + +
+ setLogoHovered(true)} + onMouseLeave={() => setLogoHovered(false)} + > + + + +
+ + +
+
+ + ) +} + +function NavigationRow({ children }: { children: React.ReactNode }) { + return ( +
+ +
{children}
+ +
+ ) +} + +function NavigationItem({ + href, + children, +}: { + href: string + children: React.ReactNode +}) { + return ( + + {children} + + + ) +} + +function Navigation() { + return ( +
+ + Our Work + About Us + + + Our Process + Blog + +
+ ) +} + +function RootLayoutInner({ children }: { children: React.ReactNode }) { + let panelId = useId() + let [expanded, setExpanded] = useState(false) + let [isTransitioning, setIsTransitioning] = useState(false) + let openRef = useRef>(null) + let closeRef = useRef>(null) + let navRef = useRef>(null) + let shouldReduceMotion = useReducedMotion() + + useEffect(() => { + function onClick(event: MouseEvent) { + if ( + event.target instanceof HTMLElement && + event.target.closest('a')?.href === window.location.href + ) { + setIsTransitioning(false) + setExpanded(false) + } + } + + window.addEventListener('click', onClick) + + return () => { + window.removeEventListener('click', onClick) + } + }, []) + + return ( + +
+
+
{ + setIsTransitioning(true) + setExpanded((expanded) => !expanded) + window.setTimeout(() => + closeRef.current?.focus({ preventScroll: true }), + ) + }} + /> +
+ + + +
+
{ + setIsTransitioning(true) + setExpanded((expanded) => !expanded) + window.setTimeout(() => + openRef.current?.focus({ preventScroll: true }), + ) + }} + /> +
+ +
+ +
+
+
+ Our offices +
+ +
+
+
+ Follow us +
+ +
+
+ +
+ + +
+ + + + + +
{children}
+ +
+ + + + ) +} + +export function RootLayout({ children }: { children: React.ReactNode }) { + let pathname = usePathname() + let [logoHovered, setLogoHovered] = useState(false) + + return ( + + {children} + + ) +} diff --git a/src/components/SectionIntro.tsx b/src/components/SectionIntro.tsx new file mode 100644 index 0000000..6f9a73a --- /dev/null +++ b/src/components/SectionIntro.tsx @@ -0,0 +1,65 @@ +import clsx from 'clsx' + +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' + +export function SectionIntro({ + title, + eyebrow, + children, + smaller = false, + invert = false, + ...props +}: Omit< + React.ComponentPropsWithoutRef, + 'title' | 'children' +> & { + title: string + eyebrow?: string + children?: React.ReactNode + smaller?: boolean + invert?: boolean +}) { + return ( + + +
+ {eyebrow && ( + <> + + {eyebrow} + + - + + )} + + {title} + +
+ {children && ( +
+ {children} +
+ )} + + + ) +} diff --git a/src/components/SocialMedia.tsx b/src/components/SocialMedia.tsx new file mode 100644 index 0000000..0dd629d --- /dev/null +++ b/src/components/SocialMedia.tsx @@ -0,0 +1,91 @@ +import Link from 'next/link' +import clsx from 'clsx' + +function FacebookIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function InstagramIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function DribbbleIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +export const socialMediaProfiles = [ + { title: 'Facebook', href: 'https://facebook.com', icon: FacebookIcon }, + { title: 'Instagram', href: 'https://instagram.com', icon: InstagramIcon }, + { title: 'GitHub', href: 'https://github.com', icon: GitHubIcon }, + { title: 'Dribbble', href: 'https://dribbble.com', icon: DribbbleIcon }, +] + +export function SocialMedia({ + className, + invert = false, +}: { + className?: string + invert?: boolean +}) { + return ( +
+ {socialMediaProfiles.map((socialMediaProfile) => ( +
+ + + +
+ ))} +
+ ) +} diff --git a/src/components/StatList.tsx b/src/components/StatList.tsx new file mode 100644 index 0000000..e20dc71 --- /dev/null +++ b/src/components/StatList.tsx @@ -0,0 +1,34 @@ +import { Border } from '@/components/Border' +import { FadeIn, FadeInStagger } from '@/components/FadeIn' + +export function StatList({ + children, + ...props +}: Omit, 'children'> & { + children: React.ReactNode +}) { + return ( + +
+ {children} +
+ + ) +} + +export function StatListItem({ + label, + value, +}: { + label: string + value: string +}) { + return ( + +
{label}
+
+ {value} +
+ + ) +} diff --git a/src/components/StylizedImage.tsx b/src/components/StylizedImage.tsx new file mode 100644 index 0000000..8550e40 --- /dev/null +++ b/src/components/StylizedImage.tsx @@ -0,0 +1,71 @@ +import { useId } from 'react' +import Image, { type ImageProps } from 'next/image' +import clsx from 'clsx' + +const shapes = [ + { + width: 655, + height: 680, + path: 'M537.827 9.245A11.5 11.5 0 0 1 549.104 0h63.366c7.257 0 12.7 6.64 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 586.87 151h-28.275a15.999 15.999 0 0 0-15.689 12.862l-59.4 297c-1.98 9.901 5.592 19.138 15.689 19.138h17.275l.127.001c.85.009 1.701.074 2.549.009 11.329-.874 21.411-7.529 24.88-25.981.002-.012.016-.016.023-.007.008.009.022.005.024-.006l24.754-123.771A11.5 11.5 0 0 1 580.104 321h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 617.87 472H559c-22.866 0-28.984 7.98-31.989 25.931-.004.026-.037.035-.052.014-.015-.02-.048-.013-.053.012l-24.759 123.798A11.5 11.5 0 0 1 490.87 631h-29.132a14.953 14.953 0 0 0-14.664 12.021c-4.3 21.502-23.18 36.979-45.107 36.979H83.502c-29.028 0-50.8-26.557-45.107-55.021l102.4-512C145.096 91.477 163.975 76 185.902 76h318.465c10.136 0 21.179-5.35 23.167-15.288l10.293-51.467Zm-512 160A11.5 11.5 0 0 1 37.104 160h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 74.87 311H11.504c-7.257 0-12.7-6.639-11.277-13.755l25.6-128Z', + }, + { + width: 719, + height: 680, + path: 'M89.827 9.245A11.5 11.5 0 0 1 101.104 0h63.366c7.257 0 12.7 6.64 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 138.87 151H75.504c-7.257 0-12.7-6.639-11.277-13.755l25.6-128Zm-64 321A11.5 11.5 0 0 1 37.104 321h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 74.87 472H11.504c-7.257 0-12.7-6.639-11.277-13.755l25.6-128ZM526.795 470a15.999 15.999 0 0 0-15.689 12.862l-32.032 160.159c-4.3 21.502-23.18 36.979-45.107 36.979H115.502c-29.028 0-50.8-26.557-45.107-55.021l102.4-512C177.096 91.477 195.975 76 217.902 76h318.465c29.028 0 50.8 26.557 45.107 55.021l-33.768 168.841c-1.98 9.901 5.592 19.138 15.689 19.138h17.075l.127.001c.85.009 1.701.074 2.549.009 11.329-.874 21.411-7.529 24.88-25.981.002-.012.016-.016.023-.007.008.009.022.005.024-.006l24.754-123.771A11.5 11.5 0 0 1 644.104 160h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 681.87 311H623c-22.866 0-28.984 7.98-31.989 25.931-.004.026-.037.035-.052.014-.015-.02-.048-.013-.053.012l-24.759 123.798A11.5 11.5 0 0 1 554.87 470h-28.075Z', + }, + { + width: 719, + height: 680, + path: 'M632.827 9.245A11.5 11.5 0 0 1 644.104 0h63.366c7.257 0 12.7 6.64 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 681.87 151h-28.275a15.999 15.999 0 0 0-15.689 12.862l-95.832 479.159c-4.3 21.502-23.18 36.979-45.107 36.979H178.502c-29.028 0-50.8-26.557-45.107-55.021l102.4-512C240.096 91.477 258.975 76 280.902 76h318.465c10.136 0 21.179-5.35 23.167-15.288l10.293-51.467Zm0 479A11.5 11.5 0 0 1 644.104 479h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 681.87 630h-63.366c-7.257 0-12.7-6.639-11.277-13.755l25.6-128ZM37.104 159a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C-1.196 303.361 4.247 310 11.504 310H74.87a11.5 11.5 0 0 0 11.277-9.245l24.76-123.798a.03.03 0 0 1 .052-.012c.015.021.048.012.052-.014C114.016 158.98 120.134 151 143 151h58.87a11.5 11.5 0 0 0 11.277-9.245l25.6-128C240.17 6.64 234.727 0 227.47 0h-63.366a11.5 11.5 0 0 0-11.277 9.245l-24.754 123.771c-.002.011-.016.015-.024.006-.007-.009-.021-.005-.023.007-3.469 18.452-13.551 25.107-24.88 25.981-.848.065-1.699 0-2.549-.009l-.127-.001H37.104Z', + }, +] + +type ImagePropsWithOptionalAlt = Omit & { alt?: string } + +export function StylizedImage({ + shape = 0, + className, + ...props +}: ImagePropsWithOptionalAlt & { shape?: 0 | 1 | 2 }) { + let id = useId() + let { width, height, path } = shapes[shape] + + return ( +
+ +
+ ) +} diff --git a/src/components/TagList.tsx b/src/components/TagList.tsx new file mode 100644 index 0000000..a1d0072 --- /dev/null +++ b/src/components/TagList.tsx @@ -0,0 +1,34 @@ +import clsx from 'clsx' + +export function TagList({ + children, + className, +}: { + children: React.ReactNode + className?: string +}) { + return ( +
+ {children} +
+ ) +} + +export function TagListItem({ + children, + className, +}: { + children: React.ReactNode + className?: string +}) { + return ( +
+ {children} +
+ ) +} diff --git a/src/components/Testimonial.tsx b/src/components/Testimonial.tsx new file mode 100644 index 0000000..7250c84 --- /dev/null +++ b/src/components/Testimonial.tsx @@ -0,0 +1,44 @@ +import Image, { type ImageProps } from 'next/image' +import clsx from 'clsx' + +import { Container } from '@/components/Container' +import { FadeIn } from '@/components/FadeIn' +import { GridPattern } from '@/components/GridPattern' + +export function Testimonial({ + children, + client, + className, +}: { + children: React.ReactNode + client: { logo: ImageProps['src']; name: string } + className?: string +}) { + return ( +
+ + + +
+
+
+ {children} +
+
+
+ +
+
+ + +
+ ) +} diff --git a/src/fonts/Mona-Sans.var.woff2 b/src/fonts/Mona-Sans.var.woff2 new file mode 100644 index 0000000..8208a50 Binary files /dev/null and b/src/fonts/Mona-Sans.var.woff2 differ diff --git a/src/images/clients/bright-path/logo-dark.svg b/src/images/clients/bright-path/logo-dark.svg new file mode 100644 index 0000000..c949d94 --- /dev/null +++ b/src/images/clients/bright-path/logo-dark.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/bright-path/logo-light.svg b/src/images/clients/bright-path/logo-light.svg new file mode 100644 index 0000000..973c54e --- /dev/null +++ b/src/images/clients/bright-path/logo-light.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/bright-path/logomark-dark.svg b/src/images/clients/bright-path/logomark-dark.svg new file mode 100644 index 0000000..70ab0a1 --- /dev/null +++ b/src/images/clients/bright-path/logomark-dark.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/bright-path/logomark-light.svg b/src/images/clients/bright-path/logomark-light.svg new file mode 100644 index 0000000..65a0be8 --- /dev/null +++ b/src/images/clients/bright-path/logomark-light.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/family-fund/logo-dark.svg b/src/images/clients/family-fund/logo-dark.svg new file mode 100644 index 0000000..333df2c --- /dev/null +++ b/src/images/clients/family-fund/logo-dark.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/family-fund/logo-light.svg b/src/images/clients/family-fund/logo-light.svg new file mode 100644 index 0000000..9ff171d --- /dev/null +++ b/src/images/clients/family-fund/logo-light.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/family-fund/logomark-dark.svg b/src/images/clients/family-fund/logomark-dark.svg new file mode 100644 index 0000000..318aabe --- /dev/null +++ b/src/images/clients/family-fund/logomark-dark.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/family-fund/logomark-light.svg b/src/images/clients/family-fund/logomark-light.svg new file mode 100644 index 0000000..0678242 --- /dev/null +++ b/src/images/clients/family-fund/logomark-light.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/green-life/logo-dark.svg b/src/images/clients/green-life/logo-dark.svg new file mode 100644 index 0000000..9c98138 --- /dev/null +++ b/src/images/clients/green-life/logo-dark.svg @@ -0,0 +1,11 @@ + diff --git a/src/images/clients/green-life/logo-light.svg b/src/images/clients/green-life/logo-light.svg new file mode 100644 index 0000000..34b41f8 --- /dev/null +++ b/src/images/clients/green-life/logo-light.svg @@ -0,0 +1,11 @@ + diff --git a/src/images/clients/green-life/logomark-dark.svg b/src/images/clients/green-life/logomark-dark.svg new file mode 100644 index 0000000..16286c6 --- /dev/null +++ b/src/images/clients/green-life/logomark-dark.svg @@ -0,0 +1,8 @@ + diff --git a/src/images/clients/green-life/logomark-light.svg b/src/images/clients/green-life/logomark-light.svg new file mode 100644 index 0000000..f089216 --- /dev/null +++ b/src/images/clients/green-life/logomark-light.svg @@ -0,0 +1,8 @@ + diff --git a/src/images/clients/home-work/logo-dark.svg b/src/images/clients/home-work/logo-dark.svg new file mode 100644 index 0000000..b5609b7 --- /dev/null +++ b/src/images/clients/home-work/logo-dark.svg @@ -0,0 +1,11 @@ + diff --git a/src/images/clients/home-work/logo-light.svg b/src/images/clients/home-work/logo-light.svg new file mode 100644 index 0000000..b032583 --- /dev/null +++ b/src/images/clients/home-work/logo-light.svg @@ -0,0 +1,11 @@ + diff --git a/src/images/clients/home-work/logomark-dark.svg b/src/images/clients/home-work/logomark-dark.svg new file mode 100644 index 0000000..956e86b --- /dev/null +++ b/src/images/clients/home-work/logomark-dark.svg @@ -0,0 +1,8 @@ + diff --git a/src/images/clients/home-work/logomark-light.svg b/src/images/clients/home-work/logomark-light.svg new file mode 100644 index 0000000..f511945 --- /dev/null +++ b/src/images/clients/home-work/logomark-light.svg @@ -0,0 +1,8 @@ + diff --git a/src/images/clients/mail-smirk/logo-dark.svg b/src/images/clients/mail-smirk/logo-dark.svg new file mode 100644 index 0000000..1850f5a --- /dev/null +++ b/src/images/clients/mail-smirk/logo-dark.svg @@ -0,0 +1,11 @@ + diff --git a/src/images/clients/mail-smirk/logo-light.svg b/src/images/clients/mail-smirk/logo-light.svg new file mode 100644 index 0000000..f5e3fe7 --- /dev/null +++ b/src/images/clients/mail-smirk/logo-light.svg @@ -0,0 +1,11 @@ + diff --git a/src/images/clients/mail-smirk/logomark-dark.svg b/src/images/clients/mail-smirk/logomark-dark.svg new file mode 100644 index 0000000..3ab3137 --- /dev/null +++ b/src/images/clients/mail-smirk/logomark-dark.svg @@ -0,0 +1,8 @@ + diff --git a/src/images/clients/mail-smirk/logomark-light.svg b/src/images/clients/mail-smirk/logomark-light.svg new file mode 100644 index 0000000..a25add9 --- /dev/null +++ b/src/images/clients/mail-smirk/logomark-light.svg @@ -0,0 +1,8 @@ + diff --git a/src/images/clients/north-adventures/logo-dark.svg b/src/images/clients/north-adventures/logo-dark.svg new file mode 100644 index 0000000..d834281 --- /dev/null +++ b/src/images/clients/north-adventures/logo-dark.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/north-adventures/logo-light.svg b/src/images/clients/north-adventures/logo-light.svg new file mode 100644 index 0000000..81bcb07 --- /dev/null +++ b/src/images/clients/north-adventures/logo-light.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/north-adventures/logomark-dark.svg b/src/images/clients/north-adventures/logomark-dark.svg new file mode 100644 index 0000000..406ec14 --- /dev/null +++ b/src/images/clients/north-adventures/logomark-dark.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/north-adventures/logomark-light.svg b/src/images/clients/north-adventures/logomark-light.svg new file mode 100644 index 0000000..b309e24 --- /dev/null +++ b/src/images/clients/north-adventures/logomark-light.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/phobia/logo-dark.svg b/src/images/clients/phobia/logo-dark.svg new file mode 100644 index 0000000..11f2a36 --- /dev/null +++ b/src/images/clients/phobia/logo-dark.svg @@ -0,0 +1,12 @@ + diff --git a/src/images/clients/phobia/logo-light.svg b/src/images/clients/phobia/logo-light.svg new file mode 100644 index 0000000..930f1bd --- /dev/null +++ b/src/images/clients/phobia/logo-light.svg @@ -0,0 +1,12 @@ + diff --git a/src/images/clients/phobia/logomark-dark.svg b/src/images/clients/phobia/logomark-dark.svg new file mode 100644 index 0000000..e8932d4 --- /dev/null +++ b/src/images/clients/phobia/logomark-dark.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/phobia/logomark-light.svg b/src/images/clients/phobia/logomark-light.svg new file mode 100644 index 0000000..ddbd6c0 --- /dev/null +++ b/src/images/clients/phobia/logomark-light.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/unseal/logo-dark.svg b/src/images/clients/unseal/logo-dark.svg new file mode 100644 index 0000000..a44be37 --- /dev/null +++ b/src/images/clients/unseal/logo-dark.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/unseal/logo-light.svg b/src/images/clients/unseal/logo-light.svg new file mode 100644 index 0000000..9dd6443 --- /dev/null +++ b/src/images/clients/unseal/logo-light.svg @@ -0,0 +1,9 @@ + diff --git a/src/images/clients/unseal/logomark-dark.svg b/src/images/clients/unseal/logomark-dark.svg new file mode 100644 index 0000000..4a48b92 --- /dev/null +++ b/src/images/clients/unseal/logomark-dark.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/clients/unseal/logomark-light.svg b/src/images/clients/unseal/logomark-light.svg new file mode 100644 index 0000000..bf44a3b --- /dev/null +++ b/src/images/clients/unseal/logomark-light.svg @@ -0,0 +1,6 @@ + diff --git a/src/images/laptop.jpg b/src/images/laptop.jpg new file mode 100644 index 0000000..7756e85 Binary files /dev/null and b/src/images/laptop.jpg differ diff --git a/src/images/meeting.jpg b/src/images/meeting.jpg new file mode 100644 index 0000000..5fd4fe8 Binary files /dev/null and b/src/images/meeting.jpg differ diff --git a/src/images/team/angela-fisher.jpg b/src/images/team/angela-fisher.jpg new file mode 100644 index 0000000..4ff9eb4 Binary files /dev/null and b/src/images/team/angela-fisher.jpg differ diff --git a/src/images/team/benjamin-russel.jpg b/src/images/team/benjamin-russel.jpg new file mode 100644 index 0000000..d8d47c6 Binary files /dev/null and b/src/images/team/benjamin-russel.jpg differ diff --git a/src/images/team/blake-reid.jpg b/src/images/team/blake-reid.jpg new file mode 100644 index 0000000..600427f Binary files /dev/null and b/src/images/team/blake-reid.jpg differ diff --git a/src/images/team/chelsea-hagon.jpg b/src/images/team/chelsea-hagon.jpg new file mode 100644 index 0000000..ec69a86 Binary files /dev/null and b/src/images/team/chelsea-hagon.jpg differ diff --git a/src/images/team/dries-vincent.jpg b/src/images/team/dries-vincent.jpg new file mode 100644 index 0000000..175215a Binary files /dev/null and b/src/images/team/dries-vincent.jpg differ diff --git a/src/images/team/emma-dorsey.jpg b/src/images/team/emma-dorsey.jpg new file mode 100644 index 0000000..7fc799b Binary files /dev/null and b/src/images/team/emma-dorsey.jpg differ diff --git a/src/images/team/jeffrey-webb.jpg b/src/images/team/jeffrey-webb.jpg new file mode 100644 index 0000000..1f2f4cf Binary files /dev/null and b/src/images/team/jeffrey-webb.jpg differ diff --git a/src/images/team/kathryn-murphy.jpg b/src/images/team/kathryn-murphy.jpg new file mode 100644 index 0000000..8b6dede Binary files /dev/null and b/src/images/team/kathryn-murphy.jpg differ diff --git a/src/images/team/leonard-krasner.jpg b/src/images/team/leonard-krasner.jpg new file mode 100644 index 0000000..57be1da Binary files /dev/null and b/src/images/team/leonard-krasner.jpg differ diff --git a/src/images/team/leslie-alexander.jpg b/src/images/team/leslie-alexander.jpg new file mode 100644 index 0000000..6042215 Binary files /dev/null and b/src/images/team/leslie-alexander.jpg differ diff --git a/src/images/team/michael-foster.jpg b/src/images/team/michael-foster.jpg new file mode 100644 index 0000000..a531ee6 Binary files /dev/null and b/src/images/team/michael-foster.jpg differ diff --git a/src/images/team/whitney-francis.jpg b/src/images/team/whitney-francis.jpg new file mode 100644 index 0000000..2d92429 Binary files /dev/null and b/src/images/team/whitney-francis.jpg differ diff --git a/src/images/whiteboard.jpg b/src/images/whiteboard.jpg new file mode 100644 index 0000000..e75bc5c Binary files /dev/null and b/src/images/whiteboard.jpg differ diff --git a/src/lib/formatDate.ts b/src/lib/formatDate.ts new file mode 100644 index 0000000..013bd34 --- /dev/null +++ b/src/lib/formatDate.ts @@ -0,0 +1,11 @@ +export function formatDate(dateString: string) { + let parts = dateString.split('-') + let hasDay = parts.length > 2 + + return new Date(`${dateString}Z`).toLocaleDateString('en-US', { + day: hasDay ? 'numeric' : undefined, + month: 'long', + year: 'numeric', + timeZone: 'UTC', + }) +} diff --git a/src/lib/mdx.ts b/src/lib/mdx.ts new file mode 100644 index 0000000..9ec6622 --- /dev/null +++ b/src/lib/mdx.ts @@ -0,0 +1,65 @@ +import { type ImageProps } from 'next/image' +import glob from 'fast-glob' + +async function loadEntries( + directory: string, + metaName: string, +): Promise>> { + return ( + await Promise.all( + (await glob('**/page.mdx', { cwd: `src/app/${directory}` })).map( + async (filename) => { + let metadata = (await import(`../app/${directory}/${filename}`))[ + metaName + ] as T + return { + ...metadata, + metadata, + href: `/${directory}/${filename.replace(/\/page\.mdx$/, '')}`, + } + }, + ), + ) + ).sort((a, b) => b.date.localeCompare(a.date)) +} + +type ImagePropsWithOptionalAlt = Omit & { alt?: string } + +export type MDXEntry = T & { href: string; metadata: T } + +export interface Article { + date: string + title: string + description: string + author: { + name: string + role: string + image: ImagePropsWithOptionalAlt + } +} + +export interface CaseStudy { + date: string + client: string + title: string + description: string + summary: Array + logo: ImageProps['src'] + image: ImagePropsWithOptionalAlt + service: string + testimonial: { + author: { + name: string + role: string + } + content: string + } +} + +export function loadArticles() { + return loadEntries
('blog', 'article') +} + +export function loadCaseStudies() { + return loadEntries('work', 'caseStudy') +} diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..fe8c03e --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,8 @@ +@font-face { + font-family: 'Mona Sans'; + font-weight: 200 900; + font-display: block; + font-style: normal; + font-stretch: 75% 125%; + src: url('../fonts/Mona-Sans.var.woff2') format('woff2'); +} diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css new file mode 100644 index 0000000..3be7a10 --- /dev/null +++ b/src/styles/tailwind.css @@ -0,0 +1,41 @@ +@import 'tailwindcss'; +@import './base.css'; +@import './typography.css' layer(components); + +@theme { + --text-*: initial; + --text-xs: 0.75rem; + --text-xs--line-height: 1rem; + --text-sm: 0.875rem; + --text-sm--line-height: 1.5rem; + --text-base: 1rem; + --text-base--line-height: 1.75rem; + --text-lg: 1.125rem; + --text-lg--line-height: 1.75rem; + --text-xl: 1.25rem; + --text-xl--line-height: 2rem; + --text-2xl: 1.5rem; + --text-2xl--line-height: 2.25rem; + --text-3xl: 1.75rem; + --text-3xl--line-height: 2.25rem; + --text-4xl: 2rem; + --text-4xl--line-height: 2.5rem; + --text-5xl: 2.5rem; + --text-5xl--line-height: 3rem; + --text-6xl: 3rem; + --text-6xl--line-height: 3.5rem; + --text-7xl: 4rem; + --text-7xl--line-height: 4.5rem; + + --radius-4xl: 2.5rem; + + --font-sans: Mona Sans, ui-sans-serif, system-ui, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + + --font-display: Mona Sans, ui-sans-serif, system-ui, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + + --font-display--font-variation-settings: 'wdth' 125; + + --font-display-length: 2; +} diff --git a/src/styles/typography.css b/src/styles/typography.css new file mode 100644 index 0000000..298df33 --- /dev/null +++ b/src/styles/typography.css @@ -0,0 +1,184 @@ +.typography { + color: var(--color-neutral-950); + font-size: var(--text-xl); + line-height: var(--text-xl--line-height); + + --shiki-color-text: var(--color-white); + --shiki-color-background: var(--color-neutral-950); + --shiki-token-constant: var(--color-neutral-300); + --shiki-token-string: var(--color-neutral-400); + --shiki-token-comment: var(--color-neutral-500); + --shiki-token-keyword: var(--color-neutral-400); + --shiki-token-parameter: var(--color-neutral-400); + --shiki-token-function: var(--color-neutral-300); + --shiki-token-string-expression: var(--color-neutral-300); + --shiki-token-punctuation: var(--color-neutral-400); + + :where(.typography > *) { + margin-top: --spacing(6); + margin-bottom: --spacing(6); + } + + /* Headings */ + :where(h2) { + font-weight: var(--font-weight-semibold); + font-family: var(--font-display); + font-variation-settings: var(--font-display--font-variation-settings); + font-size: var(--text-2xl); + line-height: var(--text-2xl--line-height); + margin-top: --spacing(16); + } + + :where(h3) { + font-weight: var(--font-weight-semibold); + font-family: var(--font-display); + font-variation-settings: var(--font-display--font-variation-settings); + font-size: var(--text-xl); + line-height: var(--text-xl--line-height); + margin-top: --spacing(10); + } + + :where(h2 + h3) { + margin-top: 0; + } + + /* Lists */ + :where(ul, ol) { + padding-left: 1.5rem; + } + + :where(ul) { + list-style-type: disc; + } + + :where(ol) { + list-style-type: decimal; + } + + :where(li) { + padding-left: --spacing(3); + margin-top: --spacing(6); + } + + :where(li)::marker { + color: var(--color-neutral-500); + } + + :where(li > *), + :where(li li) { + margin-top: --spacing(4); + } + + :where(ol > li)::marker { + font-size: var(--text-base); + font-weight: var(--font-weight-semibold); + } + + /* Tables */ + :where(table) { + width: 100%; + text-align: left; + font-size: var(--text-base); + line-height: var(--text-base--line-height); + } + + :where(th) { + font-weight: var(--font-weight-semibold); + } + + :where(thead th) { + padding-bottom: --spacing(6); + border-bottom: 1px solid var(--color-neutral-950); + } + + :where(td) { + vertical-align: top; + padding-top: --spacing(6); + padding-bottom: --spacing(6); + border-bottom: 1px solid --theme(--color-neutral-950 / 0.1); + } + + :where(:is(th, td):not(:last-child)) { + padding-right: --spacing(6); + } + + /* Code blocks */ + :where(pre) { + display: flex; + background-color: var(--color-neutral-950); + border-radius: var(--radius-4xl); + overflow-x: auto; + margin-top: --spacing(10); + margin-bottom: --spacing(10); + margin-left: calc(-1 * (--spacing(6))); + margin-right: calc(-1 * (--spacing(6))); + + @media (width >= theme(--breakpoint-sm)) { + margin-left: auto; + margin-right: auto; + } + } + + :where(pre code) { + flex: none; + padding: theme(padding.8) theme(padding.6); + font-size: var(--text-base); + line-height: theme(lineHeight.8); + color: var(--color-white); + + @media (width >= theme(--breakpoint-sm)) { + padding: --spacing(10); + } + } + + /*
*/ + :where(hr) { + border-color: --theme(--color-neutral-950 / 0.1); + margin-top: --spacing(24); + margin-bottom: --spacing(24); + } + + /* Inline text */ + :where(a) { + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.15em; + text-decoration-skip-ink: none; + font-weight: var(--font-weight-semibold); + } + + :where(strong) { + font-weight: var(--font-weight-semibold); + } + + :where(code:not(pre code)) { + font-size: calc(18 / 20 * 1em); + font-weight: var(--font-weight-semibold); + + &::before, + &::after { + content: '`'; + } + } + + :where(h2 code, h3 code) { + font-weight: var(--font-weight-bold); + } + + /* Figures */ + :where(figure) { + margin-top: --spacing(32); + margin-bottom: --spacing(32); + } + + /* Spacing overrides */ + :where(.typography:first-child > :first-child), + :where(li > :first-child) { + margin-top: 0 !important; + } + + :where(.typography:last-child > :last-child), + :where(li > :last-child) { + margin-bottom: 0 !important; + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..13d6b45 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "es6", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}

+ {group.title} +

+ {article.title} +

+ {article.title} +

+ Work inquiries +

+ Our offices +

+ Email us +

+ Follow us +

+ Page not found +

+ We’ve worked with hundreds of amazing people +

+ + + + +

+ Award-winning development studio based in Denmark. +

+ {title} +

+ Included in this phase +

+ Included in this phase +

+ Case studies +

+ {caseStudy.client} +

+ You’re in good company +

+ Tell us about your project +

+ Our offices +

+ Sign up for our newsletter +

+ + {eyebrow} + + - + + {title} + +

+ {page.title} +

+ Our offices +

+ Follow us +