diff --git a/index.html b/index.html index b9cc9f6..242773d 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - zurich_kotak + Zurich Kotak | Sign in
diff --git a/public/brand/zurich_logo.webp b/public/brand/zurich_logo.webp new file mode 100644 index 0000000..6f5c27e Binary files /dev/null and b/public/brand/zurich_logo.webp differ diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index 6893eb1..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/fonts/ZurichSans-Light.otf b/public/fonts/ZurichSans-Light.otf new file mode 100644 index 0000000..89ba64c Binary files /dev/null and b/public/fonts/ZurichSans-Light.otf differ diff --git a/public/fonts/ZurichSans-Medium.otf b/public/fonts/ZurichSans-Medium.otf new file mode 100644 index 0000000..c66b90e Binary files /dev/null and b/public/fonts/ZurichSans-Medium.otf differ diff --git a/public/fonts/ZurichSans-Regular.otf b/public/fonts/ZurichSans-Regular.otf new file mode 100644 index 0000000..37c113e Binary files /dev/null and b/public/fonts/ZurichSans-Regular.otf differ diff --git a/public/icons.svg b/public/icons.svg deleted file mode 100644 index e952219..0000000 --- a/public/icons.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/App.css b/src/App.css deleted file mode 100644 index f90339d..0000000 --- a/src/App.css +++ /dev/null @@ -1,184 +0,0 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} diff --git a/src/App.jsx b/src/App.jsx index 174b3f1..2a81062 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,122 +1,5 @@ -import { useState } from 'react' -import heroImg from './assets/hero.png' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import './App.css' +import Login from './pages/Login.jsx' -function App() { - const [count, setCount] = useState(0) - - return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.jsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- - ) +export default function App() { + return } - -export default App diff --git a/src/assets/hero.png b/src/assets/hero.png deleted file mode 100644 index 02251f4..0000000 Binary files a/src/assets/hero.png and /dev/null differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg deleted file mode 100644 index 5101b67..0000000 --- a/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ -Vite diff --git a/src/index.css b/src/index.css index 2c84af0..f3b4073 100644 --- a/src/index.css +++ b/src/index.css @@ -1,111 +1,74 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } +/* ── Zurich Kotak brand typeface ───────────────────────────── */ +@font-face { + font-family: 'Zurich Sans'; + src: url('/fonts/ZurichSans-Light.otf') format('opentype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Zurich Sans'; + src: url('/fonts/ZurichSans-Regular.otf') format('opentype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Zurich Sans'; + src: url('/fonts/ZurichSans-Medium.otf') format('opentype'); + font-weight: 500; + font-style: normal; + font-display: swap; } -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } +:root { + /* Brand palette lifted from zurichkotak.com */ + --zk-blue: #2167ae; + --zk-blue-dark: #1a5490; + --zk-blue-deep: #1a528b; + --zk-navy: #23366f; + --zk-blue-mid: #5495cf; + --zk-blue-light: #91bfe3; + --zk-cyan: #c7ebf9; - #social .button-icon { - filter: invert(1) brightness(2); - } + --zk-ink: #2b2e31; + --zk-muted: #5d6162; + --zk-grey: #a6adaf; + --zk-line: #dde4e3; + --zk-line-soft: #eceeef; + --zk-tint: #f4f9fc; + --zk-tint-blue: #ebf3fb; + --zk-white: #fff; + --zk-danger: #d32f2f; + + --font-zurich: 'Zurich Sans', Arial, Helvetica, sans-serif; + + font-family: var(--font-zurich); + font-size: 16px; + line-height: 1.5; + color: var(--zk-ink); + background: var(--zk-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +* { + box-sizing: border-box; +} + +html, +body, +#root { + height: 100%; } body { margin: 0; } -#root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); +button, +input { + font: inherit; + color: inherit; } diff --git a/src/pages/Login.css b/src/pages/Login.css new file mode 100644 index 0000000..77c6ff7 --- /dev/null +++ b/src/pages/Login.css @@ -0,0 +1,324 @@ +.login { + display: grid; + grid-template-columns: 45% 55%; + min-height: 100%; +} + +/* ── Left brand panel ──────────────────────────────────────── */ +.login__brand { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px 48px; + overflow: hidden; + color: var(--zk-white); + background: + linear-gradient(160deg, var(--zk-navy) 0%, #1d4c86 55%, var(--zk-blue) 100%); +} + +.login__grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); + background-size: 44px 44px; + mask-image: radial-gradient(circle at 40% 45%, #000 0%, transparent 78%); +} + +.login__glow { + position: absolute; + inset: 0; + background: + radial-gradient( + 520px circle at 12% 12%, + rgba(84, 149, 207, 0.38), + transparent 62% + ), + radial-gradient( + 620px circle at 78% 96%, + rgba(199, 235, 249, 0.16), + transparent 60% + ); +} + +.login__logo { + position: relative; + z-index: 1; + width: 186px; + height: auto; + border-radius: 8px; +} + +.login__brand-body { + position: relative; + z-index: 1; + margin-top: auto; + margin-bottom: auto; + max-width: 480px; +} + +.login__badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border: 1px solid rgba(199, 235, 249, 0.34); + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + color: var(--zk-cyan); + font-size: 13px; + font-weight: 400; + letter-spacing: 0.01em; +} + +.login__badge svg { + width: 15px; + height: 15px; +} + +.login__headline { + /* Zurich Kotak set their hero in Zurich Sans Light */ + margin: 26px 0 0; + font-size: 44px; + font-weight: 300; + line-height: 1.16; + letter-spacing: -0.01em; +} + +.login__headline-accent { + display: block; + background: linear-gradient( + 92deg, + #a9dcf6 0%, + var(--zk-cyan) 55%, + #e9f8ff 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.login__lede { + margin: 16px 0 0; + max-width: 430px; + text-wrap: balance; + font-size: 16px; + font-weight: 300; + line-height: 1.5; + color: rgba(255, 255, 255, 0.8); +} + +.login__features { + margin: 36px 0 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 22px; +} + +.login__features li { + display: flex; + align-items: flex-start; + gap: 14px; +} + +.login__feature-icon { + display: grid; + place-items: center; + flex: none; + width: 34px; + height: 34px; + border: 1px solid rgba(199, 235, 249, 0.26); + border-radius: 9px; + background: rgba(255, 255, 255, 0.1); + color: var(--zk-cyan); +} + +.login__feature-icon svg { + width: 17px; + height: 17px; +} + +.login__features strong { + display: block; + font-size: 15px; + font-weight: 500; + letter-spacing: 0.005em; +} + +.login__features em { + display: block; + margin-top: 3px; + font-size: 14px; + font-style: normal; + font-weight: 300; + color: rgba(255, 255, 255, 0.74); +} + +/* ── Right form panel ──────────────────────────────────────── */ +.login__panel { + display: grid; + place-items: center; + padding: 40px 24px; + background: var(--zk-tint); +} + +.login__form-wrap { + width: 100%; + max-width: 360px; +} + +.login__logo--mobile { + display: none; + margin-bottom: 28px; +} + +.login__title { + margin: 0; + font-size: 30px; + font-weight: 500; + letter-spacing: -0.015em; + color: var(--zk-navy); +} + +.login__subtitle { + margin: 8px 0 0; + font-size: 14px; + font-weight: 300; + color: var(--zk-muted); +} + +.login__form { + margin-top: 30px; + display: flex; + flex-direction: column; + gap: 18px; +} + +.login__field span { + display: block; + margin-bottom: 7px; + font-size: 13px; + font-weight: 500; + color: var(--zk-ink); +} + +.login__field input { + width: 100%; + padding: 11px 14px; + border: 1px solid var(--zk-line); + border-radius: 8px; + background: var(--zk-white); + font-size: 14px; + font-weight: 400; + color: var(--zk-ink); + transition: + border-color 0.16s ease, + box-shadow 0.16s ease; +} + +.login__field input::placeholder { + color: var(--zk-grey); +} + +.login__field input:focus { + outline: none; + border-color: var(--zk-blue); + box-shadow: 0 0 0 3px rgba(33, 103, 174, 0.14); +} + +.login__error { + margin: -4px 0 0; + font-size: 13px; + color: var(--zk-danger); +} + +.login__submit { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + margin-top: 4px; + padding: 12px 18px; + border: 0; + border-radius: 8px; + background: var(--zk-blue); + color: var(--zk-white); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: + background 0.16s ease, + box-shadow 0.16s ease; +} + +.login__submit svg { + width: 16px; + height: 16px; +} + +.login__submit:hover:not(:disabled) { + background: var(--zk-blue-dark); +} + +.login__submit:focus-visible { + outline: none; + box-shadow: 0 0 0 3px rgba(33, 103, 174, 0.28); +} + +.login__submit:disabled { + opacity: 0.72; + cursor: default; +} + +.login__powered { + margin: 26px 0 0; + text-align: center; + font-size: 12px; + font-weight: 300; + color: var(--zk-grey); +} + +.login__powered span { + font-weight: 500; + letter-spacing: 0.06em; + color: #e8552f; + text-transform: uppercase; +} + +/* ── Responsive ────────────────────────────────────────────── */ +@media (max-width: 1024px) { + .login__brand { + padding: 32px; + } + + .login__headline { + font-size: 36px; + } + + .login__lede { + font-size: 15px; + } +} + +@media (max-width: 860px) { + .login { + grid-template-columns: 1fr; + } + + .login__brand { + display: none; + } + + .login__panel { + align-content: center; + background: var(--zk-white); + } + + .login__logo--mobile { + display: block; + } +} diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx new file mode 100644 index 0000000..03b1568 --- /dev/null +++ b/src/pages/Login.jsx @@ -0,0 +1,199 @@ +import { useState } from 'react' +import logo from '/brand/zurich_logo.webp' +import './Login.css' + +const FEATURES = [ + { + title: 'Instant policy issuance', + body: 'No inspection; hassle free policy', + icon: ( + <> + + + + + ), + }, + { + title: '24/7 claim assistance', + body: 'Making claims simple, transparent, and customer-first', + icon: ( + <> + + + + ), + }, + { + title: 'A trusted brand', + body: 'You can count on Zurich Kotak General Insurance at all times', + icon: ( + <> + + + + ), + }, +] + +export default function Login() { + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [error, setError] = useState('') + const [submitting, setSubmitting] = useState(false) + + async function handleSubmit(event) { + event.preventDefault() + setError('') + + if (!email.trim() || !password) { + setError('Enter your email and password to continue.') + return + } + + setSubmitting(true) + try { + // TODO: wire to the low-code backend auth endpoint + await new Promise((resolve) => setTimeout(resolve, 600)) + } catch { + setError('We could not sign you in. Please try again.') + } finally { + setSubmitting(false) + } + } + + return ( +
+
+
+ +
+
+ Zurich Kotak General Insurance + +

Sign in

+

+ Enter your credentials to access your dashboard. +

+ +
+ + + + + {error ? ( +

+ {error} +

+ ) : null} + + +
+ +

+ Powered by zino +

+
+
+
+ ) +}