commit e549ff370cbd46a71e926740801e7eeaaeccc29e

Author: root <root@hub.scroll.pub> Date: 2024-12-28 22:02:20 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..865bf93 --- /dev/null +++ b/body.html @@ -0,0 +1,101 @@ +<header> + <nav id="main-nav"> + <button id="menu-toggle" aria-label="Toggle menu"> + <span></span> + <span></span> + <span></span> + </button> + <ul> + <li><a href="#preliminary">Preliminary Steps</a></li> + <li><a href="#process">10-Step Process</a></li> + <li><a href="#advanced">Advanced Tips</a></li> + <li><a href="#ai-tools">AI Tools</a></li> + </ul> + </nav> +</header> + +<main> + <section class="hero"> + <h1>How to Create an App in 10 Steps</h1> + <p class="subtitle">A modern guide using React, Tailwind CSS, and AI tools</p> + </section> + + <section id="preliminary" class="card-container"> + <h2>Preliminary Steps</h2> + <div class="cards"> + <div class="card"> + <h3>1. Brainstorm Ideas</h3> + <p>Identify problems and opportunities using ChatGPT and community feedback.</p> + </div> + <div class="card"> + <h3>2. Define Goals</h3> + <p>Set measurable objectives and prioritize MVP features.</p> + </div> + <div class="card"> + <h3>3. Market Research</h3> + <p>Analyze competitors and gather user feedback.</p> + </div> + <div class="card"> + <h3>4. Monetization</h3> + <p>Choose suitable revenue models for your audience.</p> + </div> + <div class="card"> + <h3>5. Tech Stack</h3> + <p>Select modern tools like React and Tailwind CSS.</p> + </div> + </div> + </section> + + <section id="process" class="steps"> + <h2>10-Step Process</h2> + <ol> + <li>Name Your App</li> + <li>Define Features</li> + <li>Map User Journeys</li> + <li>Create Wireframes</li> + <li>Develop Frontend</li> + <li>Set Up Backend</li> + <li>Add Content</li> + <li>Test Thoroughly</li> + <li>Deploy</li> + <li>Promote</li> + </ol> + </section> + + <section id="advanced" class="features"> + <h2>Advanced Recommendations</h2> + <div class="feature-grid"> + <div class="feature"> + <h3>Accessibility</h3> + <p>Ensure WCAG compliance and inclusive design.</p> + </div> + <div class="feature"> + <h3>Legal Compliance</h3> + <p>Follow privacy laws and regulations.</p> + </div> + <div class="feature"> + <h3>PWA Features</h3> + <p>Enable offline support and installability.</p> + </div> + <div class="feature"> + <h3>CI/CD Workflow</h3> + <p>Automate testing and deployment.</p> + </div> + </div> + </section> + + <section id="ai-tools" class="tools"> + <h2>AI Development Tools</h2> + <ul class="tool-list"> + <li>ChatGPT</li> + <li>Lovable</li> + <li>Windsurf</li> + <li>Cursor</li> + <li>Supabase</li> + </ul> + </section> +</main> + +<footer> + <p>Created with passion by developers, for developers</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..df104cf --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://createapp.scroll.pub +metaTags +editButton /edit.html +title How to Create an App in 10 Steps - Modern Development Guide +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..fa46107 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01EcCh1wm1rkAQE8CTbzfZDF", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a website that guides developers through creating apps. Here's the complete implementation:\n\n---domain---\ncreateapp.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://createapp.scroll.pub\nmetaTags\neditButton /edit.html\ntitle How to Create an App in 10 Steps - Modern Development Guide\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav id=\"main-nav\">\n <button id=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n <span></span>\n <span></span>\n </button>\n <ul>\n <li><a href=\"#preliminary\">Preliminary Steps</a></li>\n <li><a href=\"#process\">10-Step Process</a></li>\n <li><a href=\"#advanced\">Advanced Tips</a></li>\n <li><a href=\"#ai-tools\">AI Tools</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>How to Create an App in 10 Steps</h1>\n <p class=\"subtitle\">A modern guide using React, Tailwind CSS, and AI tools</p>\n </section>\n\n <section id=\"preliminary\" class=\"card-container\">\n <h2>Preliminary Steps</h2>\n <div class=\"cards\">\n <div class=\"card\">\n <h3>1. Brainstorm Ideas</h3>\n <p>Identify problems and opportunities using ChatGPT and community feedback.</p>\n </div>\n <div class=\"card\">\n <h3>2. Define Goals</h3>\n <p>Set measurable objectives and prioritize MVP features.</p>\n </div>\n <div class=\"card\">\n <h3>3. Market Research</h3>\n <p>Analyze competitors and gather user feedback.</p>\n </div>\n <div class=\"card\">\n <h3>4. Monetization</h3>\n <p>Choose suitable revenue models for your audience.</p>\n </div>\n <div class=\"card\">\n <h3>5. Tech Stack</h3>\n <p>Select modern tools like React and Tailwind CSS.</p>\n </div>\n </div>\n </section>\n\n <section id=\"process\" class=\"steps\">\n <h2>10-Step Process</h2>\n <ol>\n <li>Name Your App</li>\n <li>Define Features</li>\n <li>Map User Journeys</li>\n <li>Create Wireframes</li>\n <li>Develop Frontend</li>\n <li>Set Up Backend</li>\n <li>Add Content</li>\n <li>Test Thoroughly</li>\n <li>Deploy</li>\n <li>Promote</li>\n </ol>\n </section>\n\n <section id=\"advanced\" class=\"features\">\n <h2>Advanced Recommendations</h2>\n <div class=\"feature-grid\">\n <div class=\"feature\">\n <h3>Accessibility</h3>\n <p>Ensure WCAG compliance and inclusive design.</p>\n </div>\n <div class=\"feature\">\n <h3>Legal Compliance</h3>\n <p>Follow privacy laws and regulations.</p>\n </div>\n <div class=\"feature\">\n <h3>PWA Features</h3>\n <p>Enable offline support and installability.</p>\n </div>\n <div class=\"feature\">\n <h3>CI/CD Workflow</h3>\n <p>Automate testing and deployment.</p>\n </div>\n </div>\n </section>\n\n <section id=\"ai-tools\" class=\"tools\">\n <h2>AI Development Tools</h2>\n <ul class=\"tool-list\">\n <li>ChatGPT</li>\n <li>Lovable</li>\n <li>Windsurf</li>\n <li>Cursor</li>\n <li>Supabase</li>\n </ul>\n </section>\n</main>\n\n<footer>\n <p>Created with passion by developers, for developers</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2563eb;\n --secondary: #1e40af;\n --bg: #f8fafc;\n --text: #1e293b;\n --card-bg: #ffffff;\n --accent: #3b82f6;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--bg);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav ul {\n display: flex;\n list-style: none;\n gap: 2rem;\n justify-content: center;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s;\n}\n\nnav a:hover {\n color: #bfdbfe;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\n.subtitle {\n font-size: 1.25rem;\n opacity: 0.9;\n}\n\nsection {\n padding: 4rem 2rem;\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.steps ol {\n counter-reset: steps;\n list-style: none;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n padding: 2rem;\n}\n\n.steps li {\n position: relative;\n padding: 1rem;\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.steps li::before {\n counter-increment: steps;\n content: counter(steps);\n position: absolute;\n top: -15px;\n left: -15px;\n width: 30px;\n height: 30px;\n background: var(--accent);\n color: white;\n border-radius: 50%;\n display: grid;\n place-items: center;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.feature {\n padding: 1.5rem;\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.tool-list {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n list-style: none;\n justify-content: center;\n}\n\n.tool-list li {\n padding: 0.5rem 1rem;\n background: var(--accent);\n color: white;\n border-radius: 20px;\n font-weight: 500;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary);\n color: white;\n}\n\n#menu-toggle {\n display: none;\n}\n\n@media (max-width: 768px) {\n #menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n #menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\n transition: 0.3s;\n }\n\n nav ul {\n display: none;\n flex-direction: column;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary);\n padding: 1rem;\n }\n\n nav ul.active {\n display: flex;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n section {\n padding: 2rem 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const menuToggle = document.getElementById('menu-toggle');\n const nav = document.querySelector('nav ul');\n\n menuToggle.addEventListener('click', () => {\n nav.classList.toggle('active');\n \n const spans = menuToggle.getElementsByTagName('span');\n spans[0].style.transform = nav.classList.contains('active') ? \n 'rotate(45deg) translate(8px, 8px)' : '';\n spans[1].style.opacity = nav.classList.contains('active') ? '0' : '1';\n spans[2].style.transform = nav.classList.contains('active') ? \n 'rotate(-45deg) translate(7px, -7px)' : '';\n });\n\n // Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', (e) => {\n e.preventDefault();\n const target = document.querySelector(anchor.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth'\n });\n \n // Close mobile menu if open\n nav.classList.remove('active');\n });\n });\n\n // Add scroll animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('section').forEach(section => {\n section.style.opacity = '0';\n section.style.transform = 'translateY(20px)';\n section.style.transition = 'all 0.6s ease-out';\n observer.observe(section);\n });\n});\n\n---end---" + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 1978, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2896 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..5a7daa2 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# createapp.scroll.pub +Website generated by Claude from prompt: How to Create an App in 10 Steps–Plus 5 Things to Do First Creating an application—whether it’s a web app, mobile app, or hybrid solution—can significantly boost your engagement with users. This guide provides essential preparatory steps, a 10-step process for building an app, and additional recommendations for a modern and professional development workflow. The guide focuses on **React** and **Tailwind CSS**, while leveraging **AI tools** like **ChatGPT**, **Lovable**, **Windsurf**, and **Cursor** to accelerate and enhance the development process. --- ## Preliminary Steps 1. **Brainstorm Viable App Ideas** - Identify problems your app will solve or opportunities to simplify users' lives. - Use **ChatGPT** to refine ideas and generate feature recommendations. - Collaborate with colleagues, potential users, or online communities to validate concepts. 2. **Define the Goals for Your App** - Set clear and measurable objectives (e.g., "Increase user retention by 20%"). - Prioritize a Minimum Viable Product (MVP) to deliver quickly and iterate on user feedback. 3. **Conduct Market Research** - Analyze competitors' strengths and weaknesses using **Windsurf** for actionable insights. - Gather user feedback through surveys, interviews, or analytics tools to understand your target audience. 4. **Determine Monetization Strategies** - Explore models like subscriptions, ads, freemium tiers, or e-commerce integration. - Align your monetization strategy with your app’s audience and purpose. 5. **Choose Your Development Stack** - **Frontend:** React with Tailwind CSS for a responsive, component-based UI. - **Backend:** Supabase for serverless database management, authentication, and real-time features. - **Database:** PostgreSQL (via Supabase) for robust and scalable data storage. --- ## 10-Step App Creation Process 1. **Name Your App** - Choose a unique, memorable name that resonates with your audience. - Verify domain and social media availability for branding purposes. 2. **Define App Features** - Start with core features for your MVP. - Use **Lovable** or **ChatGPT** to auto-generate boilerplate code for features like authentication or CRUD operations. 3. **Map Out User Journeys** - Visualize workflows for critical user actions like onboarding or checkout. - Use **Cursor** for collaborative planning and visual mapping. 4. **Create a Wireframe** - Draft your layouts using tools like Figma, Sketch, or Adobe XD. - Focus on intuitive navigation and responsive design. 5. **Develop the Frontend** - Build dynamic React components for scalability. - Use Tailwind CSS for fast, consistent, and customizable styling. - Leverage **Windsurf** for AI-assisted frontend code generation. 6. **Set Up the Backend** - Use **Supabase** for database management, authentication, and serverless APIs. - Implement secure API endpoints and error handling. 7. **Add Content and Assets** - Populate your app with high-quality content, optimized images, and videos. - Use **Lovable** to generate and optimize user-focused content. 8. **Test Your App Thoroughly** - Perform unit tests with Jest and integration tests with Cypress. - Collaborate with your team in real-time using **Cursor** for debugging and reviews. 9. **Deploy Your App** - Deploy using platforms like Vercel or Netlify for fast, scalable hosting. - Set up CI/CD pipelines for automated deployment and testing. 10. **Promote Your App** - Create a marketing plan using SEO, social media, and paid ads. - Optimize for discoverability with App Store Optimization (ASO) if applicable. --- ## Advanced Recommendations ### Accessibility - Ensure WCAG compliance for inclusivity. - Test with screen readers and keyboard navigation tools. ### Legal Compliance - Adhere to GDPR, CCPA, or other relevant privacy laws. - Provide clear terms of service and privacy policies. ### Progressive Web App (PWA) Features - Add offline support with service workers (e.g., Workbox). - Create a manifest file to make your app installable. ### CI/CD Workflow - Automate deployments using GitHub Actions, CircleCI, or Travis CI. - Include steps for code linting, testing, and production-ready builds. ### Design Systems - Use Storybook to document and test React components. - Establish a shared design system for consistent branding. ### Scalability - Design a modular architecture to accommodate future growth. - Use cloud solutions like Supabase or AWS Lambda to handle traffic spikes. ### SEO & Performance Optimization - Manage metadata with tools like `react-helmet`. - Enable lazy-loading and compress assets for faster performance. ### User Onboarding - Add tutorials, tooltips, or modals for a smooth onboarding experience. - Use analytics to track drop-off points and refine the process. ### Dark Mode and Theming - Utilize Tailwind CSS’s `dark` mode for easy theme toggling. - Store user preferences in local storage. --- ## AI Tools for Accelerated Development 1. **ChatGPT** - Generate boilerplate code for React components and APIs. - Assist with debugging, brainstorming, and documentation. 2. **Lovable** - Analyze user preferences to prioritize impactful features. - Auto-generate optimized content for user engagement. 3. **Windsurf** - Aggregate competitor data and generate frontend code suggestions. - Provide actionable insights for design improvements. 4. **Cursor** - Collaborate on code reviews and debugging in real-time. - Visualize and plan seamless user journeys. 5. **Supabase** - A robust backend-as-a-service for real-time databases, authentication, and APIs. - Simplifies backend management, freeing up resources for frontend innovation. --- ## Tools and Resources - **Frontend Frameworks:** [React Documentation](https://reactjs.org/docs/getting-started.html) - **Styling:** [Tailwind CSS Documentation](https://tailwindcss.com/docs/installation) - **AI Tools:** [ChatGPT](https://chat.openai.com), [Lovable](#), [Windsurf](#), [Cursor](https://www.cursor.so/) - **Backend-as-a-Service:** [Supabase](https://supabase.com) - **Testing:** Jest, Cypress, React Testing Library - **Deployment:** Vercel, Netlify, AWS - **Design Tools:** Figma, Sketch, Adobe XD - **Error Monitoring:** Sentry, LogRocket - **Localization:** react-i18next, Phrase, Lokalise - **Design Systems:** Storybook --- ## Conclusion By following these steps and leveraging AI tools like ChatGPT, Lovable, Windsurf, and Cursor alongside modern frameworks like React and Tailwind CSS, you can build a polished, high-performing app. Regular updates, scalability planning, and a user-first mindset will ensure long-term success. Whether you’re creating a web or mobile app, this guide provides the ultimate foundation for professional-grade development. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a5d75ee --- /dev/null +++ b/script.js @@ -0,0 +1,46 @@ +document.addEventListener('DOMContentLoaded', () => { + const menuToggle = document.getElementById('menu-toggle'); + const nav = document.querySelector('nav ul'); + + menuToggle.addEventListener('click', () => { + nav.classList.toggle('active'); + + const spans = menuToggle.getElementsByTagName('span'); + spans[0].style.transform = nav.classList.contains('active') ? + 'rotate(45deg) translate(8px, 8px)' : ''; + spans[1].style.opacity = nav.classList.contains('active') ? '0' : '1'; + spans[2].style.transform = nav.classList.contains('active') ? + 'rotate(-45deg) translate(7px, -7px)' : ''; + }); + + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(anchor.getAttribute('href')); + target.scrollIntoView({ + behavior: 'smooth' + }); + + // Close mobile menu if open + nav.classList.remove('active'); + }); + }); + + // Add scroll animations + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { threshold: 0.1 }); + + document.querySelectorAll('section').forEach(section => { + section.style.opacity = '0'; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'all 0.6s ease-out'; + observer.observe(section); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..b5f16d0 --- /dev/null +++ b/style.css @@ -0,0 +1,204 @@ +:root { + --primary: #2563eb; + --secondary: #1e40af; + --bg: #f8fafc; + --text: #1e293b; + --card-bg: #ffffff; + --accent: #3b82f6; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + line-height: 1.6; + color: var(--text); + background: var(--bg); +} + +header { + background: var(--primary); + padding: 1rem; + position: sticky; + top: 0; + z-index: 100; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +nav ul { + display: flex; + list-style: none; + gap: 2rem; + justify-content: center; +} + +nav a { + color: white; + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +nav a:hover { + color: #bfdbfe; +} + +.hero { + text-align: center; + padding: 4rem 2rem; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; +} + +h1 { + font-size: 3rem; + margin-bottom: 1rem; + line-height: 1.2; +} + +.subtitle { + font-size: 1.25rem; + opacity: 0.9; +} + +section { + padding: 4rem 2rem; +} + +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.card { + background: var(--card-bg); + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.3s; +} + +.card:hover { + transform: translateY(-5px); +} + +.steps ol { + counter-reset: steps; + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + padding: 2rem; +} + +.steps li { + position: relative; + padding: 1rem; + background: var(--card-bg); + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.steps li::before { + counter-increment: steps; + content: counter(steps); + position: absolute; + top: -15px; + left: -15px; + width: 30px; + height: 30px; + background: var(--accent); + color: white; + border-radius: 50%; + display: grid; + place-items: center; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.feature { + padding: 1.5rem; + background: var(--card-bg); + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.tool-list { + display: flex; + flex-wrap: wrap; + gap: 1rem; + list-style: none; + justify-content: center; +} + +.tool-list li { + padding: 0.5rem 1rem; + background: var(--accent); + color: white; + border-radius: 20px; + font-weight: 500; +} + +footer { + text-align: center; + padding: 2rem; + background: var(--primary); + color: white; +} + +#menu-toggle { + display: none; +} + +@media (max-width: 768px) { + #menu-toggle { + display: block; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; + } + + #menu-toggle span { + display: block; + width: 25px; + height: 3px; + background: white; + margin: 5px 0; + transition: 0.3s; + } + + nav ul { + display: none; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--primary); + padding: 1rem; + } + + nav ul.active { + display: flex; + } + + h1 { + font-size: 2rem; + } + + section { + padding: 2rem 1rem; + } +}