diff --git a/package-lock.json b/package-lock.json index 98094b0..756ef58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,14 +8,17 @@ "name": "sunrise", "version": "0.1.0", "dependencies": { + "@formkit/auto-animate": "^1.0.0-beta.6", "@radix-ui/react-separator": "^1.0.2", "@t3-oss/env-nextjs": "^0.2.1", + "class-variance-authority": "^0.6.0", "framer-motion": "^10.12.4", "next": "^13.2.4", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.43.9", "react-hot-toast": "^2.4.1", + "react-icons": "^4.9.0", "zod": "^3.21.4" }, "devDependencies": { @@ -130,6 +133,11 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@formkit/auto-animate": { + "version": "1.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz", + "integrity": "sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -1210,11 +1218,38 @@ "node": ">= 6" } }, + "node_modules/class-variance-authority": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.6.0.tgz", + "integrity": "sha512-qdRDgfjx3GRb9fpwpSvn+YaidnT7IUJNe4wt5/SWwM+PmUwJUhQRk/8zAyNro0PmVfmen2635UboTjIBXXxy5A==", + "dependencies": { + "clsx": "1.2.1" + }, + "funding": { + "url": "https://joebell.co.uk" + }, + "peerDependencies": { + "typescript": ">= 4.5.5 < 6" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3848,6 +3883,14 @@ "react-dom": ">=16" } }, + "node_modules/react-icons": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz", + "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -4463,7 +4506,7 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -4717,6 +4760,11 @@ "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==", "dev": true }, + "@formkit/auto-animate": { + "version": "1.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz", + "integrity": "sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==" + }, "@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -5434,11 +5482,24 @@ } } }, + "class-variance-authority": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.6.0.tgz", + "integrity": "sha512-qdRDgfjx3GRb9fpwpSvn+YaidnT7IUJNe4wt5/SWwM+PmUwJUhQRk/8zAyNro0PmVfmen2635UboTjIBXXxy5A==", + "requires": { + "clsx": "1.2.1" + } + }, "client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -7256,6 +7317,12 @@ "goober": "^2.1.10" } }, + "react-icons": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz", + "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -7700,7 +7767,7 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", - "dev": true + "devOptional": true }, "unbox-primitive": { "version": "1.0.2", diff --git a/package.json b/package.json index eda0d0f..54f26d9 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,17 @@ "start": "next start" }, "dependencies": { + "@formkit/auto-animate": "^1.0.0-beta.6", "@radix-ui/react-separator": "^1.0.2", "@t3-oss/env-nextjs": "^0.2.1", + "class-variance-authority": "^0.6.0", "framer-motion": "^10.12.4", "next": "^13.2.4", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.43.9", "react-hot-toast": "^2.4.1", + "react-icons": "^4.9.0", "zod": "^3.21.4" }, "devDependencies": { diff --git a/public/images/sand-top-1.svg b/public/images/sand-top-1.svg index 860f233..2d86501 100644 --- a/public/images/sand-top-1.svg +++ b/public/images/sand-top-1.svg @@ -1,4 +1,4 @@ - + diff --git a/public/images/sunrise-display.png b/public/images/sunrise-display.png index e98e8dd..2b04f8c 100644 Binary files a/public/images/sunrise-display.png and b/public/images/sunrise-display.png differ diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..6e8296e --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { cva } from "class-variance-authority"; + +const button = cva([ + "flex flex-row items-center gap-x-2 rounded-full px-6 py-4", + "text-r-lg font-semibold text-black", + "bg-sunrise shadow-md", + "hover:bg-sunrise/80", +]); + +interface Props { + children?: React.ReactNode; + onClick?: () => void; + href?: string; +} + +export const Button: React.FC = ({ children, onClick, href }) => { + const Wrapper = href ? "a" : "button"; + + return ( + + {children} + + ); +}; diff --git a/src/components/RootLayout.tsx b/src/components/RootLayout.tsx index 379f58c..c99f624 100644 --- a/src/components/RootLayout.tsx +++ b/src/components/RootLayout.tsx @@ -23,9 +23,7 @@ export const RootLayout: React.FC = ({ children }) => { return ( <>
-
+
{children}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ed96f79..43028cd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,14 @@ +import { cva, cx } from "class-variance-authority"; import { type NextPage } from "next"; import Head from "next/head"; import Image from "next/image"; +import { useEffect, useState } from "react"; +import { Button } from "~/components/Button"; import { Container } from "~/components/Container"; import { Polaroid } from "~/components/Polaroid"; import { ProjectDescription } from "~/components/ProjectDescription"; import { projects } from "~/constants/projects"; +import { MdArrowCircleDown } from "react-icons/md"; const Home: NextPage = () => { return ( @@ -27,36 +31,78 @@ const Home: NextPage = () => { export default Home; +const ribbon = cva("relative w-full transition-all duration-500", { + variants: { + state: { + ribbon: "h-40 top-[20vh]", + sunrise: "h-[95vh] top-[5vh]", + }, + }, +}); + const Hero = () => { + // Transform ribbon into sunrise on scroll + const [showSunrise, setShowSunrise] = useState(false); + useEffect(() => { + const onScroll = () => { + const showSunriseThreshold_vh = 5; + const showSunriseThreshold_px = + (window.innerHeight * showSunriseThreshold_vh) / 100; + + setShowSunrise(window.pageYOffset > showSunriseThreshold_px); + }; + + window.addEventListener("scroll", onScroll); + return () => window.removeEventListener("scroll", onScroll); + }, []); + return ( <> -
-
- Sunrise background banner - {/* TODO: Create + replace with .svg */} - Sunrise Software -
- -

Sunrise

-

+

+
+
+
+ Sunrise background banner +
+
+
+ {/* TODO: Create + replace with .svg */} + Sunrise Software +
+

Creating software that looks and works great is our specialty at - Sunrise. Our team of experts combines artistry and technical - know-how to craft solutions that will make your business{" "} + Sunrise. +
+ Our team of experts combines artistry and technical know-how to + craft solutions that will make your business{" "} shine.

- + {/* TODO: Make functional + more interesting */} + +
+
+
+ sand +
+
-
); }; diff --git a/src/styles/globals.css b/src/styles/globals.css index b5c61c9..dd8f224 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +html { + @apply bg-white; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 7e6804f..2578d66 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -19,7 +19,7 @@ export default { "3xl": ["3rem", { lineHeight: "2.25rem" }], // 48px 3rem }, fontFamily: { - sans: ["var(--font-jakarta)"], + sans: ["var(--font-jakarta)", ...fontFamily.sans], roadster: ["var(--font-roadster)", ...fontFamily.sans], }, colors: {