190 lines
15 KiB
XML
190 lines
15 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1600" width="1200" height="1600">
|
|
<title>SmartTools Landing Page Mockup - Improved</title>
|
|
|
|
<!-- Page Background -->
|
|
<rect id="page-background" x="0" y="0" width="1200" height="1600" fill="#F9FAFB"/>
|
|
|
|
<!-- Header -->
|
|
<rect id="header-bar" x="0" y="0" width="1200" height="60" fill="#2C3E50"/>
|
|
<text id="site-logo" x="50" y="38" font-family="Arial, sans-serif" font-size="24" fill="#fff" font-weight="bold">SmartTools</text>
|
|
<g id="nav-links">
|
|
<text x="700" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Docs</text>
|
|
<text x="770" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Tutorials</text>
|
|
<text x="860" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Registry</text>
|
|
<text x="940" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Community</text>
|
|
<text x="1030" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">About</text>
|
|
<text x="1090" y="38" font-family="Arial, sans-serif" font-size="16" fill="#fff">Donate</text>
|
|
<!-- Search Icon -->
|
|
<circle cx="1150" cy="30" r="10" fill="none" stroke="#fff" stroke-width="2"/>
|
|
<line x1="1157" y1="37" x2="1165" y2="45" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
|
|
</g>
|
|
|
|
<!-- Main Content Area -->
|
|
<g id="main-content">
|
|
<!-- Hero Section -->
|
|
<rect id="hero-section" x="50" y="90" width="1100" height="280" fill="#FFFFFF" rx="10" ry="10" stroke="#E0E0E0" stroke-width="1"/>
|
|
<text x="100" y="150" font-family="Arial, sans-serif" font-size="36" fill="#333" font-weight="bold">Build Custom AI Commands in YAML</text>
|
|
<text x="100" y="190" font-family="Arial, sans-serif" font-size="18" fill="#666">Test</text>
|
|
<text x="100" y="215" font-family="Arial, sans-serif" font-size="18" fill="#666">Provider-agnostic and composable for ultimate flexibility.</text>
|
|
|
|
<!-- Install Snippet -->
|
|
<rect x="100" y="245" width="450" height="40" fill="#E0E0E0" rx="5" ry="5"/>
|
|
<text x="110" y="270" font-family="monospace" font-size="14" fill="#333">$ pip install smarttools && smarttools init</text>
|
|
|
|
<!-- CTA Buttons -->
|
|
<rect x="100" y="300" width="180" height="45" fill="#6366F1" rx="5" ry="5"/>
|
|
<text x="120" y="328" font-family="Arial, sans-serif" font-size="16" fill="#fff" font-weight="bold">Get Started</text>
|
|
<rect x="300" y="300" width="180" height="45" fill="none" stroke="#06B6D4" stroke-width="2" rx="5" ry="5"/>
|
|
<text x="320" y="328" font-family="Arial, sans-serif" font-size="16" fill="#06B6D4" font-weight="bold">View Tutorials</text>
|
|
|
|
<!-- Why SmartTools Section (Three Pillars) -->
|
|
<text x="50" y="420" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Why SmartTools?</text>
|
|
<g id="three-pillars">
|
|
<!-- Pillar 1: Easy to Use -->
|
|
<rect x="50" y="450" width="350" height="150" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<circle cx="100" cy="490" r="20" fill="#6366F1"/>
|
|
<text x="90" y="498" font-family="Arial, sans-serif" font-size="18" fill="#fff" font-weight="bold">✓</text>
|
|
<text x="140" y="490" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Easy to Use</text>
|
|
<text x="60" y="520" font-family="Arial, sans-serif" font-size="14" fill="#666">Simple YAML configuration for quick setup.</text>
|
|
|
|
<!-- Pillar 2: Powerful -->
|
|
<rect x="425" y="450" width="350" height="150" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<circle cx="475" cy="490" r="20" fill="#06B6D4"/>
|
|
<text x="465" y="498" font-family="Arial, sans-serif" font-size="18" fill="#fff" font-weight="bold">⚡</text>
|
|
<text x="515" y="490" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Powerful</text>
|
|
<text x="435" y="520" font-family="Arial, sans-serif" font-size="14" fill="#666">Leverage any AI provider, compose complex workflows.</text>
|
|
|
|
<!-- Pillar 3: Community -->
|
|
<rect x="800" y="450" width="350" height="150" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<circle cx="850" cy="490" r="20" fill="#6366F1"/>
|
|
<text x="840" y="498" font-family="Arial, sans-serif" font-size="18" fill="#fff" font-weight="bold">👥</text>
|
|
<text x="890" y="490" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Community</text>
|
|
<text x="810" y="520" font-family="Arial, sans-serif" font-size="14" fill="#666">Share, discover, and contribute to a growing ecosystem.</text>
|
|
</g>
|
|
|
|
<!-- Featured Tools & Projects -->
|
|
<text x="50" y="650" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Featured Tools & Projects</text>
|
|
<g id="featured-grid">
|
|
<!-- Tool Card 1 -->
|
|
<rect x="50" y="680" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<rect x="340" y="690" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="345" y="705" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
|
|
<circle cx="70" cy="700" r="10" fill="#6366F1"/>
|
|
<text x="90" y="705" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 1</text>
|
|
<text x="60" y="730" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
|
|
<text x="60" y="750" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: John Doe</text>
|
|
<text x="60" y="770" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 1.2K</text>
|
|
<rect x="60" y="790" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
|
|
<text x="65" y="807" font-family="monospace" font-size="12" fill="#333">smarttools run tool1</text>
|
|
|
|
<!-- Tool Card 2 -->
|
|
<rect x="425" y="680" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<rect x="715" y="690" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="720" y="705" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
|
|
<circle cx="445" cy="700" r="10" fill="#6366F1"/>
|
|
<text x="465" y="705" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 2</text>
|
|
<text x="435" y="730" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
|
|
<text x="435" y="750" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Jane Smith</text>
|
|
<text x="435" y="770" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 800</text>
|
|
<rect x="435" y="790" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
|
|
<text x="440" y="807" font-family="monospace" font-size="12" fill="#333">smarttools run tool2</text>
|
|
|
|
<!-- Tool Card 3 -->
|
|
<rect x="800" y="680" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<rect x="1090" y="690" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="1095" y="705" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
|
|
<circle cx="820" cy="700" r="10" fill="#6366F1"/>
|
|
<text x="840" y="705" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 3</text>
|
|
<text x="810" y="730" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
|
|
<text x="810" y="750" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Bob Johnson</text>
|
|
<text x="810" y="770" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 2.5K</text>
|
|
<rect x="810" y="790" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
|
|
<text x="815" y="807" font-family="monospace" font-size="12" fill="#333">smarttools run tool3</text>
|
|
|
|
<!-- Tool Card 4 -->
|
|
<rect x="50" y="880" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<rect x="340" y="890" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="345" y="905" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
|
|
<circle cx="70" cy="900" r="10" fill="#6366F1"/>
|
|
<text x="90" y="905" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 4</text>
|
|
<text x="60" y="930" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
|
|
<text x="60" y="950" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Alice Brown</text>
|
|
<text x="60" y="970" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 500</text>
|
|
<rect x="60" y="990" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
|
|
<text x="65" y="1007" font-family="monospace" font-size="12" fill="#333">smarttools run tool4</text>
|
|
|
|
<!-- Tool Card 5 -->
|
|
<rect x="425" y="880" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<rect x="715" y="890" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="720" y="905" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
|
|
<circle cx="445" cy="900" r="10" fill="#6366F1"/>
|
|
<text x="465" y="905" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 5</text>
|
|
<text x="435" y="930" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
|
|
<text x="435" y="950" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: Charlie Green</text>
|
|
<text x="435" y="970" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 1.8K</text>
|
|
<rect x="435" y="990" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
|
|
<text x="440" y="1007" font-family="monospace" font-size="12" fill="#333">smarttools run tool5</text>
|
|
|
|
<!-- Tool Card 6 -->
|
|
<rect x="800" y="880" width="350" height="180" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<rect x="1090" y="890" width="50" height="20" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="1095" y="905" font-family="Arial, sans-serif" font-size="12" fill="#fff">Category</text>
|
|
<circle cx="820" cy="900" r="10" fill="#6366F1"/>
|
|
<text x="840" y="905" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tool Title 6</text>
|
|
<text x="810" y="930" font-family="Arial, sans-serif" font-size="14" fill="#666">Short description of the tool.</text>
|
|
<text x="810" y="950" font-family="Arial, sans-serif" font-size="12" fill="#888">Author: David White</text>
|
|
<text x="810" y="970" font-family="Arial, sans-serif" font-size="12" fill="#888">Downloads: 900</text>
|
|
<rect x="810" y="990" width="150" height="25" fill="#E0E0E0" rx="3" ry="3"/>
|
|
<text x="815" y="1007" font-family="monospace" font-size="12" fill="#333">smarttools run tool6</text>
|
|
</g>
|
|
|
|
<!-- Getting Started Section -->
|
|
<text x="50" y="1110" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Getting Started</text>
|
|
<g id="getting-started-cards">
|
|
<rect x="50" y="1140" width="350" height="120" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<text x="60" y="1165" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tutorial 1: Basic Setup</text>
|
|
<text x="60" y="1190" font-family="Arial, sans-serif" font-size="14" fill="#666">Learn how to install and configure SmartTools.</text>
|
|
<rect x="60" y="1205" width="100" height="25" fill="#6366F1" rx="3" ry="3"/>
|
|
<text x="65" y="1222" font-family="Arial, sans-serif" font-size="12" fill="#fff">Read More</text>
|
|
|
|
<rect x="425" y="1140" width="350" height="120" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<text x="435" y="1165" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tutorial 2: Your First Tool</text>
|
|
<text x="435" y="1190" font-family="Arial, sans-serif" font-size="14" fill="#666">Create a simple AI command in YAML.</text>
|
|
<rect x="435" y="1205" width="100" height="25" fill="#6366F1" rx="3" ry="3"/>
|
|
<text x="440" y="1222" font-family="Arial, sans-serif" font-size="12" fill="#fff">Read More</text>
|
|
|
|
<!-- Tutorial 3: Advanced Workflows -->
|
|
<rect x="800" y="1140" width="350" height="120" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<text x="810" y="1165" font-family="Arial, sans-serif" font-size="18" fill="#333" font-weight="bold">Tutorial 3: Advanced Workflows</text>
|
|
<text x="810" y="1190" font-family="Arial, sans-serif" font-size="14" fill="#666">Combine multiple tools for complex tasks.</text>
|
|
<rect x="810" y="1205" width="100" height="25" fill="#6366F1" rx="3" ry="3"/>
|
|
<text x="815" y="1222" font-family="Arial, sans-serif" font-size="12" fill="#fff">Read More</text>
|
|
</g>
|
|
|
|
<!-- Featured Contributor Section -->
|
|
<text x="50" y="1310" font-family="Arial, sans-serif" font-size="24" fill="#333" font-weight="bold">Featured Contributor</text>
|
|
<rect x="50" y="1340" width="1100" height="100" fill="#FFFFFF" stroke="#E0E0E0" stroke-width="1" rx="5" ry="5" filter="url(#shadow)"/>
|
|
<circle cx="100" cy="1390" r="30" fill="#D0D0D0"/>
|
|
<text x="100" y="1398" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#666">👤</text>
|
|
<text x="150" y="1380" font-family="Arial, sans-serif" font-size="20" fill="#333" font-weight="bold">Alice Wonderland</text>
|
|
<text x="150" y="1405" font-family="Arial, sans-serif" font-size="16" fill="#666">Creator of the "Image Captioning" tool and active community member.</text>
|
|
<rect x="150" y="1420" width="150" height="25" fill="#06B6D4" rx="3" ry="3"/>
|
|
<text x="155" y="1437" font-family="Arial, sans-serif" font-size="12" fill="#fff">View Profile</text>
|
|
|
|
</g>
|
|
|
|
<!-- Footer Ad Banner -->
|
|
<rect id="footer-ad" x="0" y="1520" width="1200" height="80" fill="#DBEAFE"/>
|
|
<text x="600" y="1565" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#666">Advertisement: Support SmartTools Development</text>
|
|
|
|
<!-- Define a subtle shadow filter -->
|
|
<defs>
|
|
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="2"/>
|
|
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"/>
|
|
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
</svg> |