prettier project

goldipl · Feb 11, 2024 · 8d9f452 · 8d9f452
1 parent a25d34a
commit 8d9f452
Show file tree

Hide file tree

Showing 16 changed files with 429 additions and 292 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
+@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css");
 
 @tailwind base;
 @tailwind components;
@@ -17,10 +17,10 @@ body {
 }
 
 @layer utilities {
-  .btn_light_lime { 
+  .btn_light_lime {
     @apply bg-[#00df9a] hover:text-[#00df9a] hover:bg-gray-50;
   }
-  
+
   .max-container {
     @apply mx-auto max-w-[1440px];
   }
@@ -144,4 +144,4 @@ body {
 .hide-scrollbar {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-}
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,26 +1,26 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-import './../components/Gallery/gallery.css'
-import Navbar from '@/components/Navbar'
-import Footer from '@/components/Footer'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import "./../components/Gallery/gallery.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Travel Website',
-  description: 'Want to find your dreamy holidays? You are in the right place!',
-}
+  title: "Travel Website",
+  description: "Want to find your dreamy holidays? You are in the right place!",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="pl" className='overflow-x-hidden'>
+    <html lang="pl" className="overflow-x-hidden">
       <body>
-        <div className='flexCenter flex-col'>
+        <div className="flexCenter flex-col">
           <Navbar />
           <main className="relative overflow-x-hidden w-[100vw] lg:w-full">
             {children}
@@ -29,5 +29,5 @@ export default function RootLayout({
         </div>
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -15,5 +15,5 @@ export default function Home() {
       <PricingCards />
       <Contact />
     </>
-  )
+  );
 }
diff --git a/components/AboutUs/AboutUs.tsx b/components/AboutUs/AboutUs.tsx
@@ -1,24 +1,43 @@
-import React from 'react'
-import MaledviesImg01 from '@/public/images/maledives01.jpg'
-import MaledviesImg02 from '@/public/images/maledives02.jpg'
+import React from "react";
+import MaledviesImg01 from "@/public/images/maledives01.jpg";
+import MaledviesImg02 from "@/public/images/maledives02.jpg";
 
 const AboutUs = () => {
   return (
-    <section id='about_us' className='relative flex max-container padding-container items-center py-10 mb-10'>
-      <div className='flex h-[400px]'>
-        <div className='flex absolute left-[-80px] top-[-16px] 2xl:top-[-60px] lg:top-[-20px] md:top-[-80px] md:left-0'>
-          <img className='rounded-3xl border-2 border-white' src={MaledviesImg01.src} alt="img" width={400} height={1200}/>
+    <section
+      id="about_us"
+      className="relative flex max-container padding-container items-center py-10 mb-10"
+    >
+      <div className="flex h-[400px]">
+        <div className="flex absolute left-[-80px] top-[-16px] 2xl:top-[-60px] lg:top-[-20px] md:top-[-80px] md:left-0">
+          <img
+            className="rounded-3xl border-2 border-white"
+            src={MaledviesImg01.src}
+            alt="img"
+            width={400}
+            height={1200}
+          />
         </div>
-        <div className='flex absolute z-[-1] left-1/3 right-[-40px] top-[80px] h-5/6 2xl:top-[-120px] lg:top-[-60px] lg:h-[120%] lg:z-0'>
-          <img className='rounded-3xl border-2 border-white' src={MaledviesImg02.src} alt="img" width={400} height={1200}/>
+        <div className="flex absolute z-[-1] left-1/3 right-[-40px] top-[80px] h-5/6 2xl:top-[-120px] lg:top-[-60px] lg:h-[120%] lg:z-0">
+          <img
+            className="rounded-3xl border-2 border-white"
+            src={MaledviesImg02.src}
+            alt="img"
+            width={400}
+            height={1200}
+          />
         </div>
       </div>
-      <div className='p-4 bg-white rounded-3xl m-4 left-1/4 absolute xl:top-[80px] xl:left-2/3'>
-        <h1 className='regular-24 xl:regular-40 mb-5'>About Us</h1>
-        <p className='regular-14 xl:regular-16'>Unique opportunities at the best prices! Here you will find specific trip suggestions based on promotional prices for flights, hotels and transfers.</p>
+      <div className="p-4 bg-white rounded-3xl m-4 left-1/4 absolute xl:top-[80px] xl:left-2/3">
+        <h1 className="regular-24 xl:regular-40 mb-5">About Us</h1>
+        <p className="regular-14 xl:regular-16">
+          Unique opportunities at the best prices! Here you will find specific
+          trip suggestions based on promotional prices for flights, hotels and
+          transfers.
+        </p>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default AboutUs
+export default AboutUs;
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,24 +1,32 @@
-import Image from 'next/image';
-import React from 'react'
+import Image from "next/image";
+import React from "react";
 
 type ButtonProps = {
-    type: 'button' | 'submit';
-    title: string;
-    icon?: string;
-    variant: 'btn_light_lime'
-    width: string;
-}
+  type: "button" | "submit";
+  title: string;
+  icon?: string;
+  variant: "btn_light_lime";
+  width: string;
+};
 
-const Button = ({type, title, icon, variant, width}: ButtonProps) => {
+const Button = ({ type, title, icon, variant, width }: ButtonProps) => {
   return (
     <button
-        className={`duration-150 rounded-md font-medium my-6 mx-auto px-6 py-3 ${variant} w-[${width}px]`}
-        type={type}
+      className={`duration-150 rounded-md font-medium my-6 mx-auto px-6 py-3 ${variant} w-[${width}px]`}
+      type={type}
     >
-        {icon && <Image src={icon} alt={title} width={22} height={22} className='inline-flex mr-3'/>}
-        {title}
+      {icon && (
+        <Image
+          src={icon}
+          alt={title}
+          width={22}
+          height={22}
+          className="inline-flex mr-3"
+        />
+      )}
+      {title}
     </button>
-  )
-}
+  );
+};
 
-export default Button
+export default Button;
diff --git a/components/Contact/Contact.tsx b/components/Contact/Contact.tsx
@@ -1,12 +1,20 @@
-import React from 'react'
+import React from "react";
 
 const Contact = () => {
   return (
-    <section id='contact'>
-      <h1 className="flex flexCenter bg-opacity-50 bg-white pt-8 text-black font-bold mb-4 lg:m-10 regular-24 xl:regular-40">Contact</h1>
-      <iframe className="google-map w-[100vw] h-[400px] border-t-2 border-black" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d156388.35438479282!2d20.92111239761172!3d52.23306532094908!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc669a869f01%3A0x72f0be2a88ead3fc!2sWarszawa!5e0!3m2!1spl!2spl!4v1668164739561!5m2!1spl!2spl" width="800" height="600" loading="lazy"></iframe>
+    <section id="contact">
+      <h1 className="flex flexCenter bg-opacity-50 bg-white pt-8 text-black font-bold mb-4 lg:m-10 regular-24 xl:regular-40">
+        Contact
+      </h1>
+      <iframe
+        className="google-map w-[100vw] h-[400px] border-t-2 border-black"
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d156388.35438479282!2d20.92111239761172!3d52.23306532094908!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc669a869f01%3A0x72f0be2a88ead3fc!2sWarszawa!5e0!3m2!1spl!2spl!4v1668164739561!5m2!1spl!2spl"
+        width="800"
+        height="600"
+        loading="lazy"
+      ></iframe>
     </section>
-  )
-}
+  );
+};
 
-export default Contact
+export default Contact;
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import logo from './../public/images/logo/logo.png'
+import logo from "./../public/images/logo/logo.png";
 
 const Footer = () => {
   return (
     <div className="bg-black text-white padding-container py-4 lg:py-10 w-[100vw] flex justify-center lg:justify-between">
       <div className="max-container flex items-center lg:items-start w-full lg:flex-row flex-col justify-center lg:justify-between">
         <div className="flex-col mb-4">
-          <a href="/"className="flex justify-center">
+          <a href="/" className="flex justify-center">
             <img
               className="lg:w-[120px] h-auto w-[60px] mb-4 lg:m-6"
               src={logo.src}
@@ -49,15 +49,15 @@ const Footer = () => {
         </div>
         <div className="flex-col text-center">
           <h3 className="uppercase text-lg mb-4">Social Media</h3>
-            <a href="#">
-              <i className='bx bxl-facebook-square mx-1 hover:text-[#00df9a]'></i>
-            </a>
-            <a href="#">
-              <i className='bx bxl-instagram mx-1 hover:text-[#00df9a]'></i>
-            </a>
-            <a href="#">
-              <i className='bx bxl-linkedin-square mx-1 hover:text-[#00df9a]'></i>
-            </a>
+          <a href="#">
+            <i className="bx bxl-facebook-square mx-1 hover:text-[#00df9a]"></i>
+          </a>
+          <a href="#">
+            <i className="bx bxl-instagram mx-1 hover:text-[#00df9a]"></i>
+          </a>
+          <a href="#">
+            <i className="bx bxl-linkedin-square mx-1 hover:text-[#00df9a]"></i>
+          </a>
         </div>
       </div>
     </div>

diff --git a/components/Gallery/Gallery.tsx b/components/Gallery/Gallery.tsx
@@ -1,14 +1,19 @@
-'use client';
-import React from 'react'
-import Swiper from './Swiper'
+"use client";
+import React from "react";
+import Swiper from "./Swiper";
 
 const Gallery = () => {
   return (
-    <section id='gallery' className='max-container padding-container overflow-x-hidden pb-20'>
-      <h1 className="flex flexCenter bg-opacity-50 bg-white p-8 rounded-3xl text-black font-bold mb-4 lg:m-10 regular-24 xl:regular-40">Gallery</h1>
+    <section
+      id="gallery"
+      className="max-container padding-container overflow-x-hidden pb-20"
+    >
+      <h1 className="flex flexCenter bg-opacity-50 bg-white p-8 rounded-3xl text-black font-bold mb-4 lg:m-10 regular-24 xl:regular-40">
+        Gallery
+      </h1>
       <Swiper />
     </section>
-  )
-}
+  );
+};
 
-export default Gallery
+export default Gallery;