commit 5fd3447e5cc1cd9d66989d6d56a6bbd929cf1b3f
Author: ffff:37.120.216.58 <ffff:37.120.216.58@hub.scroll.pub>
Date: 2025-01-03 11:29:16 +0000
Subject: updated body.html
diff --git a/body.html b/body.html
index 77352f4..465d013 100644
--- a/body.html
+++ b/body.html
@@ -17,7 +17,7 @@
<main>
<section id="hero">
<h1>Discover the Future of Technology</h1>
- <p>Premium ICT books for professionals and enthusiasts</p>
+ <p>TechBook - Comprhensive ICT Book Lanuch</p>
<button class="cta-button">Browse Collection</button>
</section>
@@ -26,19 +26,19 @@
<div class="book-grid">
<article class="book-card">
<div class="book-image"></div>
- <h3>Cloud Computing Essentials</h3>
+ <h3>Book-I Basic Computing Essentials</h3>
<p class="price">$49.99</p>
<button class="add-to-cart">Add to Cart</button>
</article>
<article class="book-card">
<div class="book-image"></div>
- <h3>Python for AI</h3>
+ <h3>Book-II Enterprise Level ICT</h3>
<p class="price">$59.99</p>
<button class="add-to-cart">Add to Cart</button>
</article>
<article class="book-card">
<div class="book-image"></div>
- <h3>Cybersecurity Fundamentals</h3>
+ <h3>Book-III Emerging ICT</h3>
<p class="price">$54.99</p>
<button class="add-to-cart">Add to Cart</button>
</article>
commit c0966ad9180e877b662db05713ca811a5910b61f
Author: ffff:37.120.216.58 <ffff:37.120.216.58@hub.scroll.pub>
Date: 2025-01-03 11:25:50 +0000
Subject: updated index.scroll
diff --git a/index.scroll b/index.scroll
index 54af443..37b46c7 100644
--- a/index.scroll
+++ b/index.scroll
@@ -2,7 +2,7 @@ buildHtml
baseUrl https://techbooks.scroll.pub
metaTags
editButton /edit.html
-title TechBooks - Premium ICT Books Store
+title TechBook - Comprhensive ICT Book Lanuch
style.css
body.html
script.js
commit d3a7461e02cd89316865fbd3240a59f197aad630
Author: ffff:37.120.216.58 <ffff:37.120.216.58@hub.scroll.pub>
Date: 2025-01-03 11:25:10 +0000
Subject: updated index.html
diff --git a/index.html b/index.html
index e6e8f59..228dbbd 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <title>TechBook - Comprhensive ICT Book Lanuch</title>
+ <title>TechBooks - Premium ICT Books Store</title>
<script>
/* This HTML was generated by 📜 Scroll v164.12.0. https://scroll.pub */
</script>
commit f6cd11473fa3b825da7de3b2d1b1334e93856016
Author: ffff:37.120.216.58 <ffff:37.120.216.58@hub.scroll.pub>
Date: 2025-01-03 11:25:05 +0000
Subject: updated index.html
diff --git a/index.html b/index.html
index 37c9b46..e6e8f59 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <title>TechBooks - Comprhensive ICT Book Lanuch</title>
+ <title>TechBook - Comprhensive ICT Book Lanuch</title>
<script>
/* This HTML was generated by 📜 Scroll v164.12.0. https://scroll.pub */
</script>
commit cb9e7aa08ae33ee5905303bfd1b03cec04046f09
Author: ffff:37.120.216.58 <ffff:37.120.216.58@hub.scroll.pub>
Date: 2025-01-03 11:24:47 +0000
Subject: updated index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..37c9b46
--- /dev/null
+++ b/index.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>TechBooks - Comprhensive ICT Book Lanuch</title>
+ <script>
+ /* This HTML was generated by 📜 Scroll v164.12.0. https://scroll.pub */
+ </script>
+ <style>
+ @media print {
+ .doNotPrint {
+ display: none !important;
+ }
+ }
+ </style>
+ <link rel="canonical" href="https://techbooks.scroll.pub/index.html" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content="" />
+ <meta name="generator" content="Scroll v164.12.0" />
+ <meta property="og:title" content="TechBooks - Premium ICT Books Store" />
+ <meta property="og:description" content="" />
+ <meta property="og:image" content="" />
+
+ <link
+ rel="source"
+ type="application/git"
+ title="Source Code Repository"
+ href="index.scroll"
+ />
+
+ <meta name="twitter:card" content="summary_large_image" />
+ </head>
+ <body>
+ <style>
+ .abstractIconButtonParser {
+ position: absolute;
+ top: 0.25rem;
+ }
+ .abstractIconButtonParser svg {
+ fill: rgba(204, 204, 204, 0.8);
+ width: 1.875rem;
+ height: 1.875rem;
+ padding: 0 7px;
+ }
+ .abstractIconButtonParser:hover svg {
+ fill: #333;
+ }</style
+ ><a
+ href="/edit.html"
+ class="doNotPrint abstractIconButtonParser"
+ style="right: 2rem"
+ ><svg
+ width="800px"
+ height="800px"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"
+ /></svg
+ ></a>
+ <link rel="stylesheet" type="text/css" href="style.css" />
+ <header>
+ <nav>
+ <div class="logo">TechBooks</div>
+ <div class="nav-links">
+ <a href="#home">Home</a>
+ <a href="#books">Books</a>
+ <a href="#deals">Deals</a>
+ <a href="#about">About</a>
+ <button class="cart-btn" aria-label="Shopping Cart">
+ <span class="cart-count">0</span>
+ <i class="cart-icon">🛒</i>
+ </button>
+ </div>
+ </nav>
+ </header>
+
+ <main>
+ <section id="hero">
+ <h1>Discover the Future of Technology</h1>
+ <p>Premium ICT books for professionals and enthusiasts</p>
+ <button class="cta-button">Browse Collection</button>
+ </section>
+
+ <section id="featured">
+ <h2>Featured Books</h2>
+ <div class="book-grid">
+ <article class="book-card">
+ <div class="book-image"></div>
+ <h3>Cloud Computing Essentials</h3>
+ <p class="price">$49.99</p>
+ <button class="add-to-cart">Add to Cart</button>
+ </article>
+ <article class="book-card">
+ <div class="book-image"></div>
+ <h3>Python for AI</h3>
+ <p class="price">$59.99</p>
+ <button class="add-to-cart">Add to Cart</button>
+ </article>
+ <article class="book-card">
+ <div class="book-image"></div>
+ <h3>Cybersecurity Fundamentals</h3>
+ <p class="price">$54.99</p>
+ <button class="add-to-cart">Add to Cart</button>
+ </article>
+ </div>
+ </section>
+
+ <section id="deals">
+ <h2>Special Deals</h2>
+ <div class="deals-container">
+ <div class="deal-card">
+ <h3>Bundle & Save</h3>
+ <p>Get 20% off when you buy 3 or more books</p>
+ </div>
+ <div class="deal-card">
+ <h3>Student Discount</h3>
+ <p>15% off with valid student ID</p>
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Contact Us</h4>
+ <p>Email: info@techbooks.scroll.pub</p>
+ <p>Phone: (555) 123-4567</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <a href="#terms">Terms of Service</a>
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#shipping">Shipping Info</a>
+ </div>
+ </div>
+ </footer>
+
+ <script src="script.js"></script>
+ </body>
+</html>
commit 063751a8471e4e810fd43ff9c69c1a016cd35bf2
Author: root <root@hub.scroll.pub>
Date: 2025-01-03 06:30:06 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..77352f4
--- /dev/null
+++ b/body.html
@@ -0,0 +1,77 @@
+<header>
+ <nav>
+ <div class="logo">TechBooks</div>
+ <div class="nav-links">
+ <a href="#home">Home</a>
+ <a href="#books">Books</a>
+ <a href="#deals">Deals</a>
+ <a href="#about">About</a>
+ <button class="cart-btn" aria-label="Shopping Cart">
+ <span class="cart-count">0</span>
+ <i class="cart-icon">🛒</i>
+ </button>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>Discover the Future of Technology</h1>
+ <p>Premium ICT books for professionals and enthusiasts</p>
+ <button class="cta-button">Browse Collection</button>
+ </section>
+
+ <section id="featured">
+ <h2>Featured Books</h2>
+ <div class="book-grid">
+ <article class="book-card">
+ <div class="book-image"></div>
+ <h3>Cloud Computing Essentials</h3>
+ <p class="price">$49.99</p>
+ <button class="add-to-cart">Add to Cart</button>
+ </article>
+ <article class="book-card">
+ <div class="book-image"></div>
+ <h3>Python for AI</h3>
+ <p class="price">$59.99</p>
+ <button class="add-to-cart">Add to Cart</button>
+ </article>
+ <article class="book-card">
+ <div class="book-image"></div>
+ <h3>Cybersecurity Fundamentals</h3>
+ <p class="price">$54.99</p>
+ <button class="add-to-cart">Add to Cart</button>
+ </article>
+ </div>
+ </section>
+
+ <section id="deals">
+ <h2>Special Deals</h2>
+ <div class="deals-container">
+ <div class="deal-card">
+ <h3>Bundle & Save</h3>
+ <p>Get 20% off when you buy 3 or more books</p>
+ </div>
+ <div class="deal-card">
+ <h3>Student Discount</h3>
+ <p>15% off with valid student ID</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Contact Us</h4>
+ <p>Email: info@techbooks.scroll.pub</p>
+ <p>Phone: (555) 123-4567</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <a href="#terms">Terms of Service</a>
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#shipping">Shipping Info</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..54af443
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://techbooks.scroll.pub
+metaTags
+editButton /edit.html
+title TechBooks - Premium ICT Books Store
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..bbe2336
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GfQEcABRYu9LeiEyyKbyoV",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create an ICT book sales promotion website. For the domain, I suggest:\n\n---domain---\ntechbooks.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://techbooks.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TechBooks - Premium ICT Books Store\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">TechBooks</div>\n <div class=\"nav-links\">\n <a href=\"#home\">Home</a>\n <a href=\"#books\">Books</a>\n <a href=\"#deals\">Deals</a>\n <a href=\"#about\">About</a>\n <button class=\"cart-btn\" aria-label=\"Shopping Cart\">\n <span class=\"cart-count\">0</span>\n <i class=\"cart-icon\">🛒</i>\n </button>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Discover the Future of Technology</h1>\n <p>Premium ICT books for professionals and enthusiasts</p>\n <button class=\"cta-button\">Browse Collection</button>\n </section>\n\n <section id=\"featured\">\n <h2>Featured Books</h2>\n <div class=\"book-grid\">\n <article class=\"book-card\">\n <div class=\"book-image\"></div>\n <h3>Cloud Computing Essentials</h3>\n <p class=\"price\">$49.99</p>\n <button class=\"add-to-cart\">Add to Cart</button>\n </article>\n <article class=\"book-card\">\n <div class=\"book-image\"></div>\n <h3>Python for AI</h3>\n <p class=\"price\">$59.99</p>\n <button class=\"add-to-cart\">Add to Cart</button>\n </article>\n <article class=\"book-card\">\n <div class=\"book-image\"></div>\n <h3>Cybersecurity Fundamentals</h3>\n <p class=\"price\">$54.99</p>\n <button class=\"add-to-cart\">Add to Cart</button>\n </article>\n </div>\n </section>\n\n <section id=\"deals\">\n <h2>Special Deals</h2>\n <div class=\"deals-container\">\n <div class=\"deal-card\">\n <h3>Bundle & Save</h3>\n <p>Get 20% off when you buy 3 or more books</p>\n </div>\n <div class=\"deal-card\">\n <h3>Student Discount</h3>\n <p>15% off with valid student ID</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Contact Us</h4>\n <p>Email: info@techbooks.scroll.pub</p>\n <p>Phone: (555) 123-4567</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <a href=\"#terms\">Terms of Service</a>\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#shipping\">Shipping Info</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a6ef5;\n --secondary-color: #1d4ed8;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n color: var(--text-color);\n background: var(--background-color);\n line-height: 1.6;\n}\n\nheader {\n background: white;\n box-shadow: var(--card-shadow);\n position: fixed;\n width: 100%;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n align-items: center;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n#hero {\n height: 80vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, #2a6ef5 0%, #1d4ed8 100%);\n color: white;\n}\n\n#hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n#hero p {\n font-size: 1.25rem;\n margin-bottom: 2rem;\n animation: fadeInUp 1s ease 0.2s;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n background: white;\n color: var(--primary-color);\n border: none;\n border-radius: 50px;\n cursor: pointer;\n transition: transform 0.3s ease;\n animation: fadeInUp 1s ease 0.4s;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.book-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.book-card {\n background: white;\n padding: 1rem;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.book-card:hover {\n transform: translateY(-5px);\n}\n\n.book-image {\n height: 200px;\n background: #e2e8f0;\n border-radius: 5px;\n margin-bottom: 1rem;\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n #hero h1 {\n font-size: 2.5rem;\n }\n \n .book-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Cart functionality\n let cartCount = 0;\n const cartCountElement = document.querySelector('.cart-count');\n const addToCartButtons = document.querySelectorAll('.add-to-cart');\n\n addToCartButtons.forEach(button => {\n button.addEventListener('click', () => {\n cartCount++;\n cartCountElement.textContent = cartCount;\n \n // Animation for button\n button.classList.add('added');\n button.textContent = 'Added!';\n \n setTimeout(() => {\n button.classList.remove('added');\n button.textContent = 'Add to Cart';\n }, 1500);\n });\n });\n\n // Smooth scroll for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Intersection Observer for scroll animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n });\n\n document.querySelectorAll('.book-card').forEach((element) => {\n observer.observe(element);\n });\n});\n\n---end---\n\nThis creates a modern, responsive ICT book sales website with smooth animations, a clean design, and interactive features. The site includes:\n\n1. Fixed header with navigation\n2. Hero section with call-to-action\n3. Featured books section with hover effects\n4. Special deals section\n5. Responsive footer\n6. Shopping cart functionality\n7. Smooth scroll behavior\n8. Intersection Observer for scroll animations\n9. Mobile-responsive design\n10. Accessible semantic HTML\n\nThe CSS uses modern features like CSS variables, flexbox, grid, and animations. The JavaScript handles cart functionality and smooth scrolling behavior. All components are built with accessibility in mind and follow modern web development best practices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 280,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2444
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..9e2a09e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# techbooks2.scroll.pub
+Website generated by Claude from prompt: i want an ICT book sales protion site
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..65c51fc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Cart functionality
+ let cartCount = 0;
+ const cartCountElement = document.querySelector('.cart-count');
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
+
+ addToCartButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ cartCount++;
+ cartCountElement.textContent = cartCount;
+
+ // Animation for button
+ button.classList.add('added');
+ button.textContent = 'Added!';
+
+ setTimeout(() => {
+ button.classList.remove('added');
+ button.textContent = 'Add to Cart';
+ }, 1500);
+ });
+ });
+
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Intersection Observer for scroll animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ });
+
+ document.querySelectorAll('.book-card').forEach((element) => {
+ observer.observe(element);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1cab394
--- /dev/null
+++ b/style.css
@@ -0,0 +1,152 @@
+:root {
+ --primary-color: #2a6ef5;
+ --secondary-color: #1d4ed8;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ color: var(--text-color);
+ background: var(--background-color);
+ line-height: 1.6;
+}
+
+header {
+ background: white;
+ box-shadow: var(--card-shadow);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+#hero {
+ height: 80vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, #2a6ef5 0%, #1d4ed8 100%);
+ color: white;
+}
+
+#hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+#hero p {
+ font-size: 1.25rem;
+ margin-bottom: 2rem;
+ animation: fadeInUp 1s ease 0.2s;
+}
+
+.cta-button {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ background: white;
+ color: var(--primary-color);
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ animation: fadeInUp 1s ease 0.4s;
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+}
+
+.book-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.book-card {
+ background: white;
+ padding: 1rem;
+ border-radius: 10px;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+}
+
+.book-card:hover {
+ transform: translateY(-5px);
+}
+
+.book-image {
+ height: 200px;
+ background: #e2e8f0;
+ border-radius: 5px;
+ margin-bottom: 1rem;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ #hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .book-grid {
+ grid-template-columns: 1fr;
+ }
+}