Chuloo

<template>
<div>
  <p class="text-center text-4xl text-gray-900 font-bold mt-8 pt-8">
   E-commerce product image zoom lens in Nuxtjs
  </p>
</div>
</template>

<script>

Chuloo

<template>
  <div class="comment">
    <div class="comment__flex">
      <p>I found this article helpful</p>
      <div class="comment__flex-btn">
        <button class="update">Update</button>
        <button class="del">Delete</button>
      </div>
    </div>

Chuloo

<template>
  <div class="container">
    <Blog />
  </div>
</template>

<script>
import Blog from '@/components/Blog.vue';

export default {

Chuloo

<template>
  <section class="section">
    <div class="section__details">
      <div class="section__details-info">
        <h1>{{ title }}</h1>
        <div class="section__details-img">
          <img
            src="https://res.cloudinary.com/terieyenike/image/upload/v1644896156/vvasmj6onychxlkkynua.png"
            alt="anime character"
          />

Chuloo

const Home = () => {
  const media_urls = [
    {
      id: 1,
      title: 'Video One',
      video_url:
        'https://res.cloudinary.com/chris101/video/upload/v1645684691/video_1.mp4',
    },
    {

Chuloo

import Head from "next/head";
import React, { useState } from "react";
import { MemoizedVideoPlayer } from "../component/video-player";
import styles from "../styles/Home.module.css";

const Home = () => {
  const [startTime, setStartTime] = useState(1633538276355);
  const [controls, setControls] = useState(true);
  const [ended, setEnded] = useState(false);
  const [duration, setDuration] = useState(null);

Chuloo

import router from "next/router";

export default function Checkout() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
      }}
    >

Chuloo

import React, { useState } from "react";
import { Helmet } from "react-helmet";
import TransformVideo from "../components/video";

const App = () => {
  const [videoPublicId, setVideoPublicId] = useState("");
  const [alt, setAlt] = useState("");
  const [audioPublicId, setAudioPublicId] = useState("");
  const [textValue, setTextValue] = useState(" ");
  const [color, setColor] = useState("green");

Chuloo

const data = [
  {
    id: "forest_bike",
    name: "Forest Bike",
    imageUrl:
      "https://res.cloudinary.com/dwbggi96z/image/upload/v1622914696/0efbcdf473436391b6a5a731a000fadc_rs6z0z.jpg",
    price: "$400",
  },
  {

Chuloo

var sea_turtle = {
  shoppable: {
    showPostPlayOverlay: true,
    transformation: {
      crop: "pad",
      aspect_ratio: "1",
    },
    products: [
      {
        productId: 1,