import React, { useState, useEffect, useRef } from 'react';
import {
BookOpen,
Upload,
Search,
Brain,
Activity,
Award,
ChevronLeft,
Share2,
Bookmark,
Zap,
Lock,
Play,
RotateCcw,
CheckCircle,
XCircle
} from 'lucide-react';
// --- Mock Data ---
const PAPERS = [
{
id: 1,
title: "The Effects of Urban Green Space on Mental Health",
author: "Dr. Elena S. Rivas, et al.",
field: "Environmental Psychology",
readTime: "12 min",
difficulty: "Medium",
abstract: "A comprehensive analysis of cortisol levels in urban populations...",
content: {
beginner: {
text: "Living near parks and trees helps people feel less stressed. This study looked at people living in cities and found that those who spent time in green spaces had lower levels of a stress hormone called cortisol. Essentially, nature acts as a buffer against the busyness of city life.",
keyPoints: ["Green space reduces stress.", "Cortisol is a stress marker.", "City planning should include parks."]
},
intermediate: {
text: "This study investigates the correlation between accessibility to urban green spaces and reduction in psychophysiological stress markers. Using cortisol sampling, researchers found a statistically significant inverse relationship: as exposure to vegetation increased, reported anxiety and cortisol levels decreased. This suggests urban planning must prioritize biological integration.",
keyPoints: ["Inverse correlation between green space and cortisol.", "Sample size: 2,500 residents.", "Implications for urban policy."]
},
expert: {
text: "We present a longitudinal analysis (n=2,500) quantifying the impact of urban vegetation density on HPA axis regulation. Utilizing salivary cortisol assays and GPS tracking, data indicates a -0.45 correlation coefficient between vegetation index (NDVI) and chronic stress markers. Confounding variables such as socioeconomic status were controlled using multivariate regression.",
keyPoints: ["Longitudinal analysis (n=2,500).", "-0.45 correlation with NDVI.", "Multivariate regression controls used."]
}
},
quiz: [
{ q: "What hormone was measured to track stress?", options: ["Insulin", "Cortisol", "Adrenaline"], a: 1 },
{ q: "What is the relationship between green space and stress?", options: ["Inverse (more green = less stress)", "Direct (more green = more stress)", "No correlation"], a: 0 }
],
concepts: [
{ id: 'c1', x: 20, y: 30, label: "Urban Space", r: 40, color: "#78716c" },
{ id: 'c2', x: 50, y: 50, label: "Mental Health", r: 50, color: "#1c1917" },
{ id: 'c3', x: 80, y: 30, label: "Cortisol", r: 35, color: "#78716c" },
]
},
{
id: 2,
title: "CRISPR-Cas9: Gene Editing Mechanics",
author: "J. Doudna, E. Charpentier",
field: "Biotechnology",
readTime: "18 min",
difficulty: "Hard",
abstract: "Exploring the molecular mechanism of the bacterial adaptive immune system...",
content: {
beginner: {
text: "CRISPR is like a pair of molecular scissors. It allows scientists to cut DNA at a very specific spot. This technology was originally found in bacteria, which use it to fight off viruses. Now, we use it to try and fix genetic diseases by 'editing' the bad parts of DNA.",
keyPoints: ["Molecular scissors.", "Cuts DNA specifically.", "Originally from bacteria."]
},
intermediate: {
text: "The CRISPR-Cas9 system utilizes a guide RNA to direct the Cas9 enzyme to a specific sequence of DNA. Once bound, Cas9 induces a double-strand break. The cell then repairs this break, often introducing mutations that disable the gene, or integrating a new sequence provided by the researcher.",
keyPoints: ["Guide RNA directs Cas9.", "Induces double-strand break.", "Repair mechanisms used for editing."]
},
expert: {
text: "The type II CRISPR-Cas9 system relies on the formation of a ribonucleoprotein complex. The sgRNA creates Watson-Crick base pairing with the target protospacer adjacent motif (PAM) upstream. The HNH and RuvC nuclease domains of Cas9 then cleave the complementary and non-complementary strands respectively.",
keyPoints: ["Ribonucleoprotein complex formation.", "PAM sequence recognition.", "HNH and RuvC domain activity."]
}
},
quiz: [
{ q: "What acts as the 'guide' for the scissors?", options: ["Cas9", "RNA", "DNA"], a: 1 },
{ q: "What does Cas9 actually do?", options: ["Replicates DNA", "Cuts DNA", "Transports DNA"], a: 1 }
],
concepts: [
{ id: 'c1', x: 30, y: 30, label: "Guide RNA", r: 40, color: "#ca8a04" },
{ id: 'c2', x: 60, y: 60, label: "Cas9 Enzyme", r: 55, color: "#854d0e" },
{ id: 'c3', x: 70, y: 20, label: "DNA Helix", r: 30, color: "#a16207" },
]
},
{
id: 3,
title: "The Economic Impact of AI Automation",
author: "Global Economic Forum",
field: "Economics",
readTime: "9 min",
difficulty: "Medium",
abstract: "Forecasting labor market shifts over the next decade...",
content: {
beginner: {
text: "Robots and AI will change how we work. Some jobs will disappear, but new ones will be created. The main idea is that machines will handle boring, repetitive tasks, letting humans focus on creative and social work. We need to learn new skills to keep up.",
keyPoints: ["Automation replaces routine.", "New creative jobs appear.", "Reskilling is crucial."]
},
intermediate: {
text: "Automation primarily targets routine cognitive and manual tasks. However, this displacement leads to a 'productivity effect' where lower costs drive demand for new services. The challenge lies in the transition period—can the workforce reskill fast enough to fill the new roles created by this efficiency?",
keyPoints: ["Displacement vs. Productivity effect.", "Routine tasks are vulnerable.", "Transitional friction."]
},
expert: {
text: "We model a task-based approach to labor economics. High-elasticity sectors show labor augmentation rather than substitution. However, wage polarization is a significant risk as returns to capital exceed returns to labor in the short run (r > g). Policy intervention in education is the primary variable for mitigation.",
keyPoints: ["Task-based labor model.", "Wage polarization risk.", "Capital returns vs Labor returns."]
}
},
quiz: [
{ q: "Which tasks are most vulnerable?", options: ["Creative", "Routine", "Social"], a: 1 },
{ q: "What is the primary mitigation strategy?", options: ["Stopping AI", "Universal Income", "Education/Reskilling"], a: 2 }
],
concepts: [
{ id: 'c1', x: 25, y: 60, label: "Labor", r: 45, color: "#475569" },
{ id: 'c2', x: 50, y: 30, label: "Capital", r: 45, color: "#1e293b" },
{ id: 'c3', x: 75, y: 60, label: "Automation", r: 45, color: "#64748b" },
]
}
];
// --- Components ---
const Simulation = ({ paper }) => {
const [activeNode, setActiveNode] = useState(null);
return (
<div className="bg-stone-100 rounded-lg p-6 border border-stone-200 h-96 relative overflow-hidden flex flex-col items-center justify-center">
<div className="absolute top-4 left-4 bg-white/80 p-2 rounded shadow-sm text-xs font-serif text-stone-600">
Interactive Concept Map
</div>
<svg viewBox="0 0 100 100" className="w-full h-full cursor-pointer">
{/* Connection Lines */}
<line x1={paper.concepts[0].x} y1={paper.concepts[0].y} x2={paper.concepts[1].x} y2={paper.concepts[1].y} stroke="#d6d3d1" strokeWidth="0.5" />
<line x1={paper.concepts[1].x} y1={paper.concepts[1].y} x2={paper.concepts[2].x} y2={paper.concepts[2].y} stroke="#d6d3d1" strokeWidth="0.5" />
{/* Nodes */}
{paper.concepts.map((node) => (
<g
key={node.id}
onClick={() => setActiveNode(node)}
className="transition-all duration-500 hover:opacity-80"
>
<circle
cx={node.x}
cy={node.y}
r={node.r / 3}
fill={activeNode?.id === node.id ? "#b91c1c" : node.color}
className="transition-colors duration-300"
/>
<text
x={node.x}
y={node.y + (node.r/3) + 5}
textAnchor="middle"
fontSize="3"
fontFamily="serif"
fill="#292524"
>
{node.label}
</text>
</g>
))}
</svg>
{activeNode && (
<div className="absolute bottom-4 left-4 right-4 bg-white p-4 rounded shadow-lg border-l-4 border-red-700 animate-fade-in">
<h4 className="font-serif font-bold text-stone-900">{activeNode.label}</h4>
<p className="text-sm text-stone-600 mt-1">
Core concept extracted from {paper.title}. Connects to {paper.concepts.find(c => c.id !== activeNode.id)?.label}.
</p>
<button
onClick={(e) => {e.stopPropagation(); setActiveNode(null)}}
className="absolute top-2 right-2 text-stone-400 hover:text-stone-900"
>
×
</button>
</div>
)}
</div>
);
};
const Quiz = ({ questions }) => {
const [answers, setAnswers] = useState({});
const [showResults, setShowResults] = useState(false);
const handleSelect = (qIdx, optIdx) => {
setAnswers(prev => ({...prev, [qIdx]: optIdx}));
};
const score = Object.keys(answers).reduce((acc, qIdx) => {
return acc + (answers[qIdx] === questions[qIdx].a ? 1 : 0);
}, 0);
return (
<div className="space-y-6">
<div className="flex justify-between items-center mb-6">
<h3 className="font-serif text-xl font-bold text-stone-800">Knowledge Check</h3>
{showResults && (
<span className="bg-stone-800 text-stone-50 px-3 py-1 rounded text-sm font-medium">
Score: {score}/{questions.length}
</span>
)}
</div>
{questions.map((q, idx) => {
const isCorrect = answers[idx] === q.a;
const hasAnswered = answers[idx] !== undefined;
return (
<div key={idx} className="bg-white p-6 rounded-lg border border-stone-200 shadow-sm">
<p className="font-serif font-medium text-lg mb-4 text-stone-900">{idx + 1}. {q.q}</p>
<div className="space-y-2">
{q.options.map((opt, optIdx) => (
<button
key={optIdx}
onClick={() => !showResults && handleSelect(idx, optIdx)}
disabled={showResults}
className={`w-full text-left p-3 rounded border transition-all ${
showResults
? optIdx === q.a
? 'bg-green-50 border-green-500 text-green-800'
: answers[idx] === optIdx
? 'bg-red-50 border-red-500 text-red-800'
: 'border-stone-100 opacity-50'
: answers[idx] === optIdx
? 'bg-stone-800 text-white border-stone-800'
: 'bg-stone-50 border-stone-200 hover:bg-stone-100 text-stone-700'
}`}
>
<div className="flex items-center justify-between">
<span>{opt}</span>
{showResults && optIdx === q.a && <CheckCircle size={16} />}
{showResults && answers[idx] === optIdx && optIdx !== q.a && <XCircle size={16} />}
</div>
</button>
))}
</div>
</div>
);
})}
<div className="pt-4 flex justify-end">
{!showResults ? (
<button
onClick={() => setShowResults(true)}
disabled={Object.keys(answers).length !== questions.length}
className="bg-stone-800 text-white px-6 py-2 rounded shadow hover:bg-stone-700 disabled:opacity-50 disabled:cursor-not-allowed font-serif"
>
Submit Quiz
</button>
) : (
<button
onClick={() => {
setAnswers({});
setShowResults(false);
}}
className="flex items-center gap-2 text-stone-600 hover:text-stone-900 font-medium"
>
<RotateCcw size={16} /> Retry
</button>
)}
</div>
</div>
);
};
// --- Main Pages ---
const LandingPage = ({ onSelectPaper, onUpload }) => (
<div className="animate-fade-in">
{/* Hero */}
<div className="text-center py-16 px-4">
<div className="inline-flex items-center justify-center p-3 bg-stone-200 rounded-full mb-6">
<Brain className="text-stone-700" size={32} />
</div>
<h1 className="text-5xl font-serif font-bold text-stone-900 mb-4 tracking-tight">
Complex Papers, <span className="italic text-stone-600">Simplified.</span>
</h1>
<p className="text-lg text-stone-600 max-w-2xl mx-auto font-serif mb-8 leading-relaxed">
Upload any academic PDF. Our AI reconstructs it into beginner-friendly explanations,
interactive simulations, and quizzes.
</p>
<div className="flex justify-center gap-4">
<button onClick={onUpload} className="flex items-center gap-2 bg-stone-900 text-white px-6 py-3 rounded-lg shadow-lg hover:bg-stone-800 transition-all">
<Upload size={20} />
Upload Paper
</button>
<button className="flex items-center gap-2 bg-white text-stone-900 border border-stone-300 px-6 py-3 rounded-lg shadow-sm hover:bg-stone-50 transition-all">
<Search size={20} />
Browse Library
</button>
</div>
</div>
{/* Library Grid */}
<div className="max-w-6xl mx-auto px-6 pb-20">
<h2 className="text-2xl font-serif font-bold text-stone-800 mb-6 border-b border-stone-200 pb-2">Trending Research</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{PAPERS.map(paper => (
<div
key={paper.id}
onClick={() => onSelectPaper(paper)}
className="group bg-white rounded-xl border border-stone-200 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden cursor-pointer flex flex-col h-full"
>
<div className="p-6 flex-1">
<div className="flex justify-between items-start mb-4">
<span className="px-2 py-1 bg-stone-100 text-stone-600 text-xs font-bold uppercase tracking-wider rounded">{paper.field}</span>
<span className="text-stone-400 text-sm">{paper.readTime}</span>
</div>
<h3 className="font-serif text-xl font-bold text-stone-900 mb-2 leading-tight group-hover:text-red-800 transition-colors">
{paper.title}
</h3>
<p className="text-sm text-stone-500 italic mb-4">by {paper.author}</p>
<p className="text-stone-600 text-sm line-clamp-3 leading-relaxed">
{paper.abstract}
</p>
</div>
<div className="bg-stone-50 px-6 py-4 border-t border-stone-100 flex items-center justify-between text-sm font-medium text-stone-600">
<span className="flex items-center gap-1"><Activity size={16} /> Interactive</span>
<span className="flex items-center gap-1 text-red-700 group-hover:translate-x-1 transition-transform">Read Now <ChevronLeft className="rotate-180" size={16}/></span>
</div>
</div>
))}
{/* Mock Premium Card */}
<div className="bg-stone-900 rounded-xl shadow-sm flex flex-col items-center justify-center p-8 text-center text-stone-300 relative overflow-hidden group">
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<Lock size={120} />
</div>
<Award size={48} className="text-yellow-600 mb-4" />
<h3 className="font-serif text-xl font-bold text-white mb-2">Unlock Unlimited Access</h3>
<p className="text-sm mb-6 text-stone-400">Get unlimited papers, expert mode, and offline saving for just $9.99/mo.</p>
<button className="bg-yellow-700 text-white px-6 py-2 rounded hover:bg-yellow-600 transition-colors w-full font-medium">
Go Premium
</button>
</div>
</div>
</div>
</div>
);
const PaperReader = ({ paper, onBack }) => {
const [level, setLevel] = useState('intermediate');
const [activeTab, setActiveTab] = useState('text'); // text, sim, quiz
const content = paper.content[level];
return (
<div className="max-w-5xl mx-auto px-4 pb-20 animate-fade-in">
{/* Header */}
<div className="sticky top-0 bg-[#fdfbf7]/95 backdrop-blur-sm z-10 py-4 border-b border-stone-200 mb-8">
<button onClick={onBack} className="flex items-center gap-2 text-stone-500 hover:text-stone-900 mb-4 text-sm font-medium transition-colors">
<ChevronLeft size={16} /> Back to Library
</button>
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div className="flex-1">
<h1 className="text-3xl font-serif font-bold text-stone-900 leading-tight mb-2">{paper.title}</h1>
<p className="text-stone-600 italic">Original Authors: {paper.author}</p>
</div>
<div className="flex items-center bg-stone-200 p-1 rounded-lg">
{['beginner', 'intermediate', 'expert'].map((l) => (
<button
key={l}
onClick={() => setLevel(l)}
className={`px-4 py-2 rounded-md text-sm font-medium capitalize transition-all ${
level === l
? 'bg-white text-stone-900 shadow-sm'
: 'text-stone-600 hover:text-stone-800'
}`}
>
{l}
</button>
))}
</div>
</div>
</div>
{/* Main Content Area */}
<div className="flex flex-col lg:flex-row gap-12">
{/* Left Col: Navigation / Actions */}
<div className="lg:w-64 flex-shrink-0 space-y-4">
<div className="bg-white p-4 rounded-lg border border-stone-200 shadow-sm sticky top-40">
<h4 className="font-serif font-bold text-stone-800 mb-4 uppercase tracking-widest text-xs">Modules</h4>
<nav className="space-y-2">
<button
onClick={() => setActiveTab('text')}
className={`w-full text-left px-4 py-3 rounded flex items-center gap-3 transition-colors ${activeTab === 'text' ? 'bg-stone-100 text-stone-900 font-medium' : 'text-stone-600 hover:bg-stone-50'}`}
>
<BookOpen size={18} /> Explanation
</button>
<button
onClick={() => setActiveTab('sim')}
className={`w-full text-left px-4 py-3 rounded flex items-center gap-3 transition-colors ${activeTab === 'sim' ? 'bg-stone-100 text-stone-900 font-medium' : 'text-stone-600 hover:bg-stone-50'}`}
>
<Zap size={18} /> Simulation
</button>
<button
onClick={() => setActiveTab('quiz')}
className={`w-full text-left px-4 py-3 rounded flex items-center gap-3 transition-colors ${activeTab === 'quiz' ? 'bg-stone-100 text-stone-900 font-medium' : 'text-stone-600 hover:bg-stone-50'}`}
>
<Brain size={18} /> Quiz
</button>
</nav>
<div className="mt-8 pt-4 border-t border-stone-100 space-y-2">
<button className="w-full text-left px-4 py-2 text-sm text-stone-500 hover:text-stone-900 flex items-center gap-2">
<Bookmark size={16} /> Save to Collection
</button>
<button className="w-full text-left px-4 py-2 text-sm text-stone-500 hover:text-stone-900 flex items-center gap-2">
<Share2 size={16} /> Share Summary
</button>
</div>
</div>
</div>
{/* Right Col: Content */}
<div className="flex-1 min-h-[600px]">
{activeTab === 'text' && (
<div className="bg-white p-8 md:p-12 rounded-lg border border-stone-200 shadow-sm animate-fade-in relative">
{/* Paper texture effect */}
<div className="absolute top-0 left-0 w-full h-1 bg-stone-300/30"></div>
<h2 className="font-serif text-2xl font-bold text-stone-900 mb-6">Abstract Breakdown</h2>
<div className="prose prose-stone prose-lg max-w-none font-serif leading-loose text-stone-800">
{content.text.split('. ').map((sentence, i) => (
<span key={i} className="hover:bg-yellow-50 transition-colors cursor-help rounded px-1" title="Click for definition">
{sentence}.{' '}
</span>
))}
</div>
<div className="mt-12 bg-stone-50 p-6 rounded-lg border-l-4 border-stone-400">
<h3 className="font-bold text-stone-900 mb-3 flex items-center gap-2">
<Award size={20} className="text-stone-600"/> Key Takeaways
</h3>
<ul className="space-y-2">
{content.keyPoints.map((point, i) => (
<li key={i} className="flex items-start gap-3 text-stone-700">
<span className="mt-2 w-1.5 h-1.5 bg-stone-400 rounded-full flex-shrink-0" />
{point}
</li>
))}
</ul>
</div>
</div>
)}
{activeTab === 'sim' && (
<div className="animate-fade-in">
<h2 className="font-serif text-2xl font-bold text-stone-900 mb-4">Interactive Model</h2>
<p className="text-stone-600 mb-6">Explore the relationships between the core concepts of this paper. Click nodes to expand.</p>
<Simulation paper={paper} />
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white p-4 rounded border border-stone-200">
<h4 className="font-bold text-stone-800 mb-2">Video Walkthrough</h4>
<div className="aspect-video bg-stone-800 rounded flex items-center justify-center text-white cursor-pointer hover:bg-stone-700 transition-colors">
<Play size={48} />
</div>
</div>
<div className="bg-white p-4 rounded border border-stone-200">
<h4 className="font-bold text-stone-800 mb-2">Dataset Source</h4>
<div className="h-32 bg-stone-50 border border-stone-100 rounded p-4 text-xs font-mono text-stone-500 overflow-hidden">
DATA_ID: 88291<br/>
N = 2500<br/>
VAR_1: NDVI_INDEX<br/>
VAR_2: CORTISOL_NG_ML<br/>
...
</div>
</div>
</div>
</div>
)}
{activeTab === 'quiz' && (
<div className="animate-fade-in max-w-2xl">
<Quiz questions={paper.quiz} />
</div>
)}
</div>
</div>
</div>
);
};
// --- App Container ---
const App = () => {
const [currentView, setCurrentView] = useState('home'); // home, reader, upload
const [selectedPaper, setSelectedPaper] = useState(null);
const [isUploading, setIsUploading] = useState(false);
const handleSelectPaper = (paper) => {
setSelectedPaper(paper);
setCurrentView('reader');
window.scrollTo(0,0);
};
const handleUpload = () => {
setIsUploading(true);
// Simulate upload delay
setTimeout(() => {
setIsUploading(false);
// For demo, just open the first paper as if it was the uploaded one
handleSelectPaper(PAPERS[0]);
}, 2000);
};
return (
<div className="min-h-screen bg-[#fdfbf7] text-stone-900 font-sans selection:bg-stone-200 selection:text-stone-900">
{/* Top Navigation */}
<header className="bg-white border-b border-stone-200 px-6 py-4 flex justify-between items-center sticky top-0 z-50">
<div
onClick={() => setCurrentView('home')}
className="flex items-center gap-2 cursor-pointer"
>
<div className="bg-stone-900 text-white p-1.5 rounded">
<BookOpen size={20} />
</div>
<span className="font-serif font-bold text-xl tracking-tight">Forcite</span>
</div>
<div className="flex items-center gap-6">
<nav className="hidden md:flex gap-6 text-sm font-medium text-stone-600">
<a href="#" className="hover:text-stone-900 transition-colors">Community</a>
<a href="#" className="hover:text-stone-900 transition-colors">Pricing</a>
</nav>
<div className="w-8 h-8 rounded-full bg-stone-200 border border-stone-300 flex items-center justify-center text-stone-600 font-serif font-bold text-xs">
JD
</div>
</div>
</header>
{/* Upload Overlay */}
{isUploading && (
<div className="fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-50 flex items-center justify-center animate-fade-in">
<div className="bg-white p-8 rounded-xl shadow-2xl max-w-md w-full text-center">
<div className="w-16 h-16 border-4 border-stone-200 border-t-stone-800 rounded-full animate-spin mx-auto mb-6"></div>
<h3 className="font-serif text-xl font-bold mb-2">Analyzing Document...</h3>
<p className="text-stone-500">Generating plain-language explanations and interactive concept maps.</p>
</div>
</div>
)}
{/* Main Content Router */}
<main className="pt-8">
{currentView === 'home' && (
<LandingPage onSelectPaper={handleSelectPaper} onUpload={handleUpload} />
)}
{currentView === 'reader' && selectedPaper && (
<PaperReader paper={selectedPaper} onBack={() => setCurrentView('home')} />
)}
</main>
{/* Footer */}
<footer className="bg-white border-t border-stone-200 py-12 mt-20">
<div className="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<span className="font-serif font-bold text-lg block mb-4">Forcite</span>
<p className="text-stone-500 text-sm">Democratizing access to complex academic knowledge through AI.</p>
</div>
<div>
<h4 className="font-bold text-sm text-stone-900 mb-4 uppercase tracking-wider">Product</h4>
<ul className="space-y-2 text-stone-500 text-sm">
<li>Library</li>
<li>Upload</li>
<li>Pricing</li>
</ul>
</div>
<div>
<h4 className="font-bold text-sm text-stone-900 mb-4 uppercase tracking-wider">Company</h4>
<ul className="space-y-2 text-stone-500 text-sm">
<li>About</li>
<li>Careers</li>
<li>Academic Partners</li>
</ul>
</div>
<div>
<div className="bg-stone-50 p-4 rounded border border-stone-100">
<p className="text-xs text-stone-500 mb-2">Start your free trial today.</p>
<button className="w-full bg-stone-900 text-white text-sm py-2 rounded font-medium">Upgrade to Pro</button>
</div>
</div>
</div>
</footer>
</div>
);
};
export default App;