steven/aifo-portal-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

partnership

Browse Source
This commit is contained in:
Steven002
2026-07-05 20:11:52 +08:00
parent c1630b8c10
commit 5bc34def79
13 changed files with 187 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/aifo-section-glow.css
+34 -2
View File
@@ -6,7 +6,8 @@
:root {
--aifo-glow-right-image: url("../images/backgrounds/new-user-promo-welcome-side-glow.png");
--aifo-glow-left-image: url("../images/backgrounds/new-user-promo-corner-glow.png");
--aifo-glow-left-top-image: url("../images/backgrounds/new-user-promo-corner-glow.png");
--aifo-glow-left-image: url("../images/backgrounds/bg_left_academy_section.webp");
--aifo-glow-right-width: min(82vw, 720px);
--aifo-glow-left-top: 106px;
--aifo-glow-left-offset: -2vw;
@@ -47,6 +48,28 @@
mix-blend-mode: screen;
}
.aifo-glow-left {
position: absolute;
top: 50%;
right: auto;
left: calc((100% - 100vw) / 2);
bottom: auto;
transform: translateY(-50%);
width: var(--aifo-glow-right-width);
height: 100vh;
height: 100dvh;
max-height: 100svh;
z-index: 0;
pointer-events: none;
background-color: transparent;
background-image: var(--aifo-glow-left-image);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
mix-blend-mode: screen;
}
/* Left — from #special-offer-50::before */
.left_bg_light {
position: absolute;
@@ -57,9 +80,10 @@
max-height: var(--aifo-glow-left-max-height);
z-index: 0;
pointer-events: none;
background: var(--aifo-glow-left-image) no-repeat left top / cover;
background: var(--aifo-glow-left-top-image) no-repeat left top / cover;
}
/* Page-level host (left glow on full page) */
.aifo-page-glow-host {
position: relative;
@@ -74,3 +98,11 @@
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.aifo-glow-left
{
width: 127%;
}
}
assets/css/partnership.css
+75 -4
View File
@@ -316,6 +316,7 @@
grid-template-columns: 1fr;
gap: 20px;
width: 100%;
}
@media (min-width: 640px) {
@@ -331,19 +332,38 @@
}
#partnership-page .partnership-step {
display: flex;
/* display: flex; */
flex-direction: column;
gap: 40px;
/* gap: 40px; */
padding: 24px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: var(--bg-card);
/* border: 1px solid rgba(255, 255, 255, 0.16); */
/* background: var(--bg-card); */
position: relative;
background-size: 100% 100%;
}
/* 第一个步骤 - 背景1 */
#partnership-page .partnership-step:nth-child(1) {
background-image: url('../images/partnership/h-1-bg.png');
}
/* 第二个和第三个步骤 - 背景2 */
#partnership-page .partnership-step:nth-child(2),
#partnership-page .partnership-step:nth-child(3) {
background-image: url('../images/partnership/h-2-bg.png');
}
/* 最后一个步骤 - 背景3 */
#partnership-page .partnership-step:nth-child(4) {
background-image: url('../images/partnership/h-3-bg.png');
}
#partnership-page .partnership-step__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
#partnership-page .partnership-step__num {
@@ -511,6 +531,8 @@
}
}
#partnership-page .partnership-faq__glow {
position: absolute;
top: 50%;
@@ -610,3 +632,52 @@
line-height: 22px;
color: var(--text-secondary);
}
.arrow-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
flex-shrink: 0;
color: #fff;
transition: all 0.3s ease;
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.arrow-circle svg{
width: 100%;
height: 100%;
}
@media (max-width: 1024px) {
#partnership-page .partnership-step {
border: 1px solid rgba(255, 255, 255, 0.16);
background: var(--bg-card);
}
/* 第一个步骤 - 背景1 */
#partnership-page .partnership-step:nth-child(1) {
background-image: unset;
}
/* 第二个和第三个步骤 - 背景2 */
#partnership-page .partnership-step:nth-child(2),
#partnership-page .partnership-step:nth-child(3) {
background-image: unset;
}
/* 最后一个步骤 - 背景3 */
#partnership-page .partnership-step:nth-child(4) {
background-image: unset;
}
.arrow-circle {
display: none;
}
}
assets/images/partnership/Component 126.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

assets/images/partnership/Component 134.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

assets/images/partnership/h-1-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

assets/images/partnership/h-2-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

assets/images/partnership/h-3-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

assets/images/partnership/h-icon-1.svg
+11
View File
@@ -0,0 +1,11 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="24" fill="#F98715"/>
<g clip-path="url(#clip0_11541_46663)">
<path d="M34.022 24.2074C33.8978 24.0804 33.734 24.0126 33.5533 24.0126C33.3782 24.0126 33.2087 24.0862 33.0845 24.2074L31.8873 25.4048L34.4118 27.9265L35.5387 26.6557C35.6657 26.5315 35.7334 26.362 35.7334 26.1897C35.7334 26.0147 35.6598 25.8452 35.5387 25.7238L34.022 24.2074ZM25.7678 21.539H18.4823C17.6833 21.539 17.0366 20.8924 17.0366 20.096C17.0366 19.2968 17.6833 18.6529 18.4823 18.6529H25.7678C26.567 18.6529 27.2137 19.2996 27.2137 20.096C27.2137 20.8952 26.567 21.539 25.7678 21.539ZM22.8395 27.3447H18.4823C17.6833 27.3447 17.0366 26.6981 17.0366 25.9017C17.0366 25.1025 17.6833 24.4586 18.4823 24.4586H22.8395C23.6387 24.4586 24.2854 25.1053 24.2854 25.9017C24.2854 26.7009 23.6387 27.3447 22.8395 27.3447ZM29.0915 12.0168H15.7602C13.8229 12.0168 12.25 13.5869 12.25 15.524V32.4588C12.25 34.3959 13.8229 35.966 15.76 35.966H20.6085V32.823L32.6043 20.5617V15.5271C32.6045 13.5897 31.0314 12.0168 29.0915 12.0168ZM23.7742 33.4443V35.966H26.3043L33.6154 28.5843L31.0909 26.0573L23.7742 33.4443Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_11541_46663">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

assets/images/partnership/h-icon-2.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="24" fill="#F98715"/>
<path d="M32.1737 25.8267H29.1203C28.427 25.8134 27.8137 25.3734 27.5603 24.7334L26.507 22.1334C26.3603 21.76 26.4537 21.32 26.747 21.04C27.8537 19.9734 28.3337 18.4 28.0003 16.88C27.627 14.6667 25.5203 13.1734 23.2937 13.5467C21.2403 13.8934 19.7737 15.7467 19.907 17.8267C19.907 19.0534 20.4003 20.2267 21.307 21.0667C21.6137 21.3467 21.707 21.7867 21.5603 22.1734L20.5337 24.7334C20.2937 25.3867 19.6803 25.8134 18.987 25.8267H15.827C15.3603 25.84 14.987 26.24 15.0003 26.7067V30.1467C14.987 30.6134 15.3603 31.0134 15.827 31.0267H32.1737C32.6403 31 33.0137 30.6134 33.0003 30.1467V26.7067C33.0137 26.24 32.6403 25.8534 32.1737 25.8267ZM31.787 32.7734H16.227C16.0003 32.7867 15.8137 32.9734 15.827 33.2134V34.0667C15.8137 34.2934 16.0003 34.4934 16.227 34.5067H31.787C32.0137 34.4934 32.2003 34.3067 32.187 34.0667V33.2134C32.2003 32.9734 32.0137 32.7867 31.787 32.7734Z" fill="white"/>
<path d="M32.1737 25.8267H29.1203C28.427 25.8134 27.8137 25.3734 27.5603 24.7334L26.507 22.1334C26.3603 21.76 26.4537 21.32 26.747 21.04C27.8537 19.9734 28.3337 18.4 28.0003 16.88C27.627 14.6667 25.5203 13.1734 23.2937 13.5467C21.2403 13.8934 19.7737 15.7467 19.907 17.8267C19.907 19.0534 20.4003 20.2267 21.307 21.0667C21.6137 21.3467 21.707 21.7867 21.5603 22.1734L20.5337 24.7334C20.2937 25.3867 19.6803 25.8134 18.987 25.8267H15.827C15.3603 25.84 14.987 26.24 15.0003 26.7067V30.1467C14.987 30.6134 15.3603 31.0134 15.827 31.0267H32.1737C32.6403 31 33.0137 30.6134 33.0003 30.1467V26.7067C33.0137 26.24 32.6403 25.8534 32.1737 25.8267ZM31.787 32.7734H16.227C16.0003 32.7867 15.8137 32.9734 15.827 33.2134V34.0667C15.8137 34.2934 16.0003 34.4934 16.227 34.5067H31.787C32.0137 34.4934 32.2003 34.3067 32.187 34.0667V33.2134C32.2003 32.9734 32.0137 32.7867 31.787 32.7734Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

assets/images/partnership/h-icon-3.svg
+11
View File
@@ -0,0 +1,11 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="24" fill="#F98715"/>
<g clip-path="url(#clip0_11541_46735)">
<path d="M19.5276 15.696C20.0916 15.396 20.6916 15.144 21.3036 14.964L22.0476 12.744C22.1916 12.3 22.5996 12 23.0676 12H24.9396C25.4076 12 25.8156 12.3 25.9596 12.744L26.7036 14.976C27.3276 15.156 27.9156 15.408 28.4796 15.708L30.5796 14.652C30.9996 14.448 31.5036 14.52 31.8276 14.856L33.1476 16.176C33.4716 16.5 33.5556 17.004 33.3516 17.424L32.2956 19.524C32.5956 20.088 32.8476 20.676 33.0276 21.3L35.2476 22.044C35.6916 22.188 35.9916 22.608 35.9916 23.064V24.936C35.9916 25.404 35.6916 25.812 35.2476 25.956L33.0156 26.7C32.8356 27.312 32.5836 27.912 32.2836 28.476L33.3396 30.576C33.5436 30.996 33.4716 31.5 33.1356 31.824L31.8156 33.144C31.4916 33.468 30.9876 33.552 30.5676 33.348L28.4676 32.292C27.9036 32.592 27.3036 32.844 26.6916 33.024L25.9476 35.244C25.8036 35.688 25.3836 35.988 24.9276 35.988H23.0676C22.5996 35.988 22.1916 35.688 22.0476 35.244L21.3036 33.012C20.6916 32.832 20.0916 32.58 19.5276 32.28L17.4276 33.336C17.0076 33.54 16.5036 33.468 16.1796 33.132L14.8596 31.812C14.5356 31.488 14.4516 30.984 14.6556 30.564L15.7116 28.464C15.4116 27.9 15.1596 27.3 14.9796 26.688L12.7596 25.944C12.3156 25.8 12.0156 25.38 12.0156 24.924V23.064C12.0156 22.596 12.3156 22.188 12.7596 22.044L14.9916 21.3C15.1716 20.676 15.4236 20.088 15.7236 19.524L14.6676 17.424C14.4636 17.004 14.5356 16.5 14.8716 16.176L16.1916 14.856C16.5156 14.532 17.0196 14.448 17.4396 14.652L19.5276 15.696ZM24.0036 28.284C26.3676 28.284 28.2876 26.364 28.2876 24C28.2876 21.636 26.3676 19.716 24.0036 19.716C21.6396 19.716 19.7196 21.636 19.7196 24C19.7196 26.364 21.6396 28.284 24.0036 28.284Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_11541_46735">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

assets/images/partnership/h-icon-4.svg
+13
View File
@@ -0,0 +1,13 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="24" fill="#F98715"/>
<g clip-path="url(#clip0_11543_45958)">
<path d="M18.8359 23.9511C18.8359 25.2715 19.3605 26.5379 20.2942 27.4716C21.2278 28.4053 22.4942 28.9298 23.8146 28.9298C25.1351 28.9298 26.4014 28.4053 27.3351 27.4716C28.2688 26.5379 28.7933 25.2715 28.7933 23.9511C28.7933 22.6307 28.2688 21.3643 27.3351 20.4306C26.4014 19.497 25.1351 18.9724 23.8146 18.9724C22.4942 18.9724 21.2278 19.497 20.2942 20.4306C19.3605 21.3643 18.8359 22.6307 18.8359 23.9511Z" fill="white"/>
<path d="M23.8129 33.9085C18.3461 33.9085 13.9531 29.4179 13.9531 23.9511C13.9531 18.4843 18.3461 14.0913 23.8129 14.0913C29.2797 14.0913 33.7703 18.5819 33.7703 24.0487C33.7703 29.4179 29.2797 33.9085 23.8129 33.9085ZM23.8129 15.8485C19.3223 15.8485 15.7103 19.4605 15.7103 23.9511C15.7103 28.4417 19.3223 32.0537 23.8129 32.0537C28.3035 32.0537 31.9155 28.4417 31.9155 23.9511C32.0131 19.4605 28.3035 15.8485 23.8129 15.8485Z" fill="white"/>
<path d="M12 23.463H18.1501V24.5368H12V23.463ZM29.5719 23.463H35.722V24.5368H29.5719V23.463ZM23.3241 12.1389H24.3979V18.2891H23.3241V12.1389ZM23.3241 29.7108H24.3979V35.8609H23.3241V29.7108Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_11543_45958">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

assets/images/partnership/right-arraw.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="18" fill="white"/>
<path d="M13.2266 18H22.772" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 13.2273L22.7727 18L18 22.7727" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 402 B

pages/partnership.html
+33 -5
View File
@@ -12,11 +12,12 @@
<link type="text/css" href="../assets/css/aifo-page-bg.css" rel="stylesheet">
<link type="text/css" href="../assets/css/aifo-btn.css" rel="stylesheet">
<link type="text/css" href="../assets/css/partnership.css" rel="stylesheet">
<link type="text/css" href="../assets/css/aifo-section-glow.css" rel="stylesheet">
</head>
<body class="aifo-bg-primary" id="partnership-page">
<div id="nav-container"></div>
<main class="aifo-page-bg aifo-page-bg--grid">
<main class="aifo-page-bg">
<div class="partnership-page">
<div class="partnership-page__glow" aria-hidden="true"></div>
@@ -31,6 +32,7 @@
</section>
<section class="partnership-section" aria-labelledby="partnership-tiers-title">
<div class="aifo-glow-right" aria-hidden="true"></div>
<h2 class="partnership-section__title" id="partnership-tiers-title">
Commission <span class="text-orange">Tiers</span>
</h2>
@@ -86,6 +88,7 @@
</section>
<section class="partnership-section" aria-labelledby="partnership-why-title">
<div class="aifo-glow-left" aria-hidden="true"></div>
<h2 class="partnership-section__title" id="partnership-why-title">
Why become <span class="text-orange">AIFO partner</span>
</h2>
@@ -128,31 +131,55 @@
<div class="partnership-steps">
<article class="partnership-step">
<div class="partnership-step__top">
<span class="partnership-step__num">1</span>
<span class="partnership-step__num"><img src="../assets/images/partnership/h-icon-1.svg" alt="" loading="lazy"></span>
<span class="partnership-step__tag">Step 1</span>
</div>
<h3 class="partnership-step__title">Apply</h3>
<p class="partnership-step__desc">Filled out our partnership application</p>
<div class="arrow-circle">
<span><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="18" fill="white"/>
<path d="M13.2266 18H22.772" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 13.2273L22.7727 18L18 22.7727" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
</article>
<article class="partnership-step">
<div class="partnership-step__top">
<span class="partnership-step__num">2</span>
<span class="partnership-step__num"><img src="../assets/images/partnership/h-icon-2.svg" alt="" loading="lazy"></span>
<span class="partnership-step__tag">Step 2</span>
</div>
<h3 class="partnership-step__title">Review</h3>
<p class="partnership-step__desc">Partnership applications are subject to team review</p>
<div class="arrow-circle">
<span><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="18" fill="white"/>
<path d="M13.2266 18H22.772" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 13.2273L22.7727 18L18 22.7727" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
</article>
<article class="partnership-step">
<div class="partnership-step__top">
<span class="partnership-step__num">3</span>
<span class="partnership-step__num"><img src="../assets/images/partnership/h-icon-3.svg" alt="" loading="lazy"></span>
<span class="partnership-step__tag">Step 3</span>
</div>
<h3 class="partnership-step__title">Launch</h3>
<p class="partnership-step__desc">Register your AIFO account, get your links, dashboard and start promoting.</p>
<div class="arrow-circle">
<span><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="18" fill="white"/>
<path d="M13.2266 18H22.772" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 13.2273L22.7727 18L18 22.7727" stroke="black" stroke-width="1.36364" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
</article>
<article class="partnership-step">
<div class="partnership-step__top">
<span class="partnership-step__num">4</span>
<span class="partnership-step__num"><img src="../assets/images/partnership/h-icon-4.svg" alt="" loading="lazy"></span>
<span class="partnership-step__tag">Step 4</span>
</div>
<h3 class="partnership-step__title">Track &amp; Get Paid</h3>
@@ -162,6 +189,7 @@
</section>
<section class="partnership-section" aria-labelledby="partnership-who-title">
<div class="aifo-glow-left" aria-hidden="true"></div>
<h2 class="partnership-section__title" id="partnership-who-title">
<span class="text-orange">Who</span> This Is For
</h2>