diff --git a/package-lock.json b/package-lock.json index ec4145d0..16cf2c21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "frequency-xyz", "version": "0.0.1", "dependencies": { - "@frequency-chain/style-guide": "^0.1.5" + "@frequency-chain/style-guide": "^0.1.9" }, "devDependencies": { "@playwright/test": "^1.48.2", @@ -629,12 +629,35 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@frequency-chain/style-guide": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/@frequency-chain/style-guide/-/style-guide-0.1.5.tgz", - "integrity": "sha512-soGA7hZzND5qm44ei542b4EZQZ/XFEUHP/BQdv7AmdMMPDVwOaK4S3kWaDU0q8qhhx94EUjAdqNOjSS4gU9/UA==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@frequency-chain/style-guide/-/style-guide-0.1.9.tgz", + "integrity": "sha512-wBrOVkXzcwaM5pTrZzyM+YTfpFoD3MKqTA56awWwe/ymXjYqxYOqITSqv5D8yH+8KAT9ovLcWVvJd5x1kw2NuQ==", "dependencies": { "@storybook/addons": "^7.6.17", + "bits-ui": "^0.21.16", "clsx": "^2.1.1", "svelte": "^4.2.19", "tailwind-merge": "^2.5.2" @@ -712,6 +735,14 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@internationalized/date": { + "version": "3.5.6", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz", + "integrity": "sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1291,6 +1322,14 @@ "vite": "^5.0.0" } }, + "node_modules/@swc/helpers": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", + "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1754,7 +1793,6 @@ "version": "1.4.13", "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz", "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==", - "dev": true, "peerDependencies": { "acorn": ">=8.9.0" } @@ -1931,6 +1969,55 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bits-ui": { + "version": "0.21.16", + "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.16.tgz", + "integrity": "sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==", + "dependencies": { + "@internationalized/date": "^3.5.1", + "@melt-ui/svelte": "0.76.2", + "nanoid": "^5.0.5" + }, + "funding": { + "url": "https://github.com/sponsors/huntabyte" + }, + "peerDependencies": { + "svelte": "^4.0.0 || ^5.0.0-next.118" + } + }, + "node_modules/bits-ui/node_modules/@melt-ui/svelte": { + "version": "0.76.2", + "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.2.tgz", + "integrity": "sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==", + "dependencies": { + "@floating-ui/core": "^1.3.1", + "@floating-ui/dom": "^1.4.5", + "@internationalized/date": "^3.5.0", + "dequal": "^2.0.3", + "focus-trap": "^7.5.2", + "nanoid": "^5.0.4" + }, + "peerDependencies": { + "svelte": ">=3 <5" + } + }, + "node_modules/bits-ui/node_modules/nanoid": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.8.tgz", + "integrity": "sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.js" + }, + "engines": { + "node": "^18 || >=20" + } + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -2634,8 +2721,7 @@ "node_modules/esm-env": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz", - "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==", - "dev": true + "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==" }, "node_modules/espree": { "version": "10.2.0", @@ -2682,7 +2768,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz", "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==", - "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15", "@types/estree": "^1.0.1" @@ -2849,6 +2934,14 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/focus-trap": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz", + "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==", + "dependencies": { + "tabbable": "^6.2.0" + } + }, "node_modules/foreground-child": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", @@ -4732,7 +4825,6 @@ "version": "5.1.3", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.3.tgz", "integrity": "sha512-Sl8UFHlBvF54aK8MElFvyvaUfPE2REOz6LnhR2pBClCL11MU4qpn4V+KgAggaXxDyrP2iQixvHbtpHqL/zXlSQ==", - "dev": true, "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", @@ -4874,6 +4966,11 @@ "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz", "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==" }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tailwind-merge": { "version": "2.5.4", "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz", @@ -5208,8 +5305,7 @@ "node_modules/tslib": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz", - "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==", - "dev": true + "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==" }, "node_modules/type-check": { "version": "0.4.0", @@ -5742,8 +5838,7 @@ "node_modules/zimmerframe": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", - "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==", - "dev": true + "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==" } } } diff --git a/package.json b/package.json index 9d6848ab..74e6c8fc 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,6 @@ }, "type": "module", "dependencies": { - "@frequency-chain/style-guide": "^0.1.5" + "@frequency-chain/style-guide": "^0.1.9" } } diff --git a/src/components/FounderProfile.svelte b/src/components/FounderProfile.svelte index 20774c1d..7ccc0522 100644 --- a/src/components/FounderProfile.svelte +++ b/src/components/FounderProfile.svelte @@ -5,7 +5,7 @@ export let linkedinUrl: string; -
+
headshot diff --git a/src/components/IconBtn.svelte b/src/components/IconBtn.svelte index 5a5f3379..dabcb84c 100644 --- a/src/components/IconBtn.svelte +++ b/src/components/IconBtn.svelte @@ -6,7 +6,7 @@ diff --git a/src/components/JoinSocials.svelte b/src/components/JoinSocials.svelte index f9eb033b..400703bc 100644 --- a/src/components/JoinSocials.svelte +++ b/src/components/JoinSocials.svelte @@ -5,7 +5,7 @@
-

Join the Digital Revolution

+

Join the Digital Revolution

Become a part of shaping the future of the digital landscape with Frequency.

diff --git a/src/components/OpenCloseIcon.svelte b/src/components/OpenCloseIcon.svelte index 5eb01372..193b8fcd 100644 --- a/src/components/OpenCloseIcon.svelte +++ b/src/components/OpenCloseIcon.svelte @@ -16,14 +16,14 @@ y1="50%" x2="100%" y2="50%" - class={`origin-left translate-y-[20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45 stroke-cream' : 'rotate-0 stroke-indigo'}`} + class={`origin-left translate-y-[20%] stroke-[10%] transition-all duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45 stroke-cream' : 'stroke-indigo rotate-0'}`} /> diff --git a/src/components/SectionNumber.svelte b/src/components/SectionNumber.svelte index 8bf3fd2a..227a1eb9 100644 --- a/src/components/SectionNumber.svelte +++ b/src/components/SectionNumber.svelte @@ -4,7 +4,7 @@
diff --git a/src/components/Sections/Section2.svelte b/src/components/Sections/Section2.svelte index c181adea..f63b3889 100644 --- a/src/components/Sections/Section2.svelte +++ b/src/components/Sections/Section2.svelte @@ -15,7 +15,7 @@
.02 diff --git a/src/components/Sections/Section3.svelte b/src/components/Sections/Section3.svelte index 82df4b97..e03cf2ac 100644 --- a/src/components/Sections/Section3.svelte +++ b/src/components/Sections/Section3.svelte @@ -9,7 +9,7 @@
@@ -40,5 +40,5 @@ - .03 + .03 diff --git a/src/components/Sections/Section4.svelte b/src/components/Sections/Section4.svelte index 5ed3156e..3f12c72a 100644 --- a/src/components/Sections/Section4.svelte +++ b/src/components/Sections/Section4.svelte @@ -25,8 +25,9 @@
- .04.04
diff --git a/src/components/Sections/Section5.svelte b/src/components/Sections/Section5.svelte index fa0db27b..3936fa32 100644 --- a/src/components/Sections/Section5.svelte +++ b/src/components/Sections/Section5.svelte @@ -9,7 +9,7 @@
@@ -25,23 +25,23 @@

The Core of Our Technology

 - + The creators of Frequency are at the forefront of innovation. They've created the Decentralized Social Networking Protocol (DSNP), an open-source solution that establishes a shared social graph independent of specific applications or centralized platforms. - .05
- .05 + .05 diff --git a/src/components/Sections/Section5Wave.svelte b/src/components/Sections/Section5Wave.svelte index 648d5fd6..19515d1c 100644 --- a/src/components/Sections/Section5Wave.svelte +++ b/src/components/Sections/Section5Wave.svelte @@ -4,7 +4,7 @@ @keyframes wave { 0%, 100% { - margin-left: 20; + margin-left: 20px; } 50% { margin-left: -20px; diff --git a/src/lib/assets/section5waves.svg b/src/lib/assets/section5waves.svg index db4068e3..8b0343e6 100644 --- a/src/lib/assets/section5waves.svg +++ b/src/lib/assets/section5waves.svg @@ -10,7 +10,7 @@ } .cls-2 { - fill: #fefaf3; + fill: #fff; stroke-width: 0px; } diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte index 4316c9c5..f96f4be6 100644 --- a/src/routes/(home)/+page.svelte +++ b/src/routes/(home)/+page.svelte @@ -12,14 +12,14 @@ $: section = 1; - const indigo = '#5E69FF'; + const brightBlue = '#5E69FF'; const cream = '#FEFAF3'; const logoMap = new Map([ - [1, { logo: indigo, nav: 'navy' }], + [1, { logo: brightBlue, nav: 'navy' }], [2, { logo: cream, nav: 'cream' }], - [3, { logo: indigo, nav: 'cream' }], - [4, { logo: indigo, nav: 'navy' }], + [3, { logo: brightBlue, nav: 'cream' }], + [4, { logo: brightBlue, nav: 'navy' }], [5, { logo: cream, nav: 'cream' }], ]); diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 694f0585..9442fed2 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -1,5 +1,6 @@ import '../style/app.css'; - +import * as styles from '@frequency-chain/style-guide'; +console.log(styles); // since there's no server side data here, we can prerender export const prerender = true; export const ssr = false; diff --git a/src/style/app.css b/src/style/app.css index 3d9599e2..24567f29 100644 --- a/src/style/app.css +++ b/src/style/app.css @@ -50,25 +50,6 @@ @apply w-full; } - /* Underline on hover animation */ - .underline-on-hover { - @apply relative block cursor-pointer overflow-hidden px-0 py-1; - } - - .underline-on-hover::after { - @apply absolute bottom-0 left-0 h-[0.1em] w-full opacity-0 transition-opacity content-['']; - transition: - opacity 300ms, - transform 300ms; - transform: translate3d(-100%, 0, 0); - } - - .underline-on-hover:hover::after, - .underline-on-hover:focus::after { - @apply opacity-100; - transform: translate3d(0, 0, 0); - } - @keyframes slide-from-right { 0% { opacity: 0; @@ -89,7 +70,7 @@ @layer base { body { - @apply flex flex-col items-center bg-cream text-base text-black; + @apply flex flex-col items-center bg-white text-normal text-black; } button { diff --git a/tailwind.config.js b/tailwind.config.js index a6dbaa14..14b4b38d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,5 @@ /** @type {import('tailwindcss').Config} */ -import frequencyConfig from "@frequency-chain/style-guide/tailwind.config"; +import frequencyConfig from '@frequency-chain/style-guide/tailwind.config'; import { MAX_PAGE_WIDTH } from './src/lib/consts'; @@ -10,6 +10,10 @@ export default { title: ['Newake', 'sans-serif'], sans: ['Poppins', 'sans-serif'], }, + colors: { + darkIndigo: '#445BC3', + tealBright: '#00B6AF', + }, width: { page: `${MAX_PAGE_WIDTH}px`, full: '100%', @@ -34,5 +38,5 @@ export default { }, }, safelist: ['after:bg-navy', 'after:bg-cream', 'invalid:border-red'], - presets: [frequencyConfig] + presets: [frequencyConfig], };