L5: Create SignInPage Component

Let's create a dedicated page where users can sign in to your application! 🔐

Benefits:

✅ Clean, focused interface
✅ No distractions during authentication
✅ Professional appearance
✅ Easy to add features (register, forgot password)
✅ Consistent with modern web apps

User flow:

User not signed in
  → Visits app
  → Redirected to /sign-in
  → Enters credentials
  → Signs in
  → Redirected to /
  → Can use app

Create SignInPage Component

Create a new page for the sign-in functionality:

src/pages/SignInPage.jsx

function SignInPage() {
  return (
    <div className="sign-in-page">
      <div className="sign-in-container">
        {/* Logo/Brand */}
        <div className="sign-in-header">
          <h1 className="brand-logo">🏖️ Holidaze</h1>
          <p className="brand-tagline">Your next adventure awaits</p>
        </div>

        {/* Sign-in form will go here in next lesson */}
        <div className="sign-in-form-container">
          <h2 className="sign-in-title">Sign in to your account</h2>
          <p className="sign-in-subtitle">
            Welcome back! Please enter your details.
          </p>
          
          {/* Placeholder for form */}
          <div className="form-placeholder">
            Form will be added in next lesson
          </div>
        </div>

        {/* Footer */}
        <div className="sign-in-footer">
          <p className="footer-text">
            Don't have an account?{' '}
            <a href="/register" className="footer-link">
              Sign up
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}

export default SignInPage;

Add Styling

Create beautiful, modern styling for the sign-in page:

src/app/global.css

/* Sign-In Page Layout */
.sign-in-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem;
}

.sign-in-container {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 2.5rem;
}

/* Header Section */
.sign-in-header {
  text-align: center;
  margin-bottom: 2rem;
}

.brand-logo {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.brand-tagline {
  color: #6b7280;
  font-size: 0.95rem;
  margin: 0;
}

/* Form Container */
.sign-in-form-container {
  margin-bottom: 2rem;
}

.sign-in-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.sign-in-subtitle {
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
  margin: 0 0 2rem 0;
}

/* Placeholder (temporary) */
.form-placeholder {
  padding: 3rem 1rem;
  background: #f3f4f6;
  border-radius: 8px;
  text-align: center;
  color: #6b7280;
  border: 2px dashed #d1d5db;
}

/* Footer Section */
.sign-in-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.footer-text {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.footer-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 480px) {
  .sign-in-container {
    padding: 2rem 1.5rem;
  }
  
  .brand-logo {
    font-size: 2rem;
  }
  
  .sign-in-title {
    font-size: 1.25rem;
  }
}

Understanding the Layout

Three-section layout:

┌─────────────────────────────────┐
│ Header                          │
│   • Logo                        │
│   • Tagline                     │
├─────────────────────────────────┤
│ Form Container                  │
│   • Title                       │
│   • Subtitle                    │
│   • Form (next lesson)          │
├─────────────────────────────────┤
│ Footer                          │
│   • Sign-up link                │
└─────────────────────────────────┘

Why this structure?

Header: Branding and context
Form: Primary action (sign in)
Footer: Secondary action (sign up)

Visual hierarchy:

Brand Logo (largest)
  ↓
Sign in to your account (medium)
  ↓
Form fields (interactive)
  ↓
Don't have account? (small)

Gradient background:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Why gradient?

Modern, professional look
Draws attention to white card
Reduces visual noise
Popular in SaaS apps

Card design:

background: white;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

Benefits:

Elevated appearance (depth)
Focused attention on form
Clean, minimal aesthetic
Easy to read (white background)

Spacing rhythm:

padding: 2.5rem;        /* Outer padding */
margin-bottom: 2rem;    /* Section spacing */

Uses consistent 0.5rem increments for harmony.

Mobile-first approach:

/* Base (mobile) */
.sign-in-container {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
}

/* Small screens */
@media (max-width: 480px) {
  .sign-in-container {
    padding: 2rem 1.5rem;  /* Reduce padding */
  }
  
  .brand-logo {
    font-size: 2rem;  /* Smaller text */
  }
}

Breakpoint strategy:

< 480px:  Mobile phones
  → Reduce padding
  → Smaller text
  → More compact

480px-768px: Tablets
  → Default styling
  → Comfortable spacing

> 768px: Desktop
  → Same as tablet
  → Centered with max-width

Full-height centering:

.sign-in-page {
  min-height: 100vh;  /* Full viewport */
  display: flex;
  align-items: center;  /* Vertical center */
  justify-content: center;  /* Horizontal center */
}

Works on all screen sizes!

Semantic HTML:

<h1 className="brand-logo">      {/* Main heading */}
<h2 className="sign-in-title">   {/* Section heading */}
<p className="brand-tagline">    {/* Description */}

Proper heading hierarchy:

h1: Brand name (most important)
h2: "Sign in to your account" (section)
p: Supporting text

Link accessibility:

<a href="/register" className="footer-link">
  Sign up  {/* Clear link text */}
</a>

Color contrast:

/* Text on white background */
color: #1f2937;  /* Almost black - 16:1 ratio */
color: #6b7280;  /* Gray - 7:1 ratio */
color: #3b82f6;  /* Blue - 4.5:1 ratio */

All meet WCAG AAA standards!

Focus states:

.footer-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

Visual feedback for interactions.

Page Sections Explained

Testing the Page

Check file created:

src/
└── pages/
    └── SignInPage.jsx  ← New file

Verify imports:

No imports needed yet! Pure component with styling.

Check styling:

Ensure CSS added to global.css:

.sign-in-page
.sign-in-container
.sign-in-header
All other classes

Visual Design Principles

Breathing room:

padding: 2.5rem;           /* Container padding */
margin-bottom: 2rem;       /* Section spacing */
margin: 0 0 0.5rem 0;     /* Element spacing */

Why important?

Too cramped:
┌─────┐
│Text │ ← Hard to read
│Form │
│Link │
└─────┘

Good spacing:
┌─────────┐
│ Text    │
│         │ ← Easy to scan
│ Form    │
│         │
│ Link    │
└─────────┘

Golden ratio:

Outer padding: 2.5rem
Section spacing: 2rem (80% of outer)
Element spacing: 0.5-1rem (20-40% of outer)

Type scale:

h1: 2.5rem (40px)   /* Brand */
h2: 1.5rem (24px)   /* Title */
p:  0.95rem (15px)  /* Body */
small: 0.875rem (14px)  /* Helper */

Font weights:

700: Brand logo (bold)
600: Section titles (semi-bold)
500: Links (medium)
400: Body text (normal)

Why this matters:

Clear hierarchy:
  BRAND (largest, boldest)
    ↓
  Title (large, bold)
    ↓
  Body (medium, normal)
    ↓
  Links (small, medium)

User's eye naturally follows this flow!

Color system:

/* Primary */
#667eea → #764ba2  /* Gradient */
#3b82f6  /* Blue (links) */

/* Neutral */
#1f2937  /* Almost black (headings) */
#6b7280  /* Gray (body text) */
#e5e7eb  /* Light gray (borders) */
#f3f4f6  /* Very light gray (backgrounds) */

/* Semantic */
white    /* Card background */
black    /* Maximum contrast */

Usage rules:

Headings: #1f2937 (dark, important)
Body text: #6b7280 (readable, not overwhelming)
Links: #3b82f6 (blue, recognizable)
Borders: #e5e7eb (subtle separation)

Elevation system:

/* Level 1: Card */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);

/* Level 2: Buttons (later) */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

/* Level 3: Dropdowns (later) */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

Why multiple shadows?

/* Single shadow (flat) */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

/* Dual shadow (realistic) */
box-shadow: 
  0 20px 25px -5px rgba(0, 0, 0, 0.1),  /* Main shadow */
  0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Ambient shadow */

Dual shadows create more realistic depth!

Visual effect:

No shadow:  [Flat]
One shadow: [Slightly lifted]
Two shadows: [Elevated, realistic] ✨

What's Next?

In Lesson 6, we'll:

Add the SignInPage to React Router
Configure the /sign-in route
Test navigation to the sign-in page
Set up route structure for authentication

✅ Lesson Complete! You've created a beautiful sign-in page layout!

Key Takeaways

✅ Dedicated sign-in page provides focused experience
✅ Three-section layout (header, form, footer) is standard
✅ Gradient background creates modern, professional look
✅ Card design with shadows adds depth and focus
✅ Responsive design works on all screen sizes
✅ Typography hierarchy guides user attention
✅ Accessibility built in from the start
✅ Clean placeholder ready for form in next lesson

L5: Create SignInPage Component

Header Section (Brand Identity)

Form Container (Primary Action)

Footer Section (Secondary Actions)

On this page