<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钛办Techban - Ai找办公室_Ai招商选址_写字楼创意园工作室租赁</title>
    <link rel="icon" href="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/techbanbiaotiicon.png" type="image/png">
    
    <style>
        /* --- Google Font & Global Styles --- */
        @import url('http://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        :root {
            --color-background: #0D0D0D;
            --color-text: #FFFFFF;
            --color-text-muted: #A0A0A0;
            --color-accent: #A3E635;
            --color-border: #2D2D2D;
            --color-button-bg: #F0F0F0;
            --color-button-text: #0D0D0D;
            --color-card-bg-light: #F1F5F9;
            --color-card-text-dark: #1E293B;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }
        /* Smooth-scroll for anchor links */
        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--color-background);
            color: var(--color-text);
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* --- Global Components & Utilities --- */
        .container {
            width: 90%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .section {
            padding: 100px 0;
        }

        .section-title {
            font-size: 48px;
            font-weight: 600;
            text-align: center;
            line-height: 1.2;
        }

        .section-subtitle {
            font-size: 18px;
            color: var(--color-text-muted);
            text-align: center;
            max-width: 600px;
            margin: 16px auto 0;
            line-height: 1.6;
        }

        .btn {
            display: inline-block;
            background-color: var(--color-button-bg);
            color: var(--color-button-text);
            padding: 12px 24px;
            border-radius: 99px; /* Pill shape */
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: background-color 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #dcdcdc;
        }

        /* --- Header --- */
        .header {
            padding: 24px 0;
            position: sticky;
            top: 0;
            background-color: rgba(13, 13, 13, 0.8);
            backdrop-filter: blur(10px);
            z-index: 100;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 60px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 24px;
            font-weight: 600;
            text-decoration: none;
            color: var(--color-text);
        }

        .logo-icon {
            width: 32px;
            height: 32px;
        }
        
        /* --- Hero Section --- */
        .hero {
            text-align: center;
            padding: 80px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        .hero .logo-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 24px;
        }

        .hero h1 {
            font-size: 64px;
            font-weight: 600;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.1;
        }

        .hero p {
            font-size: 20px;
            color: var(--color-text-muted);
            max-width: 550px;
            margin: 24px auto 32px;
        }

        .hero-image-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 60px;
            width: 100%;
            min-height: 500px;
            position: relative;
        }

        .hero-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .carousel-slide:hover .hero-image {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
        }

        /* --- Image Carousel Styles --- */
        .carousel {
            position: relative;
            width: 480px;
            height: 600px;
            perspective: 1000px;
            margin: 0 auto;
        }

        .carousel img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: transform 0.8s ease, opacity 0.8s ease;
            transform-origin: center;
        }

        .pos0 {
            transform: translateY(0) scale(1) rotate(0deg);
            z-index: 3;
            opacity: 1;
        }

        .pos1 {
            transform: translateY(-10px) scale(0.95) rotate(13deg);
            z-index: 2;
            opacity: 0.8;
        }

        .pos2 {
            transform: translateY(-20px) scale(0.9) rotate(25deg);
            z-index: 1;
            opacity: 0.6;
        }

        .carousel-slide.active {
            opacity: 1;
            transform: translateX(0) scale(1) translateZ(0px);
            z-index: 3;
        }

        .carousel-slide.prev {
            opacity: 0.5;
            transform: translateX(-20px) scale(0.85) translateZ(-40px);
            z-index: 2;
        }

        .carousel-slide.next {
            opacity: 0.5;
            transform: translateX(20px) scale(0.85) translateZ(-40px);
            z-index: 2;
        }

        .carousel-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .carousel-btn {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .carousel-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
        }

        .carousel-indicators {
            display: flex;
            gap: 8px;
        }

        .indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: var(--color-accent);
            transform: scale(1.2);
        }

        .indicator:hover {
            background: var(--color-accent);
            opacity: 0.7;
        }

        .download-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 48px 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .btn-ios {
            background-color: #000;
            color: #fff;
            border-color: #000;
        }

        .btn-ios:hover {
            background-color: #333;
            border-color: #333;
        }

        .btn-android {
            background-color: #000;
            color: #fff;
            border-color: #000;
        }

        .btn-android:hover {
            background-color: #333;
        }

        /* --- Features Section --- */
        .features-intro {
            padding-bottom: 80px;
        }

        .feature-cards-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 900px;
            margin: 60px auto 0;
        }

        .feature-card {
            background-color: var(--color-background);
            border: 1px solid var(--color-border);
            border-radius: 24px;
            padding: 40px;
        }
        
        .feature-card-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .feature-icon-wrapper {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background-color: rgba(163, 230, 53, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .feature-icon-wrapper svg {
            width: 24px;
            height: 24px;
            color: var(--color-accent);
        }

        .feature-card h3 {
            font-size: 24px;
            font-weight: 500;
        }
        
        .feature-card p {
            color: var(--color-text-muted);
            line-height: 1.6;
            margin-bottom: 24px;
            max-width: 650px;
        }

        .feature-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        
        .feature-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .feature-list-item svg {
            width: 20px;
            height: 20px;
            color: var(--color-accent);
            flex-shrink: 0;
        }

        /* --- Small Features Grid Section --- */
        .features-grid {
            padding-top: 0;
        }

        .small-features-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .small-feature-card {
            display: flex;
            gap: 16px;
        }
        
        .small-feature-card .feature-icon-wrapper {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

        .small-feature-card h4 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .small-feature-card p {
            color: var(--color-text-muted);
            line-height: 1.5;
            font-size: 14px;
        }

        /* --- Testimonials Section --- */
        .testimonials {
            background: linear-gradient(180deg, var(--color-background) 50%, var(--color-card-bg-light) 50%);
        }

        .testimonials-content {
            margin-top: 60px;
        }
        
        .testimonial-columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .testimonial-column {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .testimonial-card {
            background-color: var(--color-card-bg-light);
            color: var(--color-card-text-dark);
            padding: 24px;
            border-radius: 20px;
            break-inside: avoid;
        }

        .testimonial-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .testimonial-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .testimonial-author h5 {
            font-size: 16px;
            font-weight: 600;
        }
        .testimonial-author span {
            color: #64748B; /* From the image */
            font-size: 14px;
        }

        .testimonial-card p {
            line-height: 1.6;
            white-space: pre-wrap; /* To respect line breaks */
        }
        
        /* Darker testimonial card variant */
        .testimonial-card.dark {
            background-color: #0F172A; /* From the image */
            color: var(--color-card-bg-light);
        }
        .testimonial-card.dark .testimonial-author span {
            color: #94A3B8;
        }

        /* --- CTA Section --- */
        .cta {
            background-color: var(--color-background);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta .section-title {
            position: relative;
            z-index: 2;
        }
        .cta .btn {
            margin-top: 32px;
            position: relative;
            z-index: 2;
        }
        
        .cta-bg-circles {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 800px;
            z-index: 1;
        }
        .cta-bg-circles div {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(45, 45, 45, 0.5);
        }
        .cta-bg-circles .circle-1 {
            width: 100%; height: 100%; top: 0; left: 0;
        }
        .cta-bg-circles .circle-2 {
            width: 75%; height: 75%; top: 12.5%; left: 12.5%;
        }
        .cta-bg-circles .circle-3 {
            width: 50%; height: 50%; top: 25%; left: 25%;
        }


        /* --- Footer --- */
        .footer {
            padding: 40px 0;
            text-align: center;
            padding-bottom: 80px;
        }

        .footer .logo {
            justify-content: center;
            margin-bottom: 16px;
        }

        .footer p {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        /* --- Responsive Design --- */
        @media (max-width: 1024px) {
            .hero h1 { font-size: 54px; }
            .section-title { font-size: 40px; }
            .testimonial-columns { grid-template-columns: repeat(2, 1fr); }
            /* Hide the third column and distribute its items */
            .testimonial-column:nth-child(3) { display: none; }
            .testimonial-column:nth-child(1) { grid-row: 1; }
            .testimonial-column:nth-child(2) { grid-row: 1; }
        }

        @media (max-width: 768px) {
            .section { padding: 30px 0; }
            .hero h1 { font-size: 36px; }
            .hero p { font-size: 18px; }
            .feature-cards-container { margin-top: 40px; }
            .feature-card { padding: 30px; }
            .feature-list { grid-template-columns: 1fr; }
            .small-features-container { grid-template-columns: 1fr; }
            .testimonial-columns { grid-template-columns: 1fr; }
            .download-buttons {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
            }
            .header-content .btn {
                font-size: 14px;
                padding: 8px 16px;
                width: auto;
                min-width: fit-content;
                max-width: none;
            }
            .carousel-container { height: 500px; }
            .carousel-slide {
                width: 100%;
                height: 100%;
                margin-left: 0;
                margin-top: 0;
                left: 0;
                top: 0;
            }
            .hero-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 8px;
                object-position: center;
            }
            .carousel {
                width: 420px;
                height: 630px;
            }
            .hero-image-wrapper {
                min-height: 630px;
            }
            .carousel-controls { gap: 15px; }
            .carousel-btn {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
        }

        @media (max-width: 480px) and (min-width: 300px) {
            .carousel-container { height: 350px; margin: 40px 0; }
            .carousel-slide {
                width: 100%;
                height: 100%;
                margin-left: 0;
                margin-top: 0;
                left: 0;
                top: 0;
            }
            .carousel-slide.prev {
                transform: translateX(-15px) translateY(5px) scale(0.85) translateZ(-30px);
            }
            .carousel-slide.next {
                transform: translateX(15px) translateY(5px) scale(0.85) translateZ(-30px);
            }
            .hero-image {
                border-radius: 8px;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }
            .carousel {
                width: 360px;
                height: 540px;
            }
            .hero-image-wrapper {
                min-height: 540px;
            }
            .container { padding: 0 15px; }
            .hero h1 { font-size: 28px; margin-bottom: 15px; }
            .hero p { font-size: 16px; margin-bottom: 25px; }
            .btn { max-width: 220px; font-size: 15px; padding: 14px 24px; }
            .download-buttons { gap: 14px; margin-top: 50px; }
            .header-content { gap: 25px; }
            .header-content .btn { padding: 6px 12px; font-size: 12px; }
        }

        @media (max-width: 299px) {
            .carousel-container {
                margin: 40px 0;
                height: 280px;
            }
            .carousel {
                width: 320px;
                height: 480px;
            }
            .hero-image-wrapper {
                min-height: 480px;
            }
        }

        @media (max-width: 299px) {
            .container {
                padding: 0 15px;
            }
            
            .carousel-slide {
                width: 100%;
                height: 100%;
                margin-left: 0;
                margin-top: 0;
                left: 0;
                top: 0;
            }
            
            .hero-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 8px;
                object-position: center;
            }
            
            .feature-card {
                padding: 20px;
            }
            
            .hero h1 {
                font-size: 28px;
                margin-bottom: 15px;
            }
            
            .hero p {
                font-size: 16px;
                margin-bottom: 25px;
            }
            
            .btn {
                max-width: 220px;
                font-size: 15px;
                padding: 14px 24px;
            }
            
            .download-buttons {
                gap: 14px;
                margin-top: 50px;
            }
            
            .header-content {
                gap: 25px;
            }
            
            .header-content .btn {
                padding: 6px 12px;
                font-size: 12px;
            }
        }
    </style>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const ctaButton = document.querySelector('a[href="#download-section"]');
                if (ctaButton) {
                    ctaButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        const targetElement = document.getElementById('download-section');
                        if (targetElement) {
                            targetElement.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center',
                                inline: 'center'
                            });
                        }
                    });
                }
            });
        </script>
        <script>
            let currentSlideIndex = 1;
            const totalSlides = 3;

            function showSlide(index) {
                const slides = document.querySelectorAll('.carousel-slide');
                const indicators = document.querySelectorAll('.indicator');
                
                // 重置所有幻灯片状态
                slides.forEach(slide => {
                    slide.classList.remove('active', 'prev', 'next');
                });
                
                indicators.forEach(indicator => {
                    indicator.classList.remove('active');
                });
                
                // 设置当前幻灯片
                slides[index - 1].classList.add('active');
                indicators[index - 1].classList.add('active');
                
                // 设置前一个和后一个幻灯片
                const prevIndex = index === 1 ? totalSlides : index - 1;
                const nextIndex = index === totalSlides ? 1 : index + 1;
                
                slides[prevIndex - 1].classList.add('prev');
                slides[nextIndex - 1].classList.add('next');
            }

            function changeSlide(direction) {
                currentSlideIndex += direction;
                
                if (currentSlideIndex > totalSlides) {
                    currentSlideIndex = 1;
                } else if (currentSlideIndex < 1) {
                    currentSlideIndex = totalSlides;
                }
                
                showSlide(currentSlideIndex);
            }

            function currentSlide(index) {
                currentSlideIndex = index;
                showSlide(currentSlideIndex);
            }

            // 自动轮播
            setInterval(() => {
                changeSlide(1);
            }, 4000);

            // 初始化显示
            document.addEventListener('DOMContentLoaded', function() {
                showSlide(1);
            });
        </script>
    </head>
<body>

    <!-- SVG Icon Definitions -->
    <svg width="0" height="0" style="display: none;">
        <symbol id="logo-Techban" viewBox="0 0 48 48">
            <path fill="currentColor" d="M22.049 2.152a2.4 2.4 0 0 1 3.902 0l7.854 13.602a2.4 2.4 0 0 1-2.078 3.646h-5.025v10.5h10.5v-5.025a2.4 2.4 0 0 1 3.646-2.078l13.602 7.854a2.4 2.4 0 0 1 0 3.902l-13.602 7.854a2.4 2.4 0 0 1-3.646-2.078v-5.025h-10.5v10.5h5.025a2.4 2.4 0 0 1 2.078 3.646l-7.854 13.602a2.4 2.4 0 0 1-3.902 0l-7.854-13.602a2.4 2.4 0 0 1 2.078-3.646h5.025v-10.5h-10.5v5.025a2.4 2.4 0 0 1-3.646 2.078L2.152 25.951a2.4 2.4 0 0 1 0-3.902l13.602-7.854a2.4 2.4 0 0 1 3.646 2.078v5.025h10.5v-10.5H20.02a2.4 2.4 0 0 1-2.078-3.646l4.107-7.114Z"></path>
        </symbol>
    </svg>

    <header class="header">
        <div class="container header-content">
            <a href="#" class="logo">
                <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/Frame%201171275840.png" alt="Techban Logo" class="logo-icon">
                <span>Techban</span>
            </a>
            <a href="http://bms.techban.cn/" class="btn">房源管理专用入口</a>
        </div>
    </header>

    <main>
        <section class="section hero">
            <div class="container">
                <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/Frame%201171275840.png" alt="Techban Logo" class="logo-icon">
                <h1>Ai OfficeSearch  寻找理想办公空间</h1>
                <p>钛办Ai聚焦数字化招商选址，自研语义驱动选址引擎，基于Ai一键录房+LLM语义匹配+自适应向量检索，用户与AI对话后，10秒内获得多维度综合评估的办公空间候选集</p>
                <div class="download-buttons" id="download-section">
                    <a href="http://apps.apple.com/cn/app/%E9%92%9B%E5%8A%9Etechban/id6743103191" class="btn btn-ios">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/>
                            <path d="M10 2c1 .5 2 2 2 5"/>
                        </svg>
                        iOS app下载
                    </a>
                    <a href="http://oss.techban.cn/apk/techban.apk" class="btn btn-android">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="320 140 384 750" width="20" height="20" fill="currentColor">
                            <path d="M675.147294 154.352941a79.058824 79.058824 0 0 1 79.058824 79.058824v597.323294a79.058824 79.058824 0 0 1-79.058824 79.058823H323.764706a79.058824 79.058824 0 0 1-79.058824-79.058823V233.411765a79.058824 79.058824 0 0 1 79.058824-79.058824h351.382588z m0 52.705883H323.764706a26.352941 26.352941 0 0 0-26.352941 26.352941v597.323294c0 14.576941 11.806118 26.352941 26.352941 26.352941h351.382588a26.352941 26.352941 0 0 0 26.352941-26.352941V233.411765a26.352941 26.352941 0 0 0-26.352941-26.352941z"/>
                            <path d="M534.588235 259.764706a26.352941 26.352941 0 1 1 0 52.705882h-70.26447a26.352941 26.352941 0 1 1 0-52.705882h70.26447zM569.735529 751.676235a26.352941 26.352941 0 0 1 0 52.705883H429.176471a26.352941 26.352941 0 1 1 0-52.705883h140.559058z"/>
                        </svg>
                        安卓 app下载
                    </a>
                </div>

                <div class="hero-image-wrapper">
                    <div class="carousel">
                        <img src="http://techban-guanwang-1312240927.cos.ap-shanghai.myqcloud.com/Group%201171275128.png" class="pos0">
                        <img src="http://techban-guanwang-1312240927.cos.ap-shanghai.myqcloud.com/22Group%201171275127.png" class="pos1">
                        <img src="http://techban-guanwang-1312240927.cos.ap-shanghai.myqcloud.com/21Group%201171275127.png" class="pos2">
                    </div>
                </div>
            </div>
        </section>

        <section class="section features-intro">
            <div class="container">
                <h2 class="section-title">自研10秒轻量化 Ai 高速找房路径</h2>
                <p class="section-subtitle">融合了自然语言理解、结构化推理与空间智能评估，生成高度个性化的房源候选集。核心系统架构具备从全栈架构设计、智能决策链构建到语义检索引擎的完整自研能力</p>

                <div class="feature-cards-container">
                    <!-- Feature Card 1 -->
                    <div class="feature-card">
                        <div class="feature-card-header">
                            <div class="feature-icon-wrapper">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
                            </div>
                            <h3>模糊需求结构化解析</h3>
                        </div>
                        <p>系统可将非标准语言中的“主观词汇”（如“明亮”“气质好”）映射为可量化的搜索意图，并结合地理、功能、预算等维度进行多元需求解析，避免传统表单式搜索的表达局限。</p>
                        <ul class="feature-list">
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>需求语义理解与意图识别</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>多个搜索维度与权重</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>需求词汇转换可量化指标</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>突破传统结构化表单约束</li>
                        </ul>
                    </div>

                    <!-- Feature Card 2 -->
                    <div class="feature-card">
                         <div class="feature-card-header">
                            <div class="feature-icon-wrapper">
                                <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/%E5%90%91%E9%87%8F%E5%8C%96%E6%A8%A1%E5%9E%8B.png" alt="向量化模型图标" style="width: 24px; height: 24px; object-fit: contain;">
                            </div>
                            <h3>自适应向量检索机制</h3>
                        </div>
                        <p>我们的推荐引擎采用自适应语义向量机制，能根据用户交互历史和城市语境动态调整相似度权重，不同阶段、不同用户的“理想空间”定义会被自动优化，推荐结果随认知深化而演进。</p>
                        <ul class="feature-list">
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>房源向量数据库自动化更新</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>动态调整推荐策略与权重</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>理想空间的语义向量理解</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>个性化风格化搜索精准度</li>
                        </ul>
                    </div>
                    
                    <!-- Feature Card 3 -->
                    <div class="feature-card">
                         <div class="feature-card-header">
                            <div class="feature-icon-wrapper">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 12" /></svg>
                            </div>
                            <h3>任务链驱动推理系统</h3>
                        </div>
                        <p>系统内部由多任务链路组成，每条链路处理从用户理解、房源分析、数据增强到推荐解释的全流程。在应对多轮复杂请求或不确定性表达时，具备高鲁棒性，能维持推理的连贯性和输出的一致性。</p>
                        <ul class="feature-list">
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>全流程任务链架构</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>多链路并行处理需求</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>上下文理解和意图修正</li>
                            <li class="feature-list-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></svg>灵活调用外部Api和MCP</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section class="section features-grid">
            <div class="container small-features-container">
                <div class="small-feature-card">
                    <div class="feature-icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9.568 3.34 3.364 3.364m0 0-3.364 3.364m3.364-3.364H5.25m9.9 6.364.75-.75a2.25 2.25 0 0 1 3.182 0l2.25 2.25a2.25 2.25 0 0 1 0 3.182l-8.25 8.25a2.25 2.25 0 0 1-3.182 0l-2.25-2.25a2.25 2.25 0 0 1 0-3.182.75.75 0 0 0 .75-.75m-4.5-4.5H5.25" /></svg></div>
                    <div><h4>Ai录房</h4><p>自动识别房源表单生成数据</p></div>
                </div>
                <div class="small-feature-card">
                    <div class="feature-icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.168c-1.104 0-1.996.892-1.996 1.996v1.996c0 1.104.892 1.996 1.996 1.996h1.996c1.104 0 1.996-.892 1.996-1.996V6.168c0-1.104-.892-1.996-1.996-1.996ZM15.75 15.75h2.086c1.104 0 1.996-.892 1.996-1.996v-1.996c0-1.104-.892-1.996-1.996-1.996h-1.996c-1.104 0-1.996.892-1.996 1.996v1.996c0 1.104.892 1.996 1.996 1.996Z" /></svg></div>
                    <div><h4>Match匹配值</h4><p>Ai自动赋予Match值，不受人为干扰</p></div>
                </div>
                <div class="small-feature-card">
                    <div class="feature-icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" /></svg></div>
                    <div><h4>在线管理房源</h4><p>在线管理房源，无需电脑操作</p></div>
                </div>
                <div class="small-feature-card">
                    <div class="feature-icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 11.667 0l3.181-3.183m-4.991-2.695v-2.695A8.25 8.25 0 0 0 5.681 5.681v2.695m3.41-2.695-3.181 3.183m0 0-3.181-3.183" /></svg></div>
                    <div><h4>地图搜房</h4><p>滑动地图搜房，所见即所得</p></div>
                </div>
                <div class="small-feature-card">
                    <div class="feature-icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" /></svg></div>
                    <div><h4>需求看板</h4><p>发布需求，全网帮你找，找房更透明</p></div>
                </div>
                <div class="small-feature-card">
                    <div class="feature-icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" /></svg></div>
                    <div><h4>快速搜房系统</h4><p>办公空间分类筛选，一键呈现</p></div>
                </div>
            </div>
        </section>

        <section class="section testimonials">
            <div class="container">
                <h2 class="section-title" style="color: var(--color-card-bg-light);">What people are saying</h2>
                <div class="testimonials-content">
                    <div class="testimonial-columns">
                        <div class="testimonial-column">
                            <div class="testimonial-card">
                                <p>AI推荐的3个地点都很符合需求，最终选择了南京西路地铁口的办公楼，节省了2周找房时间</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/49.png" alt="Raroque" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>科技公司CEO</h5><span>@张</span></div>
                                </div>
                            </div>
                            <div class="testimonial-card dark">
                                <p>搜索"有创意氛围"时推荐了文创园区，很贴合团队气质，已成功入驻 🙌</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/29.png" alt="Tair" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>设计工作室</h5><span>@王创始人</span></div>
                                </div>
                            </div>
                            <div class="testimonial-card">
                                <p>非常好. 用钛办Ai找房很简单</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/50.png" alt="Guillermo Rauch" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>酒类公司</h5><span>@林总</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonial-column">
                             <div class="testimonial-card dark">
                                <p>预算有限但要求不低，AI推荐的性价比方案超出预期，团队很满意新办公环境</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/46.png" alt="Jorge Ferreiro" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>电商公司</h5><span>@赵总</span></div>
                                </div>
                            </div>
                             <div class="testimonial-card">
                                <p>多轮对话中需求变更，系统能快速调整推荐，非常专业，最终找到交通便利的理想场地。超过我的预期</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/72_rectangle.png" alt="Captain HaHaa" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>家居设计公司</h5><span>@孙总</span></div>
                                </div>
                            </div>
                             <div class="testimonial-card dark">
                                <p>不错的平台</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/49_rectangle.png" alt="Jorge Ferreiro" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>创业者</h5><span>@王总</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonial-column">
                            <div class="testimonial-card">
                                <p>页面简单好看，和其他的不同</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/30_rectangle.png" alt="Brian Tam" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>创意设计师</h5><span>@苏女士</span></div>
                                </div>
                            </div>
                            <div class="testimonial-card dark">
                                <p>团队扩张期需求复杂，AI能理解"可扩展空间"概念，推荐方案很有前瞻性。</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/8.png" alt="Noman Ali" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>互联网公司</h5><span>@马总</span></div>
                                </div>
                            </div>
                            <div class="testimonial-card">
                                <p>系统推荐解释很详细，帮助理解每个推荐理由，决策过程更有信心。</p>
                                <div class="testimonial-header" style="padding: 10px 0;">
                                    <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/techbanguanwangtubiao/touxiang/34.png" alt="Samuel Duc" class="testimonial-avatar">
                                    <div class="testimonial-author"><h5>软件公司</h5><span>@Samuel总</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section cta">
            <div class="container">
                <div class="cta-bg-circles">
                    <div class="circle-1"></div>
                    <div class="circle-2"></div>
                    <div class="circle-3"></div>
                </div>
                <h2 class="section-title">上钛办，求租不如求Ai</h2>
                <a href="#download-section" class="btn">Try Techban For Free</a>
            </div>
        </section>
    </main>

    <section class="contact-section">
        <div class="contact-title">
            联系我们
        </div>
        <div class="contact-content">
            <div class="contact-info">
                <h3>邮件咨询</h3>
                <p>关于咨询和反馈意见</p>
                <p>请发送电子邮件至</p>
                <a href="mailto:yangfan@techban.cn">yangfan@techban.cn</a>
            </div>
            <div class="qr-codes">
                <div class="qr-item">
                    <img src="http://techban-guanwang-1312240927.cos.ap-shanghai.myqcloud.com/Techban%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/Group%201171275122.png" alt="官方公众号二维码">
                    <p>官方公众号</p>
                </div>
                <div class="qr-item">
                    <img src="http://techban-guanwang-1312240927.cos.ap-shanghai.myqcloud.com/Techban%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/Group%201171275123.png" alt="小程序二维码">
                    <p>小程序扫码</p>
                </div>
                <div class="qr-item">
                    <img src="http://techban-guanwang-1312240927.cos.ap-shanghai.myqcloud.com/Techban%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/Group%201171275124.png" alt="钛办小红书二维码">
                    <p>钛办小红书</p>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <a href="#" class="logo">
                <img src="http://techban-1312240927.cos.ap-shanghai.myqcloud.com/techban/Frame%201171275840.png" alt="Techban Logo" class="logo-icon" style="width: 24px; height: 24px;">
                <span>Techban</span>
            </a>
            <p>&copy; <a href="http://beian.miit.gov.cn/" target="_blank" style="color: white;">沪ICP备2021013891号-2</a>   上海钛办科技服务有限公司 沪房管经（闵行）第008501号. All rights reserved.</p>
        </div>
    </footer>

    <script>
        // A little script to help distribute testimonials more evenly on different screen sizes
        document.addEventListener('DOMContentLoaded', () => {
            const columns = document.querySelectorAll('.testimonial-column');
            const testimonials = document.querySelectorAll('.testimonial-card');
            
            function distributeTestimonials() {
                const numColumns = window.innerWidth > 1024 ? 3 : (window.innerWidth > 768 ? 2 : 1);
                
                // Clear columns
                columns.forEach(col => col.innerHTML = '');

                // Hide unused columns
                columns.forEach((col, i) => {
                    col.style.display = i < numColumns ? 'flex' : 'none';
                });
                
                // Distribute cards
                testimonials.forEach((card, i) => {
                    columns[i % numColumns].appendChild(card);
                });
            }

            // Initial distribution
            distributeTestimonials();

            // Re-distribute on window resize
            window.addEventListener('resize', distributeTestimonials);
        });
    </script>
    
    <script>
        const images = document.querySelectorAll('.carousel img');
        let currentIndex = 0;

        function updatePositions() {
            images.forEach((img, i) => {
                img.className = ''; // 清空所有class
                img.style.zIndex = images.length - ((i - currentIndex + images.length) % images.length);

                if (i === currentIndex) {
                    img.classList.add('pos0');
                } else if (i === (currentIndex + 1) % images.length) {
                    img.classList.add('pos1');
                } else {
                    img.classList.add('pos2');
                }
            });
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % images.length;
            updatePositions();
        }

        setInterval(nextSlide, 3000); // 3秒切换一次
        updatePositions();
    </script>

    <style>
        .contact-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 60px 20px;
            background: rgb(13, 13, 13);
            margin-top: 20px;
        }

        .contact-title {
            font-size: 32px;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 40px;
            text-align: center;
        }

        .contact-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            max-width: 800px;
            width: 100%;
            gap: 50px;
        }

        .contact-info {
            margin-bottom: 20px;
        }

        .contact-info h3 {
            font-size: 24px;
            color: #ffffff;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .contact-info p {
            font-size: 16px;
            color: #cccccc;
            margin-bottom: 8px;
            line-height: 1.6;
        }

        .contact-info a {
            color: #66b3ff;
            text-decoration: none;
            font-size: 16px;
        }

        .contact-info a:hover {
            text-decoration: underline;
        }

        .qr-codes {
            display: flex;
            gap: 40px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .qr-item {
            text-align: center;
        }

        .qr-item img {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .qr-item p {
            font-size: 14px;
            color: #cccccc;
            margin: 0;
        }

        @media (max-width: 768px) {
            .contact-section {
                padding: 40px 20px;
            }

            .contact-title {
                font-size: 28px;
                margin-bottom: 30px;
            }

            .contact-content {
                gap: 40px;
            }

            .qr-codes {
                flex-direction: column;
                align-items: center;
                gap: 30px;
            }
        }
    </style>

</body>
</html>
