diff --git a/components/AboutPage/AboutCard.tsx b/components/AboutPage/AboutCard.tsx new file mode 100644 index 0000000..cb76229 --- /dev/null +++ b/components/AboutPage/AboutCard.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +interface Props { + bodyText: string; + imgURL: string; + reverse?: boolean; + titleText: string; +} + +export const AboutCard = ({ + bodyText, + imgURL, + reverse = false, + titleText, +}: Props) => { + if (!reverse) { + return ( +
+ +
+

{titleText}

+

{bodyText}

+
+
+ ); + } else { + return ( +
+
+

{titleText}

+

{bodyText}

+
+ +
+ ); + } +}; diff --git a/components/AboutPage/AboutCardTall.tsx b/components/AboutPage/AboutCardTall.tsx new file mode 100644 index 0000000..a9e14eb --- /dev/null +++ b/components/AboutPage/AboutCardTall.tsx @@ -0,0 +1,37 @@ +import React from "react"; + +interface Props { + bodyText: string; + imgURL: string; + reverse?: boolean; + titleText: string; +} + +export const AboutCardTall = ({ + bodyText, + imgURL, + reverse = false, + titleText, +}: Props) => { + if (!reverse) { + return ( +
+ +
+

{titleText}

+

{bodyText}

+
+
+ ); + } else { + return ( +
+
+

{titleText}

+

{bodyText}

+
+ +
+ ); + } +}; diff --git a/components/AboutPage/AboutCardWide.tsx b/components/AboutPage/AboutCardWide.tsx new file mode 100644 index 0000000..51262ae --- /dev/null +++ b/components/AboutPage/AboutCardWide.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +interface Props { + bodyText: string; + imgURL: string; + reverse?: boolean; + titleText: string; +} + +export const AboutCardWide = ({ + bodyText, + imgURL, + reverse = false, + titleText, +}: Props) => { + if (!reverse) { + return ( +
+ +
+

{titleText}

+

{bodyText}

+
+
+ ); + } else { + return ( +
+
+

{titleText}

+

{bodyText}

+
+ +
+ ); + } +}; diff --git a/pages/about.tsx b/pages/about.tsx index 213bdc8..96b2e86 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -2,6 +2,10 @@ import type { NextPage } from "next"; import Head from "next/head"; +import { AboutCard } from "components/AboutPage/AboutCard"; +import { AboutCardTall } from "components/AboutPage/AboutCardTall"; +import { AboutCardWide } from "components/AboutPage/AboutCardWide"; + const DepositTest: NextPage = () => { return (
@@ -10,7 +14,94 @@ const DepositTest: NextPage = () => { -

About

+

+ About Substratum +

+
+
+
+
+

About Substratum

+

+ Welcome to Substratum, the premier NFT platform that brings + together artists, collectors, and investors from all around the + world. +

+
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+

Join The Substratum Community

+

+ Whether you're an artist, collector, or investor, we invite you to + join the Substratum community. By joining our platform, you'll have + access to a vibrant community of like-minded individuals who share + your passion for art and NFTs. You'll also have the opportunity to + showcase your work, discover new artists, and expand your + collection. We believe that the Substratum community is one of the + strongest and most supportive in the NFT world, and we're excited to + welcome you to it. +

+
+
); }; diff --git a/public/projects/zancanGM.png b/public/projects/zancanGM.png new file mode 100644 index 0000000..abe7853 Binary files /dev/null and b/public/projects/zancanGM.png differ diff --git a/styles/globals.css b/styles/globals.css index d24ecd7..5f444cd 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -152,3 +152,17 @@ p { font-family: "basic-sans", sans-serif; font-size: 1.25rem; /* 20px */ } + +@media (max-width: 768px) { + h1 { + font-size: 1.375rem; /* 22px */ + } + + h2 { + font-size: 1.25rem; /* 38px */ + } + + p { + font-size: 1rem; /* 16px */ + } +} diff --git a/tailwind.config.js b/tailwind.config.js index e664f35..505799b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,7 @@ export default { animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", + "fade-in": "fade-in 10s ease-out", }, borderRadius: { xs: "1px", @@ -88,6 +89,10 @@ export default { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, + "fade-in": { + "0%": { opacity: "0%" }, + "100%": { opacity: "100%" }, + }, }, screens: { sm: "500px",