<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPL 2025 Match Recap - Punjab Kings vs Chennai Super Kings</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Recharts for data visualization -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recharts@2.5.0/umd/Recharts.min.js"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--chart-1: 214 100% 60%;
--chart-2: 199 100% 60%;
--color-punjab: #38bdf8;
--color-chennai: #0ea5e9;
}
body {
font-family: 'Inter', sans-serif;
color: #333;
background: linear-gradient(to bottom, #ebf5ff, #ffffff);
line-height: 1.6;
}
.card {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
overflow: hidden;
}
.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
padding: 0.25rem 0.75rem;
background-color: #f3f4f6;
color: #374151;
}
.badge-gradient {
background: linear-gradient(to right, #38bdf8, #0ea5e9);
color: white;
}
.avatar {
position: relative;
border-radius: 9999px;
overflow: hidden;
background-color: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-fallback {
font-weight: 500;
}
.tab-list {
display: flex;
border-bottom: 1px solid #e5e7eb;
}
.tab {
padding: 0.75rem 1rem;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom-color: #0ea5e9;
color: #0ea5e9;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
font-weight: 500;
color: #6b7280;
padding: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
td {
padding: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
.text-right {
text-align: right;
}
.highlight-dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background-color: #38bdf8;
margin-right: 0.5rem;
margin-top: 0.25rem;
}
.link-button {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
border: 1px solid #0ea5e9;
background-color: white;
color: #0ea5e9;
text-decoration: none;
transition: background-color 0.2s;
}
.link-button:hover {
background-color: #ebf5ff;
}
.external-link {
display: inline-flex;
align-items: center;
color: #0ea5e9;
text-decoration: none;
}
.external-link:hover {
text-decoration: underline;
}
.header {
background-color: #2563eb;
color: white;
padding: 2rem 1rem;
}
.card-gradient-header {
background: linear-gradient(to right, #38bdf8, #0ea5e9);
color: white;
padding: 1rem;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
// Match data
const matchData = {
date: "April 8, 2025",
venue: "PCA Stadium, Mohali",
result: "Punjab Kings won by 18 runs",
teams: {
punjab: {
name: "Punjab Kings",
score: "219/6",
overs: "20.0",
topScorer: "Priyansh Arya (103)",
bestBowler: "Deepak Chahar (2/41)",
},
chennai: {
name: "Chennai Super Kings",
score: "201/5",
overs: "20.0",
topScorer: "Ruturaj Gaikwad (63)",
bestBowler: "Kagiso Rabada (1/27)",
},
},
playerOfMatch: "Priyansh Arya",
};
// Batting performances
const battingPerformances = [
{ player: "Priyansh Arya", team: "Punjab Kings", runs: 103, balls: 42, fours: 11, sixes: 6, strikeRate: 245.24 },
{ player: "Ruturaj Gaikwad", team: "Chennai", runs: 63, balls: 39, fours: 7, sixes: 2, strikeRate: 161.54 },
{ player: "Shivam Dube", team: "Chennai", runs: 42, balls: 22, fours: 4, sixes: 2, strikeRate: 190.91 },
{ player: "Liam Livingstone", team: "Punjab Kings", runs: 34, balls: 20, fours: 3, sixes: 2, strikeRate: 170.0 },
];
// Bowling performances
const bowlingPerformances = [
{ player: "Deepak Chahar", team: "Chennai", overs: 4, runs: 41, wickets: 2, economy: 10.25 },
{ player: "Kagiso Rabada", team: "Punjab Kings", overs: 4, runs: 27, wickets: 1, economy: 6.75 },
{ player: "Rahul Chahar", team: "Punjab Kings", overs: 4, runs: 32, wickets: 1, economy: 8.0 },
{ player: "Arshdeep Singh", team: "Punjab Kings", overs: 4, runs: 38, wickets: 1, economy: 9.5 },
];
// Team comparison data for charts
const teamComparison = [
{ name: "Runs", punjab: 219, chennai: 201 },
{ name: "Wickets Lost", punjab: 6, chennai: 5 },
{ name: "Fours", punjab: 22, chennai: 18 },
{ name: "Sixes", punjab: 12, chennai: 8 },
];
// Pie chart data for run distribution
const punjabRunDistribution = [
{ name: "Priyansh Arya", value: 103, color: "#38bdf8" },
{ name: "Liam Livingstone", value: 34, color: "#0ea5e9" },
{ name: "Others", value: 82, color: "#0284c7" },
];
const chennaiRunDistribution = [
{ name: "Ruturaj Gaikwad", value: 63, color: "#38bdf8" },
{ name: "Shivam Dube", value: 42, color: "#0ea5e9" },
{ name: "Others", value: 96, color: "#0284c7" },
];
// Match highlights
const matchHighlights = [
"Priyansh Arya smashed a blazing century (103 runs off just 42 balls)",
"Arya reached his fifty in just 20 balls and his century in 38 balls",
"Punjab Kings scored over 60 runs in the powerplay (first 6 overs)",
"Gaikwad scored a fluent 63 off 39 balls, hitting 7 fours and 2 sixes",
"Shivam Dube played a quick-fire knock of 42 off 22 balls",
"Punjab's bowlers bowled smartly in the death overs",
];
// Initialize Lucide icons
lucide.createIcons();
// Initialize tabs functionality
function setupTabs() {
const tabTriggers = document.querySelectorAll('[data-tab-trigger]');
tabTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
const targetId = trigger.getAttribute('data-tab-trigger');
const tabContents = document.querySelectorAll('[data-tab-content]');
const tabTriggers = document.querySelectorAll('[data-tab-trigger]');
// Hide all tab contents
tabContents.forEach(content => {
content.classList.remove('active');
});
// Deactivate all triggers
tabTriggers.forEach(t => {
t.classList.remove('active');
});
// Activate the clicked trigger
trigger.classList.add('active');
// Show the target content
const targetContent = document.querySelector(`[data-tab-content="${targetId}"]`);
if (targetContent) {
targetContent.classList.add('active');
}
});
});
}
// Render charts using Recharts
function renderCharts() {
const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, ResponsiveContainer } = Recharts;
// Team comparison chart
const comparisonChart = React.createElement(
ResponsiveContainer,
{ width: "100%", height: 300 },
React.createElement(
BarChart,
{ data: teamComparison },
React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
React.createElement(XAxis, { dataKey: "name" }),
React.createElement(YAxis),
React.createElement(Tooltip),
React.createElement(Legend),
React.createElement(Bar, { dataKey: "punjab", fill: "#38bdf8", name: "Punjab Kings" }),
React.createElement(Bar, { dataKey: "chennai", fill: "#0ea5e9", name: "Chennai Super Kings" })
)
);
ReactDOM.render(comparisonChart, document.getElementById('team-comparison-chart'));
// Punjab run distribution chart
const punjabPieChart = React.createElement(
ResponsiveContainer,
{ width: "100%", height: 250 },
React.createElement(
PieChart,
null,
React.createElement(
Pie,
{
data: punjabRunDistribution,
cx: "50%",
cy: "50%",
labelLine: false,
label: ({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`,
outerRadius: 80,
fill: "#8884d8",
dataKey: "value"
},
punjabRunDistribution.map((entry, index) =>
React.createElement(Cell, { key: `cell-${index}`, fill: entry.color })
)
),
React.createElement(Tooltip)
)
);
ReactDOM.render(punjabPieChart, document.getElementById('punjab-pie-chart'));
// Chennai run distribution chart
const chennaiPieChart = React.createElement(
ResponsiveContainer,
{ width: "100%", height: 250 },
React.createElement(
PieChart,
null,
React.createElement(
Pie,
{
data: chennaiRunDistribution,
cx: "50%",
cy: "50%",
labelLine: false,
label: ({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`,
outerRadius: 80,
fill: "#8884d8",
dataKey: "value"
},
chennaiRunDistribution.map((entry, index) =>
React.createElement(Cell, { key: `cell-${index}`, fill: entry.color })
)
),
React.createElement(Tooltip)
)
);
ReactDOM.render(chennaiPieChart, document.getElementById('chennai-pie-chart'));
}
// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
setupTabs();
renderCharts();
// Set default active tabs
document.querySelector('[data-tab-trigger="batting"]').classList.add('active');
document.querySelector('[data-tab-content="batting"]').classList.add('active');
document.querySelector('[data-tab-trigger="punjab"]').classList.add('active');
document.querySelector('[data-tab-content="punjab"]').classList.add('active');
});
</script>
<div class="max-w-7xl mx-auto py-6 px-4 space-y-8">
<!-- Header -->
<div class="header rounded-lg mb-6">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex flex-col items-center md:items-start">
<h1 class="text-3xl font-bold tracking-tight">IPL 2025 Match Recap</h1>
<p class="text-white opacity-80">
April 8, 2025 • PCA Stadium, Mohali
</p>
</div>
<div class="badge badge-gradient py-2 px-4 text-lg">
<i data-lucide="trophy" class="mr-2 h-5 w-5"></i>
Punjab Kings won by 18 runs
</div>
</div>
</div>
<div class="flex flex-wrap gap-2 justify-center md:justify-start my-4">
<a href="#match-summary" class="link-button">
<i data-lucide="info" class="mr-2 h-4 w-4"></i>
Match Summary
</a>
<a href="#player-of-match" class="link-button">
<i data-lucide="award" class="mr-2 h-4 w-4"></i>
Player of Match
</a>
<a href="#performances" class="link-button">
<i data-lucide="users" class="mr-2 h-4 w-4"></i>
Performances
</a>
<a href="#analysis" class="link-button">
<i data-lucide="trending-up" class="mr-2 h-4 w-4"></i>
Analysis
</a>
<a href="#highlights" class="link-button">
<i data-lucide="star" class="mr-2 h-4 w-4"></i>
Highlights
</a>
</div>
<hr class="border-sky-200">
<!-- Match Summary -->
<div id="match-summary" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card border-l-4 border-l-sky-400">
<div class="p-4 pb-2">
<div class="flex items-center">
<div class="avatar h-8 w-8 mr-2">
<div class="avatar-fallback">PK</div>
</div>
<a href="https://www.punjabkingsipl.in/" target="_blank" rel="noopener noreferrer" class="external-link">
Punjab Kings
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</div>
<p class="text-gray-500 text-sm">Batting First</p>
</div>
<div class="p-4">
<div class="text-4xl font-bold">219/6</div>
<p class="text-gray-500">20.0 overs</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<div>
<p class="text-sm text-gray-500">Top Scorer</p>
<p class="font-medium">Priyansh Arya (103)</p>
</div>
<div>
<p class="text-sm text-gray-500">Best Bowler</p>
<p class="font-medium">Deepak Chahar (2/41)</p>
</div>
</div>
</div>
</div>
<div class="card border-l-4 border-l-sky-500">
<div class="p-4 pb-2">
<div class="flex items-center">
<div class="avatar h-8 w-8 mr-2">
<div class="avatar-fallback">CS</div>
</div>
<a href="https://www.chennaisuperkings.com/" target="_blank" rel="noopener noreferrer" class="external-link">
Chennai Super Kings
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</div>
<p class="text-gray-500 text-sm">Chasing 220</p>
</div>
<div class="p-4">
<div class="text-4xl font-bold">201/5</div>
<p class="text-gray-500">20.0 overs</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<div>
<p class="text-sm text-gray-500">Top Scorer</p>
<p class="font-medium">Ruturaj Gaikwad (63)</p>
</div>
<div>
<p class="text-sm text-gray-500">Best Bowler</p>
<p class="font-medium">Kagiso Rabada (1/27)</p>
</div>
</div>
</div>
</div>
</div>
<!-- Player of the Match -->
<div id="player-of-match" class="card bg-gradient-to-r from-sky-50 to-blue-50 border-0">
<div class="card-gradient-header">
<div class="flex items-center">
<i data-lucide="award" class="mr-2 h-6 w-6"></i>
<h2 class="text-xl font-bold">Player of the Match</h2>
</div>
</div>
<div class="p-4 flex flex-col md:flex-row items-center gap-6">
<div class="avatar h-24 w-24">
<div class="avatar-fallback text-2xl">PA</div>
</div>
<div>
<h3 class="text-2xl font-bold">
<a href="https://www.iplt20.com/teams/punjab-kings/squad/priyansh-arya" target="_blank" rel="noopener noreferrer" class="external-link">
Priyansh Arya
<i data-lucide="external-link" class="ml-1 h-4 w-4"></i>
</a>
</h3>
<p class="text-gray-500">Punjab Kings</p>
<div class="mt-2 flex flex-wrap gap-2">
<span class="badge flex items-center">
<i data-lucide="zap" class="mr-1 h-3 w-3"></i>
103 runs
</span>
<span class="badge flex items-center">
<i data-lucide="clock" class="mr-1 h-3 w-3"></i>
42 balls
</span>
<span class="badge flex items-center">
<i data-lucide="target" class="mr-1 h-3 w-3"></i>
Strike Rate: 245.24
</span>
<span class="badge flex items-center">
11 fours, 6 sixes
</span>
</div>
</div>
</div>
</div>
<!-- Performance Tabs -->
<div id="performances" class="card">
<div class="tab-list">
<div class="tab" data-tab-trigger="batting">Batting Performances</div>
<div class="tab" data-tab-trigger="bowling">Bowling Performances</div>
</div>
<div class="p-4 tab-content" data-tab-content="batting">
<h2 class="text-xl font-bold mb-2">Top Batting Performances</h2>
<p class="text-gray-500 mb-4">Standout batting performances from the match</p>
<table>
<thead>
<tr>
<th>Player</th>
<th>Team</th>
<th class="text-right">Runs</th>
<th class="text-right">Balls</th>
<th class="text-right">4s</th>
<th class="text-right">6s</th>
<th class="text-right">SR</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/punjab-kings/squad/priyansh-arya" target="_blank" rel="noopener noreferrer" class="external-link">
Priyansh Arya
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Punjab Kings</td>
<td class="text-right">103</td>
<td class="text-right">42</td>
<td class="text-right">11</td>
<td class="text-right">6</td>
<td class="text-right">245.24</td>
</tr>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/chennai/squad/ruturaj-gaikwad" target="_blank" rel="noopener noreferrer" class="external-link">
Ruturaj Gaikwad
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Chennai</td>
<td class="text-right">63</td>
<td class="text-right">39</td>
<td class="text-right">7</td>
<td class="text-right">2</td>
<td class="text-right">161.54</td>
</tr>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/chennai/squad/shivam-dube" target="_blank" rel="noopener noreferrer" class="external-link">
Shivam Dube
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Chennai</td>
<td class="text-right">42</td>
<td class="text-right">22</td>
<td class="text-right">4</td>
<td class="text-right">2</td>
<td class="text-right">190.91</td>
</tr>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/punjab-kings/squad/liam-livingstone" target="_blank" rel="noopener noreferrer" class="external-link">
Liam Livingstone
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Punjab Kings</td>
<td class="text-right">34</td>
<td class="text-right">20</td>
<td class="text-right">3</td>
<td class="text-right">2</td>
<td class="text-right">170.00</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 tab-content" data-tab-content="bowling">
<h2 class="text-xl font-bold mb-2">Top Bowling Performances</h2>
<p class="text-gray-500 mb-4">Standout bowling performances from the match</p>
<table>
<thead>
<tr>
<th>Player</th>
<th>Team</th>
<th class="text-right">Overs</th>
<th class="text-right">Runs</th>
<th class="text-right">Wickets</th>
<th class="text-right">Economy</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/chennai/squad/deepak-chahar" target="_blank" rel="noopener noreferrer" class="external-link">
Deepak Chahar
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Chennai</td>
<td class="text-right">4</td>
<td class="text-right">41</td>
<td class="text-right">2</td>
<td class="text-right">10.25</td>
</tr>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/punjab-kings/squad/kagiso-rabada" target="_blank" rel="noopener noreferrer" class="external-link">
Kagiso Rabada
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Punjab Kings</td>
<td class="text-right">4</td>
<td class="text-right">27</td>
<td class="text-right">1</td>
<td class="text-right">6.75</td>
</tr>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/punjab-kings/squad/rahul-chahar" target="_blank" rel="noopener noreferrer" class="external-link">
Rahul Chahar
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Punjab Kings</td>
<td class="text-right">4</td>
<td class="text-right">32</td>
<td class="text-right">1</td>
<td class="text-right">8.00</td>
</tr>
<tr>
<td class="font-medium">
<a href="https://www.iplt20.com/teams/punjab-kings/squad/arshdeep-singh" target="_blank" rel="noopener noreferrer" class="external-link">
Arshdeep Singh
<i data-lucide="external-link" class="ml-1 h-3 w-3"></i>
</a>
</td>
<td>Punjab Kings</td>
<td class="text-right">4</td>
<td class="text-right">38</td>
<td class="text-right">1</td>
<td class="text-right">9.50</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Match Analysis -->
<div id="analysis" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card">
<div class="card-gradient-header">
<div class="flex items-center">
<i data-lucide="trending-up" class="mr-2 h-5 w-5"></i>
<h2 class="text-xl font-bold">Team Comparison</h2>
</div>
</div>
<div class="p-4">
<div id="team-comparison-chart" style="height: 300px;"></div>
</div>
</div>
<div class="card">
<div class="card-gradient-header">
<h2 class="text-xl font-bold">Run Distribution</h2>
</div>
<div class="p-4">
<div class="tab-list">
<div class="tab" data-tab-trigger="punjab">Punjab Kings</div>
<div class="tab" data-tab-trigger="chennai">Chennai Super Kings</div>
</div>
<div class="tab-content" data-tab-content="punjab">
<div id="punjab-pie-chart" style="height: 250px;"></div>
</div>
<div class="tab-content" data-tab-content="chennai">
<div id="chennai-pie-chart" style="height: 250px;"></div>
</div>
</div>
</div>
</div>
<!-- Match Highlights -->
<div id="highlights" class="card">
<div class="card-gradient-header">
<div class="flex items-center">
<i data-lucide="star" class="mr-2 h-5 w-5"></i>
<h2 class="text-xl font-bold">Match Highlights</h2>
</div>
</div>
<div class="p-4">
<ul class="space-y-2">
<li class="flex items-start">
<span class="highlight-dot"></span>
<span>Priyansh Arya smashed a blazing century (103 runs off just 42 balls)</span>
</li>
<li class="flex items-start">
<span class="highlight-dot"></span>
<span>Arya reached his fifty in just 20 balls and his century in 38 balls</span>
</li>
<li class="flex items-start">
<span class="highlight-dot"></span>
<span>Punjab Kings scored over 60 runs in the powerplay (first 6 overs)</span>
</li>
<li class="flex items-start">
<span class="highlight-dot"></span>
<span>Gaikwad scored a fluent 63 off 39 balls, hitting 7 fours and 2 sixes</span>
</li>
<li class="flex items-start">
<span class="highlight-dot"></span>
<span>Shivam Dube played a quick-fire knock of 42 off 22 balls</span>
</li>
<li class="flex items-start">
<span class="highlight-dot"></span>
<span>Punjab's bowlers bowled smartly in the death overs</span>
</li>
</ul>
</div>
<div class="p-4 border-t border-sky-200">
<h4 class="font-semibold mb-2">What went right for Punjab Kings?</h4>
<ul class="space-y-1 text-sm">
<li>• Early attack: They made the most of the powerplay scoring over 60 runs</li>
<li>• Priyansh Arya's knock: One of the best innings of IPL 2025 so far</li>
<li>• Bowling under pressure: Punjab's bowlers didn't panic and stuck to their plans</li>
</ul>
<h4 class="font-semibold mt-4 mb-2">What cost Chennai the match?</h4>
<ul class="space-y-1 text-sm">
<li>• Lack of wickets: They couldn't break the opening stand early</li>
<li>• Slow middle overs: After Gaikwad's dismissal, their scoring slowed down</li>
<li>• No big finisher: While Dube tried his best, there wasn't a big finisher to close the game</li>
</ul>
</div>
</div>
<!-- Fan Reactions -->
<div class="card bg-gradient-to-r from-sky-50 to-blue-50 border-0">
<div class="card-gradient-header">
<h2 class="text-xl font-bold">Fan Reactions</h2>
</div>
<div class="p-4">
<p>
Fans on social media were full of praise for Priyansh Arya's innings. Many called it a "coming-of-age
performance" for the youngster. Hashtags like
<a href="https://twitter.com/hashtag/AryaStorm" target="_blank" rel="noopener noreferrer">
<span class="badge hover:bg-sky-100 cursor-pointer">#AryaStorm</span>
</a>
and
<a href="https://twitter.com/hashtag/PunjabKings" target="_blank" rel="noopener noreferrer">
<span class="badge hover:bg-sky-100 cursor-pointer">#PunjabKings</span>
</a>
were trending on Twitter and Instagram during and after the game.
</p>
</div>
</div>
<!-- Points Table Impact -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card">
<div class="card-gradient-header">
<h2 class="text-xl font-bold">Points Table Impact</h2>
</div>
<div class="p-4">
<p>
Punjab Kings moved up the IPL 2025 table with this win. Their net run rate also improved due to the strong
batting display.
</p>
<p class="mt-2">
Chennai Super Kings remain mid-table and will need back-to-back wins to stay in playoff contention.
</p>
</div>
</div>
<div class="card">
<div class="card-gradient-header">
<h2 class="text-xl font-bold">Next Matches</h2>
</div>
<div class="p-4">
<p>Punjab Kings will be boosted by this win and will look to carry momentum in their next fixture.</p>
<p class="mt-2">
Chennai Super Kings will need to relook at their bowling combinations and finishing options.
</p>
</div>
</div>
</div>
<!-- Additional Resources -->
<div id="resources" class="card mt-6">
<div class="card-gradient-header">
<div class="flex items-center">
<i data-lucide="file-text" class="mr-2 h-5 w-5"></i>
<h2 class="text-xl font-bold">Additional Resources</h2>
</div>
</div>
<div class="p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h4 class="font-semibold mb-2">Official Links</h4>
<ul class="space-y-2">
<li>
<a href="https://www.iplt20.com/" target="_blank" rel="noopener noreferrer" class="external-link">
<i data-lucide="external-link" class="mr-2 h-4 w-4"></i>
IPL Official Website
</a>
</li>
<li>
<a href="https://www.iplt20.com/matches/schedule/men" target="_blank" rel="noopener noreferrer" class="external-link">
<i data-lucide="calendar" class="mr-2 h-4 w-4"></i>
IPL 2025 Schedule
</a>
</li>
<li>
<a href="https://www.iplt20.com/points-table/men/2025" target="_blank" rel="noopener noreferrer" class="external-link">
<i data-lucide="trending-up" class="mr-2 h-4 w-4"></i>
IPL 2025 Points Table
</a>
</li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-2">Media & Highlights</h4>
<ul class="space-y-2">
<li>
<a href="https://www.iplt20.com/video/highlights" target="_blank" rel="noopener noreferrer" class="external-link">
<i data-lucide="video" class="mr-2 h-4 w-4"></i>
Match Highlights Video
</a>
</li>
<li>
<a href="https://www.espncricinfo.com/series/indian-premier-league-2025" target="_blank" rel="noopener noreferrer" class="external-link">
<i data-lucide="file-text" class="mr-2 h-4 w-4"></i>
Match Report on ESPNCricinfo
</a>
</li>
<li>
<a href="https://www.cricbuzz.com/cricket-series/ipl-2025" target="_blank" rel="noopener noreferrer" class="external-link">
<i data-lucide="file-text" class="mr-2 h-4 w-4"></i>
Match Analysis on Cricbuzz
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-4 border-t border-sky-200">
<div class="w-full">
<h4 class="font-semibold mb-2">Social Media</h4>
<div class="flex flex-wrap gap-2">
<a href="https://twitter.com/hashtag/AryaStorm" target="_blank" rel="noopener noreferrer" class="link-button">
<i data-lucide="twitter" class="mr-2 h-4 w-4"></i>
#AryaStorm
</a>
<a href="https://twitter.com/hashtag/PunjabKings" target="_blank" rel="noopener noreferrer" class="link-button">
<i data-lucide="twitter" class="mr-2 h-4 w-4"></i>
#PunjabKings
</a>
<a href="https://twitter.com/hashtag/IPL2025" target="_blank" rel="noopener noreferrer" class="link-button">
<i data-lucide="twitter" class="mr-2 h-4 w-4"></i>
#IPL2025
</a>
<a href="https://www.instagram.com/explore/tags/aryastorm/" target="_blank" rel="noopener noreferrer" class="link-button">
<i data-lucide="instagram" class="mr-2 h-4 w-4"></i>
#AryaStorm
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>