refactor: use @ prefixed imports

This allows to get rid of the path `./../` and use a common way to import components or anything from `src/` directory.

IMHO this improves readability by a mile.

src/components/CallToAction.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
-import { Button } from './../components/Button'
-import { Container } from './../components/Container'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
 import backgroundImage from '@/images/background-call-to-action.jpg'
 
 export function CallToAction() {

src/components/Faqs.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import { Container } from './../components/Container'
+import { Container } from '@/components/Container'
 import backgroundImage from '@/images/background-faqs.jpg'
 
 const faqs = [

src/components/Footer.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link'
 
-import { Container } from './../components/Container'
+import { Container } from '@/components/Container'
 // import { Logo } from '@/components/Logo'
-import { NavLink } from './../components/NavLink'
-import { Button } from './../components/Button'
+// import { NavLink } from '@/components/NavLink'
+import { Button } from '@/components/Button'
 
 export function Footer() {
   return (

src/components/Header.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link"
 
-import { NavLink } from "./NavLink";
-import { Container } from "./Container"
-import { Button } from "./Button"
+import { NavLink } from "@/components/NavLink";
+import { Container } from "@/components/Container"
+import { Button } from "@/components/Button"
 
 export function Header() {
   return (

src/components/Hero.tsx

@@ -1,5 +1,5 @@
-import { Button } from './Button'
-import { Container } from './Container'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
 
 export function Hero() {
   return (

src/components/Pricing.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 
-import { Button } from './../components/Button'
-import { Container } from './../components/Container'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
 
 type SwirlyDoodleProps = { className: string }
 

src/components/PrimaryFeatures.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 
-import { Container } from './../components/Container'
+import { Container } from '@/components/Container'
 import backgroundImage from '@/images/background-features.jpg'
 import screenshotExpenses from '@/images/screenshots/contacts.png'
 import screenshotPayroll from '@/images/screenshots/contacts.png'

src/components/TechStack.tsx

@@ -3,7 +3,7 @@ import Image, { StaticImageData } from 'next/image'
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 
-import { Container } from './Container'
+import { Container } from '@/components/Container'
 
 import screenshotContacts from '@/images/screenshots/contacts.png'
 

src/pages/index.tsx

@@ -1,15 +1,15 @@
 import Head from "next/head";
 
-import { Header } from "./../components/Header"
-import { Hero } from "./../components/Hero"
-import { CallToAction } from './../components/CallToAction'
-import { Faqs } from './../components/Faqs'
-import { Footer } from './../components/Footer'
-import { Pricing } from './../components/Pricing'
-import { PrimaryFeatures } from './../components/PrimaryFeatures'
-import { TechStack } from './../components/TechStack'
-import { Testimonials } from './../components/Testimonials'
-import { Environment } from './../components/Environment'
+import { Header } from "@/components/Header"
+import { Hero } from "@/components/Hero"
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Pricing } from '@/components/Pricing'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
+import { TechStack } from '@/components/TechStack'
+import { Testimonials } from '@/components/Testimonials'
+import { Environment } from '@/components/Environment'
 
 export default function Home() {
   return (