commit 2aaea32c94ad3254b8919830694e67169e8a0e7f
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 02:17:42 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..543b492
--- /dev/null
+++ b/body.html
@@ -0,0 +1,95 @@
+<header class="header">
+ <div class="container">
+ <h1 class="logo">Plastrade</h1>
+ <nav class="nav">
+ <a href="#features">Features</a>
+ <a href="#how-it-works">How It Works</a>
+ <a href="#contact">Contact</a>
+ <a href="/login" class="btn">Login</a>
+ <a href="/register" class="btn btn-primary">Register</a>
+ </nav>
+ </div>
+</header>
+
+<section class="hero">
+ <div class="container">
+ <div class="hero-content">
+ <h2>Revolutionizing Plastic Trading</h2>
+ <p>Join the premier online marketplace for prime, non-prime, and recyclable plastic commodities.</p>
+ <div class="cta-buttons">
+ <a href="/register" class="btn btn-primary">Get Started</a>
+ <a href="#features" class="btn btn-secondary">Learn More</a>
+ </div>
+ </div>
+ <div class="hero-image">
+ <div class="image-container"></div>
+ </div>
+ </div>
+</section>
+
+<section id="features" class="features">
+ <div class="container">
+ <h2>Key Features</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="icon">🏷️</div>
+ <h3>Real-Time Auctions</h3>
+ <p>Participate in live auctions with real-time bidding updates.</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">💳</div>
+ <h3>Secure Payments</h3>
+ <p>Integrated Stripe payments for safe transactions.</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">📦</div>
+ <h3>Efficient Logistics</h3>
+ <p>Streamlined shipping arrangements for winning bids.</p>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section id="how-it-works" class="how-it-works">
+ <div class="container">
+ <h2>How It Works</h2>
+ <div class="steps">
+ <div class="step">
+ <div class="number">1</div>
+ <h3>Create Listings</h3>
+ <p>Suppliers list their plastic commodities with detailed descriptions.</p>
+ </div>
+ <div class="step">
+ <div class="number">2</div>
+ <h3>Place Bids</h3>
+ <p>Buyers participate in live auctions with real-time bidding.</p>
+ </div>
+ <div class="step">
+ <div class="number">3</div>
+ <h3>Complete Transaction</h3>
+ <p>Secure payments and efficient logistics for winning bids.</p>
+ </div>
+ </div>
+ </div>
+</section>
+
+<footer id="contact" class="footer">
+ <div class="container">
+ <div class="footer-content">
+ <div class="footer-section">
+ <h3>Plastrade</h3>
+ <p>Your trusted partner in plastic commodity trading.</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <a href="#features">Features</a>
+ <a href="#how-it-works">How It Works</a>
+ <a href="#contact">Contact</a>
+ </div>
+ <div class="footer-section">
+ <h4>Contact Us</h4>
+ <p>Email: info@plastrade.scroll.pub</p>
+ </div>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8bf2551
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://plastrade.scroll.pub
+metaTags
+editButton /edit.html
+title Plastrade - Online Marketplace for Plastic Commodities
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..f31e773
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "f9529104-b803-467f-bf4c-91fea995251e",
+ "object": "chat.completion",
+ "created": 1735352233,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nplastrade.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://plastrade.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Plastrade - Online Marketplace for Plastic Commodities\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"header\">\n <div class=\"container\">\n <h1 class=\"logo\">Plastrade</h1>\n <nav class=\"nav\">\n <a href=\"#features\">Features</a>\n <a href=\"#how-it-works\">How It Works</a>\n <a href=\"#contact\">Contact</a>\n <a href=\"/login\" class=\"btn\">Login</a>\n <a href=\"/register\" class=\"btn btn-primary\">Register</a>\n </nav>\n </div>\n</header>\n\n<section class=\"hero\">\n <div class=\"container\">\n <div class=\"hero-content\">\n <h2>Revolutionizing Plastic Trading</h2>\n <p>Join the premier online marketplace for prime, non-prime, and recyclable plastic commodities.</p>\n <div class=\"cta-buttons\">\n <a href=\"/register\" class=\"btn btn-primary\">Get Started</a>\n <a href=\"#features\" class=\"btn btn-secondary\">Learn More</a>\n </div>\n </div>\n <div class=\"hero-image\">\n <div class=\"image-container\"></div>\n </div>\n </div>\n</section>\n\n<section id=\"features\" class=\"features\">\n <div class=\"container\">\n <h2>Key Features</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"icon\">🏷️</div>\n <h3>Real-Time Auctions</h3>\n <p>Participate in live auctions with real-time bidding updates.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">💳</div>\n <h3>Secure Payments</h3>\n <p>Integrated Stripe payments for safe transactions.</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">📦</div>\n <h3>Efficient Logistics</h3>\n <p>Streamlined shipping arrangements for winning bids.</p>\n </div>\n </div>\n </div>\n</section>\n\n<section id=\"how-it-works\" class=\"how-it-works\">\n <div class=\"container\">\n <h2>How It Works</h2>\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"number\">1</div>\n <h3>Create Listings</h3>\n <p>Suppliers list their plastic commodities with detailed descriptions.</p>\n </div>\n <div class=\"step\">\n <div class=\"number\">2</div>\n <h3>Place Bids</h3>\n <p>Buyers participate in live auctions with real-time bidding.</p>\n </div>\n <div class=\"step\">\n <div class=\"number\">3</div>\n <h3>Complete Transaction</h3>\n <p>Secure payments and efficient logistics for winning bids.</p>\n </div>\n </div>\n </div>\n</section>\n\n<footer id=\"contact\" class=\"footer\">\n <div class=\"container\">\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h3>Plastrade</h3>\n <p>Your trusted partner in plastic commodity trading.</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <a href=\"#features\">Features</a>\n <a href=\"#how-it-works\">How It Works</a>\n <a href=\"#contact\">Contact</a>\n </div>\n <div class=\"footer-section\">\n <h4>Contact Us</h4>\n <p>Email: info@plastrade.scroll.pub</p>\n </div>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #1a73e8;\n --secondary-color: #34a853;\n --background-color: #f8f9fa;\n --text-color: #202124;\n --border-radius: 8px;\n --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n.header {\n background-color: white;\n box-shadow: var(--box-shadow);\n padding: 20px 0;\n}\n\n.logo {\n font-size: 24px;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.nav a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n}\n\n.btn {\n padding: 10px 20px;\n border-radius: var(--border-radius);\n text-decoration: none;\n font-weight: 500;\n transition: background-color 0.3s ease;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: white;\n}\n\n.btn-primary:hover {\n background-color: #1557b0;\n}\n\n.btn-secondary {\n background-color: var(--secondary-color);\n color: white;\n}\n\n.btn-secondary:hover {\n background-color: #2a8a4a;\n}\n\n.hero {\n display: flex;\n align-items: center;\n padding: 100px 0;\n}\n\n.hero-content {\n flex: 1;\n}\n\n.hero-content h2 {\n font-size: 48px;\n margin-bottom: 20px;\n}\n\n.hero-content p {\n font-size: 18px;\n margin-bottom: 30px;\n}\n\n.cta-buttons {\n display: flex;\n gap: 20px;\n}\n\n.hero-image {\n flex: 1;\n display: flex;\n justify-content: flex-end;\n}\n\n.image-container {\n width: 100%;\n height: 400px;\n background-color: #e0e0e0;\n border-radius: var(--border-radius);\n}\n\n.features {\n padding: 80px 0;\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 50px;\n font-size: 36px;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.feature-card {\n background-color: white;\n padding: 30px;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n text-align: center;\n}\n\n.feature-card .icon {\n font-size: 48px;\n margin-bottom: 20px;\n}\n\n.feature-card h3 {\n font-size: 24px;\n margin-bottom: 15px;\n}\n\n.feature-card p {\n font-size: 16px;\n color: #666;\n}\n\n.how-it-works {\n padding: 80px 0;\n background-color: white;\n}\n\n.how-it-works h2 {\n text-align: center;\n margin-bottom: 50px;\n font-size: 36px;\n}\n\n.steps {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.step {\n text-align: center;\n}\n\n.step .number {\n width: 50px;\n height: 50px;\n background-color: var(--primary-color);\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n font-weight: bold;\n margin: 0 auto 20px;\n}\n\n.step h3 {\n font-size: 24px;\n margin-bottom: 15px;\n}\n\n.step p {\n font-size: 16px;\n color: #666;\n}\n\n.footer {\n background-color: var(--text-color);\n color: white;\n padding: 60px 0;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.footer-section h3 {\n font-size: 24px;\n margin-bottom: 20px;\n}\n\n.footer-section h4 {\n font-size: 20px;\n margin-bottom: 15px;\n}\n\n.footer-section a {\n color: white;\n text-decoration: none;\n display: block;\n margin-bottom: 10px;\n}\n\n.footer-section a:hover {\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n .hero {\n flex-direction: column;\n text-align: center;\n }\n\n .hero-image {\n margin-top: 40px;\n }\n\n .cta-buttons {\n justify-content: center;\n }\n\n .nav {\n flex-direction: column;\n gap: 10px;\n }\n}\n---script.js---\n// Basic smooth scrolling for anchor links\ndocument.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// Simple form validation example\ndocument.querySelectorAll('form').forEach(form => {\n form.addEventListener('submit', function (e) {\n const inputs = this.querySelectorAll('input[required]');\n let isValid = true;\n \n inputs.forEach(input => {\n if (!input.value.trim()) {\n isValid = false;\n input.classList.add('error');\n } else {\n input.classList.remove('error');\n }\n });\n\n if (!isValid) {\n e.preventDefault();\n alert('Please fill out all required fields.');\n }\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 1550,
+ "completion_tokens": 2280,
+ "total_tokens": 3830,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 1550
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..e7ecfd0
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# plastrade.scroll.pub
+Website generated by DeepSeek from prompt: ## **Application Overview** The platform is an online marketplace for trading plastic commodities (prime, non-prime, recyclable). It facilitates real-time auctions where suppliers (sellers) can list their materials, and buyers can place bids. The platform emphasizes professionalism, real-time functionality, and secure payment handling. --- ## **Key Features** ### **1. User Roles & Permissions** - **Supplier/Seller**: - **Buyer**: - Browse and participate in live auctions. - Place bids on items during auctions. - View auction history and payment status. - Manage profile settings. - Create auction listings for plastic commodities. - Upload material details (title, description, grade, images, quantity, reserve price, etc.). - View live auction results and manage listings. - Arrange logistics for winning bids. - **Admin**: - Approve or reject user accounts. - Approve or reject auction listings. - Monitor live auctions for disputes or irregularities. - Manage system configurations and user roles. --- ### **2. Auction Features** - **Listings**: - Include details such as title, description, images, grade (prime, non-prime, recyclable), quantity, and optional reserve price. - Configurable start and end times (default to 2-minute auctions). - Listings appear as "Pending Approval" until approved by an admin. - **Live Auction**: - Real-time bid updates using WebSockets or a similar mechanism. - Countdown timer for auctions. - Automatic determination of the highest bid at auction close. - **Bidding**: - Buyers can place bids above the current highest bid. - Real-time feedback on bid status. - Prevent bidding after auction ends. --- ### **3. Payments & Logistics** - **Payment Flow**: - Integrate Stripe for secure payment processing. - Winning buyers are redirected to a payment page. - Confirm successful payments and notify the supplier. - **Logistics**: - Suppliers arrange shipments for winning bids. - Mask real identities and exchange only necessary shipping details. --- ### **4. Notifications** - **Email/SMS Alerts**: - Notify users about auction start times, bid updates, and winning/losing bids. - Inform suppliers about payment confirmations and shipping actions. - **In-App Notifications**: - Real-time notifications for bid updates, approvals, or admin actions. --- ### **5. Profiles & Settings** - **User Profiles**: - Display user handle, role, approval status, and auction participation history. - Allow users to update profile settings like email and password. - **Admin Dashboard**: - Manage all users, listings, and disputes from a centralized control panel. - Generate reports on platform activity. --- ## **UI/UX Design** ### **1. Landing Page** - Clean, modern design. - Overview of platform benefits. - “Login” and “Register” buttons prominently displayed. ### **2. Auction Dashboard** - Tabs for live, upcoming, and closed auctions. - Filters for material type (prime, non-prime, recyclable) and auction status. - Auction cards with title, highest bid, time left, and "View Details" button. ### **3. Auction Details Page** - Full details of the listing (title, description, images, reserve price, etc.). - Real-time highest bid and bidding input field. - Countdown timer prominently displayed. ### **4. Admin Panel** - Tables for pending user approvals, auction approvals, and system logs. - Action buttons for approving/rejecting users and listings. - Search and filter capabilities for efficient management. --- ## **Tech Stack** ### **1. Frontend** - **Framework**: Next.js (for SSR and optimized SEO). - **UI Library**: Chakra UI (clean, modern, responsive design). - **State Management**: React Query (for data fetching and caching). - **Real-Time Updates**: Socket.IO for real-time communication. ### **2. Backend** - **Framework**: NestJS (scalable, TypeScript-based backend). - **Authentication**: Auth0 or Firebase Authentication. - **Database**: PostgreSQL (relational database for structured data). - Use Prisma ORM for schema management and queries. - **File Storage**: AWS S3 for images (or Cloudinary for optimized delivery). - **Real-Time Functionality**: Firebase Realtime Database or Pusher. ### **3. DevOps** - **Hosting**: - Vercel or Netlify for frontend deployment. - AWS or Heroku for backend services. - **CI/CD**: GitHub Actions for automated testing and deployment. - **Monitoring**: - Sentry for error tracking. - Prometheus + Grafana for server monitoring. --- ## **Database Schema** ### **profiles** | Column | Type | Description | | --- | --- | --- | | id | UUID | Primary key | | email | Text | User email | | role | Text | buyer, supplier, admin | | is_approved | Boolean | Admin approval status | | handle | Text | User handle for anonymity | ### **listings** | Column | Type | Description | | --- | --- | --- | | id | UUID | Primary key | | supplier_id | UUID | References profiles.id | | title | Text | Title of the listing | | description | Text | Detailed description of material | | material_type | Text | prime, non-prime, recyclable | | quantity | Int | Quantity of material | | reserve_price | Decimal | Minimum acceptable bid (optional) | | start_time | Timestamptz | Auction start time | | end_time | Timestamptz | Auction end time | | status | Text | pending, approved, closed | ### **bids** | Column | Type | Description | | --- | --- | --- | | id | UUID | Primary key | | listing_id | UUID | References listings.id | | buyer_id | UUID | References profiles.id | | bid_amount | Decimal | Amount of the bid | | created_at | Timestamptz | Timestamp of bid placement | ### **transactions**
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..aa7e934
--- /dev/null
+++ b/script.js
@@ -0,0 +1,31 @@
+// Basic smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+});
+
+// Simple form validation example
+document.querySelectorAll('form').forEach(form => {
+ form.addEventListener('submit', function (e) {
+ const inputs = this.querySelectorAll('input[required]');
+ let isValid = true;
+
+ inputs.forEach(input => {
+ if (!input.value.trim()) {
+ isValid = false;
+ input.classList.add('error');
+ } else {
+ input.classList.remove('error');
+ }
+ });
+
+ if (!isValid) {
+ e.preventDefault();
+ alert('Please fill out all required fields.');
+ }
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f4d0013
--- /dev/null
+++ b/style.css
@@ -0,0 +1,248 @@
+:root {
+ --primary-color: #1a73e8;
+ --secondary-color: #34a853;
+ --background-color: #f8f9fa;
+ --text-color: #202124;
+ --border-radius: 8px;
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.header {
+ background-color: white;
+ box-shadow: var(--box-shadow);
+ padding: 20px 0;
+}
+
+.logo {
+ font-size: 24px;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.nav a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+}
+
+.btn {
+ padding: 10px 20px;
+ border-radius: var(--border-radius);
+ text-decoration: none;
+ font-weight: 500;
+ transition: background-color 0.3s ease;
+}
+
+.btn-primary {
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.btn-primary:hover {
+ background-color: #1557b0;
+}
+
+.btn-secondary {
+ background-color: var(--secondary-color);
+ color: white;
+}
+
+.btn-secondary:hover {
+ background-color: #2a8a4a;
+}
+
+.hero {
+ display: flex;
+ align-items: center;
+ padding: 100px 0;
+}
+
+.hero-content {
+ flex: 1;
+}
+
+.hero-content h2 {
+ font-size: 48px;
+ margin-bottom: 20px;
+}
+
+.hero-content p {
+ font-size: 18px;
+ margin-bottom: 30px;
+}
+
+.cta-buttons {
+ display: flex;
+ gap: 20px;
+}
+
+.hero-image {
+ flex: 1;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.image-container {
+ width: 100%;
+ height: 400px;
+ background-color: #e0e0e0;
+ border-radius: var(--border-radius);
+}
+
+.features {
+ padding: 80px 0;
+}
+
+.features h2 {
+ text-align: center;
+ margin-bottom: 50px;
+ font-size: 36px;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+}
+
+.feature-card {
+ background-color: white;
+ padding: 30px;
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow);
+ text-align: center;
+}
+
+.feature-card .icon {
+ font-size: 48px;
+ margin-bottom: 20px;
+}
+
+.feature-card h3 {
+ font-size: 24px;
+ margin-bottom: 15px;
+}
+
+.feature-card p {
+ font-size: 16px;
+ color: #666;
+}
+
+.how-it-works {
+ padding: 80px 0;
+ background-color: white;
+}
+
+.how-it-works h2 {
+ text-align: center;
+ margin-bottom: 50px;
+ font-size: 36px;
+}
+
+.steps {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+}
+
+.step {
+ text-align: center;
+}
+
+.step .number {
+ width: 50px;
+ height: 50px;
+ background-color: var(--primary-color);
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: bold;
+ margin: 0 auto 20px;
+}
+
+.step h3 {
+ font-size: 24px;
+ margin-bottom: 15px;
+}
+
+.step p {
+ font-size: 16px;
+ color: #666;
+}
+
+.footer {
+ background-color: var(--text-color);
+ color: white;
+ padding: 60px 0;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 30px;
+}
+
+.footer-section h3 {
+ font-size: 24px;
+ margin-bottom: 20px;
+}
+
+.footer-section h4 {
+ font-size: 20px;
+ margin-bottom: 15px;
+}
+
+.footer-section a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ margin-bottom: 10px;
+}
+
+.footer-section a:hover {
+ color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+ .hero {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .hero-image {
+ margin-top: 40px;
+ }
+
+ .cta-buttons {
+ justify-content: center;
+ }
+
+ .nav {
+ flex-direction: column;
+ gap: 10px;
+ }
+}
\ No newline at end of file