diff --git a/public/house-icon-0.svg b/public/house-icon-0.svg new file mode 100644 index 0000000..657a48b --- /dev/null +++ b/public/house-icon-0.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/house-icon-1.svg b/public/house-icon-1.svg new file mode 100644 index 0000000..b7433bd --- /dev/null +++ b/public/house-icon-1.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/house-icon-2.svg b/public/house-icon-2.svg new file mode 100644 index 0000000..9bb9b8c --- /dev/null +++ b/public/house-icon-2.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/house-icon-3.svg b/public/house-icon-3.svg new file mode 100644 index 0000000..3c27b5f --- /dev/null +++ b/public/house-icon-3.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx new file mode 100644 index 0000000..bc6b68a --- /dev/null +++ b/src/app/components/home/Card.tsx @@ -0,0 +1,41 @@ +import React from "react"; +// import { AiFillHeart } from "react-icons/ai"; +// import { BsChatSquareFill } from "react-icons/bs"; + +// import styles from "./Card.module.css"; + +const styles = { + wrapper: + "bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center;", + header: "relative mt-2 mx-2", + imageWrapper: "h-56 rounded-2xl overflow-hidden", + wrapperAnime: "transition-all duration-500 ease-in-out", + image: "object-cover w-8/12 h-8/12", + textWrapper: "pt-10 pb-6 w-full px-4 flex justify-between items-center", + text: "font-medium leading-none text-base tracking-wider text-gray-400", +}; + +interface CardProps { + title: string; + order: number; + image: string; + budget: string; +} + +const Card = ({ title, order, image, budget }: CardProps) => { + return ( +
+
+
+ +
+
+
+

{`${title}`}

+
{budget}
+
+
+ ); +}; + +export default Card; diff --git a/src/app/components/home/CardTiles.tsx b/src/app/components/home/CardTiles.tsx new file mode 100644 index 0000000..1043cf5 --- /dev/null +++ b/src/app/components/home/CardTiles.tsx @@ -0,0 +1,35 @@ +"use client"; + +import { Fragment } from "react"; +import { Transition } from "@headlessui/react"; +import Card from "./Card"; + +type PortfoliosType = Array<{ + title: string; + budget: string; +}>; + +export default function CardTiles({ + Portfolios, +}: { + Portfolios: PortfoliosType; +}) { + return ( +
+
+ {Portfolios.map((portfolio, index) => { + const image_idx = index % 3; + return ( + + ); + })} +
+
+ ); +} diff --git a/src/app/components/signin/TextField.tsx b/src/app/components/signin/TextField.tsx deleted file mode 100644 index c7e1078..0000000 --- a/src/app/components/signin/TextField.tsx +++ /dev/null @@ -1,35 +0,0 @@ -const formClasses = - "block w-full appearance-none rounded-lg border bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-stone-500 focus:outline-none focus:ring-cyan-500 sm:text-sm"; - -const Label = ({ id, children }: { id: string; children: React.ReactNode }) => { - return ( - - ); -}; - -type TypeFieldInput = { - id: string; - label: string; - type: string; - className?: string; -} & JSX.IntrinsicElements["input"]; - -export default function TextField({ - id, - label, - type = "text", - className, - ...props -}: TypeFieldInput) { - return ( -
- {label && } - -
- ); -} diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index fc7812d..2cc08b4 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -2,6 +2,7 @@ import { getServerSession } from "next-auth"; import { AuthOptions } from "../api/auth/[...nextauth]/route"; import { redirect } from "next/navigation"; import Nav from "../components/Navbar"; +import CardTiles from "../components/home/CardTiles"; const Home = async () => { // const session = await getServerSession(AuthOptions); @@ -10,10 +11,35 @@ const Home = async () => { // redirect("/?callbackUrl=/home"); // } + const Portfolios = [ + { + title: "Portfolio 1", + budget: "£500k", + }, + { + title: "Portfolio 2", + budget: "150k", + }, + { + title: "Portfolio 3", + budget: "£1m", + }, + { title: "Portfolio 4", budget: "£2m" }, + { title: "Portfolio 5", budget: "£25k" }, + { title: "Portfolio 6", budget: "£10k" }, + { title: "Portfolio 7", budget: "£33k" }, + { title: "Portfolio 8", budget: "£670k" }, + { title: "Portfolio 9", budget: "£240k" }, + { title: "Portfolio 10", budget: "93k" }, + ]; + return ( <> -
Home
+
+

Your Portfolios

+
+ ); }; diff --git a/tailwind.config.js b/tailwind.config.js index d53b2ea..7980350 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,18 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "gradient-conic": + "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [], -} +};