feat: add ShopRenter integration marketing page #38

Created a comprehensive SEO-friendly landing page for ShopRenter integration with:
- Semantic HTML structure with SEO meta tags
- OpenGraph tags for social media sharing
- Detailed feature showcase with icons
- 4-step integration guide
- Benefits section highlighting key advantages
- Data synchronization overview (products, orders, customers)
- Mobile-responsive design following current theme
- Call-to-action buttons for signup and store connection
- Follows existing design patterns from About and LandingPage

Route: /integrations/shoprenter

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/App.tsx

@@ -20,6 +20,7 @@ import Privacy from "./pages/Privacy";
 import Terms from "./pages/Terms";
 import Contact from "./pages/Contact";
 import NotFound from "./pages/NotFound";
+import ShopRenterIntegration from "./pages/ShopRenterIntegration";
 import { AuthProvider } from "./components/context/AuthContext";
 import PrivateRoute from "./components/PrivateRoute";
 
@@ -49,6 +50,7 @@ const App = () => (
             <Route path="/about" element={<About />} />
             <Route path="/privacy" element={<Privacy />} />
             <Route path="/terms" element={<Terms />} />
+            <Route path="/integrations/shoprenter" element={<ShopRenterIntegration />} />
             {/*<Route path="/contact" element={<Contact />} />*/}
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />

shopcall.ai-main/src/pages/ShopRenterIntegration.tsx

@@ -0,0 +1,474 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Store,
+  Zap,
+  Shield,
+  Clock,
+  RefreshCw,
+  Phone,
+  BarChart3,
+  CheckCircle,
+  ShoppingCart,
+  Users,
+  Package,
+  ArrowRight,
+  Globe,
+  Smartphone
+} from "lucide-react";
+import { useEffect } from "react";
+
+const ShopRenterIntegration = () => {
+  // SEO Meta Tags
+  useEffect(() => {
+    document.title = "ShopRenter Integration - AI-Powered Phone Support | ShopCall.ai";
+
+    // Meta description
+    const metaDescription = document.querySelector('meta[name="description"]');
+    if (metaDescription) {
+      metaDescription.setAttribute("content", "Seamlessly integrate ShopCall.ai with your ShopRenter store. AI-powered phone support with automatic product sync, order management, and 24/7 multilingual customer service.");
+    } else {
+      const meta = document.createElement('meta');
+      meta.name = "description";
+      meta.content = "Seamlessly integrate ShopCall.ai with your ShopRenter store. AI-powered phone support with automatic product sync, order management, and 24/7 multilingual customer service.";
+      document.head.appendChild(meta);
+    }
+
+    // Open Graph tags
+    const ogTitle = document.querySelector('meta[property="og:title"]');
+    if (ogTitle) {
+      ogTitle.setAttribute("content", "ShopRenter Integration - AI Phone Support | ShopCall.ai");
+    } else {
+      const meta = document.createElement('meta');
+      meta.setAttribute("property", "og:title");
+      meta.content = "ShopRenter Integration - AI Phone Support | ShopCall.ai";
+      document.head.appendChild(meta);
+    }
+
+    const ogDescription = document.querySelector('meta[property="og:description"]');
+    if (ogDescription) {
+      ogDescription.setAttribute("content", "Transform your ShopRenter store with AI-powered phone support. Automatic sync, multilingual support, and 24/7 availability.");
+    } else {
+      const meta = document.createElement('meta');
+      meta.setAttribute("property", "og:description");
+      meta.content = "Transform your ShopRenter store with AI-powered phone support. Automatic sync, multilingual support, and 24/7 availability.";
+      document.head.appendChild(meta);
+    }
+  }, []);
+
+  const features = [
+    {
+      icon: RefreshCw,
+      title: "Automatic Data Synchronization",
+      description: "Real-time sync of products, orders, and customer data. Your AI assistant always has the latest information from your ShopRenter store."
+    },
+    {
+      icon: Phone,
+      title: "Intelligent Call Handling",
+      description: "AI agents that understand your products, can check order status, answer questions about inventory, and provide personalized customer support."
+    },
+    {
+      icon: Globe,
+      title: "Multilingual Support",
+      description: "Serve Hungarian and international customers in 50+ languages. Our AI understands cultural nuances and local preferences."
+    },
+    {
+      icon: Clock,
+      title: "24/7 Availability",
+      description: "Never miss a customer call. Your AI assistant works around the clock, handling inquiries even during holidays and weekends."
+    },
+    {
+      icon: ShoppingCart,
+      title: "Order Management",
+      description: "Check order status, track shipments, and answer delivery questions instantly by accessing your ShopRenter order data."
+    },
+    {
+      icon: Shield,
+      title: "Secure OAuth Integration",
+      description: "Bank-level security with OAuth 2.0 authentication. Your store credentials are encrypted and protected."
+    }
+  ];
+
+  const benefits = [
+    {
+      icon: Zap,
+      title: "5-Minute Setup",
+      description: "Connect your ShopRenter store in just a few clicks. No technical knowledge required."
+    },
+    {
+      icon: Users,
+      title: "Better Customer Experience",
+      description: "Instant responses, accurate information, and personalized service that your customers will love."
+    },
+    {
+      icon: BarChart3,
+      title: "Powerful Analytics",
+      description: "Track call patterns, customer questions, and identify opportunities to improve your store."
+    },
+    {
+      icon: Package,
+      title: "Product Knowledge",
+      description: "AI agents that know your entire catalog - descriptions, prices, stock levels, and specifications."
+    }
+  ];
+
+  const integrationSteps = [
+    {
+      number: "1",
+      title: "Connect Your Store",
+      description: "Click the 'Connect ShopRenter' button and authorize ShopCall.ai to access your store data."
+    },
+    {
+      number: "2",
+      title: "Automatic Data Sync",
+      description: "We'll automatically sync your products, orders, and customer information in the background."
+    },
+    {
+      number: "3",
+      title: "Configure AI Assistant",
+      description: "Customize your AI's personality, language preferences, and business rules."
+    },
+    {
+      number: "4",
+      title: "Go Live",
+      description: "Activate your phone number and start receiving AI-powered customer calls immediately."
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-slate-900 text-white">
+      {/* Header */}
+      <header className="border-b border-slate-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center gap-3">
+              <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai Logo" className="w-8 h-8" />
+              <span className="text-xl font-bold text-white">ShopCall.ai</span>
+            </div>
+            <div className="flex items-center gap-4">
+              <Button variant="ghost" className="text-slate-300 hover:text-white hover:bg-slate-800" asChild>
+                <a href="/">Home</a>
+              </Button>
+              <Button variant="outline" className="border-slate-600 text-slate-300 hover:bg-slate-800" asChild>
+                <a href="/login">Login</a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="py-20 bg-gradient-to-b from-slate-800/50 to-slate-900">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <Badge className="mb-6 bg-[#52b3d0]/20 text-[#52b3d0] border-[#52b3d0]/30 text-lg px-4 py-2">
+            <Store className="mr-2 h-5 w-5" />
+            ShopRenter Integration
+          </Badge>
+
+          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
+            AI Phone Support for Your
+            <span className="text-[#52b3d0] block mt-2">ShopRenter Store</span>
+          </h1>
+
+          <p className="text-xl md:text-2xl text-slate-300 mb-8 max-w-3xl mx-auto leading-relaxed">
+            Connect your ShopRenter e-commerce platform and let AI handle customer calls with
+            real-time access to your products, orders, and inventory.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
+            <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-8 py-6 text-lg" asChild>
+              <a href="/signup">
+                Start Free Trial
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-8 py-6 text-lg" asChild>
+              <a href="/login">
+                Connect Your Store
+                <Store className="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+          </div>
+
+          {/* Trust Indicators */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12 max-w-3xl mx-auto">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-[#52b3d0] mb-1">5min</div>
+              <div className="text-sm text-slate-400">Setup Time</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-[#52b3d0] mb-1">24/7</div>
+              <div className="text-sm text-slate-400">Availability</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-[#52b3d0] mb-1">50+</div>
+              <div className="text-sm text-slate-400">Languages</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-[#52b3d0] mb-1">100%</div>
+              <div className="text-sm text-slate-400">Secure</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-slate-800/30">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">Powerful ShopRenter Integration Features</h2>
+            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+              Everything you need to provide world-class phone support for your ShopRenter customers
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => (
+              <Card key={index} className="bg-slate-700/50 border-slate-600 hover:bg-slate-700/70 transition-all hover:scale-105">
+                <CardHeader>
+                  <div className="w-14 h-14 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-4">
+                    <feature.icon className="h-7 w-7 text-[#52b3d0]" />
+                  </div>
+                  <CardTitle className="text-white text-xl">{feature.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-slate-300 text-base">
+                    {feature.description}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-20">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">Connect in 4 Simple Steps</h2>
+            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+              Get your AI phone assistant up and running in minutes
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-4 gap-8">
+            {integrationSteps.map((step, index) => (
+              <div key={index} className="relative">
+                <div className="flex flex-col items-center text-center">
+                  <div className="w-16 h-16 bg-[#52b3d0] rounded-full flex items-center justify-center mb-4 text-2xl font-bold">
+                    {step.number}
+                  </div>
+                  <h3 className="text-xl font-semibold mb-3 text-white">{step.title}</h3>
+                  <p className="text-slate-300">{step.description}</p>
+                </div>
+                {index < integrationSteps.length - 1 && (
+                  <div className="hidden md:block absolute top-8 left-[60%] w-[80%] h-0.5 bg-slate-700">
+                    <ArrowRight className="absolute right-0 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-700" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="py-20 bg-slate-800/30">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">Why ShopRenter Stores Love ShopCall.ai</h2>
+            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+              Built specifically for e-commerce success
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {benefits.map((benefit, index) => (
+              <Card key={index} className="bg-slate-700/50 border-slate-600 text-center hover:bg-slate-700/70 transition-all">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-4 mx-auto">
+                    <benefit.icon className="h-6 w-6 text-[#52b3d0]" />
+                  </div>
+                  <CardTitle className="text-white text-lg">{benefit.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-slate-300">{benefit.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What Gets Synced Section */}
+      <section className="py-20">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold mb-4">Automatic Data Synchronization</h2>
+            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+              Your AI assistant has real-time access to all your store information
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            <Card className="bg-slate-800 border-slate-700">
+              <CardHeader>
+                <div className="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4">
+                  <Package className="h-6 w-6 text-green-400" />
+                </div>
+                <CardTitle className="text-white">Products</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2 text-slate-300">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-green-400" />
+                    Names & Descriptions
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-green-400" />
+                    Prices & SKUs
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-green-400" />
+                    Stock Levels
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-green-400" />
+                    Categories & Variants
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-slate-800 border-slate-700">
+              <CardHeader>
+                <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
+                  <ShoppingCart className="h-6 w-6 text-blue-400" />
+                </div>
+                <CardTitle className="text-white">Orders</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2 text-slate-300">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-blue-400" />
+                    Order Status
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-blue-400" />
+                    Tracking Numbers
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-blue-400" />
+                    Order History
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-blue-400" />
+                    Delivery Information
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-slate-800 border-slate-700">
+              <CardHeader>
+                <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
+                  <Users className="h-6 w-6 text-purple-400" />
+                </div>
+                <CardTitle className="text-white">Customers</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2 text-slate-300">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-purple-400" />
+                    Contact Information
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-purple-400" />
+                    Order History
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-purple-400" />
+                    Addresses
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-purple-400" />
+                    Preferences
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-gradient-to-b from-slate-900 to-slate-800">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-4xl font-bold mb-6">Ready to Transform Your ShopRenter Store?</h2>
+          <p className="text-xl text-slate-300 mb-8">
+            Join hundreds of ShopRenter merchants providing world-class phone support with AI
+          </p>
+
+          <div className="bg-slate-700/50 rounded-2xl p-8 border border-slate-600 mb-8">
+            <div className="grid md:grid-cols-3 gap-6 mb-8">
+              <div className="flex items-center justify-center gap-3">
+                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
+                <span className="text-slate-300">14-Day Free Trial</span>
+              </div>
+              <div className="flex items-center justify-center gap-3">
+                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
+                <span className="text-slate-300">No Credit Card Required</span>
+              </div>
+              <div className="flex items-center justify-center gap-3">
+                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
+                <span className="text-slate-300">5-Minute Setup</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-12 py-6 text-lg" asChild>
+                <a href="/signup">
+                  Start Free Trial
+                  <Zap className="ml-2 h-5 w-5" />
+                </a>
+              </Button>
+              <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-12 py-6 text-lg" asChild>
+                <a href="/login">
+                  Connect ShopRenter Store
+                  <Store className="ml-2 h-5 w-5" />
+                </a>
+              </Button>
+            </div>
+          </div>
+
+          <p className="text-slate-400 text-sm">
+            Already have an account? <a href="/login" className="text-[#52b3d0] hover:underline">Sign in</a> to connect your store
+          </p>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-slate-900 border-t border-slate-800 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="flex items-center justify-center gap-3 mb-4">
+            <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai Logo" className="w-8 h-8" />
+            <span className="text-xl font-bold text-white">ShopCall.ai</span>
+          </div>
+          <div className="flex justify-center items-center gap-4 text-sm text-slate-500 flex-wrap">
+            <span>© 2024 ShopCall.ai. All rights reserved.</span>
+            <span className="hidden sm:inline">•</span>
+            <a href="/about" className="hover:text-slate-300">About Us</a>
+            <span>•</span>
+            <a href="/privacy" className="hover:text-slate-300">Privacy Policy</a>
+            <span>•</span>
+            <a href="/terms" className="hover:text-slate-300">Terms</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default ShopRenterIntegration;