diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..04f7f93 --- /dev/null +++ b/.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 diff --git a/README.md b/README.md index 513f21d..28c2bc6 100644 --- a/README.md +++ b/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). diff --git a/assets/css/main.css b/assets/css/main.css index 5ffad03..6793938 100644 --- a/assets/css/main.css +++ b/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 { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 52a03d9..773ee4b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,46 +14,8 @@ - - - + + diff --git a/layouts/index.html b/layouts/index.html index 9cdc411..9308769 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -21,7 +21,7 @@
- Analytics Dashboard + Analytics Dashboard
@@ -36,9 +36,7 @@

Trusted by leading companies worldwide

- {{ range $i := (seq 6) }} - Client Logo - {{ end }} + Client Logo
@@ -72,14 +70,14 @@ Learn More
- Analytics Feature + Analytics Feature
- Session Replay Feature + Session Replay Feature
Session Replay
@@ -111,10 +109,9 @@
- {{ range $i := (seq 3) }}
- Testimonial + Testimonial

John Smith

Product Manager at Company

@@ -122,7 +119,6 @@

"This platform has transformed how we understand our users. The insights we've gained have been invaluable for our product development."

- {{ end }}
diff --git a/package.json b/package.json index 8f5f780..66489f9 100644 --- a/package.json +++ b/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" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..f1c8dac --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } +} diff --git a/static/images/logo.png b/static/images/logo.png new file mode 100644 index 0000000..59d8f16 Binary files /dev/null and b/static/images/logo.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 065f3a1..05e22a1 100644 --- a/tailwind.config.js +++ b/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: [