Skip to content

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

Merged
igun997 merged 1 commit into
developfrom
feature/optimize-landing
Dec 7, 2025
Merged

feat: Add a new "Panduan Video & Demo" section with embedded video gu…#43
igun997 merged 1 commit into
developfrom
feature/optimize-landing

Conversation

@igun997

@igun997 igun997 commented Dec 7, 2025

Copy link
Copy Markdown
Contributor

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   

…ides for brand, user, and promotional content.
@igun997 igun997 merged commit abc84ca into develop Dec 7, 2025
3 checks passed
@qodo-code-review

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor

PR Code Suggestions ✨

Explore these optional code suggestions:

CategorySuggestion                                                                                                                                    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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant