cdricms/vnidrop
1
1
Fork 0
mirror of https://github.com/sudosylabs/vnidrop.git synced 2026-08-05 02:29:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): refine product showcase and branding

Browse Source
This commit is contained in:
Hammed Abass
2026-07-16 18:11:06 +02:00
parent d61d6f3c5b
commit 0a185077af
20 changed files with 1658 additions and 663 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
docs/app/base.css
View File

@@ -137,107 +137,6 @@ p {
transform: translateY(0);
}
.site-header {
position: fixed;
z-index: 100;
top: 16px;
right: 0;
left: 0;
width: min(calc(100% - 32px), 1260px);
margin-inline: auto;
border: 1px solid rgba(220, 212, 224, 0.82);
border-radius: 18px;
background: rgba(251, 250, 252, 0.82);
box-shadow: 0 12px 40px rgba(42, 26, 49, 0.08);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 64px;
padding: 0 10px 0 17px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
width: max-content;
font-family: var(--font-display);
font-size: 19px;
font-weight: 750;
letter-spacing: -0.04em;
}
.brand-mark-shell {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid #eadcf1;
border-radius: 11px;
background: white;
box-shadow: 0 5px 15px rgba(105, 42, 145, 0.08);
}
.brand-mark-shell svg {
width: 27px;
height: 27px;
}
.brand-name {
transform: translateY(-1px);
}
.desktop-nav {
display: flex;
align-items: center;
gap: 3px;
padding: 4px;
border-radius: 13px;
background: rgba(239, 235, 241, 0.7);
}
.desktop-nav a {
padding: 7px 14px;
border-radius: 10px;
color: var(--ink-soft);
font-size: 13px;
font-weight: 650;
transition: background 160ms ease, color 160ms ease;
}
.desktop-nav a:hover {
background: white;
color: var(--ink);
}
.header-github {
justify-self: end;
}
.menu-button {
display: none;
width: 42px;
height: 42px;
place-items: center;
border: 0;
border-radius: 11px;
background: var(--surface-soft);
cursor: pointer;
}
.menu-button svg {
width: 21px;
}
.mobile-nav {
display: none;
}
.button {
display: inline-flex;
min-height: 52px;
@@ -322,4 +221,3 @@ p {
opacity: 1;
transform: translateY(0);
}

3
docs/app/footer.css
View File

@@ -27,7 +27,7 @@
background: white;
}
.footer-mark svg {
.footer-mark img {
width: 32px;
height: 32px;
}
@@ -100,4 +100,3 @@
.footer-bottom p {
margin: 0;
}

37
docs/app/icon.svg
View File

@@ -1,10 +1,29 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="16" fill="#FBF7FF"/>
<path d="M16 12h8.2c2.1 0 3.8 1.7 3.8 3.8v20.4c0 7 4.8 12.2 11.5 12.2S51 43.2 51 36.2V15.8c0-2.1 1.7-3.8 3.8-3.8H58v24.4C58 47.7 50 56 39.5 56S21 47.7 21 36.4V24h-3v-5h-2v-7Z" fill="url(#a)"/>
<path d="M39.5 26.5c-2.5 3.3-6.5 8.6-6.5 12.4 0 4 2.8 7.1 6.5 7.1s6.5-3.1 6.5-7.1c0-3.8-4-9.1-6.5-12.4Z" fill="url(#b)"/>
<path d="M51 12h7v7l-7-7Z" fill="#E7CBFF"/>
<defs>
<linearGradient id="a" x1="16" y1="12" x2="59" y2="51" gradientUnits="userSpaceOnUse"><stop stop-color="#B45CFA"/><stop offset="1" stop-color="#7828ED"/></linearGradient>
<linearGradient id="b" x1="33" y1="27" x2="47" y2="43" gradientUnits="userSpaceOnUse"><stop stop-color="#B45CFA"/><stop offset="1" stop-color="#7828ED"/></linearGradient>
</defs>
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="40" y="40" width="944" height="944" rx="210" fill="#FFFFFF" stroke="#E9E7F0" stroke-width="8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M236.68 148H338.36C366.24 148 387.56 170.96 387.56 198.84V564.56C387.56 597.36 372.8 620.32 372.8 646.56C372.8 725.28 436.76 787.6 522.04 787.6C607.32 787.6 668 725.28 668 646.56C668 620.32 656.52 597.36 656.52 564.56V198.84C656.52 170.96 677.84 148 705.72 148H781.16C817.24 148 846.76 177.52 846.76 213.6V564.56C846.76 738.4 704.08 879.44 522.04 879.44C340 879.44 194.04 738.4 194.04 564.56V374.32H220.28V305.44C195.68 305.44 176 297.24 176 280.84V246.4C176 231.64 187.48 220.16 202.24 220.16H236.68V148ZM256.36 239.84C251.44 239.84 248.16 244.76 248.16 249.68V275.92C248.16 282.48 253.08 285.76 259.64 285.76H282.6C289.16 285.76 292.44 280.84 292.44 274.28V251.32C292.44 244.76 287.52 239.84 280.96 239.84H256.36Z" fill="url(#paint0_linear_11_12)"/>
<path d="M520.4 431.72C495.8 464.52 443.32 530.12 420.36 577.68C390.84 636.72 403.96 699.04 446.6 731.84C487.6 758.08 549.92 758.08 592.56 730.2C633.56 700.68 646.68 636.72 620.44 577.68C597.48 530.12 546.64 464.52 520.4 431.72Z" fill="url(#paint1_linear_11_12)"/>
<mask id="mask0_11_12" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="176" y="148" width="671" height="732">
<path d="M236.68 148H338.36C366.24 148 387.56 170.96 387.56 198.84V564.56C387.56 597.36 372.8 620.32 372.8 646.56C372.8 725.28 436.76 787.6 522.04 787.6C607.32 787.6 668 725.28 668 646.56C668 620.32 656.52 597.36 656.52 564.56V198.84C656.52 170.96 677.84 148 705.72 148H781.16C817.24 148 846.76 177.52 846.76 213.6V564.56C846.76 738.4 704.08 879.44 522.04 879.44C340 879.44 194.04 738.4 194.04 564.56V374.32H220.28V305.44C195.68 305.44 176 297.24 176 280.84V246.4C176 231.64 187.48 220.16 202.24 220.16H236.68V148ZM256.36 239.84C251.44 239.84 248.16 244.76 248.16 249.68V275.92C248.16 282.48 253.08 285.76 259.64 285.76H282.6C289.16 285.76 292.44 280.84 292.44 274.28V251.32C292.44 244.76 287.52 239.84 280.96 239.84H256.36Z" fill="white"/>
</mask>
<g mask="url(#mask0_11_12)">
<path d="M688 148H782C832 148 842 171.8 847.48 210V303.68L688 148Z" fill="url(#paint2_linear_11_12)"/>
</g>
<defs>
<linearGradient id="paint0_linear_11_12" x1="176" y1="148" x2="904.706" y2="816.252" gradientUnits="userSpaceOnUse">
<stop stop-color="#A855F7"/>
<stop offset="0.48" stop-color="#9D4DF4"/>
<stop offset="1" stop-color="#7C2AEF"/>
</linearGradient>
<linearGradient id="paint1_linear_11_12" x1="404.439" y1="431.72" x2="707.314" y2="649.286" gradientUnits="userSpaceOnUse">
<stop stop-color="#A855F7"/>
<stop offset="0.48" stop-color="#9D4DF4"/>
<stop offset="1" stop-color="#7C2AEF"/>
</linearGradient>
<linearGradient id="paint2_linear_11_12" x1="683.48" y1="144.6" x2="793.636" y2="306.833" gradientUnits="userSpaceOnUse">
<stop stop-color="#F2DDFF"/>
<stop offset="1" stop-color="#C084FC"/>
</linearGradient>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 893 B

After

Width:  |  Height:  |  Size: 2.9 KiB

2
docs/app/layout.tsx
View File

@@ -3,10 +3,12 @@ import type { ReactNode } from "react";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import "./base.css";
import "../components/header.css";
import "./home.css";
import "./footer.css";
import "./privacy/privacy-document.css";
import "../components/hero-scene.css";
import "../components/hero-device.css";
import "../components/transfer-flow.css";
import "../components/invitation-scene.css";
import "../components/approval-scene.css";

2
docs/app/page.tsx
View File

@@ -140,7 +140,7 @@ export default function HomePage() {
</div>
</section>
<section className="section invitation-section">
<section id="invitations" className="section invitation-section">
<div className="page-shell">
<Reveal className="section-heading section-heading-split">
<div>

3
docs/app/privacy/privacy-document.css
View File

@@ -175,7 +175,7 @@
backdrop-filter: blur(14px);
}
.privacy-mark-card > svg {
.privacy-mark-card > img {
position: relative;
z-index: 2;
width: 112px;
@@ -657,4 +657,3 @@
color: white;
text-decoration: none;
}

65
docs/app/responsive.css
View File

@@ -37,51 +37,6 @@
}
@media (max-width: 920px) {
.desktop-nav,
.header-github {
display: none;
}
.header-inner {
grid-template-columns: 1fr auto;
}
.menu-button {
display: grid;
}
.mobile-nav {
display: grid;
max-height: 0;
overflow: hidden;
padding: 0 12px;
opacity: 0;
visibility: hidden;
transition: max-height 250ms ease, padding 250ms ease, opacity 180ms ease, visibility 250ms;
}
.mobile-nav.is-open {
max-height: 280px;
padding: 4px 12px 12px;
opacity: 1;
visibility: visible;
}
.mobile-nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px;
border-top: 1px solid var(--line);
color: var(--ink-soft);
font-size: 13px;
font-weight: 650;
}
.mobile-nav svg {
width: 17px;
}
.hero-section {
padding-top: 128px;
}
@@ -155,26 +110,6 @@
width: min(calc(100% - 32px), var(--shell));
}
.site-header {
top: 10px;
width: calc(100% - 20px);
border-radius: 15px;
}
.header-inner {
height: 58px;
padding-left: 11px;
}
.brand-name {
font-size: 17px;
}
.brand-mark-shell {
width: 36px;
height: 36px;
}
.hero-section {
min-height: auto;
padding: 115px 0 72px;