[V0_FILE]typescriptreact:file="components/hero-section.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/hero-section-piDU2.tsx" isMerged="true" "use client" export function HeroSection() { return (

Embed Power BI.
In minutes.

A hands-on learning tool that turns Power BI Playground embed codes into live, interactive reports—right in your browser.

No backend required

Instant preview

Educational resource

{/* */}

) } [V0_FILE]typescriptreact:file="components/step-guide.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/step-guide-1uXxE.tsx" isMerged="true" "use client" import { useState } from "react" import { EmbedCodeForm } from "./embed-code-form" interface StepGuideProps { onStepsComplete: (complete: boolean) => void onEmbedCodeChange: (code: string) => void } export function StepGuide({ onStepsComplete, onEmbedCodeChange }: StepGuideProps) { const [currentStep, setCurrentStep] = useState(0) const steps = [ { number: 1, title: "Visit Power BI Playground", description: "Go to the Power BI Embedded Demo to get started.", action: ( Open Embedded Demo → ), }, { number: 2, title: "Select a Report", description: "Choose from the sample report or select your own from your Power BI tenant if logged in.", details: (

• Sample report: Available without authentication

• Your own report: Requires Power BI login

), }, { number: 3, title: "Copy Embed Code", description: "Click 'Get Embed Code' and copy the entire iframe snippet.", details: (

{""}</p> </div> ), }, { number: 4, title: "Paste & Preview", description: "Paste your embed code in the form below to see it rendered live.", }, ] return ( <div className="space-y-5"> {/* Steps */} <div className="space-y-4"> {steps.map((step, index) => ( <div key={index} className="space-y-2"> {/* Step Header */} <div className="flex gap-3"> <div className={`flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center font-semibold text-xs transition ${ currentStep >= index ? "bg-primary text-primary-foreground" : "bg-border/40 text-muted-foreground" }`} > {step.number} </div> <div className="flex-1"> <h3 className="font-semibold text-foreground text-xs">{step.title}</h3> <p className="text-xs text-muted-foreground mt-0.5">{step.description}</p> </div> </div> {/* Step Details */} {step.details && <div className="ml-10">{step.details}</div>} {/* Step Action */} {step.action && <div className="ml-10">{step.action}</div>} </div> ))} </div> {/* Divider */} <div className="h-px bg-border/40" /> {/* Form Section */} <EmbedCodeForm onEmbedCodeChange={onEmbedCodeChange} compact={true} /> {/* Resources */} <div className="space-y-2 pt-3 border-t border-border/40"> <h4 className="font-semibold text-foreground text-xs">LEARN MORE</h4> <div className="space-y-1"> <a href="https://playground.powerbi.com/en-us/learning-center" target="_blank" rel="noopener noreferrer" className="flex items-center text-xs text-primary hover:text-primary/80 transition font-medium" > → Learning Center </a> <a href="https://learn.microsoft.com/en-us/power-bi/developer/embedded/embedding" target="_blank" rel="noopener noreferrer" className="flex items-center text-xs text-primary hover:text-primary/80 transition font-medium" > → Power BI Documentation </a> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/embed-code-form.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/embed-code-form-420Hl.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { ExternalLink, CheckCircle2, AlertCircle } from "lucide-react" interface EmbedCodeFormProps { onEmbedCodeChange: (code: string) => void compact?: boolean } export function EmbedCodeForm({ onEmbedCodeChange, compact = false }: EmbedCodeFormProps) { const [embedCode, setEmbedCode] = useState("") const [error, setError] = useState("") const [success, setSuccess] = useState(false) const handleChange = (value: string) => { setEmbedCode(value) setError("") setSuccess(false) } const handlePreview = () => { if (!embedCode.trim()) { setError("Paste embed code to continue") return } if (!embedCode.includes("iframe")) { setError("Invalid code. Please paste a valid iframe embed code") return } setSuccess(true) setError("") onEmbedCodeChange(embedCode) } if (compact) { return ( <div className="space-y-3"> <Textarea placeholder='<iframe title="Report" src="https://..." width="1140" height="541" frameborder="0" allowFullScreen>' value={embedCode} onChange={(e) => handleChange(e.target.value)} className="font-mono text-xs h-32 resize-none" /> {error && (

{error}

)} {success && (

Report loaded

)}

) } return (

{/* Instructions Card */}

Getting Started

{[ { num: 1, title: "Visit Power BI Playground", desc: "Go to the embedded demo", link: "https://playground.powerbi.com/en-us/embedded-demo", }, { num: 2, title: "Select a Report", desc: "Choose a sample report or pick one from your tenant", }, { num: 3, title: "Copy Embed Code", desc: "Look for the demo code section and copy the iframe", }, { num: 4, title: "Paste & Preview", desc: "Paste the code below to see it render in real-time", }, ].map((step) => (

{step.num}

{step.title}

{step.desc}

{step.link && ( Open Link → )}

))}

{/* Form */}

Iframe Embed Code

Paste your complete iframe tag from Power BI Embedded Demo

</iframe>'
            }
            value={embedCode}
            onChange={(e) => handleChange(e.target.value)}
            className="font-mono text-xs h-40 resize-none"
          />
        </div>

{error && (
          <div className="flex gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
            <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0 mt-0.5" />
            <p className="text-sm text-destructive">{error}</p>
          </div>
        )}

{success && (
          <div className="flex gap-2 p-3 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 rounded-lg">
            <CheckCircle2 className="w-4 h-4 text-green-600 dark:text-green-500 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-green-700 dark:text-green-400">Report preview loaded successfully</p>
          </div>
        )}

<Button onClick={handlePreview} className="w-full" disabled={!embedCode.trim()} size="lg">
          Preview Report
        </Button>
      </div>

{/* Learning Resources */}
      <div className="border-t border-border/40 pt-6 space-y-4">
        <h3 className="font-semibold text-foreground text-sm">Continue Learning</h3>
        <div className="space-y-2">
          {[
            {
              title: "Power BI Learning Center",
              url: "https://playground.powerbi.com/en-us/learning-center",
            },
            {
              title: "Microsoft Embedding Guide",
              url: "https://learn.microsoft.com/en-us/power-bi/developer/embedded/embedding",
            },
            {
              title: "v0 Community",
              url: "https://community.vercel.com",
            },
          ].map((resource) => (
            <a
              key={resource.url}
              href={resource.url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-between p-2 hover:bg-muted/50 rounded-lg transition text-sm"
            >
              <span className="text-muted-foreground hover:text-foreground">{resource.title}</span>
              <ExternalLink className="w-3.5 h-3.5 text-muted-foreground" />
            </a>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/embed-renderer.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/embed-renderer-Ffdlc.tsx" isMerged="true"
interface EmbedRendererProps {
  embedCode: string
}

export function EmbedRenderer({ embedCode }: EmbedRendererProps) {
  return (
    <div className="w-full h-full flex items-center justify-center">
      <div
        dangerouslySetInnerHTML={{ __html: embedCode }}
        className="w-full h-full [&_iframe]:w-full [&_iframe]:h-full [&_iframe]:rounded-none"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-flow-viz.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/data-flow-viz-hyHl3.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import * as d3 from "d3"

export function DataFlowViz() {
  const svgRef = useRef<SVGSVGElement>(null)

useEffect(() => {
    if (!svgRef.current) return

const width = svgRef.current.clientWidth
    const height = svgRef.current.clientHeight

// Create SVG with D3
    const svg = d3
      .select(svgRef.current)
      .attr("viewBox", `0 0 ${width} ${height}`)
      .attr("preserveAspectRatio", "xMidYMid meet")

svg.selectAll("*").remove()

// Create a group for the visualization
    const g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`)

// Data nodes representing Power BI data flow
    const nodes = [
      { id: "source", label: "Data Source", angle: 0, color: "#0078D4" },
      { id: "transform", label: "Transform", angle: 72, color: "#50E6FF" },
      { id: "analyze", label: "Analyze", angle: 144, color: "#FFB900" },
      { id: "visualize", label: "Visualize", angle: 216, color: "#107C10" },
      { id: "share", label: "Share", angle: 288, color: "#8661C5" },
    ]

const radius = Math.min(width, height) / 4

// Create connections
    nodes.forEach((d, i) => {
      const nextNode = nodes[(i + 1) % nodes.length]
      const startAngle = (d.angle * Math.PI) / 180
      const endAngle = (nextNode.angle * Math.PI) / 180

const x1 = Math.cos(startAngle) * radius
      const y1 = Math.sin(startAngle) * radius
      const x2 = Math.cos(endAngle) * radius
      const y2 = Math.sin(endAngle) * radius

// Draw connections with gradients
      const defs = svg.append("defs")
      const gradient = defs
        .append("linearGradient")
        .attr("id", `grad-${i}`)
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "100%")

gradient.append("stop").attr("offset", "0%").attr("stop-color", d.color).attr("stop-opacity", 0.3)

gradient.append("stop").attr("offset", "100%").attr("stop-color", nextNode.color).attr("stop-opacity", 0.3)

g.append("line")
        .attr("x1", x1)
        .attr("y1", y1)
        .attr("x2", x2)
        .attr("y2", y2)
        .attr("stroke", `url(#grad-${i})`)
        .attr("stroke-width", 2)
        .attr("opacity", 0.5)
    })

// Create nodes
    g.selectAll(".node")
      .data(nodes)
      .enter()
      .append("circle")
      .attr("class", "node")
      .attr("cx", (d) => Math.cos((d.angle * Math.PI) / 180) * radius)
      .attr("cy", (d) => Math.sin((d.angle * Math.PI) / 180) * radius)
      .attr("r", 0)
      .attr("fill", (d) => d.color)
      .attr("opacity", 0.9)
      .transition()
      .duration(800)
      .attr("r", 24)

// Add labels
    g.selectAll(".label")
      .data(nodes)
      .enter()
      .append("text")
      .attr("class", "label")
      .attr("x", (d) => Math.cos((d.angle * Math.PI) / 180) * radius)
      .attr("y", (d) => Math.sin((d.angle * Math.PI) / 180) * radius)
      .attr("dy", "0.3em")
      .attr("text-anchor", "middle")
      .attr("font-size", "11px")
      .attr("font-weight", "600")
      .attr("fill", "white")
      .attr("pointer-events", "none")
      .text((d) => d.label.split(" ")[0])

// Add center circle
    g.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 0)
      .attr("fill", "none")
      .attr("stroke", "#E7E5E4")
      .attr("stroke-width", 1)
      .attr("opacity", 0.3)
      .transition()
      .duration(800)
      .attr("r", 60)

// Animate connections flowing
    const animateFlow = () => {
      g.selectAll("line").each(function (d, i) {
        const line = d3.select(this)
        const length = Math.sqrt(
          Math.pow(Number.parseInt(line.attr("x2")) - Number.parseInt(line.attr("x1")), 2) +
            Math.pow(Number.parseInt(line.attr("y2")) - Number.parseInt(line.attr("y1")), 2),
        )

line
          .attr("stroke-dasharray", length)
          .attr("stroke-dashoffset", length)
          .transition()
          .duration(2000)
          .ease(d3.easeLinear)
          .attr("stroke-dashoffset", 0)
          .on("end", animateFlow)
      })
    }

setTimeout(animateFlow, 1000)
  }, [])

return (
    <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-muted/20 to-muted/5 rounded-lg border border-border/40 p-6">
      <svg ref={svgRef} className="w-full h-full" style={{ minHeight: "300px" }} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/about-demo.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/about-demo-iAwIl.tsx" isMerged="true"
"use client"

import { ArrowRight } from "lucide-react"

export function AboutDemo() {
  return (
    <div className="space-y-12">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div>
          <h3 className="font-semibold text-sm text-foreground mb-3 tracking-tight">Quick Setup</h3>
          <p className="text-sm text-muted-foreground leading-6 line-clamp-2">
            No credentials or configuration needed to start.
          </p>
        </div>
        <div>
          <h3 className="font-semibold text-sm text-foreground mb-3 tracking-tight">Learn by Doing</h3>
          <p className="text-sm text-muted-foreground leading-6 line-clamp-2">
            See Power BI reports render in real-time as you paste.
          </p>
        </div>
        <div>
          <h3 className="font-semibold text-sm text-foreground mb-3 tracking-tight">Production Patterns</h3>
          <p className="text-sm text-muted-foreground leading-6 line-clamp-2">
            Real embedding patterns you can use in your apps.
          </p>
        </div>
        <div>
          <h3 className="font-semibold text-sm text-foreground mb-3 tracking-tight">Open Source</h3>
          <p className="text-sm text-muted-foreground leading-6 line-clamp-2">
            Fork and extend the codebase for your projects.
          </p>
        </div>
      </div>

<div className="pt-6">
        <h4 className="text-xs font-semibold text-muted-foreground mb-5 uppercase tracking-widest">Perfect for</h4>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-4">
          {[
            "Learning Power BI embedding basics",
            "Testing embed codes before production",
            "Teaching teammates about Power BI",
            "Building proof-of-concepts quickly",
            "Exploring report functionality",
            "Creating starter templates",
          ].map((useCase, i) => (
            <div key={i} className="flex gap-3 items-center">
              <ArrowRight className="w-3.5 h-3.5 text-accent flex-shrink-0" />
              <span className="text-sm text-foreground">{useCase}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/footer-Zvzy5.tsx" isMerged="true"
"use client"

import { ExternalLink } from "lucide-react"

export function Footer() {
  return (
    <footer className="border-t border-border/40 bg-background/50 mt-24">
      <div className="max-w-7xl mx-auto px-4 py-16">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
          {/* Column 1: Product */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">Resources</h3>
            <ul className="space-y-2.5 text-xs text-muted-foreground">
              <li>
                <a
                  href="https://playground.powerbi.com/en-us/embedded-demo"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  Embedded Demo
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://playground.powerbi.com/en-us/learning-center"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  Learning Center
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://learn.microsoft.com/en-us/power-bi/developer/embedded/embedding"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  Docs
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
            </ul>
          </div>

{/* Column 2: Community */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">Community</h3>
            <ul className="space-y-2.5 text-xs text-muted-foreground">
              <li>
                <a
                  href="https://v0.app"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  v0
                </a>
              </li>
              <li>
                <a
                  href="https://community.vercel.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  v0 Community
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://vercel.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  Vercel
                </a>
              </li>
            </ul>
          </div>

{/* Column 3: Power BI */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">Power BI</h3>
            <ul className="space-y-2.5 text-xs text-muted-foreground">
              <li>
                <a
                  href="https://powerbi.microsoft.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition"
                >
                  Official Site
                </a>
              </li>
              <li>
                <a
                  href="https://community.powerbi.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition inline-flex items-center gap-1.5"
                >
                  Community
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
            </ul>
          </div>

{/* Column 4: About */}
          <div className="space-y-4">
            <h3 className="font-semibold text-foreground text-sm">About</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              An interactive educational demo showcasing Power BI embedding fundamentals. Built for the v0 community.
            </p>
          </div>
        </div>

{/* Bottom Bar */}
        <div className="border-t border-border/40 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-muted-foreground">
            Built with <span className="text-primary font-medium">v0</span> for the community
          </p>
          <p className="text-xs text-muted-foreground">© 2026 Power BI Embedding Demo</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/floating-background.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/floating-background-wM5Ct.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

// Power BI and Microsoft Fabric related SVG icons (from Fluent System Icons - MIT Licensed)
const PowerBIIcons = {
  chart: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M128 1792h1792v128H128v-128zm1024-256h256v256h-256v-256zm-512-512h256v768h-256v-768zm512-256h256v1024h-256v-1024zm-512-256h256v512h-256v-512zm1024 256h256v768h-256v-768z"
        fill="currentColor"
      />
    </svg>
  ),
  powerBi: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M512 256h768v512H512V256zm768 640h512v512h-512v-512zm-768 0h512v512H512v-512zm768 640h512v512h-512v-512zM256 256h256v512H256V256zm0 640h256v512H256v-512zm0 640h256v512H256v-512z"
        fill="currentColor"
      />
    </svg>
  ),
  database: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1024 256c376 0 704 80 704 192v384c0 112-328 192-704 192S320 944 320 832V448c0 112 328 192 704 192zm0 768c376 0 704 80 704 192v384c0 112-328 192-704 192S320 1712 320 1600v-384c0 112 328 192 704 192z"
        fill="currentColor"
      />
    </svg>
  ),
  analytics: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path d="M384 256h256v1280H384V256zm576 384h256v896h-256V640zm576-128h256v1024h-256V512z" fill="currentColor" />
    </svg>
  ),
  dataInsights: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1024 128c-494 0-896 402-896 896s402 896 896 896 896-402 896-896-402-896-896-896zm0 1664c-423 0-768-345-768-768s345-768 768-768 768 345 768 768-345 768-768 768zm0-1280c-282 0-512 230-512 512s230 512 512 512 512-230 512-512-230-512-512-512z"
        fill="currentColor"
      />
    </svg>
  ),
  report: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path d="M1728 256H320v1536h1408V256zm-128 1280H448V384h1152v1152z" fill="currentColor" />
    </svg>
  ),
  query: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path d="M256 256h1536v256H256V256zm0 512h1536v256H256v-256zm0 512h1536v256H256v-256z" fill="currentColor" />
    </svg>
  ),
  fabric: (
    <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1024 256L256 640v768l768 384 768-384V640l-768-384zm640 896l-640 320-640-320V672l640-320 640 320v480z"
        fill="currentColor"
      />
    </svg>
  ),
}

const iconArray = Object.values(PowerBIIcons)

export function FloatingBackground() {
  const [positions, setPositions] = useState<
    Array<{ iconIndex: number; left: number; top: number; delay: number; size: number }>
  >([])

useEffect(() => {
    const newPositions = Array.from({ length: 16 }).map(() => ({
      iconIndex: Math.floor(Math.random() * iconArray.length),
      left: Math.random() * 100,
      top: Math.random() * 100,
      delay: Math.random() * 3,
      size: 40 + Math.random() * 60, // 40-100px
    }))
    setPositions(newPositions)
  }, [])

return (
    <div className="floating-icons-bg">
      {positions.map((pos, idx) => (
        <div
          key={idx}
          className="floating-icon-powerbi"
          style={{
            left: `${pos.left}%`,
            top: `${pos.top}%`,
            animationDelay: `${pos.delay}s`,
            width: `${pos.size}px`,
            height: `${pos.size}px`,
            color: "rgba(0, 120, 212, 0.08)",
          }}
        >
          {iconArray[pos.iconIndex]}
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isCopied="true" isCopiedFrom="user_read_only_context/text_attachments/page-YSG6L.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { StepGuide } from "@/components/step-guide"
import { EmbedRenderer } from "@/components/embed-renderer"
import { Footer } from "@/components/footer"
import { FloatingBackground } from "@/components/floating-background"
import { AboutDemo } from "@/components/about-demo"
import { HeroSection } from "@/components/hero-section"

export default function Home() {
  const [embedCode, setEmbedCode] = useState("")
  const [showSteps, setShowSteps] = useState(true)

return (
    <div className="min-h-screen flex flex-col bg-background relative">
      <FloatingBackground />
      
      {/* dalysystems.ai link */}
      <a 
        href="https://dalysystems.ai" 
        target="_blank" 
        rel="noopener noreferrer"
        className="fixed top-4 right-4 z-50 text-sm hover:opacity-70 transition-opacity"
      >
        <span className="font-semibold text-foreground">dalysystems</span>
        <span className="font-light text-foreground/60">.ai</span>
      </a>

<div className="relative z-10">
        <main className="flex-1 w-full flex flex-col">
          {/* Hero Section */}
          <HeroSection />

<section className="flex-1 flex">
            {/* Left Column: Steps & Instructions */}
            <div className="w-full md:w-96 border-r border-border/40 overflow-y-auto bg-muted/20">
              <div className="p-4 md:p-5 space-y-5">
                <StepGuide onStepsComplete={setShowSteps} onEmbedCodeChange={setEmbedCode} />
              </div>
            </div>

{/* Right Column: Full-size Embed Preview */}
            <div className="flex-1 flex flex-col h-screen md:h-[calc(100vh-200px)]">
              {embedCode ? (
                <div className="flex-1 flex flex-col overflow-hidden">
                  <div className="border-b border-border/40 px-6 md:px-8 py-4">
                    <h2 className="text-sm font-semibold text-foreground">Live Report Preview</h2>
                    <p className="text-xs text-muted-foreground mt-1">Your embedded Power BI report</p>
                  </div>
                  <div className="flex-1 overflow-auto bg-white">
                    <div className="w-full h-full p-4 md:p-6">
                      <EmbedRenderer embedCode={embedCode} />
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex-1 flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
                  <div className="text-center space-y-4 px-6">
                    <div className="w-16 h-16 rounded-lg bg-border/40 mx-auto" />
                    <div>
                      <h3 className="text-lg font-semibold text-foreground mb-2">Ready to embed?</h3>
                      <p className="text-sm text-muted-foreground max-w-xs mx-auto">
                        Follow the steps on the left to get your embed code and see it live here.
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </section>
        </main>

<Footer />
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "d3": "7.9.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]css:file="app/globals.css"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --pbi-yellow: oklch(0.92 0.15 100);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
  --pbi-yellow: oklch(0.85 0.18 100);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Add floating icons animation background */
/* Updated floating icons animation for Power BI SVG icons */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.04;
  }
  50% {
    transform: translateY(-30px) rotate(8deg);
    opacity: 0.08;
  }
}

.floating-icons-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.floating-icon-powerbi {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 8s ease-in-out infinite;
  will-change: transform;
  opacity: 0.06;
}

.floating-icon-powerbi svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Remove old emoji-based floating icon style */
.floating-icon {
  display: none;
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import React from "react"
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'

const _geist = Geist({ subsets: ["latin"] });
const _geistMono = Geist_Mono({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: 'Power BI Embedding Demo',
  description: 'Learn how to embed Power BI reports with Service Principal and User Authentication',
  generator: 'v0.app',
  icons: {
    icon: [
      {
        url: '/icon-light-32x32.png',
        media: '(prefers-color-scheme: light)',
      },
      {
        url: '/icon-dark-32x32.png',
        media: '(prefers-color-scheme: dark)',
      },
      {
        url: '/icon.svg',
        type: 'image/svg+xml',
      },
    ],
    apple: '/apple-icon.png',
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}</article></body></html>

Embed Power BI. In minutes.

Getting Started

{step.title}

Embed Power BI.
In minutes.

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This