feat: Add a new "Panduan Video & Demo" section with embedded video gu…

[igun997]

User description

…ides for brand, user, and promotional content.

---

PR Type

Enhancement

---

Description

• Add "Panduan Video & Demo" section with three embedded video guides

• Display brand, user, and promotional content in responsive grid layout

• Integrate Google Drive embedded videos with descriptive titles and captions

• Enhance guide page with styled video cards featuring hover effects

---

Diagram Walkthrough

flowchart LR
  A["Guide Page"] --> B["Video Guides Section"]
  B --> C["Brand Guide Video"]
  B --> D["User Guide Video"]
  B --> E["Promo Video"]
  C --> F["Google Drive Embed"]
  D --> F
  E --> F

Loading

File Walkthrough

Relevant files

Enhancement

page.tsx Add embedded video guides section                                                src/app/guide/page.tsx Added new "Panduan Video & Demo" section with three embedded video cards Implemented responsive grid layout using Tailwind CSS (md:grid-cols-3) Embedded three Google Drive videos for brand guide, user guide, and promotional content Styled video cards with white background, borders, shadows, and hover effects +65/-0

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Unsandboxed iframe Description: The embedded Google Drive iframe allows autoplay without sandboxing or restrictive referrer policy, which can enable clickjacking or unwanted media playback; consider adding a restrictive sandbox attribute (e.g., sandbox="allow-same-origin allow-scripts") and removing autoplay unless strictly necessary. page.tsx [272-278] Referred Code <iframe src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe>
	Unsandboxed iframe Description: The second embedded Google Drive iframe also lacks a sandbox attribute and permits autoplay, posing the same risks of untrusted third-party content execution and clickjacking; apply a restrictive sandbox and review autoplay necessity. page.tsx [290-297] Referred Code <div className="aspect-video w-full"> <iframe src="https://drive.google.com/file/d/1oiwzyHwcDb3uheOlNR39MxU70m8W_4fk/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe>
	Unsandboxed iframe Description: The third Google Drive iframe is embedded without sandboxing and with autoplay enabled, risking clickjacking or drive-by playback; enforce sandbox restrictions and remove autoplay unless required. page.tsx [309-316] Referred Code <div className="aspect-video w-full"> <iframe src="https://drive.google.com/file/d/198CZpnlVNKhhGPpcbb7HhqIwQRDN773h/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe>
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No audit logging: The added UI embeds videos and performs no critical actions; there are no new loggable security-relevant events introduced, but if video loads or interactions are considered critical, no logging exists. Referred Code {/* Video Guides */} <div className="mt-12"> <h2 className="text-2xl font-bold text-[#0C2340] mb-6 text-center"> Panduan Video & Demo </h2> <div className="grid md:grid-cols-3 gap-6"> {/* Brand Guide */} <div className="bg-white rounded-xl border border-[#2B4C7E]/20 overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> <div className="aspect-video w-full"> <iframe src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe> </div> <div className="p-4"> <h3 className="font-bold text-[#0C2340] mb-1">Panduan Brand</h3> <p className="text-sm text-[#606060]"> Cara mendaftarkan brand dan produk baru ... (clipped 43 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing error handling: The embedded iframes lack fallback UI or error handling for failed loads, blocked embeds, or autoplay restrictions, which may degrade UX without context. Referred Code <div className="bg-white rounded-xl border border-[#2B4C7E]/20 overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> <div className="aspect-video w-full"> <iframe src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe> </div> <div className="p-4"> <h3 className="font-bold text-[#0C2340] mb-1">Panduan Brand</h3> <p className="text-sm text-[#606060]"> Cara mendaftarkan brand dan produk baru </p> </div> </div> {/* User Guide */} <div className="bg-white rounded-xl border border-[#2B4C7E]/20 overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> <div className="aspect-video w-full"> ... (clipped 36 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Iframe security attrs: The new iframes omit security-related attributes like sandbox and referrerPolicy, increasing risk if third-party content is compromised. Referred Code <div className="aspect-video w-full"> <iframe src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe> </div> <div className="p-4"> <h3 className="font-bold text-[#0C2340] mb-1">Panduan Brand</h3> <p className="text-sm text-[#606060]"> Cara mendaftarkan brand dan produk baru </p> </div> </div> {/* User Guide */} <div className="bg-white rounded-xl border border-[#2B4C7E]/20 overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> <div className="aspect-video w-full"> <iframe ... (clipped 26 lines) Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Use a dedicated video hosting platform Replace Google Drive video embeds with a dedicated video hosting service like YouTube or Vimeo. This change will improve performance, reliability, and scalability, preventing videos from becoming unavailable due to bandwidth limits. Examples: src/app/guide/page.tsx [272-278] <iframe src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe> Solution Walkthrough: Before: <div className="grid md:grid-cols-3 gap-6"> {/* Brand Guide */} <div className="bg-white ..."> <div className="aspect-video w-full"> <iframe src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" width="640" height="480" allow="autoplay" className="w-full h-full" ></iframe> </div> ... </div> ... </div> After: <div className="grid md:grid-cols-3 gap-6"> {/* Brand Guide */} <div className="bg-white ..."> <div className="aspect-video w-full"> <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="w-full h-full" ></iframe> </div> ... </div> ... </div> Suggestion importance[1-10]: 9 __ Why: This suggestion addresses a critical architectural flaw; using Google Drive for public video streaming is unreliable and can lead to broken functionality under moderate traffic, severely impacting user experience.	High
General	Improve iframe accessibility and performance Update the iframe attributes to improve accessibility, performance, and user experience by adding a title and loading="lazy", replacing allow="autoplay" with allowFullScreen, and removing redundant width and height attributes. src/app/guide/page.tsx [272-278] <iframe + title="Panduan Brand" src="https://drive.google.com/file/d/1NTmgPtg-h_UGtChLVu01q7WRqsUhllBB/preview" - width="640" - height="480" - allow="autoplay" + allowFullScreen + loading="lazy" className="w-full h-full" ></iframe> Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies multiple improvements for the iframe element, enhancing accessibility with a title, performance with loading="lazy", and user experience by replacing autoplay with allowFullScreen.	Medium
More