diff --git a/package.json b/package.json index 33f8860d..38640c85 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "prettier": "^2.0.2", "prettier-plugin-import-sort": "^0.0.4", "prettier-plugin-packagejson": "^2.2.5", + "tailwind-merge": "^2.3.0", "tailwindcss": "^3.3.1", "typescript": "5.4" }, diff --git a/pages/intro.tsx b/pages/intro.tsx new file mode 100644 index 00000000..2b893982 --- /dev/null +++ b/pages/intro.tsx @@ -0,0 +1 @@ +export { IntroPage as default } from '../src/intro/IntroPage' diff --git a/src/TailwindPreflight.tsx b/src/TailwindPreflight.tsx new file mode 100644 index 00000000..1639ab41 --- /dev/null +++ b/src/TailwindPreflight.tsx @@ -0,0 +1,350 @@ +// Lightly adapted from node_modules/tailwindcss/lib/css/preflight.css +// for importing into pages one-by-one +// +// Key change: +// 6 instances: theme($1) -> $1 +// Resolving variable gray-400 to its hex + +export const TailwindPreflight = () => { + return ( + + ) +} diff --git a/src/faq/AddYourQuestion.tsx b/src/faq/AddYourQuestion.tsx index 96558851..b6aefa75 100644 --- a/src/faq/AddYourQuestion.tsx +++ b/src/faq/AddYourQuestion.tsx @@ -8,7 +8,7 @@ import { api } from '../api-helper' export const AddYourQuestion = () => { const [saved, setSaved] = useState(false) return ( -
+
{

Frequently Asked Questions

-
+ + + +
{ @@ -83,7 +86,6 @@ export const FAQPage = (): JSX.Element => { )}
))} -
diff --git a/src/intro/IntroPage.tsx b/src/intro/IntroPage.tsx new file mode 100644 index 00000000..b5e2e7b2 --- /dev/null +++ b/src/intro/IntroPage.tsx @@ -0,0 +1,26 @@ +import { TailwindPreflight } from 'src/TailwindPreflight' + +import { Links } from './Links' +import { OneTwoThreeGraphic } from './OneTwoThreeGraphic' + +export const IntroPage = () => { + return ( +
+
+ {/* Header */} +
+

SIV

+

Secure Internet Voting

+
+ + + +
+ + {/* Footer */} +
© 2024 SIV, Inc.
+ + +
+ ) +} diff --git a/src/intro/Links.tsx b/src/intro/Links.tsx new file mode 100644 index 00000000..e17da1cd --- /dev/null +++ b/src/intro/Links.tsx @@ -0,0 +1,67 @@ +import { useState } from 'react' +import { twMerge } from 'tailwind-merge' + +type Text = string +type Href = string +type CustomClasses = string +const linkArray: [Text, Href?, CustomClasses?][] = [ + ['Demo — How SIV Works', undefined, 'border-green-800 bg-green-200'], + ['Bring to my area', '/#let-your-govt-know', 'border-orange-800 bg-orange-200'], + ['Create Own SIV Election', '/login', 'border-blue-800 bg-blue-200'], + ['Questions? FAQ', '/faq', 'border-gray-400 bg-gray-200'], + [ + 'Earn up to $10,000 for finding Security Flaws', + undefined, + 'border-purple-800 text-purple-700 bg-purple-100 bg-opacity-0', + ], + [ + 'Compare vs Paper', + 'https://docs.siv.org/compare', + 'border-amber-800 bg-amber-800 bg-opacity-10 hover:bg-opacity-20 active:bg-opacity-30', + ], + ['Contribute', undefined, 'border-pink-800 bg-pink-200'], + ['Blog', 'https://blog.siv.org', 'border-gray-600 bg-gray-50 hover:bg-gray-100 active:bg-gray-200/80'], + ['Technical Documentation', 'https://docs.siv.org'], + ['CS Research Powering SIV', '/about'], + ['Spoiler-Free Voting Methods', 'https://docs.siv.org/benefits#6-spoiler-resistant-voting-methods'], + [ + 'Preventing Future Authoritarianism', + 'https://docs.siv.org/research-in-progress/ukraine#a-powerful-tool-against-future-authoritarianism', + ], + ['Use in War Zones', '/ukraine'], + ['Malware-Resistant Verification'], +] + +export const Links = () => { + return ( + <> + {linkArray.map(([text, href, customClasses = 'border-gray-300 hover:bg-gray-100 active:bg-gray-200/80']) => ( + + ))} + + ) +} + +const SingleLink = ({ customClasses, href, text }: { customClasses: CustomClasses; href?: Href; text: Text }) => { + const [showComingSoon, setShowComingSoon] = useState(false) + return ( + <> + { + if (href) return + setShowComingSoon(!showComingSoon) + }} + > + {text} + + {showComingSoon &&
Coming Soon
} + + ) +} diff --git a/src/intro/OneTwoThreeGraphic.tsx b/src/intro/OneTwoThreeGraphic.tsx new file mode 100644 index 00000000..92fdd950 --- /dev/null +++ b/src/intro/OneTwoThreeGraphic.tsx @@ -0,0 +1,18 @@ +export const OneTwoThreeGraphic = () => { + return ( + <> +
    + {['One Person, One Vote', 'Vote in Seconds', 'Cryptographic Privacy'].map((text, index) => ( +
  1. +
    {index + 1}
    + {text} +
    2. + ))} +
+
+
✅
+
Voter Verifiable Results
+
+ + ) +} diff --git a/src/tailwind.css b/src/tailwind.css index bd6213e1..e8f8d363 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -1,3 +1,5 @@ -@tailwind base; +/* Turned off for opt-in instead */ +/* @tailwind base; */ + @tailwind components; @tailwind utilities; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 706ada65..8e972362 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.tsx'], - corePlugins: { - preflight: false, - }, plugins: [], - theme: { - extend: {}, - }, + theme: { extend: {} }, }