diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..f90339d --- /dev/null +++ b/src/App.css @@ -0,0 +1,184 @@ +.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.tsx b/src/App.tsx new file mode 100644 index 0000000..287a8d5 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,138 @@ +import { useState } from 'react'; +import { ThemeProvider } from './context/ThemeContext'; +import { QRProvider } from './context/QRContext'; +import { ToastProvider } from './context/ToastContext'; +import { HistoryProvider } from './context/HistoryContext'; +import { Navbar } from './components/Navbar/Navbar'; +import { LeftPanel } from './components/LeftPanel/LeftPanel'; +import { CenterPanel } from './components/CenterPanel/CenterPanel'; +import { RightPanel } from './components/RightPanel/RightPanel'; + +type MobileTab = 'types' | 'preview' | 'style'; + +const TABS: { key: MobileTab; label: string; icon: React.ReactNode }[] = [ + { + key: 'types', label: 'Type', + icon: , + }, + { + key: 'preview', label: 'Preview', + icon: , + }, + { + key: 'style', label: 'Style', + icon: , + }, +]; + +export default function App() { + const [mobileTab, setMobileTab] = useState('preview'); + + return ( + + + + +
+ + + {/* ── Desktop / Tablet landscape (≥1024px): 3 columns ── */} +
+ + + +
+ + {/* ── Tablet portrait (768px–1023px): left + center, right hidden ── */} +
+ + +
+ + {/* ── Mobile (<768px): single panel + bottom tab bar ── */} +
+
+ +
+
+ +
+
+ +
+
+ + {/* ── Mobile bottom tab bar ── */} + + + {/* ── Tablet portrait: style panel button (floating) ── */} +
+ +
+
+ + + + + ); +} + +/* Floating style button for tablet portrait — opens right panel as a drawer */ +function StyleDrawer() { + const [open, setOpen] = useState(false); + return ( + <> + + {open && ( + <> +
setOpen(false)} style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(2px)' }} /> +
+
+ Style your QR + +
+ +
+ + )} + + ); +}