diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..c052a65 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "singleQuote": true, + "trailingComma": "all", + "semi": true, + "bracketSpacing": true, + "tabWidth": 2, + "printWidth": 100, + "plugins": [ + "prettier-plugin-tailwindcss" + ] + } \ No newline at end of file diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..d72a0fc 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index 13d40b8..cec6a26 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,27 +1,157 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } +* { + margin: 0; + padding: 0; + box-sizing: border-box; } body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; + font-family: Inter; } @layer utilities { - .text-balance { - text-wrap: balance; + .btn_white { + @apply border-white bg-white px-8 py-3 text-green-50 + } + .btn_white_text { + @apply border-white bg-white px-8 py-3 text-gray-90 + } + .btn_green { + @apply border-orange-600 bg-orange-600 px-8 py-5 text-white + } + .btn_dark_green { + @apply bg-green-90 px-8 py-4 text-white transition-all hover:bg-black + } + .btn_dark_green_outline { + @apply border-gray-20 bg-green-90 px-8 py-5 text-white + } + + .max-container { + @apply mx-auto max-w-[1440px]; + } + + .padding-container { + @apply px-6 lg:px-20 3xl:px-0; + } + + .flexCenter { + @apply flex items-center justify-center; + } + + .flexBetween { + @apply flex items-center justify-between; + } + + .flexStart { + @apply flex items-center justify-start; + } + + .flexEnd { + @apply flex items-center justify-end; + } + + /* FONTS */ + .regular-64 { + @apply text-[64px] font-[400] leading-[120%]; + } + + .regular-40 { + @apply text-[40px] font-[400] leading-[120%]; + } + + .regular-32 { + @apply text-[32px] font-[400]; + } + + .regular-24 { + @apply text-[24px] font-[400]; + } + + .regular-20 { + @apply text-[20px] font-[400]; + } + + .regular-18 { + @apply text-[18px] font-[400]; + } + + .regular-16 { + @apply text-[16px] font-[400]; + } + + .regular-14 { + @apply text-[14px] font-[400]; + } + + .medium-14 { + @apply text-[14px] font-[600]; + } + + .bold-88 { + @apply text-[88px] font-[700] leading-[120%]; + } + + .bold-64 { + @apply text-[64px] font-[700] leading-[120%]; + } + + .bold-52 { + @apply text-[52px] font-[700] leading-[120%]; + } + + .bold-40 { + @apply text-[40px] font-[700] leading-[120%]; + } + + .bold-32 { + @apply text-[32px] font-[700] leading-[120%]; + } + + .bold-20 { + @apply text-[20px] font-[700]; + } + + .bold-18 { + @apply text-[18px] font-[700]; + } + + .bold-16 { + @apply text-[16px] font-[700]; + } + + /* Hero */ + .hero-map { + @apply absolute right-0 top-0 h-screen w-screen bg-pattern-2 bg-cover bg-center md:-right-28 xl:-top-60; + } + + /* Camp */ + .camp-quote { + @apply absolute -right-6 bottom-4 w-[140px] lg:bottom-10 xl:-right-8 xl:w-[186px] 3xl:right-0; + } + + /* Feature */ + .feature-phone { + @apply absolute top-[13%] z-10 hidden max-w-[1500px] rotate-[15deg] md:-left-16 lg:flex 3xl:left-20; + } + + /* Get App */ + .get-app { + @apply max-container relative flex w-full flex-col justify-between gap-32 overflow-hidden bg-green-90 bg-pattern bg-cover bg-center bg-no-repeat px-6 py-12 text-white sm:flex-row sm:gap-12 sm:py-24 lg:px-20 xl:max-h-[598px] 2xl:rounded-5xl; } } + +/* Hide scrollbar for Chrome, Safari and Opera */ +.hide-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.hide-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index a36cde0..a80c976 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", @@ -14,8 +16,8 @@ const geistMono = localFont({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Travel", + description: "Travel app", }; export default function RootLayout({ @@ -25,10 +27,12 @@ export default function RootLayout({ }>) { return ( - - {children} + + +
+ {children} +
+