Feat: RealT details component

next.config.mjs

@@ -9,6 +9,13 @@ const nextConfig = {
         pathname: "/**",
         search: "",
       },
+      {
+        protocol: "https",
+        hostname: "realt.co",
+        port: "",
+        pathname: "/**",
+        search: "",
+      },
     ],
   },
   webpack: (config) => {

package.json

@@ -29,6 +29,7 @@
     "react-dom": "^18",
     "react-jdenticon": "^1.4.0",
     "react-use": "^17.6.0",
+    "swiper": "^12.0.2",
     "viem": "^2.31.4",
     "wagmi": "^2.15.6"
   },

src/app/(homepage)/components/Header/index.tsx

@@ -12,7 +12,7 @@ const Header: React.FC = () => {
   return (
     <div className="flex flex-col items-start gap-4">
       <h1 className="text-klerosUIComponentsPrimaryText text-2xl font-semibold">
-        Session 1 - Retro PGF Experiment
+        RealT Properties Predictions
       </h1>
       <div className="flex flex-wrap gap-4">
         <div className="flex items-center gap-2">
@@ -41,7 +41,7 @@ const Header: React.FC = () => {
         <div className="flex size-full flex-wrap items-center gap-6 px-6 py-3.75">
           <SeerLogo />
           <p className="text-klerosUIComponentsPrimaryText text-base">
-            If rated, what score would the gourmet committee give to the meal?
+            If evaluated, what is the current price of the property?
           </p>
         </div>
       </div>

src/app/(homepage)/components/ProjectFunding/Details.tsx

@@ -1,29 +1,155 @@
 import React from "react";
 
+import clsx from "clsx";
+import Image from "next/image";
 import Link from "next/link";
+import { Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+import CalendarIcon from "@/assets/svg/calendar.svg";
+import ChartIcon from "@/assets/svg/chart-bar.svg";
+import DollarIcon from "@/assets/svg/dollar.svg";
+import ExternalArrowIcon from "@/assets/svg/external-arrow.svg";
+import GeoPin from "@/assets/svg/geo-pin.svg";
+import GnosisLogo from "@/assets/svg/gnosis.svg";
+import HomeIcon from "@/assets/svg/home.svg";
 
 import { IDetails } from "@/consts/markets";
 
-const Details: React.FC<IDetails> = ({ imdbURL, posterURL, summary }) => (
-  <div className="flex flex-wrap items-start gap-4">
-    {posterURL ? (
-      <img src={posterURL} alt="movie poster" className="rounded-base" />
-    ) : null}
-    <div>
-      {imdbURL ? (
-        <Link
-          className="text-klerosUIComponentsPrimaryBlue font-bold"
-          href={imdbURL}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          IMDB
-        </Link>
-      ) : null}
-      <p className="text-shadow-klerosUIComponentsSecondaryText max-w-160 italic">
-        {summary}
-      </p>
+const Details: React.FC<IDetails> = ({
+  fullName,
+  totalInvestment,
+  squareFeet,
+  propertyType,
+  grossRentYear,
+  netRentYear,
+  initialLaunchDate,
+  annualPercentageYield,
+  coordinate,
+  marketplaceLink,
+  images,
+  contract,
+}) => (
+  <div className="flex flex-col gap-4">
+    <div className="flex items-center gap-4">
+      <GeoPin className="shrink-0" />
+      <strong className="text-klerosUIComponentsPrimaryText text-2xl">
+        {fullName}
+      </strong>
+      <small>{coordinate}</small>
+    </div>
+    <div className="bg-klerosUIComponentsWhiteBackground p-4">
+      <div className="flex items-center gap-4">
+        <Value
+          icon={DollarIcon}
+          title={totalInvestment}
+          subtitle="Total investment"
+          big
+        />
+      </div>
+      <hr className="mt-2 mb-4" />
+      <div>
+        <div className="text-klerosUIComponentsPrimaryText mb-2 flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <HomeIcon />
+            <strong> {`${squareFeet} sq ft`} </strong>
+          </div>
+          <span className="text-klerosUIComponentsSecondaryText">|</span>
+          <strong>{propertyType}</strong>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Value
+            icon={DollarIcon}
+            title={grossRentYear}
+            subtitle="Gross Rent Year"
+          />
+          |
+          <Value
+            icon={DollarIcon}
+            title={netRentYear}
+            subtitle="Net Rent Year"
+          />
+          |
+          <Value
+            icon={CalendarIcon}
+            title={initialLaunchDate}
+            subtitle="Initial Launch Date"
+          />
+          |
+          <Value
+            icon={ChartIcon}
+            title={annualPercentageYield}
+            subtitle="Annual Percentage Yield"
+          />
+        </div>
+      </div>
     </div>
+    <Swiper
+      navigation
+      spaceBetween={24}
+      modules={[Navigation, Pagination]}
+      className="h-96 w-full xl:h-[740px]"
+    >
+      {images.map((imageSrc) => (
+        <SwiperSlide key={imageSrc}>
+          <Image
+            className="size-full rounded-2xl object-contain"
+            alt="House image"
+            width={740}
+            height={740}
+            src={imageSrc}
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+    <div className="bg-klerosUIComponentsWhiteBackground flex gap-4 px-4 py-6">
+      <Link
+        href={marketplaceLink}
+        className="text-klerosUIComponentsPrimaryBlue flex items-center gap-2"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Marketplace Link <ExternalArrowIcon className="size-4" />
+      </Link>
+      |
+      <Value icon={GnosisLogo} title="Gnosis Contract" subtitle={contract} />
+    </div>
+  </div>
+);
+
+interface IValue {
+  className?: string;
+  icon: React.FC<React.SVGProps<SVGElement>>;
+  title: string;
+  subtitle?: string;
+  big?: boolean;
+}
+
+const Value: React.FC<IValue> = ({
+  className,
+  icon: Icon,
+  title,
+  subtitle,
+  big,
+}) => (
+  <div
+    className={clsx("flex items-center", big ? "gap-4" : "gap-2", className)}
+  >
+    <Icon className={clsx("shrink-0", big ? "size-6" : "size-4")} />
+    <strong
+      className={clsx(
+        "text-klerosUIComponentsPrimaryText",
+        big ? "text-2xl" : "",
+      )}
+    >
+      {title}
+    </strong>
+    {subtitle ? (
+      <small className={big ? "text-md" : "text-xs"}>{subtitle}</small>
+    ) : null}
   </div>
 );
 

src/app/globals.css

@@ -62,6 +62,20 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    width: 60px;
+    height: 60px;
+    border-radius: 100%;
+    background-color: #FFF;
+    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
+    svg {
+      fill: #333333 !important;
+      width: 16px !important;
+      height: 16px !important;
+    }
+  }
 }
 
 @utility text-balance {

src/components/layout/Header/Logo.tsx

@@ -17,7 +17,7 @@ const Logo: React.FC = () => {
       <Link href={"/"}>
         <Image
           src={theme === "dark" ? _LogoDark : _Logo}
-          alt="RetroPGF experiment logo"
+          alt="RealT Distilled Judgement"
           className="size-14 max-h-14 hover:brightness-105 md:ml-6"
         />
       </Link>