feat: add theme files with TailwindCSS setup and initial layout

.gitignore

@@ -0,0 +1,29 @@
+# Dependencies
+node_modules/
+package-lock.json
+yarn.lock
+
+# Hugo
+public/
+resources/
+.hugo_build.lock
+
+# Build output
+assets/css/style.css
+static/css/
+
+# IDE/Editor
+.idea/
+.vscode/
+*.swp
+*.swo
+.DS_Store
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

README.md

@@ -1,62 +1,130 @@
 # Hugo Saasify Theme
 
-A modern and elegant Hugo theme specifically designed for SaaS websites, built with TailwindCSS. This theme provides a clean, professional look while maintaining excellent performance and customization options.
+A modern and elegant Hugo theme specifically designed for SaaS websites. Built with TailwindCSS, this theme provides a clean, professional look while maintaining excellent performance and customization options.
 
 ## Features
 
-- 🎨 Built with TailwindCSS for modern, responsive design
-- 🚀 Optimized for performance
-- 📱 Fully responsive design
+- 🎨 Modern design with TailwindCSS
+- 📱 Fully responsive layout
+- 🚀 Performance optimized
+- 💅 Clean typography with Inter & Plus Jakarta Sans fonts
 - 🎯 Perfect for SaaS and business websites
-- 💡 Clean and modern UI components
-- 🛠 Easy to customize and extend
+- 🛠 Easy to customize
+- 📦 No jQuery, minimal JavaScript
 
 ## Requirements
 
-- Hugo version 0.80.0 or higher
-- Node.js and npm for TailwindCSS processing
+- Hugo Extended Version (>= 0.80.0)
+- Node.js (>= 14.x)
+- npm or yarn
 
 ## Installation
 
-1. Initialize a new Hugo site if you haven't already:
-   ```bash
-   hugo new site your-site-name
-   cd your-site-name
-   ```
+### 1. Create a new Hugo site (skip if you have an existing site)
 
-2. Add the theme as a submodule:
-   ```bash
-   git submodule add https://github.com/yourusername/hugo-saasify-theme themes/hugo-saasify-theme
-   ```
+```bash
+hugo new site your-site-name
+cd your-site-name
+```
 
-3. Configure your `hugo.toml`:
-   ```toml
-   baseURL = "/"
-   languageCode = "en-us"
-   title = "Your Site Title"
-   theme = "hugo-saasify-theme"
-   ```
+### 2. Add the theme as a submodule
+
+```bash
+git init
+git submodule add https://github.com/yourusername/hugo-saasify-theme themes/hugo-saasify-theme
+```
+
+### 3. Install dependencies
+
+```bash
+# Copy package.json and other config files to your site root
+cp themes/hugo-saasify-theme/package.json .
+cp themes/hugo-saasify-theme/postcss.config.js .
+cp themes/hugo-saasify-theme/tailwind.config.js .
+
+# Install dependencies
+npm install
+```
+
+### 4. Configure your Hugo site
+
+Create or update your `hugo.toml` with the following configuration:
+
+```toml
+baseURL = "/"
+languageCode = "en-us"
+title = "Your Site Title"
+theme = "hugo-saasify-theme"
+
+[params]
+  description = "Your site description"
+  author = "Your Name"
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.80.0"
+```
 
 ## Development
 
-1. Install dependencies:
-   ```bash
-   cd themes/hugo-saasify-theme
-   npm install
-   ```
+To start the development server with live reload:
 
-2. Start development server:
-   ```bash
-   npm run dev
-   ```
+```bash
+npm run start
+```
+
+This will:
+- Watch for changes in your TailwindCSS styles
+- Run the Hugo development server
+- Automatically rebuild when changes are detected
 
 ## Customization
 
-The theme can be customized through:
-- Hugo configuration in `hugo.toml`
-- TailwindCSS configuration in `tailwind.config.js`
-- Custom CSS in `assets/css/main.css`
+### Colors
+
+The theme uses a primary and secondary color scheme that can be customized in `tailwind.config.js`:
+
+```js
+colors: {
+  primary: {
+    // Your primary color palette
+  },
+  secondary: {
+    // Your secondary color palette
+  }
+}
+```
+
+### Typography
+
+The theme uses Inter for body text and Plus Jakarta Sans for headings. You can modify this in `tailwind.config.js`:
+
+```js
+fontFamily: {
+  sans: ['Inter', 'system-ui', 'sans-serif'],
+  heading: ['Plus Jakarta Sans', 'sans-serif'],
+}
+```
+
+### Layout Components
+
+Common components like buttons, cards, and sections can be customized in `assets/css/main.css`.
+
+## Content Structure
+
+```
+content/
+├── _index.md          # Homepage content
+├── blog/              # Blog posts
+├── features/          # Feature pages
+└── docs/              # Documentation pages
+```
 
 ## License
 
 MIT
+
+## Support
+
+If you have any questions or need help, please [open an issue](https://github.com/yourusername/hugo-saasify-theme/issues).

assets/css/main.css

@@ -42,7 +42,7 @@
   }
 
   .card {
-    @apply bg-white rounded-xl shadow-subtle p-6 transition duration-200 hover:shadow-elevation;
+    @apply bg-white rounded-xl shadow-sm p-6 transition duration-200 hover:shadow-md;
   }
 
   .nav-link {

layouts/_default/baseof.html

@@ -14,46 +14,8 @@
     <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>
+    <!-- Main CSS -->
+    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
 </head>
 <body class="flex flex-col min-h-screen">
     <!-- Header -->

layouts/index.html

@@ -21,7 +21,7 @@
             </div>
             <div class="relative">
                 <div class="relative z-10">
-                    <img src="{{ "images/hero-dashboard.png" | relURL }}" alt="Analytics Dashboard" class="rounded-xl shadow-elevation">
+                    <img src="{{ "images/hero-dashboard.svg" | 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>
@@ -36,9 +36,7 @@
     <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 }}
+            <img src="{{ "images/client-logo-1.svg" | relURL }}" alt="Client Logo" class="h-8">
         </div>
     </div>
 </section>
@@ -72,14 +70,14 @@
                     <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">
+                    <img src="{{ "images/feature-analytics.svg" | 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">
+                    <img src="{{ "images/feature-session.svg" | 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>
@@ -111,10 +109,9 @@
         </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">
+                    <img src="{{ "images/testimonial-1.svg" | 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>
@@ -122,7 +119,6 @@
                 </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>

package.json

@@ -2,16 +2,6 @@
   "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": {
@@ -19,6 +9,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
+    "postcss-cli": "^10.1.0",
     "tailwindcss": "^3.3.5"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

tailwind.config.js

@@ -28,32 +28,11 @@ module.exports = {
           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: [