From 5eb7672d4bf99d8c157cc43dd93b97d24d223558 Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:16:32 +0330
Subject: [PATCH] Import source: src/App

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/App.css | 184 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/App.tsx | 138 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 322 insertions(+)
 create mode 100644 src/App.css
 create mode 100644 src/App.tsx

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: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2" y="2" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/><rect x="12" y="2" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/><rect x="2" y="12" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/><rect x="12" y="12" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/></svg>,
+  },
+  {
+    key: 'preview', label: 'Preview',
+    icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.7"/><rect x="12" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.7"/><rect x="3" y="12" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.7"/><path d="M14 16h4M16 14v4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>,
+  },
+  {
+    key: 'style', label: 'Style',
+    icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="3.5" stroke="currentColor" strokeWidth="1.7"/><path d="M11 2v2M11 18v2M2 11h2M18 11h2M4.93 4.93l1.41 1.41M15.66 15.66l1.41 1.41M4.93 17.07l1.41-1.41M15.66 6.34l1.41-1.41" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>,
+  },
+];
+
+export default function App() {
+  const [mobileTab, setMobileTab] = useState<MobileTab>('preview');
+
+  return (
+    <ThemeProvider>
+      <ToastProvider>
+        <HistoryProvider>
+          <QRProvider>
+            <div className="flex flex-col w-screen overflow-hidden" style={{ height: '100dvh', background: 'var(--bg-page)' }}>
+              <Navbar />
+
+              {/* ── Desktop / Tablet landscape (≥1024px): 3 columns ── */}
+              <div className="hidden lg:flex flex-1 overflow-hidden">
+                <LeftPanel />
+                <CenterPanel />
+                <RightPanel />
+              </div>
+
+              {/* ── Tablet portrait (768px–1023px): left + center, right hidden ── */}
+              <div className="hidden md:flex lg:hidden flex-1 overflow-hidden">
+                <LeftPanel />
+                <CenterPanel />
+              </div>
+
+              {/* ── Mobile (<768px): single panel + bottom tab bar ── */}
+              <div className="flex md:hidden flex-1 overflow-hidden">
+                <div className="flex-1 overflow-hidden flex flex-col" style={{ display: mobileTab === 'types' ? 'flex' : 'none' }}>
+                  <LeftPanel />
+                </div>
+                <div className="flex-1 overflow-hidden flex flex-col" style={{ display: mobileTab === 'preview' ? 'flex' : 'none' }}>
+                  <CenterPanel />
+                </div>
+                <div className="flex-1 overflow-hidden flex flex-col" style={{ display: mobileTab === 'style' ? 'flex' : 'none' }}>
+                  <RightPanel />
+                </div>
+              </div>
+
+              {/* ── Mobile bottom tab bar ── */}
+              <nav
+                className="md:hidden flex-shrink-0 flex items-stretch relative"
+                style={{
+                  background: 'var(--bg-panel)',
+                  borderTop: '1px solid var(--border)',
+                  height: '60px',
+                  paddingBottom: 'env(safe-area-inset-bottom)',
+                }}
+              >
+                {TABS.map(tab => (
+                  <button
+                    key={tab.key}
+                    onClick={() => setMobileTab(tab.key)}
+                    className="flex-1 flex flex-col items-center justify-center gap-0.5 cursor-pointer relative transition-colors"
+                    style={{ border: 'none', background: 'transparent', color: mobileTab === tab.key ? '#7C6FE0' : 'var(--text-muted)' }}
+                  >
+                    {mobileTab === tab.key && (
+                      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 rounded-full" style={{ background: '#7C6FE0' }} />
+                    )}
+                    {tab.icon}
+                    <span className="text-[10px] font-semibold tracking-wide">{tab.label}</span>
+                  </button>
+                ))}
+              </nav>
+
+              {/* ── Tablet portrait: style panel button (floating) ── */}
+              <div className="hidden md:flex lg:hidden fixed bottom-6 right-6 z-30">
+                <StyleDrawer />
+              </div>
+            </div>
+          </QRProvider>
+        </HistoryProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+/* Floating style button for tablet portrait — opens right panel as a drawer */
+function StyleDrawer() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-14 h-14 rounded-full shadow-2xl flex items-center justify-center cursor-pointer transition-all"
+        style={{ background: '#7C6FE0', color: 'white', boxShadow: '0 8px 32px rgba(124,111,224,0.45)' }}
+        title="Style controls"
+      >
+        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+          <circle cx="11" cy="11" r="3.5" stroke="currentColor" strokeWidth="1.8"/>
+          <path d="M11 2v2M11 18v2M2 11h2M18 11h2M4.93 4.93l1.41 1.41M15.66 15.66l1.41 1.41M4.93 17.07l1.41-1.41M15.66 6.34l1.41-1.41" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+        </svg>
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-20" onClick={() => setOpen(false)} style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(2px)' }} />
+          <div
+            className="fixed right-0 top-0 bottom-0 z-30 overflow-y-auto shadow-2xl"
+            style={{ width: 'min(85vw, 430px)', background: 'var(--bg-panel)', borderLeft: '1px solid var(--border)' }}
+          >
+            <div className="flex items-center justify-between p-5 sticky top-0" style={{ background: 'var(--bg-panel)', borderBottom: '1px solid var(--border)' }}>
+              <span className="text-[17px] font-bold" style={{ color: 'var(--text-primary)' }}>Style your QR</span>
+              <button onClick={() => setOpen(false)} className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer" style={{ background: 'var(--bg-elevated)', color: 'var(--text-secondary)' }}>
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
+              </button>
+            </div>
+            <RightPanel embedded />
+          </div>
+        </>
+      )}
+    </>
+  );
+}