feat: initial folder structure

gimnathperera · Sep 29, 2023 · e37217b · e37217b
commit e37217b
Show file tree

Hide file tree

Showing 21 changed files with 2,999 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["daisyui", "tailwindcss"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon-16x16.png",
+    apple: "/apple-touch-icon.png",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="relative flex flex-col h-screen">
+          <Header />
+          <main className="container mx-auto px-12 flex-grow">{children}</main>
+          <Footer />
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,11 @@
+import Hero from "@/components/hero";
+
+const Home = () => {
+  return (
+    <section>
+      <Hero />
+    </section>
+  );
+};
+
+export default Home;
diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -0,0 +1,13 @@
+type Props = {};
+
+const Footer = (props: Props) => {
+  return (
+    <footer className="footer footer-center p-4 text-base-content">
+      <aside>
+        <p>Copyright © 2023 - All right reserved by ACME Industries Ltd</p>
+      </aside>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/header/index.tsx b/components/header/index.tsx
@@ -0,0 +1,24 @@
+import GithubIcon from "../icons/github";
+
+type Props = {};
+
+const Header = ({}: Props) => {
+  return (
+    <div className="navbar flex h-16 max-w-screen-xl items-center justify-between xl:mx-auto">
+      <div className="flex-1">
+        <div className="flex cursor-pointer text-2xl font-semibold">
+          🌈 Rainbow <span className="text-[#4ED1A5] ml-1"> Riot</span>
+        </div>
+      </div>
+      <div className="flex-none">
+        <label className="btn btn-ghost btn-circle">
+          <div className="indicator">
+            <GithubIcon />
+          </div>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/components/hero/index.tsx b/components/hero/index.tsx
@@ -0,0 +1,47 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import AnimatedCursor from "react-animated-cursor";
+
+const Hero = () => {
+  const colors = ["#ff5733", "#65C3C8", "#5733ff", "#33a3ff", "#ff33a3"];
+
+  const [currentColorIndex, setCurrentColorIndex] = useState(0);
+
+  useEffect(() => {
+    const cycleColors = () => {
+      setCurrentColorIndex((prevIndex) => (prevIndex + 1) % colors.length);
+    };
+
+    const colorInterval = setInterval(cycleColors, 3000);
+
+    return () => {
+      clearInterval(colorInterval);
+    };
+  }, [colors.length]);
+
+  const currentColor = colors[currentColorIndex];
+
+  return (
+    <div className="hero lg:pt-24 pt-12">
+      <div className="hero-content text-center">
+        <div className="max-w-2xl">
+          <h1 className="text-5xl font-bold ">
+            Your Images, Your{" "}
+            <span className="animate-fadeOut" style={{ color: currentColor }}>
+              Colors
+            </span>
+          </h1>
+          <p className="py-6 text-xl">
+            Transform your photos into beautiful color palettes with a single
+            click. Create unique color palettes for your art and design
+            endeavors.
+          </p>
+          <button className="btn btn-primary">Get Started</button>
+        </div>
+      </div>
+      <AnimatedCursor />
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/components/icons/github.tsx b/components/icons/github.tsx
@@ -0,0 +1,18 @@
+const GithubIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="#24292F"
+        fillRule="evenodd"
+        d="M11.965 0C5.348 0 0 5.5 0 12.305c0 5.437 3.426 10.043 8.18 11.672.593.12.812-.266.812-.59 0-.285-.02-1.262-.02-2.282-3.327.735-4.019-1.468-4.019-1.468-.535-1.426-1.328-1.793-1.328-1.793-1.09-.754.078-.754.078-.754 1.211.082 1.844 1.265 1.844 1.265 1.07 1.872 2.793 1.344 3.484 1.016.102-.793.418-1.344.754-1.648-2.652-.285-5.445-1.344-5.445-6.07 0-1.344.473-2.446 1.226-3.301-.12-.305-.535-1.567.118-3.258 0 0 1.011-.328 3.289 1.261a11.233 11.233 0 015.984 0c2.277-1.59 3.285-1.261 3.285-1.261.656 1.691.238 2.953.121 3.258.774.855 1.227 1.957 1.227 3.3 0 4.727-2.793 5.766-5.465 6.07.434.387.809 1.122.809 2.282 0 1.652-.02 2.976-.02 3.383 0 .324.219.71.813.59 4.753-1.63 8.183-6.235 8.183-11.672C23.93 5.5 18.56 0 11.965 0zm0 0"
+      ></path>
+    </svg>
+  );
+};
+
+export default GithubIcon;
diff --git a/config/site.ts b/config/site.ts
@@ -0,0 +1,16 @@
+export type SiteConfig = typeof siteConfig;
+
+export const siteConfig = {
+  name: "Rainbow Riot | Color Palette Generator",
+  description: "Generate color palettes from images",
+  navItems: [],
+  navMenuItems: [],
+  links: {
+    github: "https://github.com/Gimnath-Perera",
+    repository: "https://github.com/Gimnath-Perera/mocktopus",
+    twitter: "https://twitter.com/getnextui",
+    docs: "https://nextui.org",
+    discord: "https://discord.gg/9b6yyZKmH4",
+    sponsor: "https://patreon.com/jrgarciadev",
+  },
+};
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "rainbow-riot",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "latest",
+    "react-animated-cursor": "^2.10.1",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "autoprefixer": "latest",
+    "daisyui": "^3.8.1",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "postcss": "latest",
+    "tailwindcss": "latest",
+    "typescript": "latest"
+  }
+}