Initial home page

WiseBlend · Jan 28, 2024 · a89e9ce · a89e9ce
1 parent 8cf3e51
commit a89e9ce
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 22 deletions.
diff --git a/index.html b/index.html
diff --git a/public/background.svg b/public/background.svg
diff --git a/public/hero-image-shape-1.png b/public/hero-image-shape-1.png
diff --git a/public/hero-image-shape-2.png b/public/hero-image-shape-2.png
diff --git a/public/hero-image.png b/public/hero-image.png
diff --git a/public/icon.svg b/public/icon.svg
diff --git a/public/search-icon.svg b/public/search-icon.svg
diff --git a/public/wiseblend-logo.png b/public/wiseblend-logo.png
diff --git a/public/wiseblend-logo.svg b/public/wiseblend-logo.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -18,12 +18,68 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
+  /* background: linear-gradient(
       to bottom,
       transparent,
       rgb(var(--background-end-rgb))
     )
-    rgb(var(--background-start-rgb));
+    rgb(var(--background-start-rgb)); */
+
+  background-image: url('/background.svg');
+  background-size: cover;
+}
+
+header form input,
+header form button {
+  box-shadow: -1px 4px 14px 4px #0000000F;
+  height: 54px;
+}
+
+header form input {
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+
+header form button {
+  background: url('/search-icon.svg') #4CADCD no-repeat center;
+  background-size: 24px;
+  width: 54px;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+
+.hero h1 {
+  font-size: 85px;
+  font-weight: 600;
+  color: #304157;
+  line-height: .95em;
+}
+
+.hero .banner {
+  background: linear-gradient(90deg, rgba(202, 135, 255, 0.7) 0%, rgba(246, 160, 129, 0.7) 96.92%);
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  box-shadow: 0px 4px 13px 3px rgba(48, 65, 87, 0.15);
+  color: white;
+  font-size: 26px;
+  font-weight: 600;
+}
+
+.hero .image {
+  background-image: url('/hero-image.png'), url('/hero-image-shape-1.png'), url('/hero-image-shape-2.png');
+  background-position: center center, 20px 385px, right 88px;
+  width: 625px;
+  height: 565px;
+}
+
+@media only screen and (min-width: 1024px) {
+  .hero .banner {
+    position: relative;
+    left: -25px;
+  }
+  .hero .image {
+    right: -55px;
+  }
 }
 
 @layer utilities {

diff --git a/src/app/header.tsx b/src/app/header.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import Image from "next/image";
+import { FormEvent } from "react";
+
+export default function Header() {
+  const onSubmit = (e: FormEvent) => {
+    alert("Something really cool is coming soon!");
+    e.preventDefault();
+    return false;
+  };
+
+  return (
+    <header className="flex py-8">
+      <a href="/" className="flex items-center">
+        <Image
+          src="/wiseblend-logo.svg"
+          width={173}
+          height={36}
+          alt="Picture of the author"
+        />
+      </a>
+      <form className="flex grow ml-5" onSubmit={onSubmit}>
+        <input
+          type="url"
+          required
+          className="grow px-4"
+          placeholder="Enter product URL"
+        />
+        <button>&nbsp;</button>
+      </form>
+    </header>
+  );
+}
diff --git a/src/app/hero.tsx b/src/app/hero.tsx
@@ -0,0 +1,17 @@
+import { Spline_Sans, Playfair_Display } from "next/font/google";
+
+const font = Spline_Sans({ subsets: ["latin"] });
+const heading = Playfair_Display({ subsets: ["latin"] });
+
+export default function Hero() {
+  return (
+    <div className="hero relative mt-12">
+      <h1 className={`${heading.className}`}>Blend Smart<br/>Spend Wise</h1>
+      <div className="my-8 text-xl">Never overspend on skincare again!</div>
+      <div className={`banner p-6 w-3/5 ${font.className}`}>
+        Use AI to find cheaper alternatives with<br/>the same function!
+      </div>
+      <div className="image absolute top-0 bg-no-repeat"></div>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import {  Open_Sans  } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const font = Open_Sans({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "WiseBlend.AI",
@@ -16,7 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={font.className}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,13 @@
-// import Image from "next/image";
+import Header from "./header";
+import Hero from "./hero";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 text-center">
-      Something really cool is coming soon!
-    </main>
+    <div className="flex flex-col max-w-5xl min-h-screen mx-auto">
+      <Header />
+      <main>
+        <Hero />
+      </main>
+    </div>
   );
 }