vivid-labs · vivid-github · Feb 6, 2024 · Feb 6, 2024
diff --git a/components/Berlin.tsx b/components/Berlin.tsx
@@ -0,0 +1,8 @@
+import berlin from "./berlin.png";
+export const Berlin = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <div className="flex items-start h-[564px]" style={override}>
+      <img className="w-[376px] h-[564px] object-cover" src={berlin.src} />
+    </div>
+  );
+};
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -0,0 +1,42 @@
+export const Button = ({
+  override,
+  color,
+}: {
+  override?: React.CSSProperties;
+  color: string;
+}) => {
+  const startToExploreColor =
+    color === "White"
+      ? {
+          color: "rgb(13, 17, 20)",
+        }
+      : {
+          color: "rgb(255, 255, 255)",
+        };
+  const buttonColor =
+    color === "White"
+      ? {
+          backgroundColor: "rgb(255, 255, 255)",
+        }
+      : {
+          backgroundColor: "rgb(32, 35, 38)",
+        };
+  return (
+    <div
+      className="flex justify-center items-center px-[50px] py-5 rounded-[7px]"
+      style={{
+        ...buttonColor,
+        ...override,
+      }}
+    >
+      <p
+        className="text-xl font-semibold tracking-[-0.03em]"
+        style={{
+          ...startToExploreColor,
+        }}
+      >
+        Start to explore
+      </p>
+    </div>
+  );
+};
diff --git a/components/City.tsx b/components/City.tsx
@@ -0,0 +1,162 @@
+import { Lake } from "./Lake";
+import ticketImage1 from "./ticketImage1.svg";
+import timeCircleImage from "./timeCircleImage.svg";
+import image from "./image.jpg";
+import ticketImage from "./ticketImage.svg";
+import ticket from "./ticket.svg";
+import timeCircle from "./timeCircle.svg";
+
+export const City = ({
+  override,
+  size,
+  backgroundImage,
+  title,
+  price,
+  time,
+  guideName,
+  guidePosition,
+}: {
+  override?: React.CSSProperties;
+  size: string;
+  backgroundImage: React.ReactNode;
+  title: string;
+  price: string;
+  time: string;
+  guideName: string;
+  guidePosition: string;
+}) => {
+  const contentSize = {
+    Large: {
+      height: "562px",
+    },
+    Medium: {
+      height: "360px",
+    },
+    Small: {
+      height: "180px",
+    },
+  }[size];
+  const citySize = {
+    Large: {
+      height: "562px",
+    },
+    Medium: {
+      height: "360px",
+    },
+    Small: {
+      height: "180px",
+    },
+  }[size];
+  let ticketSrc;
+  if (size === "Large") {
+    ticketSrc = ticketImage1;
+  } else if (size === "Medium") {
+    ticketSrc = ticketImage;
+  } else {
+    ticketSrc = ticket;
+  }
+  let timeCircleSrc;
+  if (size === "Large") {
+    timeCircleSrc = timeCircleImage;
+  } else if (size === "Medium") {
+    timeCircleSrc = timeCircleImage;
+  } else {
+    timeCircleSrc = timeCircle;
+  }
+  return (
+    <div
+      className="overflow-hidden rounded-[1.25rem] relative w-[376px]"
+      style={{
+        ...citySize,
+        ...override,
+      }}
+    >
+      <OverflowHidden backgroundImage={backgroundImage} />
+      <div
+        className="flex flex-col justify-between items-start px-6 py-[34px] absolute w-[376px] left-0 top-0"
+        style={{
+          ...contentSize,
+        }}
+      >
+        <TicketSummary
+          title={title}
+          ticketSrc={ticketSrc}
+          price={price}
+          timeCircleSrc={timeCircleSrc}
+          time={time}
+        />
+        <FlexItems guideName={guideName} guidePosition={guidePosition} />
+      </div>
+    </div>
+  );
+};
+
+const OverflowHidden = ({ backgroundImage }: any) => (
+  <div
+    className="overflow-hidden rounded-[1.25rem] absolute w-[376px] left-0 h-[562px] top-0"
+    style={{
+      background:
+        "linear-gradient(180deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.00) 100%)",
+    }}
+  >
+    {backgroundImage}
+    <div
+      className="absolute left-[0%] right-[0%] w-full top-[0%] bottom-[0%] h-full"
+      style={{
+        background:
+          "linear-gradient(0deg, rgba(13, 14, 16, 0.63) 0%, rgba(217, 217, 217, 0.00) 100%)",
+      }}
+    />
+  </div>
+);
+
+const TicketSummary = ({
+  title,
+  ticketSrc,
+  price,
+  timeCircleSrc,
+  time,
+}: any) => (
+  <div className="flex flex-col items-start">
+    <p className="text-[rgb(15,_33,_43)] text-xl font-semibold">{title}</p>
+    <div className="flex items-start gap-[9px]">
+      <div className="flex items-center gap-0.5">
+        <div className="overflow-hidden relative w-3.5 h-3.5">
+          <div>
+            <img
+              className="absolute left-[1.17px] -right-[1.17px] w-auto top-[2.33px] -bottom-[2.33px] h-auto"
+              src={ticketSrc.src}
+            />
+          </div>
+        </div>
+        <p className="text-[rgb(15,_33,_43)] text-[10px] font-normal">
+          {price}
+        </p>
+      </div>
+      <div className="flex items-end gap-0.5">
+        <div className="overflow-hidden relative w-3.5 h-3.5">
+          <div>
+            <img
+              className="absolute left-[1.17px] -right-[1.17px] w-auto top-[1.17px] -bottom-[1.17px] h-auto"
+              src={timeCircleSrc.src}
+            />
+          </div>
+        </div>
+        <p className="text-[rgb(15,_33,_43)] text-[10px] font-normal">{time}</p>
+      </div>
+    </div>
+  </div>
+);
+
+const FlexItems = ({ guideName, guidePosition }: any) => (
+  <div className="flex items-center gap-[15px]">
+    <img
+      className="w-[30px] h-[30px] object-cover border-solid border-[rgba(255,_255,_255,_0.37)] border-[3px] rounded-[50%]"
+      src={image.src}
+    />
+    <div className="flex flex-col items-start">
+      <p className="text-white text-[15px] font-bold">{guideName}</p>
+      <p className="text-white text-xs font-normal">{guidePosition}</p>
+    </div>
+  </div>
+);
diff --git a/components/Feature.tsx b/components/Feature.tsx
@@ -0,0 +1,29 @@
+import { Link } from "./Link";
+import { VolumeDown } from "./VolumeDown";
+export const Feature = ({
+  override,
+  title,
+  description,
+  icon,
+}: {
+  override?: React.CSSProperties;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}) => {
+  return (
+    <div
+      className="flex items-start gap-[9px] px-[25px] py-[30px] rounded-[9px] backdrop-filter backdrop-blur-[10.5px] bg-[rgba(255,_255,_255,_0.08)]"
+      style={override}
+    >
+      <div className="flex flex-col items-start gap-3.5 w-[285px]">
+        <p className="text-white text-[25px] font-bold">{title}</p>
+        <p className="w-full text-[rgb(160,_160,_160)] text-xl font-normal">
+          {description}
+        </p>
+        <Link linkText="Select Guide" />
+      </div>
+      {icon}
+    </div>
+  );
+};
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,65 @@
+import { Link } from "./Link";
+
+export const Footer = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <div
+      className="flex flex-col justify-between items-center p-[60px] w-[1440px] h-[417px] bg-[rgb(15,_33,_43)]"
+      style={override}
+    >
+      <div className="flex justify-between items-start w-full h-[218px]">
+        <MilanTour />
+        <TravelsAndPartnership />
+      </div>
+      <CopyrightAndLinks />
+    </div>
+  );
+};
+
+const CopyrightAndLinks = () => (
+  <div className="flex justify-between items-center pt-7 w-full border-solid border-[rgba(255,_255,_255,_0.19)] border-t">
+    <p className="text-white text-[15px] font-medium">
+      2023 MilanTour. All rights reserved
+    </p>
+    <div className="flex items-start gap-[31px]">
+      <Link linkText="Privacy Policy" />
+      <Link linkText="Terms & Conditions" />
+    </div>
+  </div>
+);
+
+const MilanTour = () => (
+  <div className="flex flex-col items-start gap-2">
+    <p className="text-white text-[25px] font-bold">MilanTour</p>
+    <p className="text-white text-[17px] font-medium">
+      Our vision is to provide convenience
+      <br />
+      and help you to find your best place for traveling
+    </p>
+  </div>
+);
+
+const TravelsAndPartnership = () => (
+  <div className="flex items-center gap-20">
+    <div className="flex flex-col items-start gap-4">
+      <p className="text-white text-lg font-bold">About</p>
+      <Link linkText="Travels" />
+      <Link linkText="Partnership" />
+      <Link linkText="How to Travel" />
+      <Link linkText="Our plans" />
+    </div>
+    <div className="flex flex-col items-start gap-4">
+      <p className="text-white text-lg font-bold">Community</p>
+      <Link linkText="Events" />
+      <Link linkText="Blog" />
+      <Link linkText="Podcast" />
+      <Link linkText="Invite a Friend" />
+    </div>
+    <div className="flex flex-col items-start gap-4">
+      <p className="text-white text-lg font-bold">Socials</p>
+      <Link linkText="Facebook" />
+      <Link linkText="Instagram" />
+      <Link linkText="Twitter" />
+      <Link linkText="Discord" />
+    </div>
+  </div>
+);
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
@@ -0,0 +1,70 @@
+import heroSection from "./heroSection.png";
+import { Navigation } from "./Navigation";
+import { Button } from "./Button";
+import { Feature } from "./Feature";
+import { VolumeDown } from "./VolumeDown";
+import { Program } from "./Program";
+import { Home } from "./Home";
+
+export const HeroSection = ({
+  override,
+}: {
+  override?: React.CSSProperties;
+}) => {
+  const featureProps = [
+    {
+      moreTitle: "Select guide",
+      description: "Travel on your own. Use the services of an audio guide.",
+      title: "Audio Guide",
+      icon: <VolumeDown />,
+    },
+    {
+      moreTitle: "Select program",
+      description: "Choose a travel program that is right for you.",
+      title: "Programs",
+      icon: <Program />,
+    },
+    {
+      moreTitle: "Learn more",
+      description: "Book hotels and restaurants at the best prices",
+      title: "Hotels & Restaurant",
+      icon: <Home />,
+    },
+  ];
+  return (
+    <div
+      className="overflow-hidden flex flex-col items-center gap-[66px] relative w-[1440px]"
+      style={override}
+    >
+      <img
+        className="object-cover absolute h-full w-full"
+        src={heroSection.src}
+      />
+      <Navigation
+        override={{
+          height: "fit-content",
+          width: "100%",
+        }}
+      />
+      <SwitzerlandHasNeverBeenSoAffordable />
+      <Button color="White" />
+      <div className="flex justify-center items-start gap-[31px]">
+        {featureProps.map((props, i) => (
+          <Feature {...props} key={i} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const SwitzerlandHasNeverBeenSoAffordable = () => (
+  <div className="relative w-[793px] h-[304px]">
+    <p className="absolute w-[793px] left-0 top-0 text-white text-[70px] font-bold tracking-[-0.03em]">
+      Switzerland Has Never Been So Affordable
+    </p>
+    <p className="absolute w-[469px] left-[162px] top-[186px] text-white text-[25px] font-normal tracking-[-0.03em]">
+      Discover Switzerland. Choose the best programs, guides, hotels and
+      restaurants.
+    </p>
+  </div>
+);
diff --git a/components/Home.tsx b/components/Home.tsx
@@ -0,0 +1,16 @@
+import home from "./home.svg";
+export const Home = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <div
+      className="overflow-hidden flex justify-center items-center p-[5px] relative w-8 h-8"
+      style={override}
+    >
+      <div className="w-5 h-5">
+        <img
+          className="absolute left-1.5 -right-[6px] w-auto top-1.5 -bottom-[6px] h-auto"
+          src={home.src}
+        />
+      </div>
+    </div>
+  );
+};