diff --git a/public/images/speakers/company-logo/rasmio.svg b/public/images/speakers/company-logo/rasmio.svg new file mode 100644 index 0000000..5c67650 --- /dev/null +++ b/public/images/speakers/company-logo/rasmio.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/speakers/profile-picture/pooria-baba-ali.svg b/public/images/speakers/profile-picture/pooria-baba-ali.svg new file mode 100644 index 0000000..d9a1ee8 --- /dev/null +++ b/public/images/speakers/profile-picture/pooria-baba-ali.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..44946ed 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,9 @@ -import Image from "next/image"; +import Speakers from "@/components/sections/speakers/Speakers"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> + + ); } diff --git a/src/components/sections/speakers/Speaker.tsx b/src/components/sections/speakers/Speaker.tsx new file mode 100644 index 0000000..b930fb3 --- /dev/null +++ b/src/components/sections/speakers/Speaker.tsx @@ -0,0 +1,59 @@ +import { speakerInfoType } from "../types"; +import Image from "next/image"; + +const Speaker = ({ speakerInfo }: { speakerInfo: speakerInfoType }) => { + { + /* TODO: replace hard coded styles with global props */ + } + + const { name, role, company, imageUrl } = speakerInfo; + return ( +
+ {/* speaker picture */} +
+ {/* Gradient */} +
+ {/* Black Background */} +
+ + {name} +
+ {/* info section*/} +
+ {/* speaker name*/} + {name} + {/* speaker role (stack)*/} + {role} + {/* speaker company details */} +
+ در +
+ {company.name} + {company.name} +
+
+
+
+ ); +}; + +export default Speaker; diff --git a/src/components/sections/speakers/Speakers.tsx b/src/components/sections/speakers/Speakers.tsx new file mode 100644 index 0000000..fbb9171 --- /dev/null +++ b/src/components/sections/speakers/Speakers.tsx @@ -0,0 +1,24 @@ +import Speaker from "./Speaker"; +import { speakersData } from "@/data/speakers"; + +const Speakers = () => { + { + /* TODO: replace hard coded sizes with global props */ + } + + return ( +
+

سخنرانان همایش

+
+ {speakersData.map((info, idx) => ( + + ))} +
+
+ ); +}; + +export default Speakers; diff --git a/src/components/sections/types.ts b/src/components/sections/types.ts new file mode 100644 index 0000000..f79aee7 --- /dev/null +++ b/src/components/sections/types.ts @@ -0,0 +1,9 @@ +export interface speakerInfoType { + imageUrl: string; + role: string; + name: string; + company: { + logo: string; + name: string; + }; +} diff --git a/src/data/speakers.ts b/src/data/speakers.ts new file mode 100644 index 0000000..a27d59b --- /dev/null +++ b/src/data/speakers.ts @@ -0,0 +1,86 @@ +import { speakerInfoType } from "@/components/sections/types"; + +export const speakersData: speakerInfoType[] = [ + // all data will be replaced/removed with actual data + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, +];