Changes to aitrainpro.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     AiTrainPro
+     
+       
+     
+     
+       Solutions
+       Benefits
+       Process
+       Contact
+     
+   
+ 
+ 
+ 
+   
+     
+       Transform Your Business with Enterprise AI Training
+       Custom AI solutions tailored to your industry needs
+       
+     
+     
+   
+ 
+   
+     Our Solutions
+     
+       
+         🎯
+         Custom AI Models
+         Tailored solutions designed specifically for your business needs
+       
+       
+         🔄
+         Integration
+         Seamless implementation with your existing systems
+       
+       
+         📊
+         Analytics
+         Advanced reporting and performance metrics
+       
+     
+   
+ 
+   
+     Why Choose Us
+     
+       
+         Enterprise-Grade
+         Built for scale and security
+       
+       
+         24/7 Support
+         Round-the-clock expert assistance
+       
+       
+         ROI Focused
+         Measurable business impact
+       
+     
+   
+ 
+   
+     Get Started
+     
+       
+       
+       
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       AiTrainPro
+       Enterprise AI Training Solutions
+     
+     
+       Contact
+       hello@aitrainpro.scroll.pub
+     
+     
+       Follow Us
+       
+         LinkedIn
+         Twitter
+       
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://aitrainpro.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AI Training Solutions for Enterprise
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01LBBhXLQJemhZ1JUhgpdtBU",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create a professional AI training B2B landing page.\n\nSuggested domain: aitrainpro.scroll.pub\n\n---domain---\naitrainpro.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://aitrainpro.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AI Training Solutions for Enterprise\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  \n    AiTrainPro
\n    \n    \n      Solutions
\n      Benefits
\n      Process
\n      Contact
\n    \n  \n\n\n\n  \n    \n      Transform Your Business with Enterprise AI Training\n      Custom AI solutions tailored to your industry needs
\n      \n    
\n    
\n  \n\n  \n    Our Solutions\n    \n      \n        🎯
\n        Custom AI Models\n        Tailored solutions designed specifically for your business needs
\n      
\n      \n        🔄
\n        Integration\n        Seamless implementation with your existing systems
\n      
\n      \n        📊
\n        Analytics\n        Advanced reporting and performance metrics
\n      
\n    
\n  \n\n  \n    Why Choose Us\n    \n      \n        Enterprise-Grade\n        Built for scale and security
\n      
\n      \n        24/7 Support\n        Round-the-clock expert assistance
\n      
\n      \n        ROI Focused\n        Measurable business impact
\n      
\n    
\n  \n\n  \n    Get Started\n    \n      \n      \n      \n      \n    \n  \n\n\n\n  \n    \n      AiTrainPro\n      Enterprise AI Training Solutions
\n    
\n    \n      Contact\n      hello@aitrainpro.scroll.pub
\n    
\n    \n      Follow Us\n      \n        LinkedIn\n        Twitter\n      
\n    
\n  
\n\n---style.css---\n:root {\n  --primary: #2563eb;\n  --secondary: #1e40af;\n  --text: #1f2937;\n  --background: #ffffff;\n  --accent: #dbeafe;\n  --transition: all 0.3s ease;\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  color: var(--text);\n  line-height: 1.6;\n}\n\n.nav-header {\n  position: fixed;\n  width: 100%;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(10px);\n  z-index: 1000;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\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: 700;\n  color: var(--primary);\n}\n\n.nav-links {\n  display: flex;\n  gap: 2rem;\n  list-style: none;\n}\n\n.nav-links a {\n  text-decoration: none;\n  color: var(--text);\n  font-weight: 500;\n  transition: var(--transition);\n}\n\n.nav-links a:hover {\n  color: var(--primary);\n}\n\n.mobile-menu {\n  display: none;\n}\n\n.hero {\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 2rem;\n  background: linear-gradient(135deg, var(--accent), var(--background));\n  overflow: hidden;\n}\n\n.hero-content {\n  max-width: 600px;\n  z-index: 1;\n}\n\n.hero-shape {\n  position: absolute;\n  right: -10%;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 800px;\n  height: 800px;\n  background: linear-gradient(45deg, var(--primary), var(--secondary));\n  border-radius: 50%;\n  opacity: 0.1;\n}\n\nh1 {\n  font-size: 3.5rem;\n  line-height: 1.2;\n  margin-bottom: 1.5rem;\n  color: var(--text);\n}\n\n.cta-button {\n  padding: 1rem 2rem;\n  font-size: 1.1rem;\n  background: var(--primary);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: var(--transition);\n}\n\n.cta-button:hover {\n  background: var(--secondary);\n  transform: translateY(-2px);\n}\n\nsection {\n  padding: 5rem 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\nh2 {\n  text-align: center;\n  font-size: 2.5rem;\n  margin-bottom: 3rem;\n}\n\n.cards-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n}\n\n.card {\n  padding: 2rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  transition: var(--transition);\n}\n\n.card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n  font-size: 2rem;\n  margin-bottom: 1rem;\n}\n\n.benefits-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 2rem;\n  text-align: center;\n}\n\n.contact-form {\n  max-width: 600px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.contact-form input,\n.contact-form textarea {\n  padding: 1rem;\n  border: 2px solid var(--accent);\n  border-radius: 8px;\n  font-size: 1rem;\n}\n\n.contact-form textarea {\n  min-height: 150px;\n}\n\nfooter {\n  background: var(--text);\n  color: white;\n  padding: 3rem 2rem;\n}\n\n.footer-content {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 2rem;\n}\n\n.social-links a {\n  color: white;\n  text-decoration: none;\n  margin-right: 1rem;\n}\n\n@media (max-width: 768px) {\n  .mobile-menu {\n    display: block;\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n\n  .mobile-menu span {\n    display: block;\n    width: 25px;\n    height: 3px;\n    background: var(--text);\n    margin: 5px 0;\n    transition: var(--transition);\n  }\n\n  .nav-links {\n    display: none;\n  }\n\n  .nav-links.active {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: white;\n    padding: 1rem;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  }\n\n  h1 {\n    font-size: 2.5rem;\n  }\n\n  .hero-shape {\n    width: 400px;\n    height: 400px;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Mobile menu toggle\n  const mobileMenu = document.querySelector('.mobile-menu');\n  const navLinks = document.querySelector('.nav-links');\n\n  mobileMenu.addEventListener('click', () => {\n    navLinks.classList.toggle('active');\n  });\n\n  // Smooth scroll for navigation links\n  document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function (e) {\n      e.preventDefault();\n      const target = document.querySelector(this.getAttribute('href'));\n      if (target) {\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'start'\n        });\n        navLinks.classList.remove('active');\n      }\n    });\n  });\n\n  // Form submission handler\n  const contactForm = document.getElementById('contactForm');\n  contactForm.addEventListener('submit', (e) => {\n    e.preventDefault();\n    // Add form submission logic here\n    alert('Thank you for your interest! We will contact you soon.');\n    contactForm.reset();\n  });\n\n  // Intersection Observer for fade-in 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  // Apply animations to sections\n  document.querySelectorAll('section').forEach(section => {\n    section.style.opacity = '0';\n    section.style.transform = 'translateY(20px)';\n    section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n    observer.observe(section);\n  });\n});\n---end---\n\nThis creates a modern, responsive landing page for AI training B2B services with:\n\n1. Smooth animations and transitions\n2. Mobile-responsive design\n3. Clean, semantic HTML5\n4. Modern CSS with variables and flexible layouts\n5. Interactive elements\n6. Accessibility features\n7. Performance optimizations\n8. Professional design elements\n9. Clear call-to-actions\n10. Engaging visual hierarchy\n\nThe design uses a clean color scheme with a primary blue color, subtle gradients, and modern card layouts. The JavaScript includes smooth scrolling, form handling, and intersection observer for scroll animations."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 278,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 3264
+   }
+ }

readme.scroll

Changed around line 1

+ # aitrainpro.scroll.pub

+ Website generated by Claude from prompt: landing page for ai training b2b

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Mobile menu toggle
+   const mobileMenu = document.querySelector('.mobile-menu');
+   const navLinks = document.querySelector('.nav-links');
+ 
+   mobileMenu.addEventListener('click', () => {
+     navLinks.classList.toggle('active');
+   });
+ 
+   // Smooth scroll for navigation links
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       const target = document.querySelector(this.getAttribute('href'));
+       if (target) {
+         target.scrollIntoView({
+           behavior: 'smooth',
+           block: 'start'
+         });
+         navLinks.classList.remove('active');
+       }
+     });
+   });
+ 
+   // Form submission handler
+   const contactForm = document.getElementById('contactForm');
+   contactForm.addEventListener('submit', (e) => {
+     e.preventDefault();
+     // Add form submission logic here
+     alert('Thank you for your interest! We will contact you soon.');
+     contactForm.reset();
+   });
+ 
+   // Intersection Observer for fade-in 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 });
+ 
+   // Apply animations to sections
+   document.querySelectorAll('section').forEach(section => {
+     section.style.opacity = '0';
+     section.style.transform = 'translateY(20px)';
+     section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+     observer.observe(section);
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #2563eb;
+   --secondary: #1e40af;
+   --text: #1f2937;
+   --background: #ffffff;
+   --accent: #dbeafe;
+   --transition: all 0.3s ease;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   color: var(--text);
+   line-height: 1.6;
+ }
+ 
+ .nav-header {
+   position: fixed;
+   width: 100%;
+   background: rgba(255, 255, 255, 0.95);
+   backdrop-filter: blur(10px);
+   z-index: 1000;
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+ 
+ 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: 700;
+   color: var(--primary);
+ }
+ 
+ .nav-links {
+   display: flex;
+   gap: 2rem;
+   list-style: none;
+ }
+ 
+ .nav-links a {
+   text-decoration: none;
+   color: var(--text);
+   font-weight: 500;
+   transition: var(--transition);
+ }
+ 
+ .nav-links a:hover {
+   color: var(--primary);
+ }
+ 
+ .mobile-menu {
+   display: none;
+ }
+ 
+ .hero {
+   min-height: 100vh;
+   display: flex;
+   align-items: center;
+   position: relative;
+   padding: 2rem;
+   background: linear-gradient(135deg, var(--accent), var(--background));
+   overflow: hidden;
+ }
+ 
+ .hero-content {
+   max-width: 600px;
+   z-index: 1;
+ }
+ 
+ .hero-shape {
+   position: absolute;
+   right: -10%;
+   top: 50%;
+   transform: translateY(-50%);
+   width: 800px;
+   height: 800px;
+   background: linear-gradient(45deg, var(--primary), var(--secondary));
+   border-radius: 50%;
+   opacity: 0.1;
+ }
+ 
+ h1 {
+   font-size: 3.5rem;
+   line-height: 1.2;
+   margin-bottom: 1.5rem;
+   color: var(--text);
+ }
+ 
+ .cta-button {
+   padding: 1rem 2rem;
+   font-size: 1.1rem;
+   background: var(--primary);
+   color: white;
+   border: none;
+   border-radius: 8px;
+   cursor: pointer;
+   transition: var(--transition);
+ }
+ 
+ .cta-button:hover {
+   background: var(--secondary);
+   transform: translateY(-2px);
+ }
+ 
+ section {
+   padding: 5rem 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ h2 {
+   text-align: center;
+   font-size: 2.5rem;
+   margin-bottom: 3rem;
+ }
+ 
+ .cards-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .card {
+   padding: 2rem;
+   background: white;
+   border-radius: 12px;
+   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+   transition: var(--transition);
+ }
+ 
+ .card:hover {
+   transform: translateY(-5px);
+   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+ }
+ 
+ .card-icon {
+   font-size: 2rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .benefits-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+   text-align: center;
+ }
+ 
+ .contact-form {
+   max-width: 600px;
+   margin: 0 auto;
+   display: flex;
+   flex-direction: column;
+   gap: 1rem;
+ }
+ 
+ .contact-form input,
+ .contact-form textarea {
+   padding: 1rem;
+   border: 2px solid var(--accent);
+   border-radius: 8px;
+   font-size: 1rem;
+ }
+ 
+ .contact-form textarea {
+   min-height: 150px;
+ }
+ 
+ footer {
+   background: var(--text);
+   color: white;
+   padding: 3rem 2rem;
+ }
+ 
+ .footer-content {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .social-links a {
+   color: white;
+   text-decoration: none;
+   margin-right: 1rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .mobile-menu {
+     display: block;
+     background: none;
+     border: none;
+     cursor: pointer;
+   }
+ 
+   .mobile-menu span {
+     display: block;
+     width: 25px;
+     height: 3px;
+     background: var(--text);
+     margin: 5px 0;
+     transition: var(--transition);
+   }
+ 
+   .nav-links {
+     display: none;
+   }
+ 
+   .nav-links.active {
+     display: flex;
+     flex-direction: column;
+     position: absolute;
+     top: 100%;
+     left: 0;
+     right: 0;
+     background: white;
+     padding: 1rem;
+     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+   }
+ 
+   h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .hero-shape {
+     width: 400px;
+     height: 400px;
+   }
+ }