diff --git a/adev/src/app/features/home/components/home-animation/home-animation.component.html b/adev/src/app/features/home/components/home-animation/home-animation.component.html index 4437c60dd86..ba4628ba4e3 100644 --- a/adev/src/app/features/home/components/home-animation/home-animation.component.html +++ b/adev/src/app/features/home/components/home-animation/home-animation.component.html @@ -1,31 +1,4 @@
- -
-
- -

Join us at the Angular AI Developer Event

-

September 16, 2025 12 PM Eastern/9 AM Pacific

- -
-
- - - -
-
-
- @if (!isUwu()) {
diff --git a/adev/src/app/features/home/home.component.html b/adev/src/app/features/home/home.component.html index 5eea16cc8d2..5267f2917b4 100644 --- a/adev/src/app/features/home/home.component.html +++ b/adev/src/app/features/home/home.component.html @@ -1,477 +1,489 @@ -
- @if (!isUwu) { - -
- - - - - - - - - - - - -
+
+ +

Available Now:

+

Angular AI Developer Event Replay

+ +
+
+
+ @if (!isUwu) { + +
+ + + + + + + + + - + + + + - - - - - - - - - -

The framework for building scalable web apps with confidence

-
- } @else { - -
- Angular logo -
- } + +

The framework for building scalable web apps with confidence

+
+ } @else { + +
+ Angular logo +
+ } -
- - - -
-
-
+
+ + + +
+
+ -
-

Productivity meets scalability

-
-
- - - +
+

Productivity meets scalability

+
+
+ + - - - + + + + + - - -

AI-forward

-

Resources and integrations to supercharge your development with AI

+ +

AI-forward

+

Resources and integrations to supercharge your development with AI

+
+
+ + + +

Opinionated & versatile

+

Organized yet modular thanks to Angular components and dependency injection

+
+
+ + + +

Reactive

+

Fast state updates with fine-grained reactivity based on Angular Signals

+
+
+ + + +

Fully featured

+

+ Everything works together with Angular's first-party modules for forms, routing, and more +

+
-
- - - -

Opinionated & versatile

-

Organized yet modular thanks to Angular components and dependency injection

-
-
- - - -

Reactive

-

Fast state updates with fine-grained reactivity based on Angular Signals

-
-
- - - -

Fully featured

-

- Everything works together with Angular's first-party modules for forms, routing, and more -

-
-
-
+ - + -
-
-
-

When performance matters

-

- Trusted by millions to build fast, reliable applications that scale with the size of your - team -

+
+
+
+

When performance matters

+

+ Trusted by millions to build fast, reliable applications that scale with the size of your + team +

+
+ + + + +
+

Reactivity with signals makes it a breeze to manage your state

+
+ Explore signals + + + + + +
+

+ Meet your performance targets with SSR, SSG, hydration, and next generation deferred + loading +

+
+ Learn about rendering strategies + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+
+

Want to learn more?

- - + + - -
-

Reactivity with signals makes it a breeze to manage your state

-
- Explore signals - - - -
+

New to Angular?

- Meet your performance targets with SSR, SSG, hydration, and next generation deferred - loading + Try our completely in browser tutorial lessons designed to give you hands on + experience with Angular.

+

+ Recommended for developers new to Angular looking to dive right into the code +

+ Start coding +
+ + + + + +
+

More of a reader?

+

+ Our essentials guides are designed to help you understand Angular fundamentals in the + time it would take to finish a cup of coffee (or tea). +

+

+ Recommended for developers with framework experience but want quick overview of + concepts +

+ Angular concepts +
+ + + +
+

Why Angular?

+

Learn about Angular, its benefits, and if it's right for you.

+

+ Recommended for developers seeking to learn more about the Angular framework +

+ About Angular +
+ + + + + + + + + +
+

Are you an LLM or curious about AI in Angular?

+

+ Head over to our AI section to find prompts, strategies, best practices, examples, and + more. +

+

+ Recommended for robots... and developers who want to get the most out of Angular and + AI +

+ Angular + AI
- Learn about rendering strategies
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - -
-
-

Want to learn more?

-
- - - - -
-

New to Angular?

-

- Try our completely in browser tutorial lessons designed to give you hands on experience - with Angular. -

-

- Recommended for developers new to Angular looking to dive right into the code -

- Start coding -
- - - - - -
-

More of a reader?

-

- Our essentials guides are designed to help you understand Angular fundamentals in the - time it would take to finish a cup of coffee (or tea). -

-

- Recommended for developers with framework experience but want quick overview of concepts -

- Angular concepts -
- - - -
-

Why Angular?

-

Learn about Angular, its benefits, and if it's right for you.

-

- Recommended for developers seeking to learn more about the Angular framework -

- About Angular -
- - - - - - - - - -
-

Are you an LLM or curious about AI in Angular?

-

- Head over to our AI section to find prompts, strategies, best practices, examples, and - more. -

-

- Recommended for robots... and developers who want to get the most out of Angular and AI -

- Angular + AI -
- -
-
-
+ +
diff --git a/adev/src/app/features/home/home.component.scss b/adev/src/app/features/home/home.component.scss index 507775d3e1b..b5599f3f51a 100644 --- a/adev/src/app/features/home/home.component.scss +++ b/adev/src/app/features/home/home.component.scss @@ -5,6 +5,86 @@ position: relative; } +.banners-layer { + z-index: 10; + + .adev-banner-container { + display: flex; + flex-direction: column; + gap: 0.5rem; + position: absolute; + top: var(--layout-padding); + left: calc(var(--layout-padding) + var(--primary-nav-width)); + + @include mq.for-tablet-landscape-down { + top: 6rem; + left: var(--layout-padding); + /* Assuming the container width is identical to the viewport width (mobile device). */ + max-width: calc(100% - var(--layout-padding) * 2); + } + + @include mq.for-phone-only { + & { + top: 5rem; + } + } + } + + .adev-banner { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.5rem; + border: 1px solid var(--senary-contrast); + background: var(--page-background); + border-radius: 0.25rem; + padding: 10px; + max-width: 100%; + width: fit-content; + box-sizing: border-box; + + h1, + p { + display: inline; + font-size: 0.875rem; + margin: 0; + background-image: var(--red-to-pink-to-purple-horizontal-gradient); + background-clip: text; + color: transparent; + width: fit-content; + font-weight: 500; + box-shadow: none; + position: relative; + + &.adev-banner-cta { + color: var(--tertiary-contrast); + + &::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 1px; + bottom: -2px; + left: 0; + background: var(--red-to-pink-to-purple-horizontal-gradient); + transform-origin: bottom right; + transition: transform 0.3s ease; + } + } + } + + &:hover { + .adev-banner-cta { + &::after { + transform: scaleX(1); + transform-origin: bottom left; + } + } + } + } +} + .logo-section { text-align: center; background-image: @@ -35,7 +115,6 @@ } } - $transition: 200ms linear; margin-top: 5rem; .svg {