diff --git a/package.json b/package.json index c357ef9c..f6ac4f1c 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "format": "prettier --plugin-search-dir . --write ." }, "devDependencies": { + "@babeard/svelte-heroicons": "2.0.0-rc.0", "@rgossiaux/svelte-headlessui": "^1.0.2", - "@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/adapter-static": "^2.0.2", "@sveltejs/kit": "^1.15.9", "@types/node": "^18.16.3", @@ -32,6 +32,7 @@ "svelte": "^3.58.0", "svelte-check": "^3.2.0", "tailwindcss": "^3.3.2", + "tailwindcss-3d": "^0.2.2", "tslib": "^2.5.0", "typescript": "^5.0.4", "vite": "^4.3.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 438cde54..58ddf157 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,12 +1,12 @@ lockfileVersion: '6.0' devDependencies: + '@babeard/svelte-heroicons': + specifier: 2.0.0-rc.0 + version: 2.0.0-rc.0(svelte@3.58.0) '@rgossiaux/svelte-headlessui': specifier: ^1.0.2 version: 1.0.2(svelte@3.58.0) - '@rgossiaux/svelte-heroicons': - specifier: ^0.1.2 - version: 0.1.2(svelte@3.58.0) '@sveltejs/adapter-static': specifier: ^2.0.2 version: 2.0.2(@sveltejs/kit@1.15.9) @@ -55,6 +55,9 @@ devDependencies: tailwindcss: specifier: ^3.3.2 version: 3.3.2 + tailwindcss-3d: + specifier: ^0.2.2 + version: 0.2.2(tailwindcss@3.3.2) tslib: specifier: ^2.5.0 version: 2.5.0 @@ -72,6 +75,14 @@ packages: engines: {node: '>=10'} dev: true + /@babeard/svelte-heroicons@2.0.0-rc.0(svelte@3.58.0): + resolution: {integrity: sha512-zjoRKBHA2QLjj3bi9mJMtyUyb/Y+PGlxiMdVXO3Bv8If3RJBuxtvVAYD2/tUakhxocB272PxhGNz4sixmB0rpA==} + peerDependencies: + svelte: ^3.44.0 + dependencies: + svelte: 3.58.0 + dev: true + /@esbuild/android-arm64@0.17.18: resolution: {integrity: sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==} engines: {node: '>=12'} @@ -394,14 +405,6 @@ packages: svelte: 3.58.0 dev: true - /@rgossiaux/svelte-heroicons@0.1.2(svelte@3.58.0): - resolution: {integrity: sha512-c5Ep1QDvBo9HD/P0AxbXItDbn6x77fldCjjL0aBjNseUntV4fkdHkBde1IaLr8i0kmrhTSovjkIen8W83jUPzg==} - peerDependencies: - svelte: ^3.44.0 - dependencies: - svelte: 3.58.0 - dev: true - /@sveltejs/adapter-static@2.0.2(@sveltejs/kit@1.15.9): resolution: {integrity: sha512-9wYtf6s6ew7DHUHMrt55YpD1FgV7oWql2IGsW5BXquLxqcY9vjrqCFo0TzzDpo+ZPZkW/v77k0eOP6tsAb8HmQ==} peerDependencies: @@ -1347,6 +1350,10 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash@4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + dev: true + /lru-cache@6.0.0: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} @@ -1960,6 +1967,15 @@ packages: engines: {node: '>= 8'} dev: true + /tailwindcss-3d@0.2.2(tailwindcss@3.3.2): + resolution: {integrity: sha512-lGEFymZKmuCQb5y1sdi0I9nFA65cUS6fRHAfhzOsNm8xzhhEf4YS4HwYYTa0m6Wyv0YTklS5lY/ZrFfwLpbOHA==} + peerDependencies: + tailwindcss: '>=3.2.0' + dependencies: + lodash: 4.17.21 + tailwindcss: 3.3.2 + dev: true + /tailwindcss@3.3.2: resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==} engines: {node: '>=14.0.0'} diff --git a/src/app.html b/src/app.html index b6a047f7..db570fc6 100644 --- a/src/app.html +++ b/src/app.html @@ -4,10 +4,9 @@ - Loading... %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/lib/components/MagneticElement.svelte b/src/lib/components/MagneticElement.svelte new file mode 100644 index 00000000..cdf12feb --- /dev/null +++ b/src/lib/components/MagneticElement.svelte @@ -0,0 +1,105 @@ + + + +
+ +
diff --git a/src/lib/components/Mouse3DTilting.svelte b/src/lib/components/Mouse3DTilting.svelte new file mode 100644 index 00000000..efdd5867 --- /dev/null +++ b/src/lib/components/Mouse3DTilting.svelte @@ -0,0 +1,77 @@ + + + +
+ +
diff --git a/src/lib/components/Section.svelte b/src/lib/components/Section.svelte new file mode 100644 index 00000000..de155cae --- /dev/null +++ b/src/lib/components/Section.svelte @@ -0,0 +1,8 @@ +
+ {#if $$slots.title} +

+ +

+ {/if} + +
diff --git a/src/lib/components/SlideOver.svelte b/src/lib/components/SlideOver.svelte index 41d542f3..0633bb62 100644 --- a/src/lib/components/SlideOver.svelte +++ b/src/lib/components/SlideOver.svelte @@ -1,5 +1,5 @@ + Home | Renew + +
+
+ +
+
When your ideas
+
become reality.
+
+ From a fast and modern website to a cross-platform
mobile app, let's bring your project + to life. +
+
+ + +
+
+ + + +
+ +
+
+ +
+
+ +
+ +
+ + { + const element = e.detail.element; + element.style.transitionDuration = "500ms"; + setTimeout(() => { + element.style.removeProperty("transition-duration"); + }, 500); + element.parentElement.style.transform = "scale(1.2)"; + }} + on:out_zone={(e) => { + const element = e.detail.element; + element.style.transitionDuration = "500ms"; + element.parentElement.style.transform = "scale(1)"; + }} + > + scrollTo("" /* TODO: Add section selector */)} + /> + +
+ +
+ +
diff --git a/tailwind.config.ts b/tailwind.config.ts index bc403c07..4ca609e3 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,7 @@ import type { Config } from "tailwindcss"; import plugin from "tailwindcss/plugin"; import defaultTheme from "tailwindcss/defaultTheme"; +import tailwindcss3d from "tailwindcss-3d"; export default { content: ["./src/**/*.{html,svelte,js,ts}"], @@ -26,6 +27,9 @@ export default { backgroundColor: { primary: "black", secondary: "#1c1c1e" + }, + maxWidth: { + "large-screen": "120rem" } } }, @@ -34,7 +38,9 @@ export default { addVariant("child", "& > *"); addVariant("child-hover", "& > *:hover"); addVariant("child-focus", "& > *:focus"); - }) + addVariant("hover-child", "&:hover > *"); + }), + tailwindcss3d ], future: { hoverOnlyWhenSupported: true