Completed mobile view of hero.

.gitignore

@@ -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

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.

app/globals.css

@@ -0,0 +1,160 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Inter;
+}
+
+@layer utilities {
+  .btn_white { 
+    @apply  border-white bg-white px-8 py-3 text-green-50
+  }
+  .btn_white_text  { 
+    @apply  border-white bg-white px-8 py-3 text-gray-90
+  }
+  .btn_orange  { 
+    @apply  border-orange bg-orange px-8 py-5 text-white
+  }
+  .btn_dark_green { 
+    @apply  bg-green-90 px-8 py-4 text-white transition-all hover:bg-black
+  }
+  .btn_dark_green_outline  { 
+    @apply border-gray-20 bg-green-90 px-8 py-5 text-white
+  }
+
+  .max-container {
+    @apply mx-auto max-w-[1440px];
+  }
+
+  .padding-container {
+    @apply px-6 lg:px-20 3xl:px-0;
+  }
+
+  .flexCenter {
+    @apply flex items-center justify-center;
+  }
+  .flexColCenter {
+    @apply flex items-center justify-center flex-col;
+  }
+
+  .flexBetween {
+    @apply flex items-center justify-between;
+  }
+
+  .flexStart {
+    @apply flex items-center justify-start;
+  }
+
+  .flexEnd {
+    @apply flex items-center justify-end;
+  }
+
+  /* FONTS */
+  .regular-64 {
+    @apply text-[64px] font-[400] leading-[120%];
+  }
+
+  .regular-40 {
+    @apply text-[40px] font-[400] leading-[120%];
+  }
+
+  .regular-32 {
+    @apply text-[32px] font-[400];
+  }
+
+  .regular-24 {
+    @apply text-[24px] font-[400];
+  }
+
+  .regular-20 {
+    @apply text-[20px] font-[400];
+  }
+
+  .regular-18 {
+    @apply text-[18px] font-[400];
+  }
+
+  .regular-16 {
+    @apply text-[16px] font-[400];
+  }
+
+  .regular-14 {
+    @apply text-[14px] font-[400];
+  }
+
+  .medium-14 {
+    @apply text-[14px] font-[600];
+  }
+
+  .bold-88 {
+    @apply text-[88px] font-[700] leading-[120%];
+  }
+
+  .bold-64 {
+    @apply text-[64px] font-[700] leading-[120%];
+  }
+
+  .bold-52 {
+    @apply text-[52px] font-[700] leading-[120%];
+  }
+
+  .bold-40 {
+    @apply text-[40px] font-[700] leading-[120%];
+  }
+
+  .bold-32 {
+    @apply text-[32px] font-[700] leading-[120%];
+  }
+
+  .bold-20 {
+    @apply text-[20px] font-[700];
+  }
+
+  .bold-18 {
+    @apply text-[18px] font-[700];
+  }
+
+  .bold-16 {
+    @apply text-[16px] font-[700];
+  }
+
+  /* Hero */
+  .hero-img {
+    @apply relative right-0 top-10 h-52 w-full bg-heroImg bg-cover bg-center md:-right-28 xl:-top-60;
+  }
+
+  /* Camp */
+  .camp-quote {
+    @apply absolute -right-6 bottom-4 w-[140px] lg:bottom-10 xl:-right-8 xl:w-[186px] 3xl:right-0;
+  }
+
+  /* Feature */
+  .feature-phone {
+    @apply absolute top-[13%] z-10 hidden max-w-[1500px] rotate-[15deg] md:-left-16 lg:flex  3xl:left-20;
+  }
+
+  /* Get App */
+  .get-app {
+    @apply max-container relative flex w-full  flex-col justify-between gap-32 overflow-hidden bg-green-90 bg-pattern bg-cover bg-center bg-no-repeat px-6 py-12 text-white sm:flex-row sm:gap-12 sm:py-24 lg:px-20 xl:max-h-[598px] 2xl:rounded-5xl;
+  }
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

app/layout.tsx

@@ -0,0 +1,31 @@
+
+
+import type { Metadata } from 'next'
+import './globals.css'
+import Navbar from '@/components/Navbar'
+import Footer from '@/components/Footer'
+import { use } from 'react'
+
+
+export const metadata: Metadata = {
+  title: 'SaSS Landing Page',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Navbar  />
+        <main className='relative overflow-hidden'>
+          {children}
+        </main>
+        <Footer />
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,18 @@
+import CaseStudies from '@/components/CaseStudies'
+import Customers from '@/components/Customers'
+import Hero from '@/components/Hero'
+import Info from '@/components/Info'
+import Pricings from '@/components/Pricings'
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <>
+     <Hero />
+     <Customers />
+     <Info />
+     <CaseStudies />
+     <Pricings />
+    </>
+  )
+}

components/Button.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+
+// Creating prop to pass to the button throughout the website
+type ButtonProps = {
+    type: 'button' | 'submit';
+    title: string;
+    icon?: string; // ? means optional. If there is no icon image just the string will be passed
+    variant: 'btn_orange' | 'btn_light_green' | 'btn_dark_white' | 'btn_light_white';
+
+}
+
+const Button = ({type, title, icon, variant}: ButtonProps) => {
+  return (
+    <button type={type} className={`flextCenter gap-3 rounded-full border ${variant}`}>
+        {icon && <Image src={icon} alt={title} width={24} height={24} />}
+        <label className="bold-16 whitespace-nowrap">{title}</label>
+    </button>
+  )
+}
+
+export default Button

components/CaseStudies.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CaseStudies = () => {
+  return (
+    <div>CaseStudies</div>
+  )
+}
+
+export default CaseStudies

components/Customers.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Customers = () => {
+  return (
+    <div>Customers</div>
+  )
+}
+
+export default Customers

components/Footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer

components/Hero.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Button from './Button'
+import { AiOutlineCheckCircle } from "react-icons/ai";
+
+
+const Hero = () => {
+  return (
+    <section className='border-2 border-red-500 max-container padding-container flexColCenter gap-20 py-10 md:gap-28 lg:py-20'>
+      <div className='text-4xl'>
+      <h1 className='font-bold text-center'>A UI/UX Design Subscription So <span className='text-orange font-bold'>Good </span>
+It Should Come With A <span className='text-orange font-bold'>Warning</span> Label</h1>
+      </div>
+
+        {/* Callout Points */}
+       <div className=''>
+       <p className=' flex flex-row mb-4'>
+       <AiOutlineCheckCircle className='flex justify-center items-center mr-2 w-6 h-6 text-orange' />
+        No Hiring Headaches</p>
+        <p className=' flex flex-row mb-4'>
+        <AiOutlineCheckCircle className='flex justify-center items-center mr-2 w-6 h-6 text-orange' />
+          Weekly Turnaround Times</p>
+        <p className=' flex flex-row mb-4'>
+        <AiOutlineCheckCircle className='flex justify-center items-center mr-2 w-6 h-6 text-orange' />
+          One Flat Monthly Fee</p>
+       </div>
+        <div className="lg:flexCenter">
+                <Button type='button' title='Stary Your Risk Free Trial' variant='btn_orange' />
+        </div>
+
+
+      <div className='hero-img' />
+    </section>
+  )
+}
+
+export default Hero

components/Info.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Info = () => {
+  return (
+    <div>Info</div>
+  )
+}
+
+export default Info