diff --git a/components/CollapsibleSearch.tsx b/components/CollapsibleSearch.tsx index 7359afb..746286b 100644 --- a/components/CollapsibleSearch.tsx +++ b/components/CollapsibleSearch.tsx @@ -27,7 +27,7 @@ const CollapsibleSearch = () => { if (searchValue.trim()) { Router.push(String("/search?query=" + searchValue)); } - router.refresh(); + //router.refresh(); } return ( diff --git a/components/UploadImageModal.tsx b/components/UploadImageModal.tsx new file mode 100644 index 0000000..97a4a7b --- /dev/null +++ b/components/UploadImageModal.tsx @@ -0,0 +1,12 @@ +import { useState } from "react"; +import styles from "./../styles/UploadImageModal.module.css" +export default function UploadImageModal(){ + return( +
+
+

Upload a photo

+ +
+
+ ); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 150bf59..dc30fa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "name": "stuyspecrewrite", "dependencies": { "@typescript-eslint/eslint-plugin": "^6.7.5", + "formik": "^2.4.6", "mongodb": "^6.1.0", "next": "^13.5.8", "next-themes": "^0.2.1", @@ -16,7 +17,8 @@ "react-icons": "^4.11.0", "react-mailchimp-subscribe": "^2.1.3", "react-top-loading-bar": "^2.3.1", - "sharp": "^0.32.6" + "sharp": "^0.32.6", + "yup": "^1.6.1" }, "devDependencies": { "@types/node": "^20.8.6", @@ -382,6 +384,16 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz", + "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==", + "license": "MIT", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -405,14 +417,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "dev": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.28", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.28.tgz", "integrity": "sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -422,8 +432,7 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/semver": { "version": "7.5.6", @@ -1093,8 +1102,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -1153,6 +1161,15 @@ "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==" }, + "node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-data-property": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz", @@ -2022,6 +2039,31 @@ "node": ">=12.20.0" } }, + "node_modules/formik": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz", + "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "license": "Apache-2.0", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.1", + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/fs-constants": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", @@ -2321,6 +2363,15 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -2874,6 +2925,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3502,6 +3565,12 @@ "react-is": "^16.13.1" } }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==", + "license": "MIT" + }, "node_modules/pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -3590,6 +3659,12 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==", + "license": "MIT" + }, "node_modules/react-icons": { "version": "4.12.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", @@ -4198,6 +4273,18 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==", + "license": "MIT" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", + "license": "MIT" + }, "node_modules/to-querystring": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/to-querystring/-/to-querystring-1.2.0.tgz", @@ -4214,6 +4301,12 @@ "node": ">=8.0" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==", + "license": "MIT" + }, "node_modules/tr46": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz", @@ -4547,6 +4640,30 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz", + "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==", + "license": "MIT", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "license": "(MIT OR CC0-1.0)", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } } } diff --git a/package.json b/package.json index cc1e7ee..dacf03f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@typescript-eslint/eslint-plugin": "^6.7.5", + "formik": "^2.4.6", "mongodb": "^6.1.0", "next": "^13.5.8", "next-themes": "^0.2.1", @@ -18,7 +19,8 @@ "react-icons": "^4.11.0", "react-mailchimp-subscribe": "^2.1.3", "react-top-loading-bar": "^2.3.1", - "sharp": "^0.32.6" + "sharp": "^0.32.6", + "yup": "^1.6.1" }, "devDependencies": { "@types/node": "^20.8.6", diff --git a/pages/about/advertise/PurchaseForm.jsx b/pages/about/advertise/PurchaseForm.jsx new file mode 100644 index 0000000..1bb8ac2 --- /dev/null +++ b/pages/about/advertise/PurchaseForm.jsx @@ -0,0 +1,42 @@ +import { Formik, useFormik } from "formik"; +import * as Yup from "yup"; +import GetPurchaseOptions from "./purchaseOptions"; + +/* +! THIS IS A JAVASCRIPT FILE +! I LITERALLY CANNOT WORK WITH +!TYPESCRIPT RIGHT NOW +! 🤬🤬🤬 +*/ +function PurchaseForm() { + const purchaseOptions = GetPurchaseOptions(); + const maxPurchaseOptions = purchaseOptions.purchaseOptions.length; + const formik = useFormik({ + initalValues: { + type: "", + item: "", + issues: "", + }, + validationSchema: Yup.object({ + type: Yup.required("Required").mixed().oneOf(["print", "web", "both"]), + item: Yup.required("Required").number().min(0).max(maxPurchaseOptions), + issues: Yup.required("Required").number().max(16).min(1), + }), + onSubmit: (values) => { + alert("Submitted"); + }, + }); + return( + { + + }} + + ); +} +export default PurchaseForm(); diff --git a/pages/about/advertise/advertisementcheckout.tsx b/pages/about/advertise/advertisementcheckout.tsx new file mode 100644 index 0000000..780faa0 --- /dev/null +++ b/pages/about/advertise/advertisementcheckout.tsx @@ -0,0 +1,155 @@ +import { useEffect, useState } from "react"; +import styles from "./../../../styles/AdvertisementCheckout.module.css"; +import GetPurchaseOptions from "./purchaseOptions"; +export default function AdvertisementCheckout() { + const [tab, setTab] = useState(0); + const SUBTEXT = "per issue"; + const purchaseOptions = GetPurchaseOptions(); + return ( +
+
+
+

Finalize Your Order

+
+ {/*
+ + +
*/} +
+
+ ); +} + +//TO BE MODULARIZED +interface OptionGridProps { + options: Card[]; + next: boolean; + back: boolean; + tab: number; + setTab: React.Dispatch>; +} +interface Card { + title: string; + description?: string; + cost?: number; + costSubText?: string; +} +function OptionGridRadio(props: OptionGridProps) { + const [chosenOption, setChosenOption] = useState(-1); + return ( +
+
+ {props.options.map((item, number) => { + let borderColor = ""; + if (number == chosenOption) { + borderColor = "var(--primary)"; + } + return ( +
setChosenOption(number)} + style={{ borderColor: borderColor }} + > + {chosenOption == number ? ( + + ) : ( + + )} +

{item.title}

+

{item.description}

+ + {item.cost ? ( +
+

${item.cost}

+ {item.costSubText ? ( +

{item.costSubText}

+ ) : null} +
+ ) : null} +
+ ); + })} +
+
+ {props.back ? ( + + ) : null} + {props.next ? ( + chosenOption >= 0 ? ( + + ) : ( + + ) + ) : null} +
+
+ ); +} +function RadioButton({ checked }: { checked: boolean }) { + return ( +
+ {!checked ? ( + + + + ) : ( + + + + )} +
+ ); +} diff --git a/pages/about/advertise/newadvertise.tsx b/pages/about/advertise/newadvertise.tsx new file mode 100644 index 0000000..708f796 --- /dev/null +++ b/pages/about/advertise/newadvertise.tsx @@ -0,0 +1,353 @@ +import Head from "next/head"; +import styles from "./../../../styles/NewAdvertise.module.css"; +import { generateMetaTags } from "../../../utils/generateMetaTags"; +import Banner from "../../../components/Banner"; +import { useEffect, useState } from "react"; +import UploadImageModal from "../../../components/UploadImageModal"; +import Link from "next/link"; +import GetPurchaseOptions from "./purchaseOptions"; + +interface ChangingText { + text: string; + color: string; +} +function NewAdvertise() { + const page_title = "Advertise - The Stuyvesant Spectator"; + const meta_url = `https://stuyspec.com/about/advertise`; + const meta_description = `How to advertise in The Stuyvesant Spectator.`; + + const [changingTextNumber, setChangingTextNumber] = useState(0); + const [animationKey, setAnimationKey] = useState(0); + const changingTextOptions: ChangingText[] = [ + { + text: "Student Jounalism", + color: "var(--ae-color)", + }, + { + text: "Student Artists", + color: "var(--EIC-color)", + }, + { + text: "Future Scientists", + color: "var(--science-color)", + }, + { + text: "Student Photographers", + color: "var(--photos-color)", + }, + { + text: "Future Thinkers", + color: "var(--sports-color)", + }, + ]; + useEffect(() => { + const timer = setTimeout(() => { + if (changingTextNumber >= changingTextOptions.length - 1) { + setChangingTextNumber(0); + } else { + setChangingTextNumber(changingTextNumber + 1); + } + setAnimationKey(animationKey + 1); + console.log(changingTextNumber); + }, 5000); + return () => clearTimeout(timer); + }, [changingTextNumber]); + + const [printOption, setPrintOption] = useState(true); + const [advertisementChoice, setAdvertisementChoice] = useState(-1); + const purchaseOptions = GetPurchaseOptions(); + const [isUploadImageModalOpen, setIsUploadImageModalOpen] = + useState(false); + + const getWindowDimensions = () => { + if (typeof window === "undefined") { + return { width: 0, height: 0 }; + } + const { innerWidth: width, innerHeight: height } = window; + return { + width, + height, + }; + }; + const [windowWidth, setWindowWidth] = useState(0); + useEffect(() => { + setWindowWidth(getWindowDimensions().width); + const handleResize = () => { + setWindowWidth(getWindowDimensions().width); + }; + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ( +
+ {generateMetaTags(page_title, meta_description, meta_url)} + {windowWidth <= 1000 ? ( + + ) : null} +
+
+
+
+

+ Advertise on the{" "} + + Stuyvesant Specator + +

+

+ And Support{" "} + + {changingTextOptions[changingTextNumber].text} + +

+
+
+
+
+
+

See Your Ad:

+
+
+
+
+ {printOption ? ( + + ) : ( + + )} + + {printOption ? ( +
+ +
+ ) : null} +
+
+ {!printOption ? ( + + ) : ( + + )} + + {!printOption ? ( +
+ +
+ ) : null} +
+
+
+ +
+
+
+ {purchaseOptions[advertisementChoice] ? ( +
+
+

{purchaseOptions[advertisementChoice].title}

+ {purchaseOptions[advertisementChoice].width && + purchaseOptions[advertisementChoice].height && + purchaseOptions[advertisementChoice].unit ? ( +

+ Dimensions:{" "} + {purchaseOptions[advertisementChoice].width + + purchaseOptions[advertisementChoice].unit}{" "} + x{" "} + {purchaseOptions[advertisementChoice].height + + purchaseOptions[advertisementChoice].unit} +

+ ) : null} +

{purchaseOptions[advertisementChoice].description}

+
+
+ {purchaseOptions[advertisementChoice].width && + purchaseOptions[advertisementChoice].height ? ( +
+ {" "} +
+ ) : null} +
+ {/*
+ {advertisementChoice >= 0 ? ( +
+ {purchaseOptions[advertisementChoice].cost.map( + (items, _) => { + if (items.sizeUpperBound == undefined) { + return ( + + ); + } else { + return ( + + ); + } + } + )} +
+ ) : ( +

NO OPTION SELECTED YET

+ )} +
*/} +
+ ) : null} +
+
+
+
+

Ready to build your advertisement campaign?

+ + + +
+
+
+ ); +} +interface LoadChoicesProps { + advertisementChoice: number; + setAdvertisementChoice: React.Dispatch>; + printOption: boolean; +} +function LoadChoices({ + advertisementChoice, + setAdvertisementChoice, + printOption, +}: LoadChoicesProps) { + return ( + <> + {printOption ? ( +
+ + + + +
+ ) : ( +
+ + +
+ )} + + ); +} +export default NewAdvertise; diff --git a/pages/about/advertise/purchaseOptions.ts b/pages/about/advertise/purchaseOptions.ts new file mode 100644 index 0000000..b67724d --- /dev/null +++ b/pages/about/advertise/purchaseOptions.ts @@ -0,0 +1,104 @@ +interface AdvertisementOptions { + print: boolean; + title: string; + description?: string; + unit?: string; + width?: number; + height?: number; + cost: CostOptions[]; +} +interface CostOptions { + sizeLowerBound: number; + sizeUpperBound?: number; + cost: number; +} +const purchaseOptions: AdvertisementOptions[] = [ + { + print: true, + title: "Full Page", + description: undefined, + unit: "in", + width: 15.5, + height: 9.5, + cost: [ + { sizeLowerBound: 1, sizeUpperBound: undefined, cost: 500 }, + { sizeLowerBound: 2, sizeUpperBound: 6, cost: 450 }, + { sizeLowerBound: 7, sizeUpperBound: 15, cost: 400 }, + { sizeLowerBound: 16, sizeUpperBound: undefined, cost: 240 }, + ], + }, + { + print: true, + title: "Half Page", + description: undefined, + unit: "in", + width: 7.5, + height: 9.5, + cost: [ + { sizeLowerBound: 1, sizeUpperBound: undefined, cost: 350 }, + { sizeLowerBound: 2, sizeUpperBound: 6, cost: 300 }, + { sizeLowerBound: 7, sizeUpperBound: 15, cost: 250 }, + { sizeLowerBound: 16, sizeUpperBound: undefined, cost: 130 }, + ], + }, + { + print: true, + title: "Quarter Page", + description: undefined, + unit: "in", + width: 7.5, + height: 5, + cost: [ + { sizeLowerBound: 1, sizeUpperBound: undefined, cost: 200 }, + { sizeLowerBound: 2, sizeUpperBound: 6, cost: 160 }, + { sizeLowerBound: 7, sizeUpperBound: 15, cost: 120 }, + { sizeLowerBound: 16, sizeUpperBound: undefined, cost: 70 }, + ], + }, + { + print: true, + title: "Eighth Page", + description: undefined, + unit: "in", + width: 4, + height: 5, + cost: [ + { sizeLowerBound: 1, sizeUpperBound: undefined, cost: 120 }, + { sizeLowerBound: 2, sizeUpperBound: 6, cost: 85 }, + { sizeLowerBound: 7, sizeUpperBound: 15, cost: 60 }, + { sizeLowerBound: 16, sizeUpperBound: undefined, cost: 40 }, + ], + }, + { + print: false, + title: "Box", + description: undefined, + unit: "px", + width: 375, + height: 500, + cost: [ + { sizeLowerBound: 2, sizeUpperBound: undefined, cost: 150 }, + { sizeLowerBound: 4, sizeUpperBound: 8, cost: 135 }, + { sizeLowerBound: 9, sizeUpperBound: 15, cost: 120 }, + { sizeLowerBound: 16, sizeUpperBound: undefined, cost: 90 }, + ], + }, + { + print: false, + title: "Banner", + description: undefined, + unit: "px", + width: 900, + height: 200, + cost: [ + { sizeLowerBound: 2, sizeUpperBound: undefined, cost: 125 }, + { sizeLowerBound: 4, sizeUpperBound: 8, cost: 115 }, + { sizeLowerBound: 9, sizeUpperBound: 15, cost: 100 }, + { sizeLowerBound: 16, sizeUpperBound: undefined, cost: 75 }, + ], + }, +]; +const GetPurchaseOptions = ():AdvertisementOptions[] => { + return purchaseOptions; +} +export default GetPurchaseOptions; \ No newline at end of file diff --git a/styles/AdvertisementCheckout.module.css b/styles/AdvertisementCheckout.module.css new file mode 100644 index 0000000..f90478d --- /dev/null +++ b/styles/AdvertisementCheckout.module.css @@ -0,0 +1,111 @@ +.mainArea{ + font-family: "Playfair Display"; + padding: 2rem; +} +.mainArea main { + display: flex; + flex-direction: column; + gap: 1rem; +} +.mainText{ + color: var(--primary); + text-align: center; + padding: 2rem; + height: 15vh; + border-radius: 1rem; + background-color: var(--light-grey); + display: flex; + flex-direction: row; + justify-content: left; + align-items: center; +} +/*GOING TO BE MODULARIZED*/ +.optionGridContainer{ + display: flex; + flex-direction: column; + gap: 1rem; +} +.optionGrid{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + min-height: fit-content; +} +#option{ + display: flex; + flex-direction: column; + width: 100%; + position: relative; + padding: 2rem; + min-height: 35vh; + justify-content: center; + align-items: center; + background-color: var(--light-grey); + border-radius: 1rem; + border: 0.1rem solid var(--light-grey); + transition: ease-in-out 200ms; +} +@media screen and (max-width: 1000px){ + .optionGrid{ + grid-template-columns: repeat(2, 1fr); + } + #option{ + min-height: 25vh; + } +} +@media screen and (max-width: 750px) { + .optionGrid{ + grid-template-columns: repeat(1, 1fr); + } +} +#option:hover{ + border-color: var(--primary); + cursor: pointer; +} +#BUTTON{ + position: absolute; + top: 0; + right: 0; + padding: 1rem; +} +#BUTTON svg{ + height: 1.5rem; + aspect-ratio: 1/1; +} +#nextButtonContainer{ + display: flex; + justify-content: center; + gap: 1rem; + +} +:where(#NEXTBUTTON, #BACKBUTTON, #NEXTBUTTONDISABLED){ + font-family: "Playfair Display"; + font-size: 1.25rem; + border-radius: 500rem; + text-align: center; + padding: 1rem 5rem 1rem 5rem; + width: 25%; +} +@media screen and (max-width: 750px){ + #nextButtonContainer{ + flex-direction: column; + } + :where(#NEXTBUTTON, #BACKBUTTON){ + width: 100%; + } +} +:where(#NEXTBUTTON:hover, #BACKBUTTON:hover){ + filter: brightness(85%); + cursor: pointer; +} +:where(#NEXTBUTTON, #NEXTBUTTONDISABLED){ + color: var(--light-grey); + background-color: var(--primary); +} +#NEXTBUTTONDISABLED{ + filter: brightness(50%); +} +#BACKBUTTON{ + color: var(--primary); + background-color: var(--light-grey); +} diff --git a/styles/NewAdvertise.module.css b/styles/NewAdvertise.module.css new file mode 100644 index 0000000..5a5f6a5 --- /dev/null +++ b/styles/NewAdvertise.module.css @@ -0,0 +1,255 @@ +.mainBody{ + font-family: "Playfair Display"; +} +.mainBody button{ + font-family: "Lato"; +} +.heroContainer { + height: 100vh; + width: 100%; + padding: 2rem; +} +.hero { + border-radius: 1rem; + background-color: var(--light-grey); + height: 100%; + padding: 2rem; + display: flex; + align-items: center; + justify-content: left; + position: relative; +} +.heroText { + z-index: 2; + color: var(--primary); + font-weight: bold; + + max-width: 90%; + + display: flex; + flex-direction: column; + gap: 2rem; + + letter-spacing: 0.25ch; + line-height: 10ch; +} +.heroText > h1 { + font-size: clamp(2rem, 1.7802rem + 3.5165vw, 6rem); +} +#NAME { + font-style: oblique; +} +/*CHANGING TEXT*/ +.heroText > p { + display: flex; + gap: 0.5ch; + font-size: clamp(2rem, 1.8901rem + 1.7582vw, 4rem); +} +#changingTextOptions { + display: block; + overflow-y: hidden; + animation: cubic-bezier(0.075, 0.82, 0.165, 1) fadeIn 5000ms infinite + alternate; +} +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(-75%); + } + 75% { + opacity: 1; + transform: translateY(0%); + } + 100% { + opacity: 0; + transform: translateY(-75%); + } +} +.heroSide { + position: absolute; + height: 75%; + aspect-ratio: 1/1; + border-radius: 100000rem; + right: 2.5%; + z-index: 1; + filter: brightness(70%); + transition: 500ms ease-in-out; +} +@media screen and (max-width: 1250px){ + .heroText{ + width: 100%; + text-align: center; + } + .heroText > p{ + display: inline-block; + } + .hero{ + flex-direction: column; + align-items: center; + justify-content: center; + } + .heroSide{ + width: 0; + height: 0; + } +} +.advertisementLocations{ + padding: 2rem; + border-radius: 1rem; +} +.advertisementLocations h1 { + text-align: center; + font-size: clamp(1rem, 0.8352rem + 2.6374vw, 4rem); +} +.advertisementContainer{ + width: 100%; + aspect-ratio: 2 / 1; + background-color: var(--light-grey); + padding: 2rem; + border-radius: 1rem; + display: grid; + grid-template-columns: 3fr 7fr; +} +.advertisementContainer button { + padding: 0.5rem 1rem 0.5rem 1rem; + color: var(--secondary); + background-color: var(--primary); + border-radius: 5rem; + cursor: pointer; + transition: ease-in-out 200ms; +} +.advertisementContainer button:hover { + background-color: var(--secondary); + color: var(--primary); +} +.advertisementButtonContainer { + padding: 2rem; + position: relative; +} + +#ADDYOURMEDIA{ + position: absolute; + bottom: 1rem; +} +#ADDYOURMEDIA button{ + color: var(--secondary); + display: flex; + gap: 1rem; + font-size: 1.5rem; + align-items: center; +} +#ADDYOURMEDIA button:hover::after{ + content: "Add your media"; + color: var(--primary); +} +#ADDYOURMEDIA button svg { + height: 1.5rem; + aspect-ratio: 1/1; +} +#ADDYOURMEDIA button:hover svg{ + color: var(--primary); +} + +.advertisementMainButtonContainer { + display: flex; + flex-direction: column; + width: fit-content; + gap: 1rem; + margin-left: 0; +} +.advertisementChoicesContainer { + padding: 1rem; +} +.advertisementChoices{ + display: flex; + flex-direction: column; + width: fit-content; + gap: 1rem; +} +.advertisementDisplayContainer{ + background-color: var(--secondary); + border-radius: 1rem; + position: relative; +} +.advertisementCostOptionsContainer{ + position: absolute; + padding: 1rem; + display: flex; + width: 100%; + justify-content: center; + z-index: 2; + bottom: 0; + + background-color: var(--secondary); + filter: brightness(90%); + opacity: 0.9; +} +.advertisementCostOptions{ + display: flex; + gap: 1rem; +} +.advertisementDisplay{ + width: 100%; + height: 100%; + overflow: scroll; +} +.advertisementDisplayText{ + padding: 1rem; + color: var(--primary); + text-align: center; + position: absolute; + width: 100%; + z-index: 2; + background-color: var(--secondary); + filter: brightness(90%); + opacity: 0.75; +} +.advertisementPictureContainer{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 2rem; +} +.advertisementPicture{ + background-color: var(--primary); + z-index: 1; +} +@media screen and (max-width: 1000px) { + .advertisementLocations{ + width: 0px; + height: 0px; + visibility: hidden; + } +} + +.costCalculator{ + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 3rem; + background-color: var(--light-grey); + margin: 1rem 2rem 2rem 2rem; + border-radius: 1rem; +} +.costCalculator h1{ + font-size: clamp(2.5rem, 2.4176rem + 1.3187vw, 4rem); + text-align: center; +} +.costCalculator button{ + font-size: clamp(1.5rem, 1.4725rem + 0.4396vw, 2rem); + padding: 1rem 2rem 1rem 2rem; + border-radius: 50rem; + color: var(--secondary); + cursor: pointer; + background-color: var(--ae-color); + transition: ease-in-out 350ms; +} +.costCalculator button:hover{ + filter: brightness(85%); + background-color: var(--light-grey); + color: var(--primary); +} \ No newline at end of file diff --git a/styles/UploadImageModal.module.css b/styles/UploadImageModal.module.css new file mode 100644 index 0000000..737a8c4 --- /dev/null +++ b/styles/UploadImageModal.module.css @@ -0,0 +1,30 @@ +.modalArea{ + position: fixed; + top: 0; + left: 0; + z-index: 999999; + + height: 100vh; + width: 100vw; + background-color: rgba(0, 0, 0, 0.345); + + display: flex; + justify-content: center; + align-items: center; + + font-family: 'Lato'; +} + +.modal{ + height: 50%; + aspect-ratio: 2 / 1; + background-color: var(--secondary); + color: var(--primary); + border-radius: 1rem; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 1rem; +} \ No newline at end of file