popsite-ui 1.0.0

package/src/components/modules/LandingPageModule.jsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { landingPageMockData } from '../../data/systems/landingPage';
+
+export function LandingPageModule() {
+  const [currentView, setCurrentView] = useState('hero'); // hero, features, testimonials, pricing
+  
+  // Animated counters
+  const [userCount, setUserCount] = useState(0);
+  const [deployCount, setDeployCount] = useState(0);
+
+  useEffect(() => {
+    if (currentView !== 'hero') return;
+    
+    // Animate counters on mount
+    const duration = 2000;
+    const steps = 60;
+    const userStep = landingPageMockData.stats.users / steps;
+    const deployStep = landingPageMockData.stats.deployments / steps;
+    
+    let currentStep = 0;
+    
+    const timer = setInterval(() => {
+      currentStep++;
+      if (currentStep <= steps) {
+        setUserCount(Math.floor(userStep * currentStep));
+        setDeployCount(Math.floor(deployStep * currentStep));
+      } else {
+        setUserCount(landingPageMockData.stats.users);
+        setDeployCount(landingPageMockData.stats.deployments);
+        clearInterval(timer);
+      }
+    }, duration / steps);
+    
+    return () => clearInterval(timer);
+  }, [currentView]);
+
+  const renderNav = () => (
+    <nav className="pk-nav pk-glass">
+      <div className="pk-heading-md pk-gradient-text" style={{ cursor: 'pointer' }} onClick={() => setCurrentView('hero')}>
+        PopSite
+      </div>
+      <div style={{ display: 'flex', gap: '1.5rem' }} className="pk-hidden-mobile">
+        <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: currentView === 'hero' ? 'var(--pk-primary)' : 'var(--pk-text-main)' }} onClick={() => setCurrentView('hero')}>Home</button>
+        <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: currentView === 'features' ? 'var(--pk-primary)' : 'var(--pk-text-main)' }} onClick={() => setCurrentView('features')}>Features</button>
+        <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: currentView === 'testimonials' ? 'var(--pk-primary)' : 'var(--pk-text-main)' }} onClick={() => setCurrentView('testimonials')}>Testimonials</button>
+        <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: currentView === 'pricing' ? 'var(--pk-primary)' : 'var(--pk-text-main)' }} onClick={() => setCurrentView('pricing')}>Pricing</button>
+      </div>
+      <button className="pk-btn pk-btn-primary" onClick={() => setCurrentView('pricing')}>Get Started</button>
+    </nav>
+  );
+
+  const renderHero = () => (
+    <div className="pk-container animate-fade-in" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '80vh', textAlign: 'center' }}>
+       {/* Floating CSS elements for showcase */}
+       <div style={{ position: 'absolute', top: '20%', left: '10%', width: '150px', height: '150px', background: 'radial-gradient(circle, var(--pk-primary), transparent 70%)', opacity: 0.2, filter: 'blur(20px)', animation: 'floatA 6s infinite ease-in-out' }}></div>
+       <div style={{ position: 'absolute', bottom: '20%', right: '10%', width: '250px', height: '250px', background: 'radial-gradient(circle, var(--pk-secondary), transparent 70%)', opacity: 0.15, filter: 'blur(30px)', animation: 'floatB 8s infinite ease-in-out reverse' }}></div>
+
+       <div className="pk-badge" style={{ marginBottom: '2rem', padding: '0.5rem 1rem', fontSize: '0.875rem' }}>✨ v1.0 is now live</div>
+       
+       <h1 className="pk-heading-xl" style={{ fontSize: '4.5rem', marginBottom: '1.5rem', lineHeight: 1.1 }}>
+          <span className="pk-gradient-text">{landingPageMockData.hero.title}</span>
+       </h1>
+       
+       <p className="pk-text-body" style={{ fontSize: '1.5rem', maxWidth: '800px', marginBottom: '3rem' }}>
+          {landingPageMockData.hero.subtitle}
+       </p>
+       
+       <div style={{ display: 'flex', gap: '1rem', marginBottom: '4rem' }}>
+          <button className="pk-btn pk-btn-primary" style={{ fontSize: '1.125rem', padding: '1rem 2rem' }} onClick={() => setCurrentView('pricing')}>{landingPageMockData.hero.cta1}</button>
+          <button className="pk-btn pk-btn-outline" style={{ fontSize: '1.125rem', padding: '1rem 2rem' }} onClick={() => setCurrentView('features')}>{landingPageMockData.hero.cta2}</button>
+       </div>
+
+       {/* Animated Counters */}
+       <div className="pk-grid pk-glass" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: '4rem', padding: '2rem 4rem', borderRadius: 'var(--pk-radius-lg)', background: 'var(--pk-bg-glass)', display: 'inline-grid' }}>
+          <div>
+            <h2 className="pk-heading-lg" style={{ color: 'var(--pk-primary)' }}>{userCount.toLocaleString()}+</h2>
+            <p className="pk-text-muted pk-label">Developers</p>
+          </div>
+          <div>
+            <h2 className="pk-heading-lg" style={{ color: 'var(--pk-secondary)' }}>{deployCount.toLocaleString()}+</h2>
+            <p className="pk-text-muted pk-label">Deployments</p>
+          </div>
+          <div>
+            <h2 className="pk-heading-lg" style={{ color: 'var(--pk-success)' }}>{landingPageMockData.stats.uptime}%</h2>
+            <p className="pk-text-muted pk-label">Uptime SLA</p>
+          </div>
+       </div>
+
+       <style>{`
+         @keyframes floatA { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-30px) scale(1.1); } }
+         @keyframes floatB { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(40px) scale(0.9); } }
+       `}</style>
+    </div>
+  );
+
+  const renderFeatures = () => (
+    <div className="pk-container animate-fade-in" style={{ padding: '4rem 2rem' }}>
+       <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
+          <h2 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>Architected for Speed</h2>
+          <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>Everything you need to build scalable interfaces without the bloat.</p>
+       </div>
+
+       <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', gap: '3rem' }}>
+          {landingPageMockData.features.map(f => (
+             <div key={f.id} className="pk-card pk-card-interactive" style={{ padding: '3rem 2rem', textAlign: 'center', background: 'var(--pk-bg-glass)', border: '1px solid rgba(255,255,255,0.4)', backdropFilter: 'blur(10px)' }}>
+                <div style={{ fontSize: '3rem', marginBottom: '1.5rem', filter: 'drop-shadow(0 10px 10px rgba(0,0,0,0.1))' }}>{f.icon}</div>
+                <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>{f.title}</h3>
+                <p className="pk-text-body">{f.description}</p>
+             </div>
+          ))}
+       </div>
+    </div>
+  );
+
+  const renderTestimonials = () => (
+    <div className="pk-container animate-fade-in" style={{ padding: '4rem 2rem' }}>
+       <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
+          <h2 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>Loved by Engineers</h2>
+          <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>Here's what the community is saying.</p>
+       </div>
+
+       <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
+          {landingPageMockData.testimonials.map(t => (
+             <div key={t.id} className="pk-card pk-card-interactive" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                <div style={{ color: '#f59e0b', fontSize: '1.5rem', letterSpacing: '4px' }}>★★★★★</div>
+                <p className="pk-text-body" style={{ fontSize: '1.125rem', fontStyle: 'italic', flex: 1 }}>"{t.text}"</p>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                   <img src={t.avatar} alt={t.name} style={{ width: '50px', height: '50px', borderRadius: '50%', objectFit: 'cover' }} />
+                   <div>
+                      <h4 className="pk-label">{t.name}</h4>
+                      <p className="pk-text-sm" style={{ color: 'var(--pk-primary)' }}>{t.role}</p>
+                   </div>
+                </div>
+             </div>
+          ))}
+       </div>
+    </div>
+  );
+
+  const renderPricing = () => (
+    <div className="pk-container animate-fade-in" style={{ padding: '4rem 2rem' }}>
+       <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
+          <h2 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>Simple, transparent pricing</h2>
+          <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>No hidden fees. Absolute freedom.</p>
+       </div>
+
+       <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem', alignItems: 'center' }}>
+          {landingPageMockData.pricing.map(p => (
+             <div key={p.id} className="pk-card" style={{ padding: '3rem 2rem', position: 'relative', border: p.featured ? '2px solid var(--pk-primary)' : '1px solid var(--pk-border)', transform: p.featured ? 'scale(1.05)' : 'scale(1)', zIndex: p.featured ? 10 : 1 }}>
+                {p.featured && (
+                   <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, -50%)', background: 'var(--pk-primary)', color: 'white', padding: '0.25rem 1rem', borderRadius: 'var(--pk-radius-full)', fontWeight: 600, fontSize: '0.875rem' }}>
+                      Most Popular
+                   </div>
+                )}
+                <h3 className="pk-heading-md" style={{ marginBottom: '0.5rem', textAlign: 'center' }}>{p.tier}</h3>
+                <div className="pk-heading-xl pk-gradient-text" style={{ textAlign: 'center', marginBottom: '2rem' }}>{p.price}</div>
+                
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '3rem' }}>
+                   {p.features.map(f => (
+                      <div key={f} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                         <span style={{ color: 'var(--pk-success)' }}>✓</span>
+                         <span className="pk-text-body">{f}</span>
+                      </div>
+                   ))}
+                </div>
+                
+                <button className={`pk-btn pk-w-full ${p.featured ? 'pk-btn-primary' : 'pk-btn-outline'}`} style={{ padding: '1rem' }}>
+                   {p.cta}
+                </button>
+             </div>
+          ))}
+       </div>
+    </div>
+  );
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)', overflow: 'hidden' }}>
+      {renderNav()}
+      {currentView === 'hero' && renderHero()}
+      {currentView === 'features' && renderFeatures()}
+      {currentView === 'testimonials' && renderTestimonials()}
+      {currentView === 'pricing' && renderPricing()}
+    </div>
+  );
+}

package/src/components/modules/LibraryManagementModule.jsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import { libraryManagementMockData } from '../../data/systems/libraryManagement';
+import { useToast } from '../system/Toast';
+
+export function LibraryManagementModule() {
+  const [currentView, setCurrentView] = useState('catalog'); // catalog, dashboard
+  const [catalog, setCatalog] = useState(libraryManagementMockData.catalog);
+  const [myBooks, setMyBooks] = useState(libraryManagementMockData.myBooks);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    const savedCat = localStorage.getItem('popsite_library_cat');
+    const savedMy = localStorage.getItem('popsite_library_my');
+    if (savedCat) try { setCatalog(JSON.parse(savedCat)); } catch(e){}
+    if (savedMy) try { setMyBooks(JSON.parse(savedMy)); } catch(e){}
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_library_cat', JSON.stringify(catalog));
+    localStorage.setItem('popsite_library_my', JSON.stringify(myBooks));
+  }, [catalog, myBooks]);
+
+  const withDelay = (callback, delay = 800) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleBorrow = (book) => {
+     withDelay(() => {
+        // Calculate due date (14 days from now)
+        const due = new Date();
+        due.setDate(due.getDate() + 14);
+        
+        const newRecord = {
+           book,
+           borrowDate: new Date().toISOString().split('T')[0],
+           dueDate: due.toISOString().split('T')[0]
+        };
+
+        setMyBooks([...myBooks, newRecord]);
+        setCatalog(catalog.map(b => b.id === book.id ? { ...b, available: false } : b));
+        showToast(`You have borrowed "${book.title}"`, 'success');
+     });
+  };
+
+  const handleReturn = (record) => {
+     withDelay(() => {
+        setMyBooks(myBooks.filter(m => m.book.id !== record.book.id));
+        
+        // If the book originally existed in our catalog state array, flip it back to available
+        const existsInCatalog = catalog.find(b => b.id === record.book.id);
+        if (existsInCatalog) {
+           setCatalog(catalog.map(b => b.id === record.book.id ? { ...b, available: true } : b));
+        } else {
+           // If it was a mock injected book, add it to catalog
+           setCatalog([...catalog, { ...record.book, available: true }]);
+        }
+        showToast(`Returned "${record.book.title}" successfully`, 'info');
+     });
+  };
+
+  const isOverdue = (dueDateStr) => {
+     const due = new Date(dueDateStr);
+     const now = new Date();
+     return now > due;
+  };
+
+  const renderNav = () => (
+    <div className="pk-card" style={{ marginBottom: '2rem', padding: '1rem', display: 'flex', gap: '1rem' }}>
+      <button className={currentView === 'catalog' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('catalog')}>Public Catalog</button>
+      <button className={currentView === 'dashboard' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('dashboard')}>My Books ({myBooks.length})</button>
+    </div>
+  );
+
+  const renderCatalog = () => {
+     const filtered = catalog.filter(b => 
+        b.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+        b.author.toLowerCase().includes(searchQuery.toLowerCase())
+     );
+
+     return (
+        <div className="animate-fade-in">
+           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+              <h2 className="pk-heading-lg">Browse Collection</h2>
+              <input type="text" className="pk-input" placeholder="Search title or author..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
+           </div>
+
+           <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))' }}>
+              {filtered.map(book => (
+                 <div key={book.id} className="pk-card pk-card-interactive" style={{ display: 'flex', flexDirection: 'column' }}>
+                    <div style={{ height: '300px', width: '100%' }}>
+                       <img src={book.cover} alt={book.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={(e)=>{e.target.style.display='none'}} />
+                    </div>
+                    <div className="pk-card-body" style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+                       <span className="pk-badge" style={{ alignSelf: 'flex-start', marginBottom: '0.5rem', background: 'var(--pk-bg-main)', color: 'var(--pk-text-muted)' }}>{book.genre}</span>
+                       <h3 className="pk-heading-md" style={{ marginBottom: '0.25rem' }}>{book.title}</h3>
+                       <p className="pk-text-sm" style={{ marginBottom: '1rem', flex: 1 }}>{book.author}</p>
+                       
+                       {book.available ? (
+                          <button className="pk-btn pk-btn-primary pk-w-full" onClick={() => handleBorrow(book)}>Borrow Book</button>
+                       ) : (
+                          <button className="pk-btn pk-btn-outline pk-w-full" disabled>Currently Rented</button>
+                       )}
+                    </div>
+                 </div>
+              ))}
+           </div>
+        </div>
+     );
+  };
+
+  const renderDashboard = () => (
+    <div className="animate-fade-in">
+       <h2 className="pk-heading-lg" style={{ marginBottom: '2rem' }}>My Bookshelf</h2>
+
+       {myBooks.length === 0 ? (
+          <div className="pk-empty-state">
+             <div className="pk-empty-icon">📚</div>
+             <h3 className="pk-heading-md">Your shelf is empty</h3>
+             <p className="pk-text-body">Go to the catalog to borrow some books.</p>
+          </div>
+       ) : (
+          <div className="pk-grid pk-flex-col pk-gap-4">
+             {myBooks.map((record, i) => {
+                const overdue = isOverdue(record.dueDate);
+                return (
+                   <div key={i} className="pk-card" style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', padding: '1rem', borderLeft: overdue ? '4px solid var(--pk-danger)' : '1px solid var(--pk-border)' }}>
+                      <div style={{ width: '80px', height: '110px', borderRadius: '4px', overflow: 'hidden' }}>
+                         <img src={record.book.cover} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                      </div>
+                      <div style={{ flex: 1 }}>
+                         <h3 className="pk-heading-md" style={{ marginBottom: '0.25rem' }}>{record.book.title}</h3>
+                         <p className="pk-text-sm" style={{ marginBottom: '1rem' }}>{record.book.author}</p>
+                         
+                         <div style={{ display: 'flex', gap: '2rem' }}>
+                            <div>
+                               <p className="pk-label pk-text-muted" style={{ fontSize: '0.75rem' }}>Borrowed</p>
+                               <p className="pk-text-body" style={{ fontWeight: 600 }}>{record.borrowDate}</p>
+                            </div>
+                            <div>
+                               <p className="pk-label pk-text-muted" style={{ fontSize: '0.75rem' }}>Due Date</p>
+                               <p className="pk-text-body" style={{ fontWeight: 600, color: overdue ? 'var(--pk-danger)' : 'var(--pk-text-main)' }}>{record.dueDate}</p>
+                            </div>
+                            {overdue && (
+                               <div style={{ alignSelf: 'flex-end', background: 'var(--pk-danger)', color: 'white', padding: '0.1rem 0.5rem', borderRadius: 'var(--pk-radius-sm)', fontSize: '0.75rem', fontWeight: 'bold' }}>OVERDUE</div>
+                            )}
+                         </div>
+                      </div>
+                      <button className="pk-btn pk-btn-outline" onClick={() => handleReturn(record)}>Return Book</button>
+                   </div>
+                );
+             })}
+          </div>
+       )}
+    </div>
+  );
+
+  return (
+    <div className="pk-container" style={{ minHeight: '100vh' }}>
+       {isLoading && (
+         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+           <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+           <h3 className="pk-heading-md">Syncing Library Database...</h3>
+         </div>
+       )}
+
+       <div style={{ marginBottom: '2rem' }}>
+          <h1 className="pk-heading-xl">{libraryManagementMockData.libraryName}</h1>
+          <p className="pk-text-body">Your portal to infinite knowledge.</p>
+       </div>
+
+       {renderNav()}
+
+       <div style={{ position: 'relative' }}>
+          {currentView === 'catalog' && renderCatalog()}
+          {currentView === 'dashboard' && renderDashboard()}
+       </div>
+
+       <ToastContainer />
+    </div>
+  );
+}