0xmetaschool/
CustomerServiceGPT
CustomerSupportGPT is a developer template for building AI-powered chat support systems. It helps businesses provide instant, accurate, and personalized support to their customers 24/7. Whether it's answering FAQs, troubleshooting issues, or guiding customers through complex processes, CustomerSupportGPT is here to assist. Built with Next.js and styled with Tailwind CSS, this application offers a seamless user experience with real-time chat support.
Readme
Source Codeapp
api
auth
bot
chat
components
contexts
create-bot
dashboard
widget
globals.css
layout.tsx
page.tsx
lib
public
.env.local.example
.gitattributes
.gitignore
LICENSE
middleware.ts
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.ts
tsconfig.json
app
page.tsx
page.tsxpage.tsx
1'use client';
2
3import Link from 'next/link';
4import { Bot, Clock, Code, ArrowRight } from 'lucide-react';
5import Navbar from './components/Navbar';
6import Footer from './components/Footer';
7
8/**
9 * @dev Home component for the landing page of the application.
10 * @returns A React component that renders the landing page.
11 */
12export default function Home() {
13
14 // List of features to display on the landing page.
15 const features = [
16 {
17 icon: <Bot className="w-8 h-8 fill-black" />,
18 title: "One-Time Learning",
19 description: "Initial setup allows for comprehensive data input, creating a knowledge base tailored to your business.",
20 },
21 {
22 icon: <Clock className="w-8 h-8 fill-black" />,
23 title: "24/7 Availability",
24 description: "Provide instant support to your customers around the clock with our AI assistant.",
25 },
26 {
27 icon: <Code className="w-8 h-8 fill-black" />,
28 title: "Seamless Integration",
29 description: "Easy to integrate with any website using our simple embed code.",
30 },
31 ];
32
33 return (
34 <>
35 <Navbar />
36 <div className="min-h-[calc(100vh-64px)] bg-white [color-scheme:light]">
37 {/* Hero Section */}
38 <section className="relative py-20 overflow-hidden [color-scheme:light]">
39 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
40 <div className="relative z-10 text-center">
41 <h1 className="text-5xl font-bold tracking-tight text-gray-900 sm:text-6xl [color-scheme:light]">
42 Elevate Your Customer Service
43 </h1>
44 <p className="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto [color-scheme:light]">
45 AI-powered assistant that learns and adapts to your business needs. Provide instant, accurate support to your customers 24/7.
46 </p>
47 <div className="mt-10 flex items-center justify-center gap-6">
48 <Link
49 href="/dashboard"
50 className="inline-flex items-center gap-2 px-6 py-3 text-sm font-medium text-white bg-black rounded-full hover:bg-gray-800 transition-colors [color-scheme:light]"
51 >
52 Get Started
53 <ArrowRight className="w-4 h-4" />
54 </Link>
55 </div>
56 </div>
57 </div>
58 <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
59 <div className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-gray-200 to-gray-400 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" />
60 </div>
61 </section>
62
63 {/* Features Section */}
64 <section className="py-24 bg-gray-50 [color-scheme:light]">
65 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66 <div className="text-center mb-16">
67 <h2 className="text-3xl font-bold tracking-tight text-gray-900 [color-scheme:light]">
68 Powerful Features
69 </h2>
70 <p className="mt-4 text-lg text-gray-600 [color-scheme:light]">
71 Everything you need to provide exceptional customer support
72 </p>
73 </div>
74
75 <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
76 {features.map((feature, index) => (
77 <div
78 key={index}
79 className="relative p-8 bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow [color-scheme:light]"
80 >
81 <div className="p-2 w-12 h-12 bg-gray-100 rounded-xl mb-6">
82 {feature.icon}
83 </div>
84 <h3 className="text-xl font-semibold text-gray-900 mb-3 [color-scheme:light]">
85 {feature.title}
86 </h3>
87 <p className="text-gray-600 [color-scheme:light]">
88 {feature.description}
89 </p>
90 </div>
91 ))}
92 </div>
93 </div>
94 </section>
95
96 {/* CTA Section */}
97 <section className="py-24 [color-scheme:light]">
98 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99 <div className="text-center">
100 <h2 className="text-3xl font-bold tracking-tight text-gray-900 [color-scheme:light]">
101 Ready to transform your customer support?
102 </h2>
103 <p className="mt-4 text-lg text-gray-600 [color-scheme:light]">
104 Get started with AI Chat today and see the difference.
105 </p>
106 <Link
107 href="/dashboard"
108 className="mt-8 inline-flex items-center gap-2 px-6 py-3 text-sm font-medium text-white bg-black rounded-full hover:bg-gray-800 transition-colors [color-scheme:light]"
109 >
110 Go to Dashboard
111 <ArrowRight className="w-4 h-4" />
112 </Link>
113 </div>
114 </div>
115 </section>
116 </div>
117 <Footer />
118 </>
119 );
120}Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4
Contributors 2
Open in
Last updated 3 months ago
We are a open source platform and encourage community to contribute to these templates!