diff --git a/src/app.css b/src/app.css index 3b9437554c..7ac1fa5f8d 100644 --- a/src/app.css +++ b/src/app.css @@ -8,6 +8,7 @@ --color-primary: hsl(var(--color-primary)); --color-secondary: hsl(var(--color-secondary)); --color-accent: var(--color-secondary); + --color-smooth: var(--color-smooth); /* pink */ --color-pink-200: hsl(var(--color-pink-hue) 98% 84%); @@ -45,6 +46,9 @@ --color-blue-500: calc(hsl(var(--color-blue-hue) - 1) 99% 70%); --color-blue-700: calc(hsl(var(--color-blue-hue) - 1) 42% 42%); + /* green */ + --color-green-700: #0a714f; + /* secondary */ --color-secondary-100: hsl(var(--color-secondary-hue) 99% 66%); --color-accent-200: hsl(var(--color-secondary-hue), 78%, 60%, 0.32); @@ -53,7 +57,7 @@ --color-white: hsl(0 0% 100%); --color-black: hsl(0 0% 0%); --color-transparent: rgba(0, 0, 0, 0); - --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04); + --color-offset: hsl(var(--color-greyscale-hue) 2%, 11%, 0.94); --color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%); --color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%); --color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%); @@ -77,10 +81,12 @@ /* Animations */ --animate-scale-in: scale-in 200ms ease-out forwards; - --animate-text: fade 0.75s ease-in-out both, blur 0.75s ease-in-out both, + --animate-caret-blink: caret-blink 1s ease-in-out infinite; + --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both; - --animate-fade-in: fade 0.25s ease-in-out both; - --animate-fade-out: fade 0.25s ease-in-out both reverse; + --animate-scroll: scroll 60s linear infinite; + --animate-fade-in: fade-in 0.5s ease-in-out both; + --animate-marquee: marquee var(--speed, 30s) linear infinite var(--direction, forwards); /* Pink polyfills */ --transition: 0.2s; @@ -125,7 +131,7 @@ } } - @keyframes fade { + @keyframes fade-in { 0% { opacity: 0; } @@ -143,12 +149,11 @@ } } - /* Animations */ - --animate-scale-in: scale-in 200ms ease-out forwards; - --animate-caret-blink: caret-blink 1s ease-in-out infinite; - --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, - up 0.75s ease-in-out both; - --animate-scroll: scroll 60s linear infinite; + @keyframes marquee { + to { + transform: translateX(-50%); + } + } /* Fonts */ --font-family-sans: 'Inter', arial, sans-serif; @@ -158,9 +163,12 @@ --font-family-archia: 'Archia', arial, sans-serif; /* Font sizes */ + --font-size-x-micro: 0.625rem; + --font-size-x-micro--line-height: 0.875rem; + --font-size-x-micro--letter-spacing: var(--letter-spacing-tighter); --font-size-micro: 0.75rem; --font-size-micro--line-height: 1rem; - --font-size-micro--letter-spacing: var(--letter-spacing-tight); + --font-size-micro--letter-spacing: var(--letter-spacing-tighter); --font-size-caption: 0.875rem; --font-size-caption--line-height: 1.375rem; --font-size-caption--letter-spacing: var(--letter-spacing-tight); @@ -218,18 +226,18 @@ --color-primary: var(--color-greyscale-900); --color-secondary: var(--color-greyscale-700); --color-accent: var(--color-pink-600); - --carousel-gradient: transparent; --color-badge-bg: var(--color-badge-bg-light); --color-badge-border: var(--color-badge-border-light); + --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04); } /* dark theme */ .dark { --color-primary: var(--color-greyscale-100); --color-secondary: var(--color-greyscale-300); - --carousel-gradient: 23, 23, 26; --color-badge-bg: var(--color-badge-bg-dark); --color-badge-border: var(--color-badge-border-dark); + --color-smooth: hsl(0 0%, 100%, 0.06); } /* Container */ diff --git a/src/lib/components/MultiCodeContextless.svelte b/src/lib/components/MultiCodeContextless.svelte new file mode 100644 index 0000000000..be410ac415 --- /dev/null +++ b/src/lib/components/MultiCodeContextless.svelte @@ -0,0 +1,95 @@ + + +
+
+
+
+ {#if platform} +
{platform}
+ {/if} +
+
+
+
    + {#if $snippets.entries.length} +
  • + { + permissions.update((permissions) => { + permissions[index].options[i] = + !permissions[index].options[i]; + return permissions; + }); + }} + /> + +
+ + {/each} + + {/each} + + + + + + + + + + + + diff --git a/src/routes/products/storage/(components)/WhatYouCanDo.svelte b/src/routes/products/storage/(components)/WhatYouCanDo.svelte new file mode 100644 index 0000000000..5347763f1b --- /dev/null +++ b/src/routes/products/storage/(components)/WhatYouCanDo.svelte @@ -0,0 +1,60 @@ + + +
+ + {#each tabs as tab} + + + + {/each} + +
diff --git a/src/routes/products/storage/(components)/multicode-tabs/Tabs.svelte b/src/routes/products/storage/(components)/multicode-tabs/Tabs.svelte new file mode 100644 index 0000000000..477f4caeec --- /dev/null +++ b/src/routes/products/storage/(components)/multicode-tabs/Tabs.svelte @@ -0,0 +1,52 @@ + + + + +
+
+
    + {#each $ctx.triggers.entries() as [id, title]} +
  • + +
    • + {/each} +
+
+ +
diff --git a/src/routes/products/storage/(components)/multicode-tabs/TabsItem.svelte b/src/routes/products/storage/(components)/multicode-tabs/TabsItem.svelte new file mode 100644 index 0000000000..13cdb43c2d --- /dev/null +++ b/src/routes/products/storage/(components)/multicode-tabs/TabsItem.svelte @@ -0,0 +1,20 @@ + + +
+ +
diff --git a/src/routes/products/storage/+page.svelte b/src/routes/products/storage/+page.svelte new file mode 100644 index 0000000000..3c9c69567b --- /dev/null +++ b/src/routes/products/storage/+page.svelte @@ -0,0 +1,204 @@ + + + + + {title} + + + + + + + + + + + + + + +
+
+ + +
+ +
+ + +
+
+ +
+
+
+
+ Dashboard_ +

+ Manage your storage infrastructure from the Console +

+

+ Organize your buckets and files with ease in your dashboard, as well as + manage security, permissions, compression, and more. +

+ + Learn more + +
+
+
+ +
+
+
+
+
+

+ File management dashboard +

+

+ Visualize and search for files with different view options and + manipulate multiple at the same time. +

+
+ +
+
+
+
+

+ Extensive settings options +

+

+ Manage security, permissions, compression, and more with + straightforward Bucket settings. +

+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ APIs_ +

+ What you can do with Storage APIs +

+

+ Appwrite's Storage APIs allow you to create and update your files, + apply image transformations, and more. +

+ + View docs + +
+ +
+
+
+ + + +
+ + +
+
+ + + +
+
+
+
+ + diff --git a/src/routes/products/storage/EventCard.svelte b/src/routes/products/storage/EventCard.svelte new file mode 100644 index 0000000000..5aa7b3fc2f --- /dev/null +++ b/src/routes/products/storage/EventCard.svelte @@ -0,0 +1,73 @@ + + + + + +
+ {cover.alt} +
+
+
    +
  • +
    • +
  • +
    • +
+ + {title} + +

+ {description} +

+
+ +
+
+ + + diff --git a/src/routes/products/storage/ProjectCard.svelte b/src/routes/products/storage/ProjectCard.svelte new file mode 100644 index 0000000000..ead1c524ff --- /dev/null +++ b/src/routes/products/storage/ProjectCard.svelte @@ -0,0 +1,63 @@ + + + + +
+

{title}

+

+ {description} +

+
+
+ {image.alt} +
+ + + diff --git a/src/scss/7-components/_code-console.scss b/src/scss/7-components/_code-console.scss new file mode 100644 index 0000000000..fe37bbede4 --- /dev/null +++ b/src/scss/7-components/_code-console.scss @@ -0,0 +1,17 @@ +@use '../abstract' as *; +.#{$p}-code-console { + background: rgba(35, 35, 37, 0.94); backdrop-filter: blur(9.430656433105469px); + &-header { padding-block-start:pxToRem(8); padding-block-end:pxToRem(12); padding-inline:pxToRem(8); } + &-content { + background:hsl(var(--web-color-greyscale-900)); + padding:pxToRem(20); border-radius:pxToRem(12); + } + &-button { + --p-code-coonsole-button-color: var(--color-neutral-5); + inline-size:pxToRem(8); block-size:pxToRem(8); border-radius:var(--border-radius-circular); + background-color: hsl(var(--p-code-coonsole-button-color)); + &.is-red { --p-code-coonsole-button-color:5 79% 65% / 1; } + &.is-yellow { --p-code-coonsole-button-color:40 89% 64% / 1; } + &.is-green { --p-code-coonsole-button-color:113 49% 55% / 1; } + } +} \ No newline at end of file diff --git a/src/scss/7-components/_footer-nav.scss b/src/scss/7-components/_footer-nav.scss index 7b534d0410..c4088ad323 100644 --- a/src/scss/7-components/_footer-nav.scss +++ b/src/scss/7-components/_footer-nav.scss @@ -1,7 +1,7 @@ @use '../abstract' as *; .#{$p}-footer-nav { - display:flex; justify-content:space-between; padding-block:pxToRem(64); font-size:var(--web-font-size-tiny); + display:flex; justify-content:space-between; padding-block-start:pxToRem(64); font-size:var(--web-font-size-tiny); .web-logo { align-self:start; } &-main { &-title { margin-block-end:pxToRem(24); } diff --git a/src/scss/7-components/_index.scss b/src/scss/7-components/_index.scss index f574019ce7..84a4a47868 100644 --- a/src/scss/7-components/_index.scss +++ b/src/scss/7-components/_index.scss @@ -15,6 +15,7 @@ @forward "secondary-tabs"; @forward "strip-plans"; @forward "code-snippet"; +@forward "code-console"; @forward "articles"; @forward "pricing-cards"; @forward "page-steps"; diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss index 006667ec78..a3e987c6bb 100644 --- a/src/scss/_10-utilities.scss +++ b/src/scss/_10-utilities.scss @@ -74,8 +74,8 @@ .#{$p}-u-max-width-168 { max-inline-size:pxToRem(168); } .#{$p}-u-max-width-350 { max-inline-size:pxToRem(350); } .#{$p}-u-max-width-380 { max-inline-size:pxToRem(380); } -.#{$p}-u-max-width-480 { max-inline-size:pxToRem(480); } -.#{$p}-u-max-width-580 { max-inline-size:pxToRem(580); } +.#{$p}-u-max-width-480 { max-inline-size:pxToRem(480)!important; } +.#{$p}-u-max-width-580 { max-inline-size:pxToRem(580)!important; } .#{$p}-u-max-width-600 { max-inline-size:pxToRem(600); } .#{$p}-u-max-width-610 { max-inline-size:pxToRem(610); } .#{$p}-u-max-width-640 { max-inline-size:pxToRem(640); } @@ -144,6 +144,9 @@ .#{$p}-u-bg-color-primary-500 { background-color:hsl(var(--web-color-pink-500)); } +.#{$p}-u-font-size-10 { font-size:#{pxToRem(10)}!important; } +.#{$p}-u-font-size-12 { font-size:#{pxToRem(12)}!important; } +.#{$p}-u-font-size-14 { font-size:#{pxToRem(14)}!important; } .#{$p}-u-font-size-16 { font-size:#{pxToRem(16)}!important; } .#{$p}-u-font-size-20 { font-size:#{pxToRem(20)}!important; } .#{$p}-u-font-size-24 { font-size:#{pxToRem(24)}!important; } @@ -160,8 +163,10 @@ .#{$p}-u-flex-basis-378 { flex-basis:pxToRem(378); } .#{$p}-u-flex-basis-380 { flex-basis:pxToRem(380); } .#{$p}-u-flex-basis-400 { flex-basis:pxToRem(400); } +.#{$p}-u-flex-sep { flex-basis:pxToRem(1); background-color:hsl(var(--web-color-border)); } .#{$p}-u-translate-x-negative { transform:translateX(-100%); } +.#{$p}-u-gap-2 { gap:pxToRem(2); } .#{$p}-u-gap-6 { gap:pxToRem(6); } .#{$p}-u-gap-20 { gap:pxToRem(20)!important; } .#{$p}-u-gap-20-mobile { @media #{$break1} { gap:pxToRem(20)!important; } } @@ -188,7 +193,17 @@ .#{$p}-u-padding-block-8 { padding-block:pxToRem(8)!important; } -.#{$p}-u-inset-block-start-100 { inset-block-start:pxToRem(160); } +.#{$p}-u-inset-block-start-100 { inset-block-start:pxToRem(100); } +.#{$p}-u-inset-block-start-160 { inset-block-start:pxToRem(160); } +.#{$p}-u-inset-inline-end-150-negative { inset-inline-end:pxToRem(-150); } + +.#{$p}-u-inset-block-start-6-negative { inset-block-start:pxToRem(-6); } +.#{$p}-u-inset-block-end-6-negative { inset-block-end:pxToRem(-6); } + +.#{$p}-u-inset-inline-start-6-negative { inset-inline-start:pxToRem(-6); } +.#{$p}-u-inset-inline-end-6-negative { inset-inline-end:pxToRem(-6); } +.#{$p}-u-inset-inline-end-32-negative { inset-inline-end:pxToRem(-32); } +.#{$p}-u-inset-block-start-40-negative { inset-block-start:pxToRem(-40); } .#{$p}-u-cross-child-start { align-self:start!important; } @@ -318,5 +333,5 @@ } .#{$p}-u-flex-1 { - flex: 1; + flex: 1; } \ No newline at end of file diff --git a/static/images/bgs/hero.png b/static/images/bgs/hero.png new file mode 100644 index 0000000000..805537bd28 Binary files /dev/null and b/static/images/bgs/hero.png differ diff --git a/static/images/bgs/mint-gradient.png b/static/images/bgs/mint-gradient.png new file mode 100644 index 0000000000..7d3b0da0b8 Binary files /dev/null and b/static/images/bgs/mint-gradient.png differ diff --git a/static/images/bgs/mobile-hero.png b/static/images/bgs/mobile-hero.png new file mode 100644 index 0000000000..8301d72da4 Binary files /dev/null and b/static/images/bgs/mobile-hero.png differ diff --git a/static/images/bgs/purple-gradient.png b/static/images/bgs/purple-gradient.png new file mode 100644 index 0000000000..1171cae85c Binary files /dev/null and b/static/images/bgs/purple-gradient.png differ diff --git a/static/images/pages/storage/bg-section-1-left.png b/static/images/pages/storage/bg-section-1-left.png new file mode 100644 index 0000000000..fa171eb377 Binary files /dev/null and b/static/images/pages/storage/bg-section-1-left.png differ diff --git a/static/images/pages/storage/bg-section-1-right.png b/static/images/pages/storage/bg-section-1-right.png new file mode 100644 index 0000000000..5e41383854 Binary files /dev/null and b/static/images/pages/storage/bg-section-1-right.png differ diff --git a/static/images/pages/storage/bg-section-2-right.png b/static/images/pages/storage/bg-section-2-right.png new file mode 100644 index 0000000000..dffb505615 Binary files /dev/null and b/static/images/pages/storage/bg-section-2-right.png differ diff --git a/static/images/pages/storage/bucket-modal.png b/static/images/pages/storage/bucket-modal.png new file mode 100644 index 0000000000..6e54a171fe Binary files /dev/null and b/static/images/pages/storage/bucket-modal.png differ diff --git a/static/images/pages/storage/component-dark.png b/static/images/pages/storage/component-dark.png new file mode 100644 index 0000000000..e7ed66d0cd Binary files /dev/null and b/static/images/pages/storage/component-dark.png differ diff --git a/static/images/pages/storage/console-illustration.png b/static/images/pages/storage/console-illustration.png new file mode 100644 index 0000000000..d1b299564c Binary files /dev/null and b/static/images/pages/storage/console-illustration.png differ diff --git a/static/images/pages/storage/corner-circle.svg b/static/images/pages/storage/corner-circle.svg new file mode 100644 index 0000000000..ea5de78815 --- /dev/null +++ b/static/images/pages/storage/corner-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/pages/storage/exploring-the-world.png b/static/images/pages/storage/exploring-the-world.png new file mode 100644 index 0000000000..66ced4d2b7 Binary files /dev/null and b/static/images/pages/storage/exploring-the-world.png differ diff --git a/static/images/pages/storage/file-1.png b/static/images/pages/storage/file-1.png new file mode 100644 index 0000000000..a5e7d913a1 Binary files /dev/null and b/static/images/pages/storage/file-1.png differ diff --git a/static/images/pages/storage/file-2.png b/static/images/pages/storage/file-2.png new file mode 100644 index 0000000000..cc4461ae06 Binary files /dev/null and b/static/images/pages/storage/file-2.png differ diff --git a/static/images/pages/storage/file-3.png b/static/images/pages/storage/file-3.png new file mode 100644 index 0000000000..e1b3eede70 Binary files /dev/null and b/static/images/pages/storage/file-3.png differ diff --git a/static/images/pages/storage/file-4.png b/static/images/pages/storage/file-4.png new file mode 100644 index 0000000000..19b6d4f934 Binary files /dev/null and b/static/images/pages/storage/file-4.png differ diff --git a/static/images/pages/storage/green-parrots.avif b/static/images/pages/storage/green-parrots.avif new file mode 100644 index 0000000000..c90df93eaf Binary files /dev/null and b/static/images/pages/storage/green-parrots.avif differ diff --git a/static/images/pages/storage/img.png b/static/images/pages/storage/img.png new file mode 100644 index 0000000000..30cdfb10c9 Binary files /dev/null and b/static/images/pages/storage/img.png differ diff --git a/static/images/pages/storage/mountain.avif b/static/images/pages/storage/mountain.avif new file mode 100644 index 0000000000..0b4fd73946 Binary files /dev/null and b/static/images/pages/storage/mountain.avif differ diff --git a/static/images/pages/storage/pattern-1.png b/static/images/pages/storage/pattern-1.png new file mode 100644 index 0000000000..aaa7c07915 Binary files /dev/null and b/static/images/pages/storage/pattern-1.png differ diff --git a/static/images/pages/storage/permission-modal.png b/static/images/pages/storage/permission-modal.png new file mode 100644 index 0000000000..19b6d4f934 Binary files /dev/null and b/static/images/pages/storage/permission-modal.png differ diff --git a/static/images/pages/storage/photos.png b/static/images/pages/storage/photos.png new file mode 100644 index 0000000000..211b74bf61 Binary files /dev/null and b/static/images/pages/storage/photos.png differ diff --git a/static/images/pages/storage/product-shot-2.png b/static/images/pages/storage/product-shot-2.png new file mode 100644 index 0000000000..6f5096bab4 Binary files /dev/null and b/static/images/pages/storage/product-shot-2.png differ diff --git a/static/images/pages/storage/product-shot-3.png b/static/images/pages/storage/product-shot-3.png new file mode 100644 index 0000000000..5c5591a7c9 Binary files /dev/null and b/static/images/pages/storage/product-shot-3.png differ diff --git a/static/images/pages/storage/product-shot.png b/static/images/pages/storage/product-shot.png new file mode 100644 index 0000000000..8a10cb324b Binary files /dev/null and b/static/images/pages/storage/product-shot.png differ diff --git a/static/images/pages/storage/purple-gradient.png b/static/images/pages/storage/purple-gradient.png new file mode 100644 index 0000000000..0832f57149 Binary files /dev/null and b/static/images/pages/storage/purple-gradient.png differ diff --git a/static/images/pages/storage/settings-mobile.png b/static/images/pages/storage/settings-mobile.png new file mode 100644 index 0000000000..ee19574ce2 Binary files /dev/null and b/static/images/pages/storage/settings-mobile.png differ diff --git a/static/images/pages/storage/settings.png b/static/images/pages/storage/settings.png new file mode 100644 index 0000000000..d50787f08c Binary files /dev/null and b/static/images/pages/storage/settings.png differ