Update Home Page Design

[Coltensiemer]

Issue: Update Home Page Design Description:

We need to update the design of the home page to enhance the user experience. The new design should include a modern and responsive layout with improved navigation and clear calls to action. Acceptance Criteria:

[ ] 1. Implement the provided code snippet to update the home page design. [ ] 2. Ensure the header includes the company logo, navigation links (About, Contact), and is styled with a gradient background. [ ] 3. Add a hero section with a heading, description, and buttons (Start a quiz, navigation buttons). [ ] 4. Include a card component for user sign-in/sign-up, with inputs for email and password, and a GitHub sign-up option. [ ] 5. Add a section showcasing different AWS certification exams, each with an image, title, and description. [ ] 6. Include a footer with copyright information and links to Terms of Service and Privacy. [ ] 7. Meets around 90% what is in the photos in issue. [ ] 8. Responsive design on mobile, table, and computer

Code to use:

 /**
 * v0 by Vercel.
 * @see https://v0.dev/t/biJTUFqc1I2
 * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
 */
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"

export default function Component() {
  const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 3
  const indexOfLastItem = currentPage * itemsPerPage
  const indexOfFirstItem = indexOfLastItem - itemsPerPage
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber)
  }
  return (
    <div>
      <header className="flex items-center justify-between px-4 md:px-6 py-4 bg-gradient-to-r from-[#4ca1af] to-[#c4e0e5]">
        <Link href="#" prefetch={false}>
          <MountainIcon className="h-6 w-6" />
          <span className="sr-only">Acme Inc</span>
        </Link>
        <nav className="flex items-center gap-4 sm:gap-6">
          <Link href="#" className="text-sm font-medium hover:underline underline-offset-4" prefetch={false}>
            About
          </Link>
          <Link href="#" className="text-sm font-medium hover:underline underline-offset-4" prefetch={false}>
            Contact
          </Link>
        </nav>
      </header>
      <div className="w-full min-h-[100dvh] grid lg:grid-cols-2 gap-10 items-center px-4 md:px-6 py-12 md:py-24 lg:py-32 bg-gradient-to-r from-[#4ca1af] to-[#c4e0e5]">
        <div className="space-y-4 relative">
          <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">Learn and pass your exam.</h1>
          <p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed">
            Our platform provides all the tools you need to effectively prepare for and test yourself on any AWS Cloud
            Certification exams.
          </p>
          <div className="flex gap-2">
            <Link
              href="#"
              className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
              prefetch={false}
            >
              Start a quiz
            </Link>
            <Button variant="ghost" className="w-10 h-10 rounded-full">
              <ChevronLeftIcon className="w-6 h-6" />
            </Button>
            <Button variant="ghost" className="w-10 h-10 rounded-full">
              <ChevronRightIcon className="w-6 h-6" />
            </Button>
          </div>
        </div>
        <Card className="w-full max-w-md mx-auto bg-[#f0f8ff]">
          <CardHeader className="space-y-1">
            <CardTitle className="text-2xl font-bold">Sign in or Sign up</CardTitle>
            <CardDescription>Enter your email and password to access your account.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="m@example.com" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" type="password" />
            </div>
            <div className="flex gap-2">
              <Button variant="outline" className="w-full bg-primary text-primary-foreground font-bold">
                <GithubIcon className="w-4 h-4 mr-2" />
                Sign up with GitHub
              </Button>
            </div>
          </CardContent>
          <CardFooter className="flex flex-col gap-2">
            <Button type="submit" className="w-full bg-primary text-primary-foreground font-bold">
              Sign in
            </Button>
          </CardFooter>
        </Card>
      </div>
      <section className="w-full py-12 bg-[#f0f8ff]">
        <div className="container grid gap-6 md:gap-8 px-4 md:px-6">
          <div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">
            <div className="grid gap-1">
              <h2 className="text-2xl font-bold tracking-tight">AWS Certification Exams</h2>
              <p className="text-muted-foreground">
                Explore the different AWS certification exams available to enhance your cloud computing skills. Take a
                test for free.
              </p>
            </div>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            <div className="grid gap-4">
              <div className="grid gap-2.5 relative group">
                <img
                  src="/placeholder.svg"
                  alt="AWS Certified Solutions Architect - Associate"
                  width={200}
                  height={200}
                  className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
                />
                <div className="grid gap-1">
                  <h3 className="font-semibold">
                    AWS Certified Solutions Architect - Associate{" "}
                    <span className="text-red-500 font-medium">Currently Unavailable</span>
                  </h3>
                  <p className="text-sm leading-none">
                    Validate your ability to design and deploy scalable, highly available, and fault-tolerant systems on
                    AWS.
                  </p>
                </div>
              </div>
            </div>
            <div className="grid gap-4">
              <div className="grid gap-2.5 relative group">
                <img
                  src="/placeholder.svg"
                  alt="AWS Certified Developer - Associate"
                  width={200}
                  height={200}
                  className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
                />
                <div className="grid gap-1">
                  <h3 className="font-semibold">
                    AWS Certified Developer - Associate{" "}
                    <span className="text-red-500 font-medium">Currently Unavailable</span>
                  </h3>
                  <p className="text-sm leading-none">
                    Demonstrate your ability to develop and maintain applications on the AWS platform.
                  </p>
                </div>
              </div>
            </div>
            <div className="grid gap-4">
              <div className="grid gap-2.5 relative group">
                <img
                  src="/placeholder.svg"
                  alt="AWS Certified SysOps Administrator - Associate"
                  width={200}
                  height={200}
                  className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
                />
                <div className="grid gap-1">
                  <h3 className="font-semibold">
                    AWS Certified SysOps Administrator - Associate{" "}
                    <span className="text-red-500 font-medium">Currently Unavailable</span>
                  </h3>
                  <p className="text-sm leading-none">
                    Validate your skills in deploying, managing, and operating workloads on the AWS platform.
                  </p>
                </div>
              </div>
            </div>
            <div className="grid gap-4">
              <div className="grid gap-2.5 relative group">
                <img
                  src="/placeholder.svg"
                  alt="AWS Certified Cloud Practitioner"
                  width={200}
                  height={200}
                  className="rounded-lg object-cover w-full aspect-square group-hover:opacity-50 transition-opacity"
                />
                <div className="grid gap-1">
                  <h3 className="font-semibold">AWS Certified Cloud Practitioner</h3>
                  <p className="text-sm leading-none">
                    Demonstrate your overall understanding of the AWS Cloud, independent of specific technical roles.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <Button variant="default" className="w-full">
            Start a quiz
          </Button>
        </div>
      </section>
      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t bg-gradient-to-r from-[#4ca1af] to-[#c4e0e5]">
        <p className="text-xs text-muted-foreground">&copy; 2024 Acme Inc. All rights reserved.</p>
        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
          <Link href="#" className="text-xs hover:underline underline-offset-4" prefetch={false}>
            Terms of Service
          </Link>
          <Link href="#" className="text-xs hover:underline underline-offset-4" prefetch={false}>
            Privacy
          </Link>
        </nav>
      </footer>
    </div>
  )
}

function ChevronLeftIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  )
}

function ChevronRightIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  )
}

function GithubIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
      <path d="M9 18c-4.51 2-5-2-7-2" />
    </svg>
  )
}

function MountainIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
    </svg>
  )
}

Images powered by v0.dev

[Coltensiemer]

This was completed with pull request #30.