2nd version

audi-red-note-mini-app2/src/App.tsx

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChevronLeft, MoreHorizontal, X } from 'lucide-react';
+import { motion } from 'motion/react';
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-white font-sans text-[#1a1a1a] flex flex-col max-w-md mx-auto relative overflow-hidden shadow-2xl">
+      {/* Status Bar */}
+      <div className="px-8 pt-4 pb-2 flex justify-between items-center text-sm font-semibold">
+        <span>9:41</span>
+        <div className="flex items-center gap-1.5">
+          <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current">
+            <path d="M12 21l-12-18h24z" />
+          </svg>
+          <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current">
+            <path d="M12 2L1 21h22L12 2z" />
+          </svg>
+          <div className="w-6 h-3 border border-current rounded-sm relative">
+            <div className="absolute inset-0.5 bg-current rounded-px w-3"></div>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation Bar */}
+      <header className="px-4 py-2 flex items-center justify-between sticky top-0 bg-white z-10">
+        <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+          <ChevronLeft className="w-6 h-6" />
+        </button>
+        <h1 className="text-[17px] font-medium">A7L详情</h1>
+        <div className="flex items-center bg-gray-50 border border-gray-200 rounded-full px-3 py-1.5 gap-3">
+          <MoreHorizontal className="w-5 h-5 text-gray-600" />
+          <div className="w-px h-4 bg-gray-300"></div>
+          <X className="w-5 h-5 text-gray-600" />
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-y-auto pb-32">
+        {/* Hero Title */}
+        <section className="pt-8 pb-6 text-center">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-[32px] font-bold tracking-tight mb-2"
+          >
+            先锋设计
+          </motion.h2>
+          <div className="w-12 h-[3px] bg-[#d51c2a] mx-auto"></div>
+        </section>
+
+        {/* Feature Sections */}
+        <div className="space-y-4 px-0">
+          {/* Feature 1 */}
+          <motion.section 
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden"
+          >
+            <div className="aspect-[16/9] relative overflow-hidden">
+              <img 
+                src="https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=1000" 
+                alt="Audi A7L Front"
+                className="w-full h-full object-cover mix-blend-multiply"
+                referrerPolicy="no-referrer"
+              />
+            </div>
+            <div className="px-6 py-6">
+              <h3 className="text-[22px] font-normal text-gray-700">RS竞速套件</h3>
+              <div className="mt-6 border-b border-dotted border-gray-300 w-full"></div>
+            </div>
+          </motion.section>
+
+          {/* Feature 2 */}
+          <motion.section 
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden"
+          >
+            <div className="aspect-[16/9] relative overflow-hidden">
+              <img 
+                src="https://images.unsplash.com/photo-1603584173870-7f3ca99a4741?auto=format&fit=crop&q=80&w=1000" 
+                alt="Audi A7L Side"
+                className="w-full h-full object-cover mix-blend-multiply"
+                referrerPolicy="no-referrer"
+              />
+            </div>
+            <div className="px-6 py-6">
+              <h3 className="text-[22px] font-normal text-gray-700">宽体低趴 超长轴距</h3>
+              <div className="mt-6 border-b border-dotted border-gray-300 w-full"></div>
+              
+              {/* Specs Preview */}
+              <div className="mt-4 flex justify-between text-sm text-gray-500 font-medium">
+                <span>长</span>
+                <span>宽</span>
+              </div>
+            </div>
+          </motion.section>
+        </div>
+      </main>
+
+      {/* Footer Action */}
+      <footer className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/80 backdrop-blur-md px-4 pt-2 pb-8 border-t border-gray-100">
+        <button className="w-full bg-[#1c1f23] text-white py-4 rounded-md text-[16px] font-medium active:scale-[0.98] transition-transform">
+          预约体验
+        </button>
+        {/* Home Indicator */}
+        <div className="mt-6 w-32 h-1.5 bg-black/80 mx-auto rounded-full"></div>
+      </footer>
+    </div>
+  );
+}

audi-red-note-mini-app2/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

audi-red-note-mini-app2/src/main.tsx

@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);