Skip to content

Commit

Permalink
First commit 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
tommyjepsen committed Apr 6, 2024
1 parent 8420663 commit 9a2eb65
Show file tree
Hide file tree
Showing 116 changed files with 9,695 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
36 changes: 36 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
212 changes: 212 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
# TWBlocks

Free open-source website blocks you can easily copy & paste into your react projects.

I strongly recommend you install shadcn in your project before starting to use these blocks. You can find the installation guide here [shadcn installation](https://ui.shadcn.com/docs/installation) ✌️

You can use shadcn [Themes](https://ui.shadcn.com/themes) to customize the styling.

It works for both dark- and light mode. You can find installation guide to how to toggle and enable the different modes here on shadcn [Dark mode](https://ui.shadcn.com/docs/dark-mode).

## Blocks

Go to /components to find the block you need and simply copy/paste it into your project. Then see which dependencies it has to shadcn-ui, and install them.

Here is a list of available blocks:

- [Headers](#headers)
- [Heros](#heros)
- [Cases](#cases)
- [Features](#features)
- [CTAs](#ctas)
- [Stats](#stats)
- [Pricing](#pricing)
- [FAQs](#faqs)
- [Blogs](#blogs)
- [Contacts](#contacts)
- [Footers](#footers)

## Headers

### [Header1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/header/header1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/header1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-header1.png?raw=true)

## Heros

### [Hero1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/hero/hero1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/hero1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-hero1.png?raw=true)

### [Hero2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/hero/hero2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/hero2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-hero2.png?raw=true)

### [Hero3](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/hero/hero3.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/hero3.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-hero3.png?raw=true)

### [Hero4](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/hero/hero4.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/hero4.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-hero4.png?raw=true)

## Cases

### [Case1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/case/case1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/case1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-case1.png?raw=true)

### [Case2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/case/case2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/case2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-case2.png?raw=true)

## Features

### [Feature1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature1.png?raw=true)

### [Feature2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature2.png?raw=true)

### [Feature3](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature3.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature3.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature3.png?raw=true)

### [Feature4](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature4.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature4.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature4.png?raw=true)

### [Feature5](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature5.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature5.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature5.png?raw=true)

### [Feature6](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature6.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature6.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature6.png?raw=true)

### [Feature7](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature7.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature7.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature7.png?raw=true)

### [Feature8](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/feature8.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/feature8.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-feature8.png?raw=true)

## CTAs

### [CTA1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/cta1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/cta1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-cta1.png?raw=true)

### [CTA2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/cta2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/cta2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-cta2.png?raw=true)

## Stats

### [Stats1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/stats1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/stats1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-stats1.png?raw=true)


### [Stats2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/stats2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/stats2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-stats2.png?raw=true)

## Pricing

### [Pricing1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/pricing1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/pricing1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-pricing1.png?raw=true)

### [Pricing2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/pricing2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/pricing2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-pricing2.png?raw=true)

## FAQs

### [FAQ1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/faq1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/faq1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-faq1.png?raw=true)

### [FAQ2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/faq2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/faq2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-faq2.png?raw=true)

## Blogs

### [Blog1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/blog1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/blog1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-blog1.png?raw=true)

### [Blog2](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/blog2.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/blog2.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-blog2.png?raw=true)

## Contacts

### [Contact1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/contact1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/contact1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-contact1.png?raw=true)

## Footers

### [Footer1](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/components/feature/footer1.tsx)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/footer1.png?raw=true)

![](https://github.com/tommyjepsen/next-shadcn-website-templates/blob/main/public/darkmode-footer1.png?raw=true)
Binary file added app/favicon.ico
Binary file not shown.
59 changes: 59 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
}

.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
33 changes: 33 additions & 0 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "TWBlocks.com",
description:
"Website code blocks to copy/paste - based on ShadCN & Radix using Tailwind and NextJS",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);
}
Loading

0 comments on commit 9a2eb65

Please sign in to comment.