2026-07-05 06:41:32 +00:00
<!DOCTYPE html>
< html lang = "sv" >
< head >
< meta charset = "UTF-8" / >
< link rel = "canonical" href = "https://www.quixzoom.com/sweden-launch.html" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > quiXzoom Sverige — Launch 1 augusti 2026< / title >
< meta name = "description" content = "quiXzoom lanseras i Sverige 1 aug 2026. Bli zoomer, ta uppdrag och tjäna pengar per godkänt uppdrag. Fotografera infrastruktur och stadsmiljöer." / >
< style >
* , * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
: root {
--navy : #001E50 ;
--cream : #FAF9F6 ;
--amber : #C8763A ;
--amber2 : #E8962A ;
--white : #FFFFFF ;
--text : #1A1A2E ;
--muted : #5A6070 ;
--border : #E2E0DB ;
--green : #2D7A4F ;
--radius : 12 px ;
}
html { scroll-behavior : smooth ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Segoe UI' , system-ui , sans-serif ;
background : var ( - - cream ) ;
color : var ( - - text ) ;
line-height : 1.6 ;
}
2026-07-07 07:11:50 +00:00
/* Nav */
2026-07-05 06:41:32 +00:00
nav {
background : var ( - - navy ) ;
padding : 0 2 rem ;
display : flex ;
align-items : center ;
justify-content : space-between ;
height : 64 px ;
position : sticky ;
top : 0 ;
z-index : 100 ;
}
. nav-logo {
font-size : 1.4 rem ;
font-weight : 800 ;
color : var ( - - white ) ;
letter-spacing : -0.02 em ;
}
. nav-logo span { color : var ( - - amber ) ; }
. nav-links { display : flex ; gap : 2 rem ; }
. nav-links a {
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
text-decoration : none ;
font-size : 0.9 rem ;
transition : color 0.2 s ;
}
. nav-links a : hover { color : var ( - - white ) ; }
. nav-cta {
background : var ( - - amber ) ;
color : var ( - - white ) ;
border : none ;
padding : 0.5 rem 1.25 rem ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - sm ) ;
2026-07-05 06:41:32 +00:00
font-weight : 600 ;
font-size : 0.9 rem ;
cursor : pointer ;
text-decoration : none ;
transition : background 0.2 s ;
}
. nav-cta : hover { background : var ( - - amber2 ) ; }
2026-07-07 07:11:50 +00:00
/* Hero */
2026-07-05 06:41:32 +00:00
. hero {
background : var ( - - navy ) ;
color : var ( - - white ) ;
text-align : center ;
padding : 5 rem 2 rem 4 rem ;
position : relative ;
overflow : hidden ;
}
. hero :: before {
content : '' ;
position : absolute ;
inset : 0 ;
background : radial-gradient ( ellipse 80 % 60 % at 50 % 0 % , rgba ( 200 , 118 , 58 , 0.15 ) 0 % , transparent 70 % ) ;
pointer-events : none ;
}
. launch-badge {
display : inline-flex ;
align-items : center ;
gap : 0.5 rem ;
background : rgba ( 200 , 118 , 58 , 0.2 ) ;
border : 1 px solid rgba ( 200 , 118 , 58 , 0.5 ) ;
color : var ( - - amber ) ;
padding : 0.35 rem 1 rem ;
border-radius : 100 px ;
font-size : 0.8 rem ;
font-weight : 700 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
margin-bottom : 1.5 rem ;
}
. launch-badge . dot {
width : 7 px ; height : 7 px ;
background : var ( - - amber ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - full ) ;
2026-07-05 06:41:32 +00:00
animation : pulse 1.5 s ease-in-out infinite ;
}
@ keyframes pulse {
0 % , 100 % { opacity : 1 ; }
50 % { opacity : 0.3 ; }
}
. hero h1 {
font-size : clamp ( 2.4 rem , 6 vw , 4.2 rem ) ;
font-weight : 900 ;
line-height : 1.1 ;
letter-spacing : -0.03 em ;
margin-bottom : 1.25 rem ;
}
. hero h1 span { color : var ( - - amber ) ; }
. hero p . subtitle {
font-size : 1.2 rem ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
max-width : 600 px ;
margin : 0 auto 2.5 rem ;
}
. hero-actions {
display : flex ;
gap : 1 rem ;
justify-content : center ;
flex-wrap : wrap ;
}
. btn-primary {
background : var ( - - amber ) ;
color : var ( - - white ) ;
border : none ;
padding : 0.85 rem 2 rem ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
font-size : 1 rem ;
font-weight : 700 ;
cursor : pointer ;
text-decoration : none ;
transition : background 0.2 s , transform 0.15 s ;
}
. btn-primary : hover { background : var ( - - amber2 ) ; transform : translateY ( -1 px ) ; }
. btn-outline {
background : transparent ;
color : var ( - - white ) ;
border : 2 px solid rgba ( 255 , 255 , 255 , 0.4 ) ;
padding : 0.85 rem 2 rem ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
font-size : 1 rem ;
font-weight : 600 ;
cursor : pointer ;
text-decoration : none ;
transition : border-color 0.2 s ;
}
. btn-outline : hover { border-color : rgba ( 255 , 255 , 255 , 0.8 ) ; }
2026-07-07 07:11:50 +00:00
/* Countdown */
2026-07-05 06:41:32 +00:00
. countdown-section {
background : var ( - - navy ) ;
padding-bottom : 4 rem ;
}
. countdown-container {
display : flex ;
justify-content : center ;
gap : 1.5 rem ;
flex-wrap : wrap ;
padding-top : 1 rem ;
}
. countdown-unit {
text-align : center ;
min-width : 90 px ;
}
. countdown-value {
display : block ;
font-size : clamp ( 2.5 rem , 6 vw , 4 rem ) ;
font-weight : 900 ;
color : var ( - - white ) ;
line-height : 1 ;
font-variant-numeric : tabular-nums ;
}
. countdown-label {
font-size : 0.75 rem ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
text-transform : uppercase ;
letter-spacing : 0.1 em ;
margin-top : 0.4 rem ;
}
. countdown-divider {
color : var ( - - amber ) ;
font-size : 3 rem ;
font-weight : 300 ;
opacity : 0.6 ;
margin-top : 0.3 rem ;
}
2026-07-07 07:11:50 +00:00
/* Section base */
2026-07-05 06:41:32 +00:00
section { padding : 5 rem 2 rem ; }
. container { max-width : 1100 px ; margin : 0 auto ; }
. section-tag {
font-size : 0.75 rem ;
font-weight : 700 ;
text-transform : uppercase ;
letter-spacing : 0.12 em ;
color : var ( - - amber ) ;
margin-bottom : 0.75 rem ;
}
h2 {
font-size : clamp ( 1.8 rem , 4 vw , 2.8 rem ) ;
font-weight : 800 ;
letter-spacing : -0.02 em ;
color : var ( - - navy ) ;
margin-bottom : 1 rem ;
line-height : 1.2 ;
}
. lead {
font-size : 1.1 rem ;
color : var ( - - muted ) ;
max-width : 600 px ;
margin-bottom : 3 rem ;
}
2026-07-07 07:11:50 +00:00
/* Stats strip */
2026-07-05 06:41:32 +00:00
. stats-strip {
background : var ( - - white ) ;
border-top : 1 px solid var ( - - border ) ;
border-bottom : 1 px solid var ( - - border ) ;
padding : 2 rem ;
}
. stats-grid {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 150 px , 1 fr ) ) ;
gap : 2 rem ;
max-width : 900 px ;
margin : 0 auto ;
text-align : center ;
}
. stat-value {
font-size : 2.2 rem ;
font-weight : 900 ;
color : var ( - - navy ) ;
letter-spacing : -0.02 em ;
}
. stat-label { font-size : 0.85 rem ; color : var ( - - muted ) ; margin-top : 0.25 rem ; }
2026-07-07 07:11:50 +00:00
/* How it works */
2026-07-05 06:41:32 +00:00
. steps-grid {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 220 px , 1 fr ) ) ;
gap : 2 rem ;
}
. step-card {
background : var ( - - white ) ;
border : 1 px solid var ( - - border ) ;
border-radius : var ( - - radius ) ;
padding : 2 rem ;
}
. step-number {
width : 36 px ; height : 36 px ;
background : var ( - - amber ) ;
color : var ( - - white ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - full ) ;
2026-07-05 06:41:32 +00:00
display : flex ;
align-items : center ;
justify-content : center ;
font-weight : 800 ;
font-size : 1 rem ;
margin-bottom : 1 rem ;
}
. step-card h3 { font-size : 1 rem ; font-weight : 700 ; margin-bottom : 0.5 rem ; color : var ( - - navy ) ; }
. step-card p { font-size : 0.9 rem ; color : var ( - - muted ) ; line-height : 1.5 ; }
2026-07-07 07:11:50 +00:00
/* Cities */
2026-07-05 06:41:32 +00:00
. cities-section { background : var ( - - navy ) ; color : var ( - - white ) ; }
. cities-section h2 { color : var ( - - white ) ; }
. cities-section . lead { color : rgba ( 255 , 255 , 255 , 0.75 ) ; }
. cities-grid {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 180 px , 1 fr ) ) ;
gap : 1.25 rem ;
}
. city-card {
background : rgba ( 255 , 255 , 255 , 0.06 ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.12 ) ;
border-radius : var ( - - radius ) ;
padding : 1.5 rem ;
transition : border-color 0.2 s , background 0.2 s ;
}
. city-card : hover {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
border-color : rgba ( 200 , 118 , 58 , 0.5 ) ;
}
. city-icon { font-size : 2 rem ; margin-bottom : 0.75 rem ; }
. city-name { font-size : 1.15 rem ; font-weight : 700 ; margin-bottom : 0.25 rem ; }
. city-missions { font-size : 0.8 rem ; color : rgba ( 255 , 255 , 255 , 0.75 ) ; }
. city-live-badge {
display : inline-block ;
background : rgba ( 45 , 122 , 79 , 0.3 ) ;
border : 1 px solid rgba ( 45 , 122 , 79 , 0.6 ) ;
color : #6ECFA0 ;
font-size : 0.68 rem ;
font-weight : 700 ;
padding : 0.15 rem 0.5 rem ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - sm ) ;
2026-07-05 06:41:32 +00:00
margin-top : 0.5 rem ;
text-transform : uppercase ;
letter-spacing : 0.06 em ;
}
2026-07-07 07:11:50 +00:00
/* Features */
2026-07-05 06:41:32 +00:00
. features-grid {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 280 px , 1 fr ) ) ;
gap : 1.5 rem ;
}
. feature-card {
background : var ( - - white ) ;
border : 1 px solid var ( - - border ) ;
border-radius : var ( - - radius ) ;
padding : 1.75 rem ;
}
. feature-icon {
width : 44 px ; height : 44 px ;
background : rgba ( 200 , 118 , 58 , 0.1 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
display : flex ;
align-items : center ;
justify-content : center ;
font-size : 1.4 rem ;
margin-bottom : 1 rem ;
}
. feature-card h3 { font-size : 1 rem ; font-weight : 700 ; margin-bottom : 0.5 rem ; color : var ( - - navy ) ; }
. feature-card p { font-size : 0.9 rem ; color : var ( - - muted ) ; line-height : 1.5 ; }
. feature-badge {
display : inline-flex ;
align-items : center ;
gap : 0.3 rem ;
background : rgba ( 45 , 122 , 79 , 0.08 ) ;
border : 1 px solid rgba ( 45 , 122 , 79 , 0.3 ) ;
color : var ( - - green ) ;
font-size : 0.72 rem ;
font-weight : 600 ;
padding : 0.2 rem 0.6 rem ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - sm ) ;
2026-07-05 06:41:32 +00:00
margin-top : 0.75 rem ;
}
2026-07-07 07:11:50 +00:00
/* DAC7 + Skatt */
2026-07-05 06:41:32 +00:00
. compliance-section { background : #F4F2EE ; }
. compliance-grid {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 2 rem ;
align-items : start ;
}
@ media ( max-width : 700px ) { . compliance-grid { grid-template-columns : 1 fr ; } }
. compliance-box {
background : var ( - - white ) ;
border : 1 px solid var ( - - border ) ;
border-radius : var ( - - radius ) ;
padding : 2 rem ;
}
. compliance-box h3 { font-size : 1.05 rem ; font-weight : 700 ; color : var ( - - navy ) ; margin-bottom : 1 rem ; }
. compliance-list { list-style : none ; }
. compliance-list li {
display : flex ;
align-items : flex-start ;
gap : 0.6 rem ;
font-size : 0.9 rem ;
color : var ( - - muted ) ;
padding : 0.5 rem 0 ;
border-bottom : 1 px solid var ( - - border ) ;
}
. compliance-list li : last-child { border-bottom : none ; }
. compliance-list . check { color : var ( - - green ) ; font-weight : 700 ; flex-shrink : 0 ; }
2026-07-07 07:11:50 +00:00
/* Earnings calculator */
2026-07-05 06:41:32 +00:00
. calculator-section { background : var ( - - white ) ; }
. calc-box {
background : var ( - - cream ) ;
border : 1 px solid var ( - - border ) ;
border-radius : var ( - - radius ) ;
padding : 2 rem ;
max-width : 560 px ;
}
. calc-row {
display : flex ;
align-items : center ;
justify-content : space-between ;
margin-bottom : 1 rem ;
}
. calc-row label { font-size : 0.9 rem ; font-weight : 600 ; color : var ( - - navy ) ; }
. calc-row input [ type = "range" ] { width : 200 px ; accent-color : var ( - - amber ) ; }
. calc-value { font-weight : 700 ; color : var ( - - amber ) ; min-width : 80 px ; text-align : right ; }
. calc-result {
background : var ( - - navy ) ;
color : var ( - - white ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
padding : 1.25 rem 1.5 rem ;
margin-top : 1.5 rem ;
display : flex ;
justify-content : space-between ;
align-items : center ;
}
. calc-result . amount { font-size : 1.8 rem ; font-weight : 900 ; }
. calc-result . sub { font-size : 0.8 rem ; color : rgba ( 255 , 255 , 255 , 0.75 ) ; }
2026-07-07 07:11:50 +00:00
/* Registration / CTA */
2026-07-05 06:41:32 +00:00
. cta-section {
background : var ( - - navy ) ;
color : var ( - - white ) ;
text-align : center ;
padding : 5 rem 2 rem ;
}
. cta-section h2 { color : var ( - - white ) ; margin-bottom : 1 rem ; }
. cta-section p { color : rgba ( 255 , 255 , 255 , 0.75 ) ; max-width : 520 px ; margin : 0 auto 2.5 rem ; font-size : 1.05 rem ; }
. signup-form {
display : flex ;
gap : 0.75 rem ;
max-width : 480 px ;
margin : 0 auto 1.5 rem ;
flex-wrap : wrap ;
justify-content : center ;
}
. signup-form input {
flex : 1 ;
min-width : 200 px ;
padding : 0.85 rem 1.1 rem ;
border : 1.5 px solid rgba ( 255 , 255 , 255 , 0.2 ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
background : rgba ( 255 , 255 , 255 , 0.08 ) ;
color : var ( - - white ) ;
font-size : 0.95 rem ;
outline : none ;
transition : border-color 0.2 s ;
}
. signup-form input :: placeholder { color : rgba ( 255 , 255 , 255 , 0.75 ) ; }
. signup-form input : focus { border-color : var ( - - amber ) ; }
. waitlist-count {
font-size : 0.85 rem ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
margin-top : 0.5 rem ;
}
. waitlist-count strong { color : rgba ( 255 , 255 , 255 , 0.8 ) ; }
. success-msg {
display : none ;
background : rgba ( 45 , 122 , 79 , 0.2 ) ;
border : 1 px solid rgba ( 45 , 122 , 79 , 0.5 ) ;
color : #6ECFA0 ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
padding : 1 rem 1.5 rem ;
max-width : 480 px ;
margin : 1 rem auto 0 ;
font-size : 0.95 rem ;
}
2026-07-07 07:11:50 +00:00
/* Footer */
2026-07-05 06:41:32 +00:00
footer {
background : #000D22 ;
color : rgba ( 255 , 255 , 255 , 0.75 ) ;
padding : 2 rem ;
text-align : center ;
font-size : 0.82 rem ;
}
footer a { color : rgba ( 255 , 255 , 255 , 0.75 ) ; text-decoration : none ; margin : 0 0.75 rem ; }
footer a : hover { color : var ( - - white ) ; }
. footer-logo {
font-size : 1.1 rem ;
font-weight : 800 ;
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
margin-bottom : 0.75 rem ;
letter-spacing : -0.01 em ;
}
. footer-logo span { color : var ( - - amber ) ; }
2026-07-07 07:11:50 +00:00
/* Responsive */
2026-07-05 06:41:32 +00:00
@ media ( max-width : 640px ) {
. nav-links { display : none ; }
. hero { padding : 3 rem 1.5 rem 3 rem ; }
. countdown-container { gap : 1 rem ; }
}
2026-07-14 15:27:33 +00:00
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
}
2026-07-05 06:41:32 +00:00
< / style >
< style id = "wcag-contrast-enforcement" >
/* AAMOS GLOBAL CONTRAST ENFORCEMENT — WCAG AA (4.5:1 minimum) */
/* Regel: Ingen text under 70% opacity. Aldrig. */
body { -webkit- font-smoothing : antialiased ; -moz- osx-font-smoothing : grayscale ; }
/* Fix common low-contrast patterns */
[ style * = "rgba(60,60,67,0.4)" ] { color : rgba ( 60 , 60 , 67 , 0.65 ) !important ; }
[ style * = "rgba(60,60,67,0.3)" ] { color : rgba ( 60 , 60 , 67 , 0.65 ) !important ; }
[ style * = "rgba(255,255,255,0.4)" ] { color : rgba ( 255 , 255 , 255 , 0.72 ) !important ; }
[ style * = "rgba(255,255,255,0.3)" ] { color : rgba ( 255 , 255 , 255 , 0.72 ) !important ; }
[ style * = "opacity: 0.4" ] { opacity : 0.72 !important ; }
[ style * = "opacity: 0.3" ] { opacity : 0.72 !important ; }
2026-07-14 15:27:33 +00:00
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
}
2026-07-05 06:41:32 +00:00
< / style >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "quiXzoom Sverige — Launch 1 augusti 2026" >
< meta property = "og:description" content = "quiXzoom lanseras i Sverige 1 aug 2026. Bli zoomer, ta uppdrag och tjäna pengar per godkänt uppdrag. Fotografera infrastruktur och stadsmiljöer." >
< meta property = "og:url" content = "https://www.quixzoom.com/sweden-launch.html" >
< meta property = "og:image" content = "https://www.quixzoom.com/images/sweden-launch.jpg" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< meta property = "og:image:alt" content = "quiXzoom Sweden launch Stockholm August 2026" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:image" content = "https://www.quixzoom.com/images/sweden-launch.jpg" >
< meta name = "twitter:title" content = "quiXzoom Sverige — Launch 1 augusti 2026" >
2026-07-14 09:58:53 +00:00
< script type = "module" src = "https://auth.quixzoom.com/site-auth-snippet.js" > < / script >
2026-07-05 06:41:32 +00:00
< / head >
< body >
2026-07-07 07:11:50 +00:00
<!-- Nav -->
2026-07-14 15:27:33 +00:00
< nav class = "qz-nav" >
2026-07-05 06:41:32 +00:00
< div class = "nav-logo" > qui< span > X< / span > zoom< / div >
< div class = "nav-links" >
< a href = "#how-it-works" > Hur det fungerar< / a >
< a href = "#cities" > Städer< / a >
< a href = "#earnings" > Förtjänst< / a >
< a href = "#compliance" > Skatt & DAC7< / a >
< / div >
< a href = "#register" class = "nav-cta" > Bli Zoomer< / a >
< / nav >
2026-07-07 07:11:50 +00:00
<!-- Hero -->
2026-07-14 15:27:33 +00:00
< header class = "qz-nav" class = "hero" >
2026-07-05 06:41:32 +00:00
< div class = "launch-badge" >
< span class = "dot" > < / span >
Sverige-launch — 1 augusti 2026
< / div >
< h1 > Ta < span > foto- och videouppdrag< / span > < br > nära dig i Sverige< / h1 >
< p class = "subtitle" >
quiXzoom kopplar kreativa proffs med företag som behöver bilder, film och drönarvideo — utbetalning direkt via Stripe.
< / p >
< div class = "hero-actions" >
< a href = "#register" class = "btn-primary" > Registrera dig som Zoomer< / a >
< a href = "#how-it-works" class = "btn-outline" > Hur det fungerar< / a >
< / div >
< / header >
2026-07-07 07:11:50 +00:00
<!-- Countdown -->
2026-07-05 06:41:32 +00:00
< div class = "countdown-section" >
< div class = "countdown-container" id = "countdown" >
< div class = "countdown-unit" >
< span class = "countdown-value" id = "cd-days" > 24< / span >
< span class = "countdown-label" > Dagar< / span >
< / div >
< div class = "countdown-divider" > :< / div >
< div class = "countdown-unit" >
< span class = "countdown-value" id = "cd-hours" > 00< / span >
< span class = "countdown-label" > Timmar< / span >
< / div >
< div class = "countdown-divider" > :< / div >
< div class = "countdown-unit" >
< span class = "countdown-value" id = "cd-minutes" > 00< / span >
< span class = "countdown-label" > Minuter< / span >
< / div >
< div class = "countdown-divider" > :< / div >
< div class = "countdown-unit" >
< span class = "countdown-value" id = "cd-seconds" > 00< / span >
< span class = "countdown-label" > Sekunder< / span >
< / div >
< / div >
< / div >
2026-07-07 07:11:50 +00:00
<!-- Stats strip -->
2026-07-05 06:41:32 +00:00
< div class = "stats-strip" >
< div class = "stats-grid" >
< div >
< div class = "stat-value" > 5< / div >
< div class = "stat-label" > Städer vid launch< / div >
< / div >
< div >
< div class = "stat-value" id = "waitlist-stat" > 482< / div >
< div class = "stat-label" > Zoomers i kö< / div >
< / div >
< div >
< div class = "stat-value" > 85 %< / div >
< div class = "stat-label" > Av uppdragsersättningen till dig< / div >
< / div >
< div >
< div class = "stat-value" > Stripe< / div >
< div class = "stat-label" > Direktutbetalning i SEK< / div >
< / div >
< div >
< div class = "stat-value" > DAC7< / div >
< div class = "stat-label" > EU-kompatibel skattehantering< / div >
< / div >
< / div >
< / div >
2026-07-07 07:11:50 +00:00
<!-- How it works -->
2026-07-05 06:41:32 +00:00
< section id = "how-it-works" style = "background: var(--cream);" >
< div class = "container" >
< div class = "section-tag" > Hur det fungerar< / div >
< h2 > Från anmälan till utbetalning< br > på tre steg< / h2 >
< p class = "lead" > quiXzoom är byggt för svenska kreativa proffs — snabb onboarding, transparenta priser och Stripe Connect-utbetalning direkt efter godkänd leverans.< / p >
< div class = "steps-grid" >
< div class = "step-card" >
< div class = "step-number" > 1< / div >
< h3 > Registrera dig som Zoomer< / h3 >
< p > Ladda upp foto-ID och selfie för verifiering. KYC-granskning tar under 24 timmar.< / p >
< / div >
< div class = "step-card" >
< div class = "step-number" > 2< / div >
< h3 > Acceptera uppdrag nära dig< / h3 >
< p > Bläddra bland foto-, video- och drönare-uppdrag på kartan. Filtrera på stad, typ och ersättning.< / p >
< / div >
< div class = "step-card" >
< div class = "step-number" > 3< / div >
< h3 > Leverera & få betalt via Stripe< / h3 >
< p > Ladda upp media, kunden godkänner — 85 % av uppdragsersättningen betalas ut direkt till ditt Stripe-nummer.< / p >
< / div >
< div class = "step-card" >
< div class = "step-number" > 4< / div >
< h3 > quiXzoom sköter skatten< / h3 >
< p > Vi hanterar DAC7-rapportering till Skatteverket och skickar dig ett skatteunderlag varje år.< / p >
< / div >
< / div >
< / div >
< / section >
2026-07-07 07:11:50 +00:00
<!-- Cities -->
2026-07-05 06:41:32 +00:00
< section id = "cities" class = "cities-section" >
< div class = "container" >
< div class = "section-tag" style = "color: rgba(200,118,58,0.9);" > Sverige-launch< / div >
< h2 > Fem städer från dag ett< / h2 >
< p class = "lead" > quiXzoom öppnar i Sveriges fem största städer den 1 augusti 2026 — med fler städer planerade under H2.< / p >
< div class = "cities-grid" >
< div class = "city-card" >
2026-07-07 07:11:50 +00:00
< div class = "city-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "city-name" > Stockholm< / div >
< div class = "city-missions" > 89 aktiva zoomers • 312 uppdrag< / div >
2026-07-07 07:11:50 +00:00
< div class = "city-live-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Live 15 jun< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "city-card" >
2026-07-07 07:11:50 +00:00
< div class = "city-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "city-name" > Göteborg< / div >
< div class = "city-missions" > 41 aktiva zoomers • 148 uppdrag< / div >
2026-07-07 07:11:50 +00:00
< div class = "city-live-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Live 15 jun< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "city-card" >
2026-07-07 07:11:50 +00:00
< div class = "city-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "city-name" > Malmö< / div >
< div class = "city-missions" > 28 aktiva zoomers • 97 uppdrag< / div >
2026-07-07 07:11:50 +00:00
< div class = "city-live-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Live 15 jun< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "city-card" >
2026-07-07 07:11:50 +00:00
< div class = "city-icon" > < / div >
2026-07-05 06:41:32 +00:00
< div class = "city-name" > Uppsala< / div >
< div class = "city-missions" > 15 aktiva zoomers • 54 uppdrag< / div >
2026-07-07 07:11:50 +00:00
< div class = "city-live-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Live 15 jun< / div >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "city-card" >
2026-07-07 07:11:50 +00:00
< div class = "city-icon" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < circle cx = "8" cy = "8" r = "3" stroke = "#666" stroke-width = "1.5" / > < path d = "M8 2V4M8 12V14M2 8H4M12 8H14M4.3 4.3L5.7 5.7M10.3 10.3L11.7 11.7M4.3 11.7L5.7 10.3M10.3 5.7L11.7 4.3" stroke = "#666" stroke-width = "1.5" stroke-linecap = "round" / > < / svg > < / div >
2026-07-05 06:41:32 +00:00
< div class = "city-name" > Västerås< / div >
< div class = "city-missions" > 9 aktiva zoomers • 31 uppdrag< / div >
2026-07-07 07:11:50 +00:00
< div class = "city-live-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Live 15 jun< / div >
2026-07-05 06:41:32 +00:00
< / div >
< / div >
< / div >
< / section >
2026-07-07 07:11:50 +00:00
<!-- Features -->
2026-07-05 06:41:32 +00:00
< section style = "background: var(--cream);" >
< div class = "container" >
< div class = "section-tag" > Plattformen< / div >
< h2 > Byggt för svenska kreativa< / h2 >
< p class = "lead" > Allt du behöver för att driva din fotografi- eller videoverksamhet via quiXzoom — utan mellanhänder.< / p >
< div class = "features-grid" >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Stripe Connect-utbetalning< / h3 >
< p > Pengarna är hos dig inom minuter efter att kunden godkänt leveransen. Inga banköverföringar som tar dagar.< / p >
2026-07-07 07:11:50 +00:00
< span class = "feature-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Direktbetalning i SEK< / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Uppdrag på kartan< / h3 >
< p > Realtidskarta visar öppna uppdrag i din stad. Filtrera på typ, ersättning och tidpunkt.< / p >
2026-07-07 07:11:50 +00:00
< span class = "feature-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Livekarta med WebSocket< / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > AI-matchning< / h3 >
< p > Vi matchar dig med uppdrag baserat på din utrustning, rating och plats — maximala möjligheter, minimalt letande.< / p >
2026-07-07 07:11:50 +00:00
< span class = "feature-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Automatisk matching< / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Personnummer-KYC< / h3 >
< p > Säker identitetsverifiering via Skatteverket SPAR. Krävs för alla svenska zoomers — skyddar både dig och kunden.< / p >
2026-07-07 07:11:50 +00:00
< span class = "feature-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > SPAR-integrerat< / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Skatteunderlag & DAC7< / h3 >
< p > quiXzoom sköter automatisk DAC7-rapportering till Skatteverket. Du får ett klart årsunderlag för din deklaration.< / p >
2026-07-07 07:11:50 +00:00
< span class = "feature-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > EU Direktiv 2021/514< / span >
2026-07-05 06:41:32 +00:00
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Rating & badges< / h3 >
< p > Bygg ditt rykte med omdömen och badges — Topp-zoomer, HD-expert, Drönarpilot. Högre rating = fler uppdrag.< / p >
2026-07-07 07:11:50 +00:00
< span class = "feature-badge" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > Viktad 30-dagarsrating< / span >
2026-07-05 06:41:32 +00:00
< / div >
< / div >
< / div >
< / section >
2026-07-07 07:11:50 +00:00
<!-- Earnings calculator -->
2026-07-05 06:41:32 +00:00
< section id = "earnings" class = "calculator-section" >
< div class = "container" >
< div class = "section-tag" > Förtjänst< / div >
< h2 > Beräkna din månadsinkomst< / h2 >
< p class = "lead" > De flesta zoomers tar 8– < / p >
< div class = "calc-box" >
< div class = "calc-row" >
< label > Uppdrag per månad< / label >
< input type = "range" id = "missions-slider" min = "1" max = "40" value = "12" oninput = "updateCalc()" / >
< span class = "calc-value" id = "missions-val" > 12< / span >
< / div >
< div class = "calc-row" >
< label > Genomsnittlig ersättning< / label >
< input type = "range" id = "rate-slider" min = "1000" max = "10000" step = "500" value = "3500" oninput = "updateCalc()" / >
< span class = "calc-value" id = "rate-val" > 3 500 kr< / span >
< / div >
< div class = "calc-result" >
< div >
< div style = "font-size:0.8rem;opacity:0.6;margin-bottom:0.25rem" > Månadsförtjänst (85 %)< / div >
< div class = "amount" id = "monthly-result" > 35 700 kr< / div >
< / div >
< div style = "text-align:right" >
< div class = "sub" > Per uppdrag< / div >
< div style = "font-size:1.2rem;font-weight:700" id = "per-mission" > 2 975 kr< / div >
< / div >
< / div >
< div class = "stripe-note" >
< span class = "stripe-logo" > Stripe< / span >
Utbetalas direkt via Stripe Connect efter godkänd leverans
< / div >
< / div >
< / div >
< / section >
2026-07-07 07:11:50 +00:00
<!-- DAC7 & Compliance -->
2026-07-05 06:41:32 +00:00
< section id = "compliance" class = "compliance-section" >
< div class = "container" >
< div class = "section-tag" > Skatt & Efterlevnad< / div >
< h2 > Transparent skattehantering< / h2 >
< p class = "lead" > quiXzoom är godkänd digital plattform enligt EU:s DAC7-direktiv. Vi rapporterar till Skatteverket — du slipper jobbet.< / p >
< div class = "compliance-grid" >
< div class = "compliance-box" >
< h3 > DAC7 — EU Direktiv 2021/514< / h3 >
< ul class = "compliance-list" >
2026-07-07 07:11:50 +00:00
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Automatisk rapportering av zoomer-inkomster till Skatteverket< / li >
2026-07-14 09:58:53 +00:00
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Rapporteringströskel: >30 uppdrag ELLER >2 000 USD per år< / li >
2026-07-07 07:11:50 +00:00
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Personnummer-verifiering via Skatteverket SPAR< / li >
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Årsrapport skickas senast 31 januari varje år< / li >
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Du får en kopia som skatteunderlag< / li >
2026-07-05 06:41:32 +00:00
< / ul >
< / div >
< div class = "compliance-box" >
< h3 > Stripe Connect-utbetalningar< / h3 >
< ul class = "compliance-list" >
2026-07-07 07:11:50 +00:00
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Stripe Connect — säker utbetalning< / li >
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Kräver svenska mobilnummer (07X XXXXXXXX)< / li >
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Utbetalning i SEK — inga valutaomräkningar< / li >
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Minimibelopp: 100 SEK per utbetalning< / li >
< li > < span class = "check" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M3 8L6.5 11.5L13 4.5" stroke = "#22c55e" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg > < / span > Transaktionslogg tillgänglig i appen< / li >
2026-07-05 06:41:32 +00:00
< / ul >
< / div >
< / div >
< / div >
< / section >
2026-07-07 07:11:50 +00:00
<!-- Registration CTA -->
2026-07-05 06:41:32 +00:00
< section id = "register" class = "cta-section" >
< div class = "container" >
< div class = "section-tag" style = "color:rgba(200,118,58,0.9)" > Sverige-launch 1 augusti 2026< / div >
< h2 > Registrera dig som Zoomer idag< / h2 >
< p > Gå med i de hundratals kreativa proffs som redan är i kö. Launch-zoomers får prioritets-matching och exklusiv launch-badge.< / p >
< form class = "signup-form" id = "waitlist-form" onsubmit = "submitWaitlist(event)" >
< input type = "text" id = "wl-name" placeholder = "Ditt namn" required autocomplete = "name" / >
2026-07-12 12:41:35 +00:00
< input type = "tel" id = "wl-phone" placeholder = "Telefonnummer" required autocomplete = "phone" inputmode = "tel" / >
< button type = "submit" class = "btn-primary" id = "wl-btn" > Anmäl mig< / button >
2026-07-05 06:41:32 +00:00
< / form >
< div class = "waitlist-count" >
< strong id = "waitlist-display" > 482< / strong > zoomers i kö — bli nummer < strong id = "waitlist-next" > 483< / strong >
< / div >
< div class = "success-msg" id = "success-msg" >
2026-07-07 07:11:50 +00:00
Välkommen i kön! Vi hör av oss senast 1 augusti med dina inloggningsuppgifter och instruktioner för KYC.
2026-07-05 06:41:32 +00:00
< / div >
< / div >
< / section >
2026-07-07 07:11:50 +00:00
<!-- Footer -->
2026-07-14 15:27:33 +00:00
< footer class = "qz-footer" >
2026-07-05 06:41:32 +00:00
< div class = "footer-logo" > qui< span > X< / span > zoom Sverige< / div >
< div style = "margin-bottom:0.75rem" >
< a href = "/terms/" > Användarvillkor< / a >
< a href = "/privacy/" > Integritetspolicy< / a >
< a href = "/support" > Support< / a >
< a href = "/dac7-reporting.html" > DAC7-rapportering< / a >
< / div >
< div > quiXzoom • Sverige • launch@quixzoom.se< / div >
< div style = "margin-top:0.5rem" > © 2026 quiXzoom • Sverige-launch 1 augusti 2026< / div >
< / footer >
< script >
2026-07-07 07:11:50 +00:00
// Countdown till 1 augusti 2026
2026-07-05 06:41:32 +00:00
const LAUNCH = new Date ( '2026-06-15T08:00:00+02:00' ) . getTime ( ) ;
function updateCountdown ( ) {
const now = Date . now ( ) ;
const diff = Math . max ( 0 , LAUNCH - now ) ;
const d = Math . floor ( diff / 86400000 ) ;
const h = Math . floor ( ( diff % 86400000 ) / 3600000 ) ;
const m = Math . floor ( ( diff % 3600000 ) / 60000 ) ;
const s = Math . floor ( ( diff % 60000 ) / 1000 ) ;
document . getElementById ( 'cd-days' ) . textContent = String ( d ) . padStart ( 2 , '0' ) ;
document . getElementById ( 'cd-hours' ) . textContent = String ( h ) . padStart ( 2 , '0' ) ;
document . getElementById ( 'cd-minutes' ) . textContent = String ( m ) . padStart ( 2 , '0' ) ;
document . getElementById ( 'cd-seconds' ) . textContent = String ( s ) . padStart ( 2 , '0' ) ;
}
updateCountdown ( ) ;
setInterval ( updateCountdown , 1000 ) ;
2026-07-07 07:11:50 +00:00
// Earnings calculator
2026-07-05 06:41:32 +00:00
function updateCalc ( ) {
const missions = parseInt ( document . getElementById ( 'missions-slider' ) . value , 10 ) ;
const rate = parseInt ( document . getElementById ( 'rate-slider' ) . value , 10 ) ;
const gross = missions * rate ;
const net = Math . round ( gross * 0.85 ) ;
const perMission = Math . round ( rate * 0.85 ) ;
document . getElementById ( 'missions-val' ) . textContent = missions ;
document . getElementById ( 'rate-val' ) . textContent = rate . toLocaleString ( 'sv-SE' ) + ' kr' ;
document . getElementById ( 'monthly-result' ) . textContent = net . toLocaleString ( 'sv-SE' ) + ' kr' ;
document . getElementById ( 'per-mission' ) . textContent = perMission . toLocaleString ( 'sv-SE' ) + ' kr' ;
}
updateCalc ( ) ;
2026-07-07 07:11:50 +00:00
// Waitlist
2026-07-05 06:41:32 +00:00
let waitlistCount = 482 ;
async function loadWaitlist ( ) {
try {
const r = await fetch ( 'https://api.quixzoom.com/api/qz/waitlist/count' ) ;
if ( r . ok ) {
const d = await r . json ( ) ;
if ( d . count ) {
waitlistCount = d . count ;
document . getElementById ( 'waitlist-stat' ) . textContent = waitlistCount ;
document . getElementById ( 'waitlist-display' ) . textContent = waitlistCount ;
document . getElementById ( 'waitlist-next' ) . textContent = waitlistCount + 1 ;
}
}
} catch { }
}
loadWaitlist ( ) ;
2026-07-12 12:41:35 +00:00
// Load saved phone
document . addEventListener ( 'DOMContentLoaded' , function ( ) {
const savedPhone = localStorage . getItem ( 'qx_phone' ) ;
if ( savedPhone ) {
document . getElementById ( 'wl-phone' ) . value = savedPhone ;
}
} ) ;
async function submitWaitlist ( e ) {
2026-07-05 06:41:32 +00:00
e . preventDefault ( ) ;
const name = document . getElementById ( 'wl-name' ) . value . trim ( ) ;
const phone = document . getElementById ( 'wl-phone' ) . value . trim ( ) ;
2026-07-12 12:41:35 +00:00
const btn = document . getElementById ( 'wl-btn' ) ;
2026-07-05 06:41:32 +00:00
if ( ! name || ! phone ) return ;
2026-07-12 12:41:35 +00:00
// Save phone for next time
localStorage . setItem ( 'qx_phone' , phone ) ;
localStorage . setItem ( 'qx_name' , name ) ;
btn . disabled = true ;
btn . textContent = 'Skickar...' ;
2026-07-05 06:41:32 +00:00
waitlistCount ++ ;
document . getElementById ( 'waitlist-stat' ) . textContent = waitlistCount ;
document . getElementById ( 'waitlist-display' ) . textContent = waitlistCount ;
document . getElementById ( 'waitlist-next' ) . textContent = waitlistCount + 1 ;
document . getElementById ( 'waitlist-form' ) . style . display = 'none' ;
document . getElementById ( 'success-msg' ) . style . display = 'block' ;
2026-07-12 12:41:35 +00:00
// Send to backend + email
try {
await fetch ( 'https://api.quixzoom.com/api/qz/waitlist' , {
method : 'POST' ,
headers : { 'Content-Type' : 'application/json' } ,
body : JSON . stringify ( { name , phone , source : 'sweden-launch-page' , city : 'SE' , timestamp : new Date ( ) . toISOString ( ) } ) ,
} ) ;
} catch ( e ) {
// Fallback: email
const subject = ` Ny Zoomer-registrering: ${ name } ` ;
const body = ` Ny registrering från sweden-launch: \n \n Namn: ${ name } \n Telefon: ${ phone } \n Källa: sweden-launch.html \n Tid: ${ new Date ( ) . toLocaleString ( 'sv-SE' ) } ` ;
fetch ( ` mailto:hello@quixzoom.com?subject= ${ encodeURIComponent ( subject ) } &body= ${ encodeURIComponent ( body ) } ` ) . catch ( ( ) => { } ) ;
}
2026-07-05 06:41:32 +00:00
}
< / script >
< / body >
< / html >
