mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 05:51:54 +02:00
draft theme
This commit is contained in:
Chaoming Li
parent
267dabd6d6
commit
2fa05575b2
11 changed files with 597 additions and 0 deletions
61
assets/css/main.css
Normal file
61
assets/css/main.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans text-gray-700 antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-heading font-bold text-gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-primary-600 text-white hover:bg-primary-700 hover:scale-105;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn bg-secondary-600 text-white hover:bg-secondary-700 hover:scale-105;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply btn border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
|
||||
}
|
||||
|
||||
.section {
|
||||
@apply py-16 md:py-24;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-subtle p-6 transition duration-200 hover:shadow-elevation;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@apply text-gray-600 hover:text-primary-600 font-medium transition duration-200;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
@apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-gradient {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-600;
|
||||
}
|
||||
}
|
||||
192
layouts/_default/baseof.html
Normal file
192
layouts/_default/baseof.html
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode | default "en" }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="{{ "favicon.png" | relURL }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Temporary Tailwind CDN for development -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
},
|
||||
secondary: {
|
||||
50: '#faf5ff',
|
||||
100: '#f3e8ff',
|
||||
200: '#e9d5ff',
|
||||
300: '#d8b4fe',
|
||||
400: '#c084fc',
|
||||
500: '#a855f7',
|
||||
600: '#9333ea',
|
||||
700: '#7e22ce',
|
||||
800: '#6b21a8',
|
||||
900: '#581c87',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
heading: ['Plus Jakarta Sans', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="fixed w-full top-0 z-50 bg-white/80 backdrop-blur-sm border-b border-gray-100">
|
||||
<div class="container">
|
||||
<nav class="flex items-center justify-between h-20">
|
||||
<!-- Logo -->
|
||||
<a href="{{ .Site.BaseURL }}" class="flex items-center">
|
||||
{{ with .Site.Params.logo }}
|
||||
<img src="{{ . | relURL }}" alt="{{ $.Site.Title }}" class="h-8">
|
||||
{{ else }}
|
||||
<span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
{{ range .Site.Menus.main }}
|
||||
<a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600 font-medium transition duration-200">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="hidden md:flex items-center space-x-4">
|
||||
<a href="{{ .Site.Params.signInURL | default "#" }}" class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600">
|
||||
Sign in
|
||||
</a>
|
||||
<a href="{{ .Site.Params.getStartedURL | default "#" }}" class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button class="md:hidden p-2" id="mobile-menu-button" aria-label="Menu">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="py-4 space-y-4">
|
||||
{{ range .Site.Menus.main }}
|
||||
<a href="{{ .URL }}" class="block text-gray-600 hover:text-primary-600 font-medium transition duration-200 py-2">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
<div class="pt-4 space-y-4">
|
||||
<a href="{{ .Site.Params.signInURL | default "#" }}" class="block text-center inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600">
|
||||
Sign in
|
||||
</a>
|
||||
<a href="{{ .Site.Params.getStartedURL | default "#" }}" class="block text-center inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-grow pt-20">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-50 border-t border-gray-100">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-12 md:py-16">
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- Brand -->
|
||||
<div class="space-y-4">
|
||||
<a href="{{ .Site.BaseURL }}" class="inline-block">
|
||||
{{ with .Site.Params.logo }}
|
||||
<img src="{{ . | relURL }}" alt="{{ $.Site.Title }}" class="h-8">
|
||||
{{ else }}
|
||||
<span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
<p class="text-gray-600">{{ .Site.Params.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">Product</h3>
|
||||
<ul class="space-y-3">
|
||||
{{ range .Site.Menus.footer_product }}
|
||||
<li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">Company</h3>
|
||||
<ul class="space-y-3">
|
||||
{{ range .Site.Menus.footer_company }}
|
||||
<li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">Stay Updated</h3>
|
||||
<form class="space-y-4">
|
||||
<div>
|
||||
<label for="email" class="sr-only">Email address</label>
|
||||
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Enter your email">
|
||||
</div>
|
||||
<button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom -->
|
||||
<div class="mt-12 pt-8 border-t border-gray-200">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||||
<p class="text-gray-600 text-sm">
|
||||
© {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved.
|
||||
</p>
|
||||
<div class="flex space-x-6">
|
||||
{{ range .Site.Menus.footer_legal }}
|
||||
<a href="{{ .URL }}" class="text-sm text-gray-600 hover:text-primary-600">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Mobile Menu Script -->
|
||||
<script>
|
||||
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
147
layouts/index.html
Normal file
147
layouts/index.html
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
{{ define "main" }}
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container pt-16 pb-20 md:pt-24 md:pb-28">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
|
||||
Unlock the Hidden Revenue in Your User Journeys
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600">
|
||||
Transform your user experience with powerful analytics and insights that drive growth and engagement.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#" class="btn-primary text-center">
|
||||
Get Started Free
|
||||
</a>
|
||||
<a href="#" class="btn-outline text-center">
|
||||
Schedule Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="relative z-10">
|
||||
<img src="{{ "images/hero-dashboard.png" | relURL }}" alt="Analytics Dashboard" class="rounded-xl shadow-elevation">
|
||||
</div>
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute -top-20 -right-20 w-64 h-64 bg-primary-100 rounded-full filter blur-3xl opacity-50"></div>
|
||||
<div class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-100 rounded-full filter blur-3xl opacity-50"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Client Logos -->
|
||||
<section class="border-y border-gray-100">
|
||||
<div class="container py-12">
|
||||
<p class="text-center text-sm font-medium text-gray-600 mb-8">Trusted by leading companies worldwide</p>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center justify-items-center opacity-70">
|
||||
{{ range $i := (seq 6) }}
|
||||
<img src="{{ (printf "images/client-logo-%d.png" $i) | relURL }}" alt="Client Logo" class="h-8">
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature Sections -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Powerful Features for Modern Teams</h2>
|
||||
<p class="text-xl text-gray-600">Discover how our platform helps you understand and optimize every aspect of your user experience.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Grid -->
|
||||
<div class="space-y-24">
|
||||
<!-- Feature 1 -->
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="space-y-6">
|
||||
<div class="inline-block px-4 py-2 rounded-full bg-primary-100 text-primary-700 font-medium">User Analytics</div>
|
||||
<h3 class="text-2xl md:text-3xl font-bold">Deep Insights into User Behavior</h3>
|
||||
<p class="text-lg text-gray-600">Track and analyze user interactions in real-time. Understand how users navigate your product and identify opportunities for improvement.</p>
|
||||
<ul class="space-y-4">
|
||||
{{ range (slice "Real-time user tracking" "Behavioral analytics" "Custom event tracking" "User flow visualization") }}
|
||||
<li class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<a href="#" class="btn-primary inline-block">Learn More</a>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<img src="{{ "images/feature-analytics.png" | relURL }}" alt="Analytics Feature" class="rounded-xl shadow-elevation">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="relative order-2 lg:order-1">
|
||||
<img src="{{ "images/feature-session.png" | relURL }}" alt="Session Replay Feature" class="rounded-xl shadow-elevation">
|
||||
</div>
|
||||
<div class="space-y-6 order-1 lg:order-2">
|
||||
<div class="inline-block px-4 py-2 rounded-full bg-secondary-100 text-secondary-700 font-medium">Session Replay</div>
|
||||
<h3 class="text-2xl md:text-3xl font-bold">Watch Real User Sessions</h3>
|
||||
<p class="text-lg text-gray-600">Understand exactly how users interact with your product through high-fidelity session recordings and heatmaps.</p>
|
||||
<ul class="space-y-4">
|
||||
{{ range (slice "Full session recordings" "Click and scroll heatmaps" "Error tracking" "User journey analysis") }}
|
||||
<li class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<a href="#" class="btn-secondary inline-block">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="section bg-gray-50">
|
||||
<div class="container">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Loved by Teams Worldwide</h2>
|
||||
<p class="text-xl text-gray-600">See what our customers have to say about their experience with our platform.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{{ range $i := (seq 3) }}
|
||||
<div class="card">
|
||||
<div class="flex items-center space-x-4 mb-6">
|
||||
<img src="{{ (printf "images/testimonial-%d.jpg" $i) | relURL }}" alt="Testimonial" class="w-12 h-12 rounded-full">
|
||||
<div>
|
||||
<h4 class="font-bold">John Smith</h4>
|
||||
<p class="text-gray-600">Product Manager at Company</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600">"This platform has transformed how we understand our users. The insights we've gained have been invaluable for our product development."</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section bg-primary-600">
|
||||
<div class="container">
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your User Experience?</h2>
|
||||
<p class="text-xl text-primary-100 mb-8">Join thousands of companies already using our platform to drive growth.</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<a href="#" class="btn bg-white text-primary-600 hover:bg-gray-100">
|
||||
Get Started Free
|
||||
</a>
|
||||
<a href="#" class="btn border-2 border-white text-white hover:bg-primary-700">
|
||||
Schedule Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
24
package.json
Normal file
24
package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "hugo-sassify-theme",
|
||||
"version": "1.0.0",
|
||||
"description": "A modern Hugo theme for SaaS websites",
|
||||
"scripts": {
|
||||
"dev": "npx tailwindcss -i ./assets/css/main.css -o ./assets/css/style.css --watch",
|
||||
"build": "npx tailwindcss -i ./assets/css/main.css -o ./assets/css/style.css --minify"
|
||||
},
|
||||
"keywords": [
|
||||
"hugo",
|
||||
"theme",
|
||||
"saas",
|
||||
"tailwind"
|
||||
],
|
||||
"author": "Chaoming Li",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.31",
|
||||
"tailwindcss": "^3.3.5"
|
||||
}
|
||||
}
|
||||
4
static/images/client-logo-1.svg
Normal file
4
static/images/client-logo-1.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="160" height="40" viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="20" y="10" width="120" height="20" rx="4" fill="#6b7280"/>
|
||||
<text x="80" y="25" font-family="Arial" font-size="14" fill="white" text-anchor="middle">Client One</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 272 B |
28
static/images/feature-analytics.svg
Normal file
28
static/images/feature-analytics.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="600" height="400" fill="#f3f4f6"/>
|
||||
<rect x="20" y="20" width="560" height="360" rx="8" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
|
||||
|
||||
<!-- Header -->
|
||||
<rect x="40" y="40" width="200" height="24" rx="4" fill="#e5e7eb"/>
|
||||
<rect x="40" y="72" width="160" height="16" rx="4" fill="#f3f4f6"/>
|
||||
|
||||
<!-- Analytics Graph -->
|
||||
<rect x="40" y="120" width="520" height="220" rx="4" fill="#f9fafb"/>
|
||||
|
||||
<!-- Graph Lines -->
|
||||
<path d="M60 300 C 140 200, 220 280, 300 180 S 460 220, 540 120"
|
||||
stroke="#60a5fa" stroke-width="3" fill="none"/>
|
||||
<path d="M60 320 C 140 280, 220 300, 300 240 S 460 260, 540 200"
|
||||
stroke="#818cf8" stroke-width="3" fill="none" opacity="0.6"/>
|
||||
|
||||
<!-- Data Points -->
|
||||
<circle cx="140" cy="200" r="6" fill="#60a5fa"/>
|
||||
<circle cx="220" cy="280" r="6" fill="#60a5fa"/>
|
||||
<circle cx="300" cy="180" r="6" fill="#60a5fa"/>
|
||||
<circle cx="380" cy="220" r="6" fill="#60a5fa"/>
|
||||
<circle cx="460" cy="220" r="6" fill="#60a5fa"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="40" y="360" width="80" height="8" rx="4" fill="#60a5fa"/>
|
||||
<rect x="140" y="360" width="80" height="8" rx="4" fill="#818cf8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
35
static/images/feature-session.svg
Normal file
35
static/images/feature-session.svg
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="600" height="400" fill="#f3f4f6"/>
|
||||
<rect x="20" y="20" width="560" height="360" rx="8" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
|
||||
|
||||
<!-- Session Player Header -->
|
||||
<rect x="40" y="40" width="520" height="40" rx="4" fill="#f9fafb"/>
|
||||
<circle cx="70" cy="60" r="12" fill="#a855f7"/>
|
||||
<rect x="100" y="50" width="120" height="20" rx="4" fill="#e5e7eb"/>
|
||||
<circle cx="500" cy="60" r="12" fill="#ef4444"/>
|
||||
|
||||
<!-- Timeline -->
|
||||
<rect x="40" y="100" width="520" height="20" rx="4" fill="#f9fafb"/>
|
||||
<rect x="40" y="100" width="200" height="20" rx="4" fill="#a855f7" opacity="0.3"/>
|
||||
<circle cx="240" cy="110" r="8" fill="#a855f7"/>
|
||||
|
||||
<!-- Session Content -->
|
||||
<rect x="40" y="140" width="520" height="220" rx="4" fill="#f9fafb"/>
|
||||
|
||||
<!-- Mouse Movement Path -->
|
||||
<path d="M100 200 C 200 180, 300 280, 400 200 S 500 220, 520 180"
|
||||
stroke="#a855f7" stroke-width="2" stroke-dasharray="4 4" fill="none"/>
|
||||
|
||||
<!-- Click Points -->
|
||||
<circle cx="200" cy="180" r="8" fill="#a855f7" opacity="0.3"/>
|
||||
<circle cx="300" cy="280" r="8" fill="#a855f7" opacity="0.3"/>
|
||||
<circle cx="400" cy="200" r="8" fill="#a855f7" opacity="0.3"/>
|
||||
|
||||
<!-- Cursor -->
|
||||
<path d="M520 180 L 530 190 L 515 185 Z" fill="#a855f7"/>
|
||||
|
||||
<!-- Event List -->
|
||||
<rect x="40" y="320" width="120" height="24" rx="4" fill="#e5e7eb"/>
|
||||
<rect x="180" y="320" width="120" height="24" rx="4" fill="#e5e7eb"/>
|
||||
<rect x="320" y="320" width="120" height="24" rx="4" fill="#e5e7eb"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
26
static/images/hero-dashboard.svg
Normal file
26
static/images/hero-dashboard.svg
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="800" height="600" fill="#f3f4f6"/>
|
||||
<rect x="40" y="40" width="720" height="520" rx="8" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
|
||||
|
||||
<!-- Header -->
|
||||
<rect x="60" y="60" width="680" height="60" rx="4" fill="#f9fafb"/>
|
||||
<circle cx="100" cy="90" r="15" fill="#60a5fa"/>
|
||||
<rect x="140" y="80" width="120" height="20" rx="4" fill="#e5e7eb"/>
|
||||
|
||||
<!-- Charts -->
|
||||
<rect x="60" y="140" width="320" height="200" rx="4" fill="#f9fafb"/>
|
||||
<path d="M80 300 L140 260 L200 280 L260 220 L320 240 L360 200" stroke="#60a5fa" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- Stats -->
|
||||
<rect x="400" y="140" width="340" height="200" rx="4" fill="#f9fafb"/>
|
||||
<rect x="420" y="160" width="140" height="20" rx="4" fill="#e5e7eb"/>
|
||||
<rect x="420" y="200" width="300" height="8" rx="4" fill="#60a5fa"/>
|
||||
<rect x="420" y="220" width="260" height="8" rx="4" fill="#818cf8"/>
|
||||
<rect x="420" y="240" width="220" height="8" rx="4" fill="#a78bfa"/>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<rect x="60" y="360" width="680" height="180" rx="4" fill="#f9fafb"/>
|
||||
<rect x="80" y="380" width="200" height="140" rx="4" fill="#ffffff" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<rect x="300" y="380" width="200" height="140" rx="4" fill="#ffffff" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<rect x="520" y="380" width="200" height="140" rx="4" fill="#ffffff" stroke="#e5e7eb" stroke-width="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
5
static/images/testimonial-1.svg
Normal file
5
static/images/testimonial-1.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="40" cy="40" r="40" fill="#e5e7eb"/>
|
||||
<circle cx="40" cy="35" r="15" fill="#9ca3af"/>
|
||||
<path d="M40 80 C 10 80 10 55 40 55 C 70 55 70 80 40 80" fill="#9ca3af"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 267 B |
63
tailwind.config.js
Normal file
63
tailwind.config.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./layouts/**/*.html"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
},
|
||||
secondary: {
|
||||
50: '#faf5ff',
|
||||
100: '#f3e8ff',
|
||||
200: '#e9d5ff',
|
||||
300: '#d8b4fe',
|
||||
400: '#c084fc',
|
||||
500: '#a855f7',
|
||||
600: '#9333ea',
|
||||
700: '#7e22ce',
|
||||
800: '#6b21a8',
|
||||
900: '#581c87',
|
||||
},
|
||||
accent: {
|
||||
green: '#22c55e',
|
||||
yellow: '#eab308',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
heading: ['Plus Jakarta Sans', 'sans-serif'],
|
||||
},
|
||||
boxShadow: {
|
||||
'subtle': '0 2px 15px -3px rgba(0, 0, 0, 0.07)',
|
||||
'elevation': '0 10px 40px -3px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
borderRadius: {
|
||||
'xl': '1rem',
|
||||
'2xl': '1.5rem',
|
||||
},
|
||||
animation: {
|
||||
'subtle-bounce': 'subtle-bounce 2s infinite',
|
||||
},
|
||||
keyframes: {
|
||||
'subtle-bounce': {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-5px)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
}
|
||||
12
theme.toml
Normal file
12
theme.toml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
name = "Hugo Sassify"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/yourusername/hugo-sassify-theme/blob/master/LICENSE"
|
||||
description = "A modern Hugo theme for SaaS websites built with TailwindCSS"
|
||||
homepage = "https://github.com/yourusername/hugo-sassify-theme"
|
||||
tags = ["saas", "business", "tailwind", "responsive", "modern", "clean"]
|
||||
features = ["responsive", "tailwind", "modern design"]
|
||||
min_version = "0.80.0"
|
||||
|
||||
[author]
|
||||
name = "Your Name"
|
||||
homepage = "https://yourwebsite.com"
|
||||
Loading…
Add table
Reference in a new issue