add delete acount & change icon

2026-05-19 10:27:26 +07:00
parent b4b2db3583
commit bdb8700199
10 changed files with 135 additions and 24 deletions
@@ -22,7 +22,6 @@
    <meta name="twitter:description" content="Transform your identity in 40 days with AI-powered habits, journaling, and personal growth tracking." />

    <!-- App Links -->
-    <meta name="apple-itunes-app" content="app-id=YOUR_APP_ID" />
    <meta name="google-play-app" content="app-id=com.nova40.app" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -33,23 +33,7 @@ export default function Download() {
              Download Nova40 for free and start your 40-day identity transformation journey today.
            </p>

-            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-              {/* App Store */}
-              <a
-                href="https://apps.apple.com/app/nova40/id0000000000"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 bg-white/5 hover:bg-white/10 border border-nova-border hover:border-nova-primary/50 rounded-2xl transition-all group hover:scale-105 hover:shadow-lg hover:shadow-nova-primary/10"
-              >
-                <svg className="w-9 h-9 text-white" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
-                </svg>
-                <div className="text-left">
-                  <p className="text-[10px] text-nova-textSecondary leading-tight">Download on the</p>
-                  <p className="text-white font-bold text-lg leading-tight">App Store</p>
-                </div>
-              </a>
-
+            <div className="flex justify-center">
              {/* Google Play */}
              <a
                href="https://play.google.com/store/apps/details?id=com.nova40.app"
@@ -38,6 +38,7 @@ export default function Footer() {
            <ul className="space-y-2.5">
              <li><Link to="/privacy-policy" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Privacy Policy</Link></li>
              <li><Link to="/terms-conditions" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Terms & Conditions</Link></li>
+              <li><Link to="/delete-account" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Delete Account</Link></li>
            </ul>
          </div>

@@ -180,8 +180,8 @@ export default function Hero() {

                  {/* Nova40 Icon */}
                  <div className="relative mb-4">
-                    <Nova40Icon size={64} rounded={false} />
-                    <div className="absolute -inset-2 bg-nova-primary/20 rounded-full blur-xl -z-10" />
+                    <Nova40Icon size={96} rounded />
+                    <div className="absolute -inset-3 bg-nova-primary/20 rounded-2xl blur-xl -z-10" />
                  </div>

                  <p className="text-white text-sm font-bold mb-0.5">Day 17 of 40</p>
@@ -34,6 +34,7 @@ export default function LegalLayout({ title, updated, children }) {
          <div className="flex gap-4">
            <Link to="/privacy-policy" className="text-nova-textMuted hover:text-nova-textSecondary text-sm transition-colors">Privacy Policy</Link>
            <Link to="/terms-conditions" className="text-nova-textMuted hover:text-nova-textSecondary text-sm transition-colors">Terms & Conditions</Link>
+            <Link to="/delete-account" className="text-nova-textMuted hover:text-nova-textSecondary text-sm transition-colors">Delete Account</Link>
          </div>
        </div>
      </footer>
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Nova40IconAnimated } from './Nova40Icon'
 import useReveal from '../hooks/useReveal'

 const quotes = [
@@ -53,9 +52,11 @@ export default function Testimonial() {
          ))}
        </div>

-        {/* Center icon */}
-        <div className="flex justify-center mt-12 reveal">
-          <Nova40IconAnimated size={48} />
+        {/* Section divider */}
+        <div className="flex items-center justify-center gap-4 mt-16 reveal">
+          <div className="w-16 h-px bg-gradient-to-r from-transparent to-nova-primary/40" />
+          <div className="w-2 h-2 rounded-full bg-nova-primary/50" />
+          <div className="w-16 h-px bg-gradient-to-l from-transparent to-nova-primary/40" />
        </div>
      </div>
    </section>
@@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import App from './App'
 import PrivacyPolicy from './pages/PrivacyPolicy'
 import TermsConditions from './pages/TermsConditions'
+import DeleteAccount from './pages/DeleteAccount'
 import './index.css'

 ReactDOM.createRoot(document.getElementById('root')).render(
@@ -13,6 +14,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
        <Route path="/" element={<App />} />
        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
        <Route path="/terms-conditions" element={<TermsConditions />} />
+        <Route path="/delete-account" element={<DeleteAccount />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
@@ -0,0 +1,123 @@
+import React, { useState } from 'react'
+import LegalLayout from '../components/LegalLayout'
+
+export default function DeleteAccount() {
+  const [email, setEmail] = useState('')
+  const [reason, setReason] = useState('')
+  const [confirm, setConfirm] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (!email || !confirm) return
+    setSubmitted(true)
+  }
+
+  return (
+    <LegalLayout title="Delete Account" updated="April 29, 2026">
+      <div className="max-w-lg">
+        <div className="glass-card p-6 sm:p-8 mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-2xl">⚠️</span>
+            <h2 className="text-white font-bold text-lg">Before you proceed</h2>
+          </div>
+          <p className="text-nova-textSecondary text-sm leading-relaxed mb-4">
+            Deleting your account will <span className="text-nova-error font-semibold">permanently remove</span> all your data, including:
+          </p>
+          <ul className="space-y-2 mb-4">
+            {[
+              'Your account and login credentials',
+              'All identity journeys and habit data',
+              'Daily logs, mood tracking, and journal entries',
+              'AI-generated reflections and transformation stories',
+              'Progress statistics and game scores',
+              'Profile information (nickname, avatar)',
+            ].map((item, i) => (
+              <li key={i} className="flex gap-2 text-sm">
+                <span className="text-nova-error mt-0.5">•</span>
+                <span className="text-nova-textSecondary">{item}</span>
+              </li>
+            ))}
+          </ul>
+          <p className="text-nova-textMuted text-xs">
+            This action cannot be undone. If you only want to start over, consider using the "Reset Journey" option inside the app instead.
+          </p>
+        </div>
+
+        {!submitted ? (
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="email" className="block text-white text-sm font-semibold mb-2">
+                Account email address
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="your@email.com"
+                className="w-full px-4 py-3 bg-nova-surface border border-nova-border rounded-xl text-white text-sm placeholder:text-nova-textMuted focus:outline-none focus:border-nova-primary transition-colors"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="reason" className="block text-white text-sm font-semibold mb-2">
+                Why are you leaving? <span className="text-nova-textMuted font-normal">(optional)</span>
+              </label>
+              <textarea
+                id="reason"
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                placeholder="Help us improve Nova40..."
+                rows={3}
+                className="w-full px-4 py-3 bg-nova-surface border border-nova-border rounded-xl text-white text-sm placeholder:text-nova-textMuted focus:outline-none focus:border-nova-primary transition-colors resize-none"
+              />
+            </div>
+
+            <label className="flex items-start gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={confirm}
+                onChange={(e) => setConfirm(e.target.checked)}
+                className="mt-1 w-4 h-4 rounded accent-nova-error"
+              />
+              <span className="text-nova-textSecondary text-sm leading-relaxed">
+                I understand that all my data will be <span className="text-nova-error font-medium">permanently deleted</span> and this action cannot be undone.
+              </span>
+            </label>
+
+            <button
+              type="submit"
+              disabled={!email || !confirm}
+              className="w-full py-3.5 bg-nova-error/90 hover:bg-nova-error disabled:opacity-30 disabled:cursor-not-allowed rounded-xl text-white font-semibold text-sm transition-all"
+            >
+              Delete My Account
+            </button>
+          </form>
+        ) : (
+          <div className="glass-card p-8 text-center">
+            <span className="text-4xl block mb-4">✅</span>
+            <h3 className="text-white font-bold text-lg mb-2">Request submitted</h3>
+            <p className="text-nova-textSecondary text-sm leading-relaxed mb-4">
+              We've received your account deletion request for <span className="text-white font-medium">{email}</span>. Your account and all associated data will be deleted within 48 hours.
+            </p>
+            <p className="text-nova-textMuted text-xs">
+              You can also delete your account instantly from the app: Profile → Delete Account.
+            </p>
+          </div>
+        )}
+
+        <div className="mt-8 p-4 border border-nova-border rounded-xl">
+          <p className="text-nova-textSecondary text-xs leading-relaxed">
+            <span className="text-white font-semibold">Prefer to do it from the app?</span> Open Nova40 → Profile → scroll down → tap "Delete Account". This will instantly delete all your data.
+          </p>
+        </div>
+
+        <p className="text-nova-textMuted text-xs mt-6">
+          Questions? Contact us at <a href="mailto:support@nova40.app" className="text-nova-primary hover:text-nova-primaryLight transition-colors">support@nova40.app</a>
+        </p>
+      </div>
+    </LegalLayout>
+  )
+}