Skip to content
Snippets Groups Projects

Issues/3472910: Build the front page template.

Merged Issues/3472910: Build the front page template.
issue/demo_design_system-3472910:3472910-create-a-front into 1.0.x
Merged AKHIL BABU requested to merge issue/demo_design_system-3472910:3472910-create-a-front into 1.0.x
Compare
and
1 file
+ 491
− 0
Compare changes
  • Side-by-side
  • Inline
starshot_demo/templates/page--front.html.twig 0 → 100644
+ 491
− 0
<!-- Hero Section -->
{# Starshot Hero component #}
{% embed 'starshot_demo:starshot-hero' with {
title: 'Create ambitious experiences that scale',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_5.png',
alt: 'Person with blue jacket and Drupal logo in background'
}
} %}
{% block content %}
{# Starshot paragraph component #}
{{ include('starshot_demo:starshot-paragraph', {
theme: 'dark',
content: 'Drupal is a fully composable CMS that allows you to design a digital experience around your vision.',
display: 'strong',
}, with_context = false) }}
{# Starshot button component #}
{{ include('starshot_demo:starshot-button', {
text: 'Learn more',
url: 'https://drupal.org',
display: 'primary',
}, with_context = false) }}
{% endblock %}
{% endembed %}
<!-- Cards & Testimonial Section -->
{# Starshot container component #}
{% embed 'starshot_demo:starshot-container' with {
design: 'none',
spacing: 'large',
gap: 'medium',
constrain: true,
side_padding: true,
modifier_class: '',
} %}
{% block content %}
{# Starshot heading component #}
{{ include('starshot_demo:starshot-heading', {
theme: 'light',
content: 'Flexible by design',
level: 2,
font: 'heading',
align: 'left',
margin: 'large',
modifier_class: ''
}, with_context = false) }}
{# Starshot grid component #}
{% embed 'starshot_demo:starshot-grid' with {
col: 'four',
vertical: 'top',
horizontal: 'left',
direction: 'across',
gap: 'medium',
wrap: 'wrap',
modifier_class: '',
} %}
{% block column_one %}
{# Starshot testimonial card component 1 #}
{{ include('starshot_demo:starshot-testimonial-card', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/listing_1.png',
alt: 'Person icon',
},
title: 'User-centric experiences',
summary: 'Create compelling content on more devices than ever. With tools to build versatile, structured content and integrate with a wide array of digital marketing channels.',
}, with_context = false) }}
{% endblock %}
{% block column_two %}
{# Starshot testimonial card component 2 #}
{{ include('starshot_demo:starshot-testimonial-card', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/listing_2.png',
alt: 'Connection icon',
},
title: 'Lower cost of ownership',
summary: 'With no vendor lock-in and low-code/no-code options available, marketers can independently drive your digital strategy and publishing workflows.',
}, with_context = false) }}
{% endblock %}
{% block column_three %}
{# Starshot testimonial card component 3 #}
{{ include('starshot_demo:starshot-testimonial-card', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/listing_3.png',
alt: 'Drag icon',
},
title: 'Limitless flexibility',
summary: 'A fully composable, API-first platform that allows you to design around your vision and your user needs. A global network of open source contributors continuously develops and innovates on core features.',
}, with_context = false) }}
{% endblock %}
{% block column_four %}
{# Starshot testimonial card component 4 #}
{{ include('starshot_demo:starshot-testimonial-card', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/listing_4.png',
alt: 'Building icon',
},
title: 'Enterprise-grade tooling',
summary: 'The most accessible, secure open-source DXP available. It adheres to industry standard privacy and security standards and checks all the boxes for your IT team.',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{# Starshot testimonial component #}
{{ include('starshot_demo:starshot-testimonial', {
quote: 'For our 1000+ websites, one of the benefits of Drupal is that accessibility compliance is already covered.',
cite: 'Joyce Peralta, Manager, Digital Communications at McGill University',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/testimonial_avatar.png',
alt: 'Testimonial image',
}
}, with_context = false) }}
{% endblock %}
{% endembed %}
<!-- Case Study Section -->
{# Starshot case study component #}
{% embed 'starshot_demo:starshot-case-study' with {
title: 'Learn why 1 in 8 enterprise websites runs on Drupal',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_6.png',
alt: 'Two kids drinking milk'
},
} %}
{% block content %}
{# Starshot image component #}
{{ include('starshot_demo:starshot-image', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_7.png',
alt: 'Placeholder image'
},
}, with_context = false) }}
{# Starshot paragraph component #}
{{ include('starshot_demo:starshot-paragraph', {
theme: 'light',
content: 'Nestlé leveraged Drupal to simplify, standardize, and centralize its global digital properties.',
display: 'regular',
}, with_context = false) }}
{# Starshot grid component #}
{% embed 'starshot_demo:starshot-grid' with {
col: 'two',
vertical: 'center',
horizontal: 'left',
direction: 'across',
gap: 'small',
wrap: 'wrap',
modifier_class: '',
} %}
{% block column_one %}
{# Starshot Stats Card component 1 #}
{{ include('starshot_demo:starshot-statistic-card', {
theme: 'light',
number: 60,
suffix: '%',
description: 'of sites built on shared codebase',
}, with_context = false) }}
{% endblock %}
{% block column_two %}
{# Starshot Stats Card component 2 #}
{{ include('starshot_demo:starshot-statistic-card', {
theme: 'light',
number: 90,
suffix: '%',
description: 'of sites built with Drupal',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{# Starshot button component #}
{{ include('starshot_demo:starshot-button', {
text: 'Learn more',
url: 'https://drupal.org',
display: 'primary',
}, with_context = false) }}
{% endblock %}
{% endembed %}
<!-- CTA Section -->
{# Starshot CTA component #}
{% embed 'starshot_demo:starshot-cta' with {
title: 'Start your <em>Drupal</em> journey',
} %}
{% block cta_content %}
{# Starshot paragraph component #}
{{ include('starshot_demo:starshot-paragraph', {
theme: 'light',
content: 'Get your website up and running faster.<br> <strong>Drupal CMS</strong> gives you the tools to bring your digital<br/> ambitions to life without restricting your creativity.',
display: 'regular',
}, with_context = false) }}
{# Starshot grid component #}
{% embed 'starshot_demo:starshot-grid' with {
col: 'none',
vertical: 'center',
horizontal: 'left',
direction: 'across',
gap: 'medium',
wrap: 'wrap',
modifier_class: '',
} %}
{% block content %}
{# Starshot button component #}
{{ include('starshot_demo:starshot-button', {
text: 'Get Started',
url: 'https://drupal.org',
display: 'secondary',
}, with_context = false) }}
{# Starshot button component #}
{{ include('starshot_demo:starshot-button', {
text: 'Learn more about Drupal CMS',
url: 'https://drupal.org',
display: 'link',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{# Starshot paragraph component #}
{{ include('starshot_demo:starshot-paragraph', {
theme: 'light',
content: 'Drupal Core provides the base features you rely on and<br/> allows you to start building from scratch.',
display: 'regular',
}, with_context = false) }}
{# Starshot button component #}
{{ include('starshot_demo:starshot-button', {
text: 'Download Drupal Core',
url: 'https://drupal.org',
display: 'link',
}, with_context = false) }}
{% endblock %}
{% endembed %}
<!-- Slider Section -->
{# Starshot container component #}
{% embed 'starshot_demo:starshot-container' with {
design: 'blue',
spacing: 'large',
gap: 'large',
constrain: true,
side_padding: true,
modifier_class: ''
} %}
{% block content %}
{# Starshot heading component #}
{{ include('starshot_demo:starshot-heading', {
theme: 'light',
content: 'Explore & Learn',
level: 2,
font: 'heading',
align: 'left',
margin: 'medium',
modifier_class: ''
}, with_context = false) }}
{# Starshot grid component #}
{% embed 'starshot_demo:starshot-grid' with {
col: 'two',
vertical: 'top',
horizontal: 'left',
direction: 'across',
gap: 'medium',
wrap: 'wrap',
modifier_class: '',
} %}
{% block column_one %}
{# Starshot paragraph component #}
{{ include('starshot_demo:starshot-paragraph', {
theme: 'light',
content: '<strong>Webinars, Videos, Articles, Guides and more</strong><br/><br/>',
}, with_context = false) }}
{% endblock %}
{% block column_two %}
{# Starshot paragraph component #}
{{ include('starshot_demo:starshot-paragraph', {
theme: 'light',
content: '<br/>',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{# Starshot slider component #}
{% embed 'starshot_demo:starshot-slider' with {
slide_count: 4,
} %}
{% block slide_one %}
{# Starshot slide card component 1 #}
{{ include('starshot_demo:starshot-slide-card', {
color: 'green',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_8.png',
alt: 'Slide card 1'
},
title: 'Blog Title Nostrud aliqua',
url: '/',
}, with_context = false) }}
{% endblock %}
{% block slide_two %}
{# Starshot slide card component 2 #}
{{ include('starshot_demo:starshot-slide-card', {
color: 'green',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_9.png',
alt: 'Slide card 2'
},
title: 'Blog Title Dolore excepteur qui',
url: '/',
}, with_context = false) }}
{% endblock %}
{% block slide_three %}
{# Starshot slide card component 3 #}
{{ include('starshot_demo:starshot-slide-card', {
color: 'green',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_10.png',
alt: 'Slide card 3'
},
title: 'Blog Title Aliqua et veniam pariatur ut',
url: '/',
}, with_context = false) }}
{% endblock %}
{% block slide_four %}
{# Starshot slide card component 4 #}
{{ include('starshot_demo:starshot-slide-card', {
color: 'green',
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_11.png',
alt: 'Slide card 4'
},
title: 'Blog Title Ut aliquip nulla et',
url: '/',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
<!-- Contributors Section -->
{# Starshot CTA component #}
{% embed 'starshot_demo:starshot-cta' with {
title: 'A big thank you to our <em>contributors</em>',
} %}
{% block cta_content %}
{# Starshot grid component #}
{% embed 'starshot_demo:starshot-grid' with {
col: 'none',
vertical: 'center',
horizontal: 'center',
direction: 'down',
gap: 'small',
wrap: 'wrap',
modifier_class: '',
} %}
{% block content %}
{# Starshot heading component #}
{{ include('starshot_demo:starshot-heading', {
theme: 'light',
content: 'Leading organizations',
font: 'heading-4',
}, with_context = false) }}
{# Starshot image component #}
{{ include('starshot_demo:starshot-image', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_xb_sdds_contributors_leading.png',
alt: 'Leading contributors'
},
}, with_context = false) }}
{# Starshot heading component #}
{{ include('starshot_demo:starshot-heading', {
theme: 'light',
content: 'Supporting organizations',
font: 'heading-4',
}, with_context = false) }}
{# Starshot image component #}
{{ include('starshot_demo:starshot-image', {
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_xb_sdds_contributors_supporting.png',
alt: 'Supporting contributors'
},
}, with_context = false) }}
{# Starshot heading component #}
{{ include('starshot_demo:starshot-heading', {
theme: 'light',
content: 'And many other contributors from the community',
font: 'heading-6',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}
<!-- Stats Cards Section -->
{# Starshot container component #}
{% embed 'starshot_demo:starshot-container' with {
design: 'green',
spacing: 'large',
gap: 'large',
constrain: true,
side_padding: true,
image: {
src: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/starshot_13.png',
alt: 'Person icon',
},
modifier_class: ''
} %}
{% block content %}
{# Starshot heading component #}
{{ include('starshot_demo:starshot-heading', {
theme: 'dark',
content: 'Open source means no vendor lock-in',
level: 2,
font: 'heading-2',
align: 'left',
margin: 'large',
modifier_class: ''
}, with_context = false) }}
{# Starshot grid component #}
{% embed 'starshot_demo:starshot-grid' with {
col: 'four',
vertical: 'top',
horizontal: 'left',
direction: 'across',
gap: 'medium',
wrap: 'wrap',
modifier_class: '',
} %}
{% block column_one %}
{# Starshot stats card component #}
{{ include('starshot_demo:starshot-statistic-card', {
theme: 'dark',
number: 100,
suffix: '+',
description: 'Drupal Certified Partners provide global support',
}, with_context = false) }}
{% endblock %}
{% block column_two %}
{# Starshot stats card component #}
{{ include('starshot_demo:starshot-statistic-card', {
theme: 'dark',
number: 10,
suffix: 'K+',
description: 'Support base of Drupal professionals',
}, with_context = false) }}
{% endblock %}
{% block column_three %}
{# Starshot stats card component #}
{{ include('starshot_demo:starshot-statistic-card', {
theme: 'dark',
number: 50,
suffix: '%',
description: 'Half of Fortune 500 companies use Drupal',
}, with_context = false) }}
{% endblock %}
{% block column_four %}
{# Starshot stats card component #}
{{ include('starshot_demo:starshot-statistic-card', {
theme: 'dark',
number: 500,
suffix: 'K+',
description: 'Websites currently use Drupal',
}, with_context = false) }}
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}