From d10682f8af78d49f08c7c7334b9d71e3d84dfd08 Mon Sep 17 00:00:00 2001 From: Indra Gunanda Date: Fri, 5 Dec 2025 21:20:35 +0700 Subject: [PATCH] Remove RocketJourney component and GSAP dependencies, refine Features section content and styling, and update route documentation. --- CLAUDE.md | 2 + package.json | 2 - src/app/page.tsx | 7 - src/components/landing/Features.tsx | 290 +++-------- src/components/landing/RocketJourney.tsx | 607 ----------------------- 5 files changed, 72 insertions(+), 836 deletions(-) delete mode 100644 src/components/landing/RocketJourney.tsx diff --git a/CLAUDE.md b/CLAUDE.md index 301c329..8d8663c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -105,11 +105,13 @@ Server actions are organized in `src/lib/actions/`: - `/` - Public landing page - `/login` - Login page (redirects to /manage if authenticated) +- `/register` - User registration page - `/scan` - QR code scanner for tag verification - `/verify/[code]` - Tag verification page with product details - `/explorer` - Blockchain transaction explorer - `/explorer/tx/[hash]` - Transaction detail page - `/support` - Web3 support tickets (NFT holders connect wallet to submit issues) +- `/faqs` - Frequently asked questions page - `/docs` - Swagger API documentation UI **API Routes:** diff --git a/package.json b/package.json index 0c8186a..d901037 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "@aws-sdk/s3-request-presigner": "^3.705.0", "@fingerprintjs/fingerprintjs": "^5.0.1", "@google/genai": "^1.30.0", - "@gsap/react": "^2.1.2", "@prisma/client": "^6.1.0", "@radix-ui/react-avatar": "^1.1.11", "@radix-ui/react-checkbox": "^1.3.3", @@ -51,7 +50,6 @@ "clsx": "^2.1.1", "ethers": "^6.13.4", "framer-motion": "^12.23.25", - "gsap": "^3.13.0", "html5-qrcode": "^2.3.8", "lucide-react": "^0.555.0", "mapbox-gl": "^3.16.0", diff --git a/src/app/page.tsx b/src/app/page.tsx index 57a2ee9..be24b12 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,7 +3,6 @@ import { motion } from 'framer-motion'; import { Navbar } from '@/components/landing/Navbar'; import { Hero } from '@/components/landing/Hero'; -import { RocketJourney } from '@/components/landing/RocketJourney'; import { Features } from '@/components/landing/Features'; import { Industries } from '@/components/landing/Industries'; import { FAQ } from '@/components/landing/FAQ'; @@ -45,12 +44,6 @@ export default function Home() { - - {/* Rocket Journey Section */} -
- -
- diff --git a/src/components/landing/Features.tsx b/src/components/landing/Features.tsx index ae5c282..915a17c 100644 --- a/src/components/landing/Features.tsx +++ b/src/components/landing/Features.tsx @@ -2,26 +2,16 @@ import Image from 'next/image'; import { motion } from 'framer-motion'; -import { - CheckCircle2, - ChevronRight, - Lock, - Smartphone, - Zap, - Gem, - HeadphonesIcon, -} from 'lucide-react'; -import Link from 'next/link'; -import { Button } from '@/components/ui/button'; +import { CheckCircle2, Lock, Smartphone, Zap } from 'lucide-react'; const MotionDiv = motion.div; export function Features() { return ( -
- {/* Feature 1 */} +
+ {/* Feature 1 - Analytics */}
-
+
-
-
+
+
Real-time Analytics Dashboard -
+
Wawasan Real-time
-

+

Keputusan berbasis data untuk rantai pasokan Anda.

-

+

Dapatkan visibilitas di mana produk Anda dipindai. Deteksi - aktivitas pasar gelap dan hotspot pemalsuan potensial secara - real-time dengan dashboard canggih kami. + aktivitas mencurigakan secara real-time.

-
    - {[ - 'Pelacakan scan geospasial', - 'Peringatan upaya pemalsuan', - 'Metrik kecepatan rantai pasokan', - ].map((item, i) => ( - - - {item} - - ))} +
      + {['Pelacakan scan geospasial', 'Peringatan upaya pemalsuan'].map( + (item, i) => ( + + + {item} + + ) + )}
- {/* Feature 2 */} + {/* Feature 2 - Scanning */}
-
+
-
+
- Pengalaman Mulus + Tanpa Aplikasi
-

- Tanpa aplikasi. Cukup arahkan dan scan. +

+ Cukup arahkan dan scan.

-

- Hilangkan hambatan dalam proses verifikasi. Scanner berbasis web - kami bekerja langsung di browser, memastikan tingkat adopsi yang - tinggi di kalangan pelanggan Anda. +

+ Scanner berbasis web kami bekerja langsung di browser, memastikan + tingkat adopsi yang tinggi tanpa hambatan.

- +
    + {['Verifikasi instan', 'Tanpa download'].map((item, i) => ( + + + {item} + + ))} +
-
-
+
+
Mobile QR Code Scanning
- {/* Feature 3 */} + {/* Feature 3 - Blockchain Security */}
-
+
-
-
+
+
Blockchain Security -
+
- Keamanan Tingkat Bank + Keamanan Blockchain
-

- Catatan permanen di Blockchain. +

+ Catatan permanen dan anti-rusak.

-

- Setiap tag produk dicetak sebagai aset digital di distributed - ledger. Ini menciptakan catatan provenance yang permanen dan - anti-rusak yang tidak dapat dipalsukan. +

+ Setiap tag produk dicetak sebagai aset digital di blockchain, + menciptakan catatan provenance yang tidak dapat dipalsukan.

-
+
99.9%
Uptime
-
+
<1dtk
- Waktu Verifikasi + Verifikasi
- - {/* Feature 4 - NFT Collectible */} -
-
- -
- - NFT Collectible -
-

- Koleksi digital eksklusif untuk pemilik pertama. -

-

- Pemilik pertama produk otentik mendapatkan NFT Collectible unik - yang di-generate khusus untuk Anda. Bukti kepemilikan digital yang - dapat dipamerkan dan diperdagangkan di blockchain. -

-
    - {[ - 'Artwork unik dari bukti kepemilikan digital Anda', - 'Mint gratis untuk pemilik pertama', - 'Tercatat permanen di Base blockchain', - ].map((item, i) => ( - - - {item} - - ))} -
- - - -
-
-
- NFT Collectible -
-
- -
-
- - {/* Feature 5 - Web3 Support */} -
-
- -
-
-
- Web3 Support Tickets -
-
- - -
- - Web3 Support -
-

- Dukungan langsung dengan wallet Anda. -

-

- Pemilik NFT dapat mengajukan komplain langsung ke brand melalui - koneksi wallet. Sistem otomatis mendeteksi produk yang Anda miliki - dan mengarahkan tiket ke brand terkait. -

-
    - {[ - 'Login dengan wallet, tanpa password', - 'Deteksi otomatis produk dari NFT', - 'Tiket langsung ke dashboard brand', - ].map((item, i) => ( - - - {item} - - ))} -
- - -
-
); } diff --git a/src/components/landing/RocketJourney.tsx b/src/components/landing/RocketJourney.tsx deleted file mode 100644 index b5d003d..0000000 --- a/src/components/landing/RocketJourney.tsx +++ /dev/null @@ -1,607 +0,0 @@ -'use client'; - -import { useRef, useEffect, useState } from 'react'; -import { gsap } from 'gsap'; -import { ScrollTrigger } from 'gsap/ScrollTrigger'; -import { - CheckCircle2, - QrCode, - Link2, - Truck, - Scan, - ShieldCheck, - Gem, - HeadphonesIcon, - Rocket, - Moon, - Star, - Sparkles, -} from 'lucide-react'; - -// Pre-generate star positions to avoid Math.random during render -const STAR_POSITIONS = Array.from({ length: 40 }, (_, i) => ({ - id: i, - left: (i * 17 + 13) % 100, // Deterministic pseudo-random distribution - top: (i * 23 + 7) % 100, - size: 4 + ((i * 7) % 10), -})); - -// Register GSAP plugins -if (typeof window !== 'undefined') { - gsap.registerPlugin(ScrollTrigger); -} - -const steps = [ - { - id: 0, - title: 'Pembuatan Tag', - description: 'Tag QR Code dibuat dengan ID unik untuk setiap produk', - icon: QrCode, - detail: 'Setiap tag memiliki kode unik yang tidak dapat diduplikasi', - }, - { - id: 1, - title: 'Stamping Blockchain', - description: 'Data tag dicatat ke blockchain Base Sepolia', - icon: Link2, - detail: 'Hash: 0x7a8f...3d2e | Block: #12,345,678', - }, - { - id: 2, - title: 'Distribusi Produk', - description: 'Tag dipasang pada produk dan didistribusikan', - icon: Truck, - detail: 'Tracking real-time lokasi dan status distribusi', - }, - { - id: 3, - title: 'Scan Konsumen', - description: 'Konsumen melakukan scan QR code via browser', - icon: Scan, - detail: 'Tanpa aplikasi, langsung verifikasi keaslian', - }, - { - id: 4, - title: 'Verifikasi Sukses', - description: 'Sistem memverifikasi keaslian produk dari blockchain', - icon: ShieldCheck, - detail: 'Status: ✓ Produk Asli & Terjamin', - }, - { - id: 5, - title: 'Klaim NFT Collectible', - description: 'Pemilik pertama mendapatkan NFT unik dari AI', - icon: Gem, - detail: 'Artwork eksklusif di-mint ke wallet Anda', - }, - { - id: 6, - title: 'Web3 Support', - description: 'Ajukan komplain langsung ke brand via wallet', - icon: HeadphonesIcon, - detail: 'Tiket otomatis diarahkan ke brand terkait', - }, -]; - -export function RocketJourney() { - const containerRef = useRef(null); - const rocketRef = useRef(null); - const progressLineRef = useRef(null); - const moonRef = useRef(null); - const stepsRef = useRef<(HTMLDivElement | null)[]>([]); - const checkmarksRef = useRef<(HTMLDivElement | null)[]>([]); - const [activeStep, setActiveStep] = useState(-1); - - useEffect(() => { - if (typeof window === 'undefined') return; - - const ctx = gsap.context(() => { - // Rocket path animation - if (rocketRef.current && containerRef.current) { - // Create the rocket flight path - gsap.set(rocketRef.current, { - y: '100vh', - x: '0%', - rotation: -30, - scale: 0.5, - opacity: 0, - }); - - // Rocket entrance and flight - const rocketTl = gsap.timeline({ - scrollTrigger: { - trigger: containerRef.current, - start: 'top 80%', - end: 'bottom 20%', - scrub: 1.5, - onUpdate: (self) => { - // Calculate which step we're at based on progress - const progress = self.progress; - const stepIndex = Math.floor(progress * steps.length); - if (stepIndex !== activeStep && stepIndex < steps.length) { - setActiveStep(stepIndex); - } - }, - }, - }); - - // Rocket animation along curved path - rocketTl - .to(rocketRef.current, { - opacity: 1, - scale: 1, - duration: 0.1, - }) - .to( - rocketRef.current, - { - y: '-120vh', - rotation: -15, - duration: 1, - ease: 'none', - }, - 0 - ) - .to( - rocketRef.current, - { - x: '50vw', - duration: 0.5, - ease: 'power1.inOut', - yoyo: true, - repeat: 1, - }, - 0 - ) - .to( - rocketRef.current, - { - scale: 0.6, - duration: 0.3, - }, - 0.7 - ); - } - - // Progress line animation - if (progressLineRef.current) { - gsap.fromTo( - progressLineRef.current, - { scaleY: 0 }, - { - scaleY: 1, - ease: 'none', - scrollTrigger: { - trigger: containerRef.current, - start: 'top 60%', - end: 'bottom 40%', - scrub: true, - }, - } - ); - } - - // Animate each step - stepsRef.current.forEach((step, index) => { - if (!step) return; - - // Step card animation - gsap.fromTo( - step, - { - opacity: 0, - x: index % 2 === 0 ? -100 : 100, - scale: 0.8, - }, - { - opacity: 1, - x: 0, - scale: 1, - duration: 0.8, - ease: 'power2.out', - scrollTrigger: { - trigger: step, - start: 'top 80%', - end: 'top 50%', - scrub: 1, - }, - } - ); - - // Checkmark animation - const checkmark = checkmarksRef.current[index]; - if (checkmark) { - gsap.fromTo( - checkmark, - { scale: 0, rotation: -180 }, - { - scale: 1, - rotation: 0, - duration: 0.5, - ease: 'back.out(1.7)', - scrollTrigger: { - trigger: step, - start: 'top 60%', - toggleActions: 'play none none reverse', - }, - } - ); - } - }); - - // Moon animation - if (moonRef.current) { - gsap.fromTo( - moonRef.current, - { - scale: 0.5, - opacity: 0, - y: 50, - }, - { - scale: 1, - opacity: 1, - y: 0, - duration: 1, - ease: 'power2.out', - scrollTrigger: { - trigger: moonRef.current, - start: 'top 90%', - end: 'top 50%', - scrub: true, - }, - } - ); - - // Moon glow pulse - gsap.to(moonRef.current.querySelector('.moon-glow'), { - scale: 1.3, - opacity: 0.8, - duration: 2, - ease: 'power1.inOut', - repeat: -1, - yoyo: true, - }); - } - - // Floating stars animation - gsap.utils.toArray('.floating-star').forEach((star, i) => { - gsap.to(star, { - y: -30 - Math.random() * 20, - opacity: 0.3 + Math.random() * 0.7, - duration: 2 + Math.random() * 2, - ease: 'power1.inOut', - repeat: -1, - yoyo: true, - delay: i * 0.2, - }); - }); - }, containerRef); - - return () => ctx.revert(); - }, [activeStep]); - - return ( -
- {/* Starfield Background */} -
- {STAR_POSITIONS.map((star) => ( -
- -
- ))} -
- - {/* Gradient overlay */} -
- - {/* Header */} -
-
- - - Perjalanan Interaktif - -
-

- Bagaimana Etags Bekerja -

-

- Scroll untuk mengikuti perjalanan roket dari pembuatan tag hingga - verifikasi sukses -

- - {/* Progress indicator */} -
- {steps.map((_, index) => ( -
- ))} -
-
- - {/* Rocket */} -
-
- {/* Rocket trail */} -
-
- {[...Array(8)].map((_, i) => ( -
- ))} -
-
- - {/* Rocket body */} -
-
-
- -
-
- - {/* Particle effects */} -
- {[...Array(5)].map((_, i) => ( -
- ))} -
-
-
- - {/* Journey Path - Vertical Timeline */} -
- {/* Vertical Line */} -
-
-
-
- - {/* Steps */} -
- {steps.map((step, index) => { - const Icon = step.icon; - const isLeft = index % 2 === 0; - const isActive = index <= activeStep; - - return ( -
{ - stepsRef.current[index] = el; - }} - className={`relative flex items-center ${ - isLeft ? 'md:flex-row' : 'md:flex-row-reverse' - } flex-col md:gap-12`} - > - {/* Content Card */} -
-
- {/* Glow effect when active */} - {isActive && ( -
- )} - -
-
- -
-
- - Langkah {index + 1} - -

- {step.title} -

-
-
- -

- {step.description} -

- -
-

- {step.detail} -

-
-
-
- - {/* Center Checkpoint */} -
-
-
{ - checkmarksRef.current[index] = el; - }} - className={`transition-all duration-500 ${ - isActive ? 'opacity-100' : 'opacity-0' - }`} - > - -
- {!isActive && ( -
-
-
- )} -
- - {/* Step number */} -
- {index + 1} -
-
- - {/* Empty space for alternating layout */} -
-
- ); - })} -
-
- - {/* Moon Destination */} -
-
-
- {/* Moon glow */} -
- - {/* Moon */} -
- - - {/* Moon craters */} -
-
-
-
- - {/* Success badge */} - {activeStep >= steps.length - 1 && ( -
- - Terverifikasi! -
- )} -
-
- -

- Misi Selesai! 🎉 -

-

- Produk Anda telah terverifikasi dengan aman di blockchain -

- - {/* Final stats */} -
-
-
100%
-
Aman
-
-
-
7
-
Langkah
-
-
-
∞
-
Permanen
-
-
-
-
- - {/* Scroll hint (shows only at start) */} - {activeStep < 0 && ( -
-
- Scroll ke bawah - - - -
-
- )} -
- ); -}