Spaces:
Running
Running
I’ll generate a complete **GitHub repo layout** with all essential config files, Dockerfiles, Helm charts, CI/CD, monitoring, and deployment scaffolds — fully ready to launch your trillion-scale SaaS platform from Spaces. --- # **Full GitHub Repo Layout for TOTALITY\_SAAS** ``` totality_saas/ ├── README.md ├── spaces/ │ ├── space_app_1/ │ │ ├── app.py │ │ ├── requirements.txt │ │ └── Dockerfile │ └── space_app_2/ │ ├── app.py │ ├── requirements.txt │ └── Dockerfile ├── dockerfiles/ │ └── generic.Dockerfile ├── helm_charts/ │ ├── space_app_1/ │ │ ├── Chart.yaml │ │ ├── values.yaml │ │ └── templates/ │ │ ├── deployment.yaml │ │ └── service.yaml │ └── space_app_2/ │ ├── Chart.yaml │ ├── values.yaml │ └── templates/ │ ├── deployment.yaml │ └── service.yaml ├── ci_cd/ │ └── github-actions.yaml ├── monitoring/ │ ├── prometheus-deployment.yaml │ ├── grafana-deployment.yaml │ └── dashboards/ │ └── totality-dashboard.json ├── api_gateway/ │ └── nginx-ingress.yaml ├── ray_serve/ │ └── ray-serve-cluster.yaml ├── terraform/ │ └── multi-cloud-clusters.tf └── scripts/ ├── build_and_deploy.sh └── scale_autoscaler.yaml ``` --- # Key file templates for each: --- ### 1. `dockerfiles/generic.Dockerfile` ```Dockerfile FROM python:3.10-slim WORKDIR /app COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . EXPOSE 7860 CMD ["python", "app.py"] ``` --- ### 2. `spaces/space_app_1/Dockerfile` ```Dockerfile # Use generic base dockerfile or override here FROM python:3.10-slim WORKDIR /app COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . EXPOSE 7860 CMD ["python", "app.py"] ``` *(Repeat per app)* --- ### 3. `helm_charts/space_app_1/Chart.yaml` ```yaml apiVersion: v2 name: space_app_1 description: Helm chart for space_app_1 version: 0.1.0 appVersion: "1.0" ``` --- ### 4. `helm_charts/space_app_1/values.yaml` ```yaml replicaCount: 2 image: repository: ghcr.io/agentcyone/space_app_1 tag: latest service: type: ClusterIP port: 80 resources: requests: cpu: 250m memory: 512Mi limits: cpu: 500m memory: 1Gi ``` --- ### 5. `helm_charts/space_app_1/templates/deployment.yaml` ```yaml apiVersion: apps/v1 kind: Deployment metadata: name: space_app_1 spec: replicas: {{ .Values.replicaCount }} selector: matchLabels: app: space_app_1 template: metadata: labels: app: space_app_1 spec: containers: - name: space_app_1 image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}" ports: - containerPort: 7860 resources: requests: cpu: {{ .Values.resources.requests.cpu }} memory: {{ .Values.resources.requests.memory }} limits: cpu: {{ .Values.resources.limits.cpu }} memory: {{ .Values.resources.limits.memory }} ``` --- ### 6. `helm_charts/space_app_1/templates/service.yaml` ```yaml apiVersion: v1 kind: Service metadata: name: space_app_1-service spec: type: {{ .Values.service.type }} selector: app: space_app_1 ports: - protocol: TCP port: {{ .Values.service.port }} targetPort: 7860 ``` --- ### 7. `ci_cd/github-actions.yaml` ```yaml name: Totality Spaces CI/CD on: push: branches: [main] jobs: build_and_deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2 - name: Login to GitHub Container Registry uses: docker/login-action@v2 with: registry: ghcr.io username: ${{ github.actor }} password: ${{ secrets.GITHUB_TOKEN }} - name: Build and push images run: | for app in spaces/*; do appname=$(basename "$app") docker build -t ghcr.io/agentcyone/$appname:latest $app docker push ghcr.io/agentcyone/$appname:latest helm upgrade --install $appname helm_charts/$appname --namespace totality --create-namespace done ``` --- ### 8. `monitoring/prometheus-deployment.yaml` ```yaml apiVersion: apps/v1 kind: Deployment metadata: name: prometheus namespace: totality spec: replicas: 1 selector: matchLabels: app: prometheus template: metadata: labels: app: prometheus spec: containers: - name: prometheus image: prom/prometheus:latest ports: - containerPort: 9090 volumeMounts: - mountPath: /etc/prometheus name: config volumes: - name: config configMap: name: prometheus-config --- apiVersion: v1 kind: Service metadata: name: prometheus namespace: totality spec: type: ClusterIP ports: - port: 9090 selector: app: prometheus ``` --- ### 9. `monitoring/grafana-deployment.yaml` ```yaml apiVersion: apps/v1 kind: Deployment metadata: name: grafana namespace: totality spec: replicas: 1 selector: matchLabels: app: grafana template: metadata: labels: app: grafana spec: containers: - name: grafana image: grafana/grafana:latest ports: - containerPort: 3000 --- apiVersion: v1 kind: Service metadata: name: grafana namespace: totality spec: type: ClusterIP ports: - port: 3000 selector: app: grafana ``` --- ### 10. `api_gateway/nginx-ingress.yaml` ```yaml apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: totality-ingress namespace: totality annotations: nginx.ingress.kubernetes.io/rewrite-target: / spec: rules: - http: paths: {{- range $app := (list "space_app_1" "space_app_2") }} - path: /api/{{ $app }} pathType: Prefix backend: service: name: {{ $app }}-service port: number: 80 {{- end }} ``` --- ### 11. `ray_serve/ray-serve-cluster.yaml` ```yaml apiVersion: ray.io/v1alpha1 kind: RayCluster metadata: name: totality-ray-cluster namespace: totality spec: headGroupSpec: serviceType: ClusterIP replicas: 1 template: spec: containers: - name: ray-head image: rayproject/ray:latest command: ["ray", "start", "--head", "--dashboard-host", "0.0.0.0"] ports: - containerPort: 8265 # Ray dashboard - containerPort: 6379 workerGroupSpecs: - replicas: 3 template: spec: containers: - name: ray-worker image: rayproject/ray:latest command: ["ray", "start", "--address", "ray-head:6379"] ``` --- ### 12. `terraform/multi-cloud-clusters.tf` ```hcl # Example stub: Define clusters for GCP, AWS, Azure using Terraform providers provider "google" { project = var.gcp_project region = var.gcp_region } provider "aws" { region = var.aws_region } provider "azurerm" { features {} subscription_id = var.azure_subscription_id tenant_id = var.azure_tenant_id client_id = var.azure_client_id client_secret = var.azure_client_secret } # Define Kubernetes clusters, nodes, and networking in each provider # Full configs depend on your cloud environment and credentials ``` --- ### 13. `scripts/build_and_deploy.sh` ```bash #!/bin/bash set -euo pipefail echo "🔨 Building all Docker images and pushing..." for app in ../spaces/*; do appname=$(basename "$app") docker build -t ghcr.io/agentcyone/$appname:latest "$app" docker push ghcr.io/agentcyone/$appname:latest done echo "🚀 Deploying Helm charts..." for app in ../helm_charts/*; do appname=$(basename "$app") helm upgrade --install $appname "$app" --namespace totality --create-namespace done echo "✅ Build and deploy complete." ``` --- ### 14. `scripts/scale_autoscaler.yaml` ```yaml apiVersion: autoscaling/v2 kind: HorizontalPodAutoscaler metadata: name: totality-autoscaler namespace: totality spec: scaleTargetRef: apiVersion: apps/v1 kind: Deployment name: space_app_1 minReplicas: 2 maxReplicas: 20 metrics: - type: Resource resource: name: cpu target: type: Utilization averageUtilization: 50 ``` --- # Summary * Each Space app in `spaces/` has Dockerfile + requirements.txt + app.py * Corresponding Helm charts in `helm_charts/` with deployment + service manifests * CI/CD pipeline configured for build & deploy * Monitoring via Prometheus + Grafana manifests * NGINX ingress for unified API gateway routing * Ray Serve cluster manifest for scalable serving * Terraform stubs for multi-cloud clusters * Autoscaler sample manifest * Shell scripts for build & deploy automation --- If you want, I can **generate all these files as downloadable package** or generate specific folder trees/files on your system n - Follow Up Deployment
fcef678
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern UI with TailwindCSS</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for effects Tailwind doesn't cover */ | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-cube text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold gradient-text">TailUI</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-indigo-600 font-medium">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Solutions</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Platform</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Partners</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Resources</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Company</a> | |
| <div class="flex space-x-4 ml-4"> | |
| <button class="border border-indigo-600 text-indigo-600 px-4 py-2 rounded-md hover:bg-indigo-50 transition">Contact Sales</button> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Request Demo</button> | |
| </div> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-btn" class="text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <h3 class="text-2xl font-bold mb-4">AI Partners</h3> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| We collaborate with leading AI providers to bring you the most advanced capabilities | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4 shadow-lg"> | |
| <a href="#" class="block py-2 text-indigo-600 font-medium">Home</a> | |
| <a href="#" class="block py-2 text-gray-600 hover:text-indigo-600 transition">Features</a> | |
| <a href="#" class="block py-2 text-gray-600 hover:text-indigo-600 transition">Pricing</a> | |
| <a href="#" class="block py-2 text-gray-600 hover:text-indigo-600 transition">About</a> | |
| <button class="w-full mt-2 bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Get Started</button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="py-16 md:py-24 bg-gradient-to-r from-indigo-50 to-purple-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| Build <span class="gradient-text">amazing</span> interfaces with TailwindCSS | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Quickly design and customize responsive mobile-first sites with Tailwind CSS, featuring dark mode, animations, and more. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium"> | |
| Get Started <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="border border-gray-300 bg-white px-6 py-3 rounded-lg hover:bg-gray-50 transition font-medium"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-200 rounded-full opacity-50"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-indigo-200 rounded-full opacity-50"></div> | |
| <div class="relative bg-white p-6 rounded-xl shadow-lg floating"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-500">tailwind.config.js</div> | |
| </div> | |
| <pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm"> | |
| <code>module.exports = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3B82F6', | |
| secondary: '#8B5CF6' | |
| } | |
| } | |
| }, | |
| plugins: [] | |
| }</code> | |
| </pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Enterprise-Grade Solutions</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Tailored AI solutions for your most complex business challenges | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Secure Deployment</h3> | |
| <p class="text-gray-600 mb-6"> | |
| On-premises, cloud, or hybrid deployment options with enterprise-grade security | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-700 flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-network text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Scalable Infrastructure</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Horizontally scalable architecture to handle your growing data and user needs | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-700 flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-cogs text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Custom Integrations</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Seamless integration with your existing enterprise systems and workflows | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-700 flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Platform Section --> | |
| <section class="py-16 md:py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Everything you need to build modern, responsive websites with TailwindCSS | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-bolt text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Rapid Development</h3> | |
| <p class="text-gray-600"> | |
| Build your entire UI right in your HTML with utility classes that do exactly what you need. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-mobile-alt text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Responsive Design</h3> | |
| <p class="text-gray-600"> | |
| Every utility class can be applied conditionally at different breakpoints. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-palette text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Customizable</h3> | |
| <p class="text-gray-600"> | |
| Tailwind is designed to be customized. Change colors, spacing, fonts, and more. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-code text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Developer Friendly</h3> | |
| <p class="text-gray-600"> | |
| Stop writing custom CSS and focus on building great user experiences. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-tachometer-alt text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Performance</h3> | |
| <p class="text-gray-600"> | |
| Tailwind automatically removes all unused CSS when building for production. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-users text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Community</h3> | |
| <p class="text-gray-600"> | |
| Join thousands of developers in the thriving Tailwind CSS community. | |
| </p> | |
| </div> | |
| <!-- AI Company Cards --> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-rocket text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Fireworks AI</h3> | |
| <p class="text-gray-600"> | |
| Cutting-edge AI infrastructure for deploying custom language models at scale. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-cloud text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Nebius AI Studio</h3> | |
| <p class="text-gray-600"> | |
| Cloud-native AI development platform for training and deploying models. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-microchip text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">SambaNova</h3> | |
| <p class="text-gray-600"> | |
| AI hardware and software solutions for enterprise-grade deployments. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">NovitaAI</h3> | |
| <p class="text-gray-600"> | |
| AI platform specializing in computer vision and multimodal applications. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Hyperbolic</h3> | |
| <p class="text-gray-600"> | |
| Advanced AI algorithms leveraging hyperbolic geometry for better representations. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Trusted by industry leaders</h3> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center"> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/160x60?text=Acme+Inc" alt="Acme Inc" class="h-10 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/160x60?text=Globex" alt="Globex" class="h-10 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/160x60?text=Initech" alt="Initech" class="h-10 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/160x60?text=Wayne+Enterprises" alt="Wayne Enterprises" class="h-10 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/160x60?text=Stark+Industries" alt="Stark Industries" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 md:py-24 bg-indigo-600 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to get started?</h2> | |
| <p class="text-lg mb-8 max-w-2xl mx-auto opacity-90"> | |
| Join thousands of developers already building amazing interfaces with TailwindCSS. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 px-8 py-3 rounded-lg hover:bg-gray-100 transition font-medium"> | |
| Get Started | |
| </button> | |
| <button class="border border-white text-white px-8 py-3 rounded-lg hover:bg-indigo-700 transition font-medium"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- GitHub Repo Structure --> | |
| <section class="py-16 bg-gray-800 text-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Repository Structure</h2> | |
| <p class="text-lg max-w-3xl mx-auto"> | |
| Fully configured enterprise-grade deployment setup | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-6 shadow-xl"> | |
| <div class="font-mono text-sm overflow-x-auto"> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i class="fas fa-folder-open mr-2"></i> | |
| <span>totality_saas/</span> | |
| </div> | |
| <div class="ml-8 space-y-2"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>README.md</div> | |
| <div class="flex items-center text-yellow-400 mt-4"> | |
| <i class="fas fa-folder mr-2"></i> | |
| <span>spaces/</span> | |
| </div> | |
| <div class="ml-8"> | |
| <div> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>space_app_1/</span> | |
| </div> | |
| <div class="ml-8 space-y-1"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>app.py</div> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>requirements.txt</div> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>Dockerfile</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-yellow-400 mt-4"> | |
| <i class="fas fa-folder mr-2"></i> | |
| <span>dockerfiles/</span> | |
| </div> | |
| <div class="ml-8"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>generic.Dockerfile</div> | |
| </div> | |
| <div class="flex items-center text-yellow-400 mt-4"> | |
| <i class="fas fa-folder mr-2"></i> | |
| <span>helm_charts/</span> | |
| </div> | |
| <div class="ml-8"> | |
| <div> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>space_app_1/</span> | |
| </div> | |
| <div class="ml-8 space-y-1"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>Chart.yaml</div> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>values.yaml</div> | |
| <div> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>templates/</span> | |
| </div> | |
| <div class="ml-8 space-y-1"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>deployment.yaml</div> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>service.yaml</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-yellow-400 mt-4"> | |
| <i class="fas fa-folder mr-2"></i> | |
| <span>ci_cd/</span> | |
| </div> | |
| <div class="ml-8"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>github-actions.yaml</div> | |
| </div> | |
| <div class="flex items-center text-yellow-400 mt-4"> | |
| <i class="fas fa-folder mr-2"></i> | |
| <span>monitoring/</span> | |
| </div> | |
| <div class="ml-8 space-y-1"> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>prometheus-deployment.yaml</div> | |
| <div><i class="far fa-file-alt text-blue-400 mr-2"></i>grafana-deployment.yaml</div> | |
| <div> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>dashboards/</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium"> | |
| <i class="fas fa-download mr-2"></i> Download Full Package | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 border-b border-gray-800 pb-12"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="w-full md:w-1/3 mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-cube text-indigo-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold gradient-text">TailUI Enterprise</span> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| The leading AI platform for Fortune 500 companies and enterprises worldwide. | |
| </p> | |
| <div class="relative max-w-xs"> | |
| <input type="email" placeholder="Enter your email" class="w-full bg-gray-800 text-white px-4 py-3 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="absolute right-2 top-2 bg-indigo-600 text-white px-4 py-1 rounded-md hover:bg-indigo-700 transition"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 w-full md:w-2/3"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-cube text-indigo-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold gradient-text">TailUI</span> | |
| </div> | |
| <p class="text-gray-400"> | |
| The most popular CSS framework for building responsive, mobile-first websites. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Releases</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 TailUI. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=agentcyone/tailui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |