feat: landing page

src/app/page.tsx

@@ -1,9 +1,26 @@
-import { app } from '@/config/config'
+import { GoToTop } from '@/components/GoToTop'
+import { Hero } from '@/components/Hero'
+import { AboutUs } from '@/components/AboutUS'
+import { WeDo } from '@/components/WeDo'
+import { OurMethodology } from '@/components/OurMethodology'
+import { Contact } from '@/components/Contact'
 
 export default function Home() {
 	return (
-		<main className="grid place-items-center min-h-screen">
-			<div>{app.title}</div>
-		</main>
+		<>
+			<main className="flex min-h-screen w-screen flex-col gap-80 overflow-x-hidden">
+				<Hero />
+
+				<AboutUs />
+
+				<WeDo />
+
+				<OurMethodology />
+
+				<Contact />
+			</main>
+
+			<GoToTop />
+		</>
 	)
 }

src/assets/icons/Logo.tsx

@@ -0,0 +1,12 @@
+import React, { SVGProps } from 'react'
+
+export const Logo: React.FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 595.28 554.99"
+		xmlSpace="preserve"
+		{...props}
+	>
+		<path d="M220.79 250.74v9.62h-22.1v44.27h-9.62v-44.27h-22.1v-9.62h53.82zm95.54-.08v53.9h-9.62v-24.72h-34.65v24.72h-9.62v-53.9h9.62v19.56h34.65v-19.56h9.62zm51.19 14.55v5h34.65v9.62h-34.65V290c0 2.69 2.23 4.93 4.93 4.93h39.34v9.62h-39.34c-8.01 0-14.47-6.54-14.47-14.55v-24.79c0-8.01 6.47-14.55 14.47-14.55h39.34v9.62h-39.34c-2.69 0-4.93 2.24-4.93 4.93zm139.74-14.47v53.9l-9.62-7.39-34.65-26.72v34.11h-9.62V250.9l9.62 7.39L497.63 285v-34.34l9.63.08zm-360.72 54.32H88.02l29.26-55.12 29.26 55.12zm-44.3-8.55h30.09l-15.04-28.34-15.05 28.34z" />
+	</svg>
+)

src/components/AboutUS.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image'
+import graphic5 from '@/assets/graphics/graphic-5.webp'
+
+export const AboutUs = () => (
+	<section className="relative flex items-center p-6 text-black dark:text-white">
+		<article className="ml-12 flex max-w-6xl flex-col gap-6">
+			<h2 className="text-7xl font-bold">Sobre nos</h2>
+			<p className="text-left text-2xl">
+				Athen Labs is an organization dedicated to turning innovative ideas into high-performance
+				software products and technological solutions. We combine a passion for technology with the
+				expertise of our talented team to deliver exceptional software projects. We are committed to
+				providing customized and efficient solutions for companies across various industries.
+			</p>
+		</article>
+
+		<Image
+			src={graphic5}
+			alt="Graphic 3"
+			width={1500}
+			className="absolute -right-[400px] -top-[650px] rotate-90"
+		/>
+	</section>
+)

src/components/Contact.tsx

@@ -0,0 +1,41 @@
+import { Logo } from '@/assets/icons/Logo'
+import Image from 'next/image'
+import graphic7 from '@/assets/graphics/graphic-7.webp'
+import graphic8 from '@/assets/graphics/graphic-8.webp'
+import { socials } from '@/utils/socials'
+import clsx from 'clsx'
+
+export const Contact = () => (
+	<section className="relative grid place-items-center">
+		<div className="z-10 flex flex-col items-center justify-center gap-8 fill-black text-black dark:fill-white dark:text-white">
+			<h2 className="text-7xl font-bold">Fale com a gente!</h2>
+			<ul className="flex flex-col text-center">
+				{Object.entries(socials).map(([key, social], index) => (
+					<li
+						key={key}
+						className={clsx(
+							index === Object.entries(socials).length - 1 && 'border-b-2',
+							'border-t-2 px-6 py-2 text-2xl'
+						)}
+					>
+						{social}
+					</li>
+				))}
+			</ul>
+
+			<Logo className="h-96 w-96" />
+		</div>
+
+		<Image
+			src={graphic7}
+			alt="Graphic 7"
+			className="absolute -left-[750px] -top-[700px] z-0 rotate-90 transition"
+		/>
+
+		<Image
+			src={graphic8}
+			alt="Graphic 8"
+			className="absolute -right-[600px] -top-20 z-0 rotate-90 transition"
+		/>
+	</section>
+)

src/components/GoToTop.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { ChevronUpIcon } from '@heroicons/react/24/solid'
+import { useEffect, useState } from 'react'
+
+export const GoToTop = () => {
+	const [scrollY, setScrollY] = useState(0)
+
+	const goToPageTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth'
+		})
+	}
+
+	useEffect(() => {
+		const onScroll = () => setScrollY(window.scrollY || 0)
+
+		window.addEventListener('scroll', onScroll)
+		return () => window.removeEventListener('scroll', onScroll)
+	}, [scrollY])
+
+	return (
+		<button
+			title="Scroll to top"
+			className={`hover:op100 hover-bg-hex-8883 z-100 fixed bottom-4 right-4 h-10 w-10 rounded-full transition duration-300 ${
+				scrollY >= 300 ? 'opacity-100' : '!opacity-0'
+			}`}
+			onClick={goToPageTop}
+		>
+			<ChevronUpIcon className="h-12 w-12 text-black dark:text-white" />
+		</button>
+	)
+}

src/components/Hero.tsx

@@ -0,0 +1,19 @@
+import { Logo } from '@/assets/icons/Logo'
+import Image from 'next/image'
+import graphic2 from '@/assets/graphics/graphic-2.webp'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
+
+export const Hero = () => (
+	<section className="relative grid h-screen place-items-center">
+		<div className="z-10 flex flex-col items-center justify-center">
+			<Logo className="h-auto w-[900px] fill-white" />
+			<ChevronDownIcon className="h-12 w-12 animate-bounce text-white" />
+		</div>
+
+		<Image
+			src={graphic2}
+			alt="Graphic 2"
+			className="absolute -left-96 -top-[700px] z-0 rotate-2 transition"
+		/>
+	</section>
+)

src/components/OurMethodology.tsx

@@ -0,0 +1,28 @@
+// import Image from 'next/image'
+// import graphic5 from '@/assets/graphics/graphic-5.webp'
+
+export const OurMethodology = () => (
+	<section className="flex items-center justify-end p-6 text-black dark:text-white">
+		{/* <Image src={graphic5} alt="Graphic 3" width={500} className="rotate-90" /> */}
+
+		<article className="z-10 mr-12 flex max-w-6xl flex-col items-end justify-end gap-6 self-end text-right">
+			<h2 className="text-7xl font-bold">
+				Nossa metodologia <br /> de trabalho
+			</h2>
+
+			<div className="flex flex-col gap-4">
+				<p className="flex flex-col gap-2 text-2xl">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ab provident doloremque
+					illo esse dolores in temporibus ipsam accusantium praesentium voluptatum voluptate cumque
+					ipsa nobis dolorem eum, adipisci incidunt quae numquam non vitae excepturi? Dicta adipisci
+					soluta sint quae atque explicabo placeat eius, ratione quaerat facere nam? Amet sint,
+					exercitationem dolorem error nihil velit repellendus iusto? Velit quibusdam repudiandae
+					corporis iste dolor. Autem officia ducimus similique atque in pariatur dolorum alias odio
+					incidunt maxime nihil tenetur commodi vitae sed labore, perferendis, unde obcaecati
+					nesciunt sequi, iure est minima. Rerum culpa exercitationem nemo a quod atque blanditiis,
+					consequatur sunt similique nesciunt.
+				</p>
+			</div>
+		</article>
+	</section>
+)

src/components/WeDo.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image'
+import graphic4 from '@/assets/graphics/graphic-4.webp'
+import { randomUUID } from 'crypto'
+
+export const WeDo = () => {
+	const services = [
+		'Software Development',
+		'Technology Consulting',
+		'UX/UI Design',
+		'Maintenance and Support'
+	]
+	return (
+		<section className="relative flex w-full flex-col items-center justify-center p-6">
+			{/* <Image src={graphic4} width={1000} alt="Graphic 4" className="z-0" /> */}
+
+			<div className="z-10 ml-12 flex w-full items-center justify-center gap-48 text-black dark:text-white">
+				<h2 className="max-w-sm text-7xl font-bold">O que a Athen faz por voce:</h2>
+
+				<ul className="flex flex-col gap-4">
+					{services.map((service) => (
+						<li key={randomUUID()} className="list-disc text-2xl font-semibold">
+							{service}
+						</li>
+					))}
+				</ul>
+			</div>
+		</section>
+	)
+}

src/utils/socials.ts

@@ -0,0 +1,5 @@
+export const socials = {
+	site: 'wwww.athen.io',
+	email: 'tech@athen.com',
+	instagram: '@athenlabs'
+}